/* Portfolio App — Phan Phuoc Thinh */

const PROJECTS = [
  {
    id: 1, title: 'Project 1 — Sales Analytics Dashboard',
    category: 'Data Analytics',
    image: 'assets/project1.png',
    summary: 'Interactive BI dashboard providing real-time sales insights across multiple regions and product lines.',
    description: 'Built an end-to-end business intelligence solution that consolidates data from multiple sources into a unified dashboard. The system processes over 500K records daily and provides stakeholders with actionable insights through interactive visualizations.',
    features: [
      'Real-time data pipeline from 5+ source systems',
      'Interactive drill-down charts with cross-filtering',
      'Automated daily/weekly report generation',
      'Role-based access control for different departments',
      'Mobile-responsive dashboard layout',
    ],
    tech: ['Power BI', 'SQL Server', 'Python', 'Azure Data Factory', 'DAX'],
  },
  {
    id: 2, title: 'Project 2 — Data Pipeline Automation',
    category: 'Data Engineering',
    image: 'assets/project2.png',
    summary: 'Automated ETL pipelines reducing manual data processing time by 80% across the organization.',
    description: 'Designed and implemented a robust data pipeline architecture that automates the extraction, transformation, and loading of business-critical data. Reduced processing time from 8 hours to under 90 minutes while improving data quality and consistency.',
    features: [
      'Automated ETL workflows with error handling',
      'Data quality checks and anomaly detection',
      'Scheduling and monitoring dashboard',
      'Integration with ERP and CRM systems',
      'Incremental load optimization',
    ],
    tech: ['Python', 'Apache Airflow', 'PostgreSQL', 'Docker', 'AWS S3'],
  },
  {
    id: 3, title: 'Project 3 — Predictive Analytics Model',
    category: 'Machine Learning',
    image: 'assets/project3.png',
    summary: 'ML-powered forecasting model improving demand prediction accuracy to 92% for supply chain planning.',
    description: 'Developed a machine learning solution for demand forecasting that significantly improved inventory planning. The model incorporates seasonal patterns, promotional events, and market trends to generate accurate predictions across 200+ SKUs.',
    features: [
      'Time-series forecasting with ensemble methods',
      'Feature engineering from 30+ business variables',
      'A/B testing framework for model validation',
      'Automated retraining pipeline',
      'Executive reporting with confidence intervals',
    ],
    tech: ['Python', 'Scikit-learn', 'XGBoost', 'Pandas', 'Jupyter', 'Tableau'],
  },
];

/* ─── Project Detail Modal ─── */
function ProjectDetail({ project, onClose, tweaks }) {
  const primary = tweaks.primaryColor;

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24, animation: 'fadeIn 0.3s ease',
    }} onClick={onClose}>
      <div style={{
        background: '#0D1B2A', borderRadius: 24, maxWidth: 900, width: '100%',
        maxHeight: '90vh', overflow: 'auto', position: 'relative',
        border: '1px solid rgba(238,238,238,0.1)',
        boxShadow: '0 40px 80px rgba(0,0,0,0.5)',
        animation: 'slideUp 0.4s ease',
      }} onClick={e => e.stopPropagation()}>
        {/* Header Image */}
        <div style={{
          height: 300, background: 'rgba(57,62,70,0.4)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          borderRadius: '24px 24px 0 0', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(135deg, ${primary}15 0%, transparent 60%)`,
          }}/>
          <img src={project.image} alt={project.title} style={{
            maxWidth: '70%', maxHeight: '80%', objectFit: 'contain',
            borderRadius: 12, position: 'relative',
          }}/>
          <button onClick={onClose} style={{
            position: 'absolute', top: 16, right: 16,
            width: 44, height: 44, borderRadius: '50%',
            background: 'rgba(0,0,0,0.5)', border: 'none',
            color: '#EEE', fontSize: 20, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(8px)', transition: 'all 0.3s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = primary}
          onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,0,0,0.5)'}
          >✕</button>
        </div>

        {/* Content */}
        <div style={{ padding: '32px 40px 40px' }}>
          <div style={{
            fontSize: 12, fontWeight: 700, color: primary,
            letterSpacing: '3px', textTransform: 'uppercase', marginBottom: 8,
          }}>{project.category}</div>
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 32, color: '#FFF', margin: '0 0 16px', lineHeight: 1.2,
          }}>{project.title}</h2>
          <p style={{
            fontFamily: 'Poppins, sans-serif', fontSize: 16, lineHeight: 1.7,
            color: 'rgba(238,238,238,0.75)', margin: '0 0 32px',
          }}>{project.description}</p>

          {/* Features */}
          <h3 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 18, color: '#FFF', margin: '0 0 16px',
          }}>Key Features</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
            {project.features.map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{
                  width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
                  background: `${primary}20`, display: 'flex',
                  alignItems: 'center', justifyContent: 'center', marginTop: 2,
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke={primary} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12l5 5L20 7"/>
                  </svg>
                </div>
                <span style={{
                  fontFamily: 'Poppins, sans-serif', fontSize: 15,
                  color: 'rgba(238,238,238,0.8)', lineHeight: 1.5,
                }}>{f}</span>
              </div>
            ))}
          </div>

          {/* Technologies */}
          <h3 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 18, color: '#FFF', margin: '0 0 12px',
          }}>Technologies</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {project.tech.map((t, i) => (
              <span key={i} style={{
                padding: '6px 16px', borderRadius: 20,
                background: `${primary}18`, color: primary,
                fontFamily: 'Poppins, sans-serif', fontWeight: 600,
                fontSize: 13, border: `1px solid ${primary}30`,
              }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Hero Section ─── */
function HeroSection({ onNavigate, tweaks }) {
  const primary = tweaks.primaryColor;
  return (
    <section id="home" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      padding: '120px 80px 80px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative elements */}
      <DoodleArrow style={{ position: 'absolute', top: 180, left: 60, transform: 'rotate(-20deg)' }} color={primary}/>
      <DoodleCode style={{ position: 'absolute', top: 220, right: 120 }} color={primary}/>
      <DoodleCircle style={{ position: 'absolute', bottom: 200, left: 200 }} color={primary} size={60}/>
      <DoodleStar style={{ position: 'absolute', top: 300, left: '45%' }} color={primary} size={20}/>
      <DoodleChart style={{ position: 'absolute', bottom: 120, right: 80 }} color={primary}/>

      {/* Gradient orb */}
      <div style={{
        position: 'absolute', top: '20%', right: '10%',
        width: 500, height: 500, borderRadius: '50%',
        background: `radial-gradient(circle, ${primary}12 0%, transparent 70%)`,
        filter: 'blur(40px)', pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 700, position: 'relative', zIndex: 1 }}>
        <Reveal>
          <div style={{
            fontSize: 14, fontWeight: 600, color: primary,
            letterSpacing: '4px', textTransform: 'uppercase',
            marginBottom: 16, fontFamily: 'Poppins, sans-serif',
          }}>
            Hello, I'm Phan Phuoc Thinh
          </div>
        </Reveal>
        <Reveal delay={0.1}>
          <h1 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(48px, 6vw, 80px)', lineHeight: 1,
            color: '#FFF', margin: '0 0 24px',
          }}>
            DATA<br/><span style={{ color: primary }}>ANALYST</span>
          </h1>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{
            fontFamily: 'Poppins, sans-serif', fontSize: 18,
            lineHeight: 1.7, color: 'rgba(238,238,238,0.7)',
            margin: '0 0 40px', maxWidth: 520,
          }}>
            Transforming complex data into actionable insights. Passionate about building data-driven solutions that drive business growth.
          </p>
        </Reveal>
        <Reveal delay={0.3}>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <HeroButton label="Hire me" primary onClick={() => onNavigate('contact')} color={primary}/>
            <HeroButton label="Download CV" onClick={() => {}} color={primary} icon={
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 5v14M5 12l7 7 7-7"/>
              </svg>
            }/>
          </div>
        </Reveal>
      </div>

      {/* Scroll indicator */}
      <div style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        animation: 'bounce 2s infinite', opacity: 0.5,
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="#EEE" strokeWidth="2" strokeLinecap="round">
          <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
      </div>
    </section>
  );
}

function HeroButton({ label, primary: isPrimary, onClick, color, icon }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '14px 32px', borderRadius: 28, border: 'none',
        background: isPrimary
          ? (hovered ? '#FFF' : color)
          : (hovered ? 'rgba(57,62,70,1)' : 'rgba(57,62,70,0.75)'),
        color: isPrimary ? (hovered ? color : '#0D1B2A') : '#EEE',
        fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 16,
        cursor: 'pointer', backdropFilter: 'blur(4px)',
        transition: 'all 0.3s ease',
        transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.2)',
      }}
    >
      {label}{icon}
    </button>
  );
}

/* ─── About Section ─── */
function AboutSection({ tweaks }) {
  const primary = tweaks.primaryColor;
  const skills = ['Python', 'SQL', 'Power BI', 'Tableau', 'Excel', 'ETL', 'Data Modeling', 'Machine Learning', 'Statistics', 'Azure'];

  return (
    <section id="about" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      padding: '100px 80px', position: 'relative', overflow: 'hidden',
    }}>
      <DoodleBrackets style={{ position: 'absolute', top: 120, left: 60 }} color={primary}/>
      <DoodleStar style={{ position: 'absolute', bottom: 200, right: 100 }} color={primary} size={32}/>
      <DoodleCircle style={{ position: 'absolute', top: '30%', right: 60 }} color={primary} size={80}/>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1200, width: '100%', margin: '0 auto',
      }}>
        <div>
          <Reveal>
            <h2 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 'clamp(36px, 4vw, 56px)', color: '#FFF',
              margin: '0 0 24px', lineHeight: 1.1,
            }}>About <span style={{ color: primary }}>me</span></h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 16,
              lineHeight: 1.8, color: 'rgba(238,238,238,0.75)',
              margin: '0 0 32px',
            }}>
              I'm a Data Analyst with a strong background in business intelligence, data engineering, and predictive analytics. Previously worked as an ERP Implementation Analyst, where I gained deep expertise in enterprise systems and data workflows.
            </p>
            <p style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 16,
              lineHeight: 1.8, color: 'rgba(238,238,238,0.75)',
              margin: '0 0 32px',
            }}>
              I specialize in turning raw data into strategic insights, building automated pipelines, and creating dashboards that empower decision-makers at every level.
            </p>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {skills.map(s => <SkillBadge key={s} label={s} tweaks={tweaks}/>)}
            </div>
          </Reveal>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Reveal delay={0.15}>
            <StatCard icon="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              number="1+" label="Years Experience" color={primary}/>
          </Reveal>
          <Reveal delay={0.25}>
            <StatCard icon="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
              number="4+" label="Projects Delivered" color={primary}/>
          </Reveal>
          <Reveal delay={0.35}>
            <StatCard icon="M13 10V3L4 14h7v7l9-11h-7z"
              number="500K+" label="Records Processed Daily" color={primary}/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatCard({ icon, number, label, color }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: 28, borderRadius: 20,
        background: hovered ? `${color}12` : 'rgba(57,62,70,0.3)',
        border: `1px solid ${hovered ? color + '30' : 'rgba(238,238,238,0.08)'}`,
        display: 'flex', alignItems: 'center', gap: 20,
        transition: 'all 0.4s ease',
        transform: hovered ? 'translateX(8px)' : 'none',
      }}
    >
      <div style={{
        width: 56, height: 56, borderRadius: 16,
        background: `${color}18`, display: 'flex',
        alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
          stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d={icon}/>
        </svg>
      </div>
      <div>
        <div style={{
          fontFamily: 'Poppins, sans-serif', fontWeight: 700,
          fontSize: 28, color: '#FFF', lineHeight: 1,
        }}>{number}</div>
        <div style={{
          fontFamily: 'Poppins, sans-serif', fontSize: 14,
          color: 'rgba(238,238,238,0.6)', marginTop: 4,
        }}>{label}</div>
      </div>
    </div>
  );
}

/* ─── Experience & Education Section ─── */
function ExperienceSection({ tweaks }) {
  const primary = tweaks.primaryColor;

  const experiences = [
    {
      role: 'Data Analyst',
      company: 'Tan Thanh Wood Joint Stocks Company',
      period: '9/2025 — Present',
      description: 'Gathered and analyzed business requirements from cross-functional departments to develop and optimize internal ERP applications. Managed the full software development lifecycle including requirements analysis, BPMN process design, stakeholder review, development, UAT, and production release.',
      highlights: ['ERP Modules', 'BPMN Design', 'Process Digitization', 'UAT'],
    },
    {
      role: 'Developer (Remote)',
      company: 'Motico Company Limited',
      period: '3/2026 — Present',
      description: 'Received business requirements directly from the General Director to analyze and develop core ERP modules from scratch. Designed and built initial MVP HR and task management modules, serving as the sole IT resource on-site.',
      highlights: ['ERP Development', 'HR Module', 'Task Management'],
    },
    {
      role: 'Intern',
      company: 'VNPT Cần Thơ',
      period: '5/2024 — 8/2024',
      description: 'Supported healthcare management system development under mentor guidance, gaining hands-on exposure to professional software development practices.',
      highlights: ['Healthcare System', 'Software Development'],
    },
  ];

  const education = [
    {
      degree: 'Bachelor of Software Engineering',
      school: 'Can Tho University',
      period: '2019 — 2024',
      description: 'Focused on software engineering, database systems, and data science. Graduated with a GPA of 7.76/10.',
    },
  ];

  return (
    <section id="experience" style={{
      padding: '100px 80px', position: 'relative', overflow: 'hidden',
    }}>
      <DoodleCircle style={{ position: 'absolute', top: 80, right: 120 }} color={primary} size={50}/>
      <DoodleStar style={{ position: 'absolute', bottom: 120, left: 80 }} color={primary} size={24}/>

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Experience */}
        <Reveal>
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: '#FFF',
            margin: '0 0 48px', lineHeight: 1.1,
          }}>Work <span style={{ color: primary }}>Experience</span></h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 80, position: 'relative' }}>
          {/* Timeline line */}
          <div style={{
            position: 'absolute', left: 19, top: 8, bottom: 8,
            width: 2, background: `linear-gradient(to bottom, ${primary}, ${primary}30)`,
          }}/>

          {experiences.map((exp, i) => (
            <Reveal key={i} delay={i * 0.15}>
              <TimelineCard item={exp} type="experience" color={primary} isLast={i === experiences.length - 1}/>
            </Reveal>
          ))}
        </div>

        {/* Education */}
        <Reveal>
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: '#FFF',
            margin: '0 0 48px', lineHeight: 1.1,
          }}><span style={{ color: primary }}>Education</span></h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, position: 'relative' }}>
          <div style={{
            position: 'absolute', left: 19, top: 8, bottom: 8,
            width: 2, background: `linear-gradient(to bottom, ${primary}, ${primary}30)`,
          }}/>

          {education.map((edu, i) => (
            <Reveal key={i} delay={i * 0.15}>
              <TimelineCard item={edu} type="education" color={primary} isLast={i === education.length - 1}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function TimelineCard({ item, type, color, isLast }) {
  const [hovered, setHovered] = React.useState(false);

  return (
    <div style={{ display: 'flex', gap: 32, paddingBottom: isLast ? 0 : 40 }}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
      {/* Dot */}
      <div style={{
        width: 40, height: 40, borderRadius: '50%', flexShrink: 0,
        background: hovered ? color : `${color}25`,
        border: `3px solid ${color}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 0.3s ease', zIndex: 1,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke={hovered ? '#0D1B2A' : color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d={type === 'experience'
            ? 'M20 7H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2'
            : 'M4 19.5A2.5 2.5 0 016.5 17H20M4 19.5V4.5A2.5 2.5 0 016.5 2H20v17H6.5A2.5 2.5 0 014 19.5z'}/>
        </svg>
      </div>

      {/* Card */}
      <div style={{
        flex: 1, padding: 28, borderRadius: 20,
        background: hovered ? `${color}0A` : 'rgba(57,62,70,0.2)',
        border: `1px solid ${hovered ? color + '30' : 'rgba(238,238,238,0.06)'}`,
        transition: 'all 0.4s ease',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}>
          <div>
            <h3 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 20, color: '#FFF', margin: 0, lineHeight: 1.3,
            }}>{item.role || item.degree}</h3>
            <div style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 15,
              color: color, fontWeight: 600, marginTop: 4,
            }}>{item.company || item.school}</div>
          </div>
          <span style={{
            padding: '6px 16px', borderRadius: 20,
            background: `${color}15`, color: color,
            fontFamily: 'Poppins, sans-serif', fontWeight: 600,
            fontSize: 13, whiteSpace: 'nowrap',
          }}>{item.period}</span>
        </div>

        <p style={{
          fontFamily: 'Poppins, sans-serif', fontSize: 15,
          lineHeight: 1.7, color: 'rgba(238,238,238,0.7)',
          margin: '12px 0 0',
        }}>{item.description}</p>

        {item.highlights && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
            {item.highlights.map((h, i) => (
              <span key={i} style={{
                padding: '4px 12px', borderRadius: 12,
                background: 'rgba(57,62,70,0.5)',
                color: 'rgba(238,238,238,0.8)',
                fontFamily: 'Poppins, sans-serif', fontWeight: 600,
                fontSize: 12,
              }}>{h}</span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── Projects Section ─── */
function ProjectsSection({ onSelectProject, tweaks }) {
  const primary = tweaks.primaryColor;
  const [filter, setFilter] = React.useState('All');
  const categories = ['All', 'Data Analytics', 'Data Engineering', 'Machine Learning'];

  const filtered = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.category === filter);

  return (
    <section id="projects" style={{
      minHeight: '100vh', padding: '100px 80px', position: 'relative',
    }}>
      <DoodleCode style={{ position: 'absolute', top: 80, right: 100 }} color={primary}/>
      <DoodleChart style={{ position: 'absolute', bottom: 100, left: 60 }} color={primary}/>

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: '#FFF',
            margin: '0 0 16px',
          }}>My recent <span style={{ color: primary }}>works</span></h2>
        </Reveal>

        <Reveal delay={0.1}>
          <div style={{ display: 'flex', gap: 12, marginBottom: 48, flexWrap: 'wrap' }}>
            {categories.map(c => (
              <button key={c} onClick={() => setFilter(c)} style={{
                padding: '10px 24px', borderRadius: 24, border: 'none',
                background: filter === c ? primary : 'rgba(57,62,70,0.5)',
                color: filter === c ? '#0D1B2A' : '#EEE',
                fontFamily: 'Poppins, sans-serif', fontWeight: 700,
                fontSize: 14, cursor: 'pointer', transition: 'all 0.3s',
              }}>{c}</button>
            ))}
          </div>
        </Reveal>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 32,
        }}>
          {filtered.map((p, i) => (
            <Reveal key={p.id} delay={0.1 + i * 0.1}>
              <ProjectCard project={p} index={i} onClick={onSelectProject} tweaks={tweaks}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Contact Section ─── */
function ContactSection({ tweaks }) {
  const primary = tweaks.primaryColor;
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [focused, setFocused] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
    setForm({ name: '', email: '', message: '' });
  };

  const inputStyle = (field) => ({
    width: '100%', padding: '16px 24px', borderRadius: 16,
    background: 'rgba(57,62,70,0.5)',
    border: `2px solid ${focused === field ? primary : 'transparent'}`,
    color: '#EEE', fontFamily: 'Poppins, sans-serif', fontSize: 16,
    outline: 'none', transition: 'all 0.3s', boxSizing: 'border-box',
  });

  return (
    <section id="contact" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      padding: '100px 80px', position: 'relative',
    }}>
      <DoodleStar style={{ position: 'absolute', top: 150, left: 100 }} color={primary} size={28}/>
      <DoodleArrow style={{ position: 'absolute', bottom: 150, right: 80, transform: 'rotate(30deg) scaleX(-1)' }} color={primary}/>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1200, width: '100%', margin: '0 auto',
      }}>
        <div>
          <Reveal>
            <h2 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 'clamp(36px, 4vw, 56px)', color: '#FFF',
              margin: '0 0 24px', lineHeight: 1.1,
            }}>
              Got a project<br/>in <span style={{ color: primary }}>mind</span>?
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 16,
              lineHeight: 1.8, color: 'rgba(238,238,238,0.7)',
              margin: '0 0 32px',
            }}>
              Let's discuss how data-driven solutions can help your business grow. I'm always open to new opportunities and collaborations.
            </p>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <ContactInfo icon="M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 0l9 6 9-6" label="ppthinh0108@gmail.com" color={primary}/>
              <ContactInfo icon="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z" label="Ho Chi Minh City, Vietnam" color={primary}/>
            </div>
          </Reveal>
        </div>

        <Reveal delay={0.15}>
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label style={{ display: 'block', fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 14, color: '#EEE', marginBottom: 8 }}>Your name</label>
                <input value={form.name} onChange={e => setForm({...form, name: e.target.value})}
                  placeholder="Name" style={inputStyle('name')}
                  onFocus={() => setFocused('name')} onBlur={() => setFocused(null)}/>
              </div>
              <div>
                <label style={{ display: 'block', fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 14, color: '#EEE', marginBottom: 8 }}>Your email</label>
                <input value={form.email} onChange={e => setForm({...form, email: e.target.value})}
                  placeholder="Email" type="email" style={inputStyle('email')}
                  onFocus={() => setFocused('email')} onBlur={() => setFocused(null)}/>
              </div>
            </div>
            <div>
              <label style={{ display: 'block', fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 14, color: '#EEE', marginBottom: 8 }}>Your message</label>
              <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})}
                placeholder="Message" rows={7} style={{ ...inputStyle('message'), resize: 'vertical', minHeight: 150 }}
                onFocus={() => setFocused('message')} onBlur={() => setFocused(null)}/>
            </div>
            <button type="submit" style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '14px 32px', borderRadius: 28, border: 'none',
              background: sent ? '#22C55E' : primary,
              color: sent ? '#FFF' : '#0D1B2A',
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 16, cursor: 'pointer', transition: 'all 0.3s',
              alignSelf: 'flex-start',
            }}>
              {sent ? 'Sent!' : 'Send Message'}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d={sent ? "M5 12l5 5L20 7" : "M5 12h14M12 5l7 7-7 7"}/>
              </svg>
            </button>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

function ContactInfo({ icon, label, color }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: `${color}18`, display: 'flex',
        alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d={icon}/>
        </svg>
      </div>
      <span style={{
        fontFamily: 'Poppins, sans-serif', fontSize: 15,
        color: 'rgba(238,238,238,0.8)',
      }}>{label}</span>
    </div>
  );
}

/* ─── Main App ─── */
function App() {
  const [activeSection, setActiveSection] = React.useState('home');
  const [selectedProject, setSelectedProject] = React.useState(null);

  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "primaryColor": "#F5B96B"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  const navigateTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  React.useEffect(() => {
    const sections = ['home', 'about', 'experience', 'projects', 'contact'];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio >= 0.3) {
          setActiveSection(e.target.id);
        }
      });
    }, { threshold: 0.3 });
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <div style={{
      minHeight: '100vh',
      background: '#0D1B2A',
      fontFamily: 'Poppins, sans-serif',
    }}>
      <Nav activeSection={activeSection} onNavigate={navigateTo} tweaks={tweaks}/>
      <HeroSection onNavigate={navigateTo} tweaks={tweaks}/>
      <AboutSection tweaks={tweaks}/>
      <ExperienceSection tweaks={tweaks}/>
      <ProjectsSection onSelectProject={setSelectedProject} tweaks={tweaks}/>
      <ContactSection tweaks={tweaks}/>
      <Footer onNavigate={navigateTo} tweaks={tweaks}/>

      {selectedProject && (
        <ProjectDetail
          project={selectedProject}
          onClose={() => setSelectedProject(null)}
          tweaks={tweaks}
        />
      )}

      <TweaksPanel title="Tweaks">
        <TweakColor label="Accent Color" value={tweaks.primaryColor}
          onChange={v => setTweak('primaryColor', v)}
          options={['#F5B96B', '#FF7A29', '#FF5252', '#E8722A', '#22C55E', '#3B82F6']}/>
      </TweaksPanel>
    </div>
  );
}

window.App = App;