/* Public portfolio pages */

/* Project Detail Page */
function ProjectDetail({ project, onClose, tweaks }) {
  const primary = tweaks.primaryColor;
  const [backHovered, setBackHovered] = React.useState(false);

  return (
    <main id="project-detail" className="project-detail-page" style={{
      minHeight: '100vh', padding: '120px 80px 80px',
      background: 'var(--theme-bg)', color: 'var(--theme-text)', animation: 'fadeIn 0.3s ease',
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <button
          onClick={onClose}
          onMouseEnter={() => setBackHovered(true)}
          onMouseLeave={() => setBackHovered(false)}
          style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '10px 18px', borderRadius: 14,
          border: `1px solid ${backHovered ? primary + '73' : primary + '42'}`,
          background: backHovered
            ? `linear-gradient(180deg, ${primary}18, rgba(var(--theme-surface-rgb),0.52))`
            : 'rgba(var(--theme-surface-rgb),0.38)',
          color: primary,
          fontFamily: 'Poppins, sans-serif',
          fontWeight: 700, fontSize: 14, cursor: 'pointer',
          marginBottom: 32,
          transition: 'background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease',
          transform: backHovered ? 'translateX(-3px)' : 'translateX(0)',
          boxShadow: backHovered ? `0 14px 30px rgba(0,0,0,0.28), 0 0 0 1px ${primary}14` : 'none',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
          Back to Projects
        </button>

        <div className="project-detail-hero" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
          gap: 56, alignItems: 'center', marginBottom: 56,
        }}>
          <div>
            <div style={{
              fontSize: 12, fontWeight: 700, color: primary,
              letterSpacing: '3px', textTransform: 'uppercase', marginBottom: 12,
            }}>{project.category}</div>
            <h1 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 'clamp(40px, 5vw, 64px)', color: 'var(--theme-strong)',
              margin: '0 0 20px', lineHeight: 1.05,
            }}>{project.title}</h1>
            <p style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 18, lineHeight: 1.7,
              color: 'rgba(var(--theme-text-rgb),0.76)', margin: '0 0 28px',
            }}>{project.summary}</p>
            <div className="project-detail-meta" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {[
                ['Role', project.role],
                ['Timeline', project.duration],
                ['Impact', project.impact],
              ].map(([label, value]) => (
                <div key={label} style={{
                  padding: 18, borderRadius: 16,
                  background: 'rgba(var(--theme-surface-rgb),0.28)',
                  border: '1px solid rgba(var(--theme-text-rgb),0.08)',
                }}>
                  <div style={{
                    color: primary, fontSize: 11, fontWeight: 700,
                    letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 8,
                  }}>{label}</div>
                  <div style={{ color: 'var(--theme-strong)', fontWeight: 700, fontSize: 14, lineHeight: 1.4 }}>{value}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="project-detail-media" style={{
            minHeight: 380, borderRadius: 24,
            background: `linear-gradient(135deg, ${primary}18 0%, rgba(var(--theme-surface-rgb),0.34) 70%)`,
            border: '1px solid rgba(var(--theme-text-rgb),0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 36, overflow: 'hidden',
          }}>
            <img src={project.image} alt={project.title} style={{
              width: '100%', maxHeight: 330, objectFit: 'contain', borderRadius: 14,
              boxShadow: '0 24px 60px rgba(0,0,0,0.28)',
            }}/>
          </div>
        </div>

        <div className="project-detail-content" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) minmax(280px, 0.8fr)',
          gap: 32, alignItems: 'start',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <DetailSection title="Overview" color={primary}>
              <p style={{
                fontFamily: 'Poppins, sans-serif', fontSize: 16, lineHeight: 1.8,
                color: 'rgba(var(--theme-text-rgb),0.76)', margin: 0,
              }}>{project.description}</p>
            </DetailSection>

            <DetailSection title="Approach" color={primary}>
              <DetailList items={project.approach} color={primary}/>
            </DetailSection>

            <DetailSection title="Outcomes" color={primary}>
              <DetailList items={project.outcomes} color={primary}/>
            </DetailSection>
          </div>

          <aside style={{
            padding: 28, borderRadius: 20,
            background: 'rgba(var(--theme-surface-rgb),0.24)',
            border: '1px solid rgba(var(--theme-text-rgb),0.08)',
            position: 'sticky', top: 96,
          }}>
            <h2 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 20, color: 'var(--theme-strong)', margin: '0 0 18px',
            }}>Key Features</h2>
            <DetailList items={project.features} color={primary}/>

            <h2 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 20, color: 'var(--theme-strong)', margin: '32px 0 14px',
            }}>Technologies</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {project.tech.map((t, i) => (
                <span key={i} style={{
                  padding: '7px 13px', borderRadius: 14,
                  background: `${primary}18`, color: primary,
                  fontFamily: 'Poppins, sans-serif', fontWeight: 700,
                  fontSize: 12, border: `1px solid ${primary}30`,
                }}>{t}</span>
              ))}
            </div>

            {project.repoUrl && (
              <>
                <h2 style={{
                  fontFamily: 'Poppins, sans-serif', fontWeight: 700,
                  fontSize: 20, color: 'var(--theme-strong)', margin: '32px 0 14px',
                }}>Repository</h2>
                <a href={project.repoUrl} target="_blank" rel="noreferrer" style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                  width: '100%', padding: '12px 16px', borderRadius: 14,
                  background: `linear-gradient(180deg, ${primary}16, rgba(var(--theme-surface-rgb),0.52))`,
                  border: `1px solid ${primary}66`,
                  color: primary, textDecoration: 'none',
                  fontFamily: 'Poppins, sans-serif', fontWeight: 800, fontSize: 14,
                  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(0,0,0,0.22)',
                }}>
                  GitHub Repository
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M7 17L17 7M8 7h9v9"/>
                  </svg>
                </a>
              </>
            )}
          </aside>
        </div>
      </div>
    </main>
  );
}

function DetailSection({ title, color, children }) {
  return (
    <section className="detail-panel" style={{
      padding: 32, borderRadius: 20,
      background: 'rgba(var(--theme-surface-rgb),0.2)',
      border: '1px solid rgba(var(--theme-text-rgb),0.07)',
    }}>
      <h2 style={{
        fontFamily: 'Poppins, sans-serif', fontWeight: 700,
        fontSize: 24, color: 'var(--theme-strong)', margin: '0 0 16px',
      }}>
        <span style={{ color }}>{title}</span>
      </h2>
      {children}
    </section>
  );
}

function DetailList({ items, color }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map((item, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{
            width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
            background: `${color}20`, display: 'flex',
            alignItems: 'center', justifyContent: 'center', marginTop: 2,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
              stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12l5 5L20 7"/>
            </svg>
          </div>
          <span style={{
            fontFamily: 'Poppins, sans-serif', fontSize: 15,
            color: 'rgba(var(--theme-text-rgb),0.8)', lineHeight: 1.6,
          }}>{item}</span>
        </div>
      ))}
    </div>
  );
}

/* Hero Section */
function HeroSection({ onNavigate, tweaks }) {
  const primary = tweaks.primaryColor;
  return (
    <section id="home" className="site-section hero-section" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', gap: 48,
      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 className="hero-copy" style={{ width: 'min(620px, 100%)', maxWidth: 620, 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 Ethan
          </div>
        </Reveal>
        <Reveal delay={0.1}>
          <h1 style={{
            fontFamily: 'var(--display-font)', fontWeight: 400,
            fontSize: 104, lineHeight: 0.92,
            color: 'var(--theme-strong)', margin: '0 0 28px',
          }}>
            DATA<br/><span style={{ color: primary }}>ANALYST</span>
          </h1>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{
            fontFamily: 'var(--ui-font)', fontSize: 18,
            lineHeight: 1.7, color: 'rgba(var(--theme-text-rgb),0.7)',
            margin: '0 0 40px', maxWidth: 560,
          }}>
            I work with data to understand what is really happening, then turn those findings into reports, dashboards, and practical tools that help teams make better decisions.
          </p>
        </Reveal>
      </div>

      <Reveal delay={0.18}>
        <div className="hero-avatar" style={{
          width: 'clamp(260px, 28vw, 420px)',
          aspectRatio: '1 / 1',
          borderRadius: '50%',
          padding: 12,
          background: `linear-gradient(145deg, ${primary}55, rgba(var(--theme-surface-rgb),0.38))`,
          border: `1px solid ${primary}55`,
          boxShadow: `0 30px 80px ${primary}22, 0 24px 60px rgba(0,0,0,0.28)`,
          position: 'relative',
          zIndex: 1,
          flex: '0 0 auto',
        }}>
          <img
            src="assets/avatar-pixy-4773331.png"
            alt="Ethan avatar"
            loading="eager"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              objectPosition: 'center',
              display: 'block',
              borderRadius: '50%',
              border: '1px solid rgba(255,255,255,0.28)',
            }}
          />
        </div>
      </Reveal>

      {/* Scroll indicator */}
      <button type="button" className="hero-scroll-button" aria-label="Scroll to about section" onClick={() => onNavigate('about')} style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        width: 44, height: 44, borderRadius: '50%',
        border: '1px solid rgba(var(--theme-text-rgb),0.12)',
        background: 'rgba(var(--theme-surface-rgb),0.18)',
        color: 'var(--theme-text)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        animation: 'bounce 2s infinite', opacity: 0.68, cursor: 'pointer',
        zIndex: 2, transition: 'opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease',
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
      </button>
    </section>
  );
}


/* About Section */
function AboutSection({ tweaks }) {
  const primary = tweaks.primaryColor;

  return (
    <section id="about" className="site-section about-section" style={{
      display: 'flex', alignItems: 'center',
      padding: '88px 80px 56px', 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 className="about-copy" style={{
        maxWidth: 980, width: '100%', margin: '0 auto',
      }}>
        <Reveal variant="scramble">
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
            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: 17,
            lineHeight: 1.85, color: 'rgba(var(--theme-text-rgb),0.76)',
            margin: '0 0 22px', maxWidth: 900,
          }}>
            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: 17,
            lineHeight: 1.85, color: 'rgba(var(--theme-text-rgb),0.76)',
            margin: 0, maxWidth: 900,
          }}>
            I specialize in turning raw data into strategic insights, building automated pipelines, and creating dashboards that empower decision-makers at every level.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function TechChip({ tech }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '7px 18px 7px 10px',
      borderRadius: 999,
      background: 'rgba(var(--theme-surface-rgb),0.28)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      backdropFilter: 'blur(8px)',
      flexShrink: 0,
    }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 24, height: 24, borderRadius: 7,
        background: tech.tone + '22',
        color: tech.tone,
        fontSize: 9, fontWeight: 800, fontFamily: 'Poppins, sans-serif',
        letterSpacing: '0.2px', flexShrink: 0,
      }}>{tech.mark}</span>
      <span style={{
        fontSize: 13, fontWeight: 500,
        color: 'rgba(var(--theme-text-rgb),0.72)',
        fontFamily: 'Poppins, sans-serif',
        whiteSpace: 'nowrap',
      }}>{tech.label}</span>
    </div>
  );
}

function TechMarquee({ tweaks }) {
  const row1 = [
    { label: 'Python',             mark: 'Py',   tone: '#3776AB' },
    { label: 'SQL Server',         mark: 'SQL',  tone: '#CC2927' },
    { label: 'Power BI',           mark: 'PBI',  tone: '#F2C811' },
    { label: 'Databricks',         mark: 'DB',   tone: '#FF3621' },
    { label: 'Odoo',               mark: 'Odo',  tone: '#714B67' },
    { label: 'PostgreSQL',         mark: 'PG',   tone: '#336791' },
    { label: 'dbt',                mark: 'dbt',  tone: '#FF694B' },
    { label: 'Prefect',             mark: 'Pf',   tone: '#1E40AF' },
  ];
  const row2 = [
    { label: 'Apps Script',        mark: 'AS',   tone: '#34A853' },
    { label: 'Git',                mark: 'Git',  tone: '#F05032' },
    { label: 'C#',                 mark: 'C#',   tone: '#7F52FF' },
    { label: 'Golang',             mark: 'Go',   tone: '#00ADD8' },
    { label: 'SQLite',             mark: 'Lite', tone: '#0F80CC' },
    { label: 'Azure Data Studio',  mark: 'ADS',  tone: '#0078D4' },
    { label: 'NotebookLM',         mark: 'NB',   tone: '#4285F4' },
    { label: 'Claude',             mark: 'AI',   tone: '#D97706' },
  ];

  const d1 = [...row1, ...row1];
  const d2 = [...row2, ...row2];

  return (
    <section className="stats-section" style={{
      padding: '28px 0 20px', position: 'relative', overflow: 'clip',
    }}>
      {/* Fade left/right edges */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(to right, var(--theme-bg) 0%, transparent 7%, transparent 93%, var(--theme-bg) 100%)',
      }}/>

      <div style={{ overflow: 'hidden', marginBottom: 10 }}>
        <div style={{
          display: 'flex', gap: 10, width: 'max-content',
          animation: 'marquee-left 32s linear infinite',
        }}>
          {d1.map((t, i) => <TechChip key={i} tech={t} />)}
        </div>
      </div>

      <div style={{ overflow: 'hidden' }}>
        <div style={{
          display: 'flex', gap: 10, width: 'max-content',
          animation: 'marquee-right 38s linear infinite',
        }}>
          {d2.map((t, i) => <TechChip key={i} tech={t} />)}
        </div>
      </div>
    </section>
  );
}

function SkillsSection({ tweaks }) {
  const primary = tweaks.primaryColor;
  const skillGroups = [
    {
      title: 'Languages',
      icon: 'M8 9l-4 3 4 3M16 9l4 3-4 3M14 4l-4 16',
      items: [
        { label: 'Python', mark: 'Py', tone: '#3776AB' },
        { label: 'Apps Script', mark: 'AS', tone: '#34A853' },
        { label: 'C#', mark: 'C#', tone: '#7F52FF' },
        { label: 'Golang', mark: 'Go', tone: '#00ADD8' },
      ],
    },
    {
      title: 'Databases',
      icon: 'M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zm0 0v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3',
      items: [
        { label: 'SQL Server', mark: 'SQL', tone: '#CC2927' },
        { label: 'PostgreSQL', mark: 'PG', tone: '#336791' },
        { label: 'SQLite', mark: 'Lite', tone: '#0F80CC' },
      ],
    },
    {
      title: 'Tools',
      icon: 'M6 3v6a3 3 0 003 3h6a3 3 0 013 3v6M6 9a3 3 0 100-6 3 3 0 000 6zM18 21a3 3 0 100-6 3 3 0 000 6z',
      items: [
        { label: 'Git', mark: 'Git', tone: '#F05032' },
        { label: 'Azure Data Studio', mark: 'ADS', tone: '#0078D4' },
      ],
    },
    {
      title: 'AI',
      icon: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM5 17l.9 2.1L8 20l-2.1.9L5 23l-.9-2.1L2 20l2.1-.9L5 17zM19 15l.7 1.6L21 17l-1.3.4L19 19l-.7-1.6L17 17l1.3-.4L19 15z',
      items: [
        { label: 'NotebookLM', mark: 'LM', tone: '#4285F4' },
        { label: 'Claude', mark: 'Cl', tone: '#D97757' },
        { label: 'Codex', mark: 'Cx', tone: '#10A37F' },
        { label: 'Gemini', mark: 'Ge', tone: '#8E75FF' },
      ],
    },
  ];

  return (
    <section id="skills" className="site-section skills-section" style={{
      padding: '56px 80px 96px', position: 'relative', overflow: 'hidden',
    }}>
      <DoodleStar style={{ position: 'absolute', top: 84, right: 120 }} color={primary} size={24}/>
      <div style={{ maxWidth: 1200, width: '100%', margin: '0 auto' }}>
        <Reveal variant="scramble">
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
            margin: '0 0 28px', lineHeight: 1.1,
          }}>Skills</h2>
        </Reveal>
        <Reveal delay={0.1}>
          <div className="skills-group-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            gap: 16,
          }}>
            {skillGroups.map(group => (
              <SkillGroupCard key={group.title} group={group} accent={primary}/>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function SkillGroupCard({ group, accent }) {
  return (
    <article className="skill-group-card" style={{
      minHeight: 260,
      padding: 18,
      borderRadius: 18,
      background: 'rgba(var(--theme-surface-rgb),0.24)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      boxShadow: '0 22px 60px rgba(0,0,0,0.16)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: `${accent}12`, border: `1px solid ${accent}42`,
          color: accent, flexShrink: 0,
        }}>
          <svg width="21" height="21" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round">
            <path d={group.icon}/>
          </svg>
        </div>
        <h3 style={{
          margin: 0, color: 'var(--theme-strong)',
          fontFamily: 'Poppins, sans-serif', fontSize: 17, fontWeight: 800,
        }}>{group.title}</h3>
      </div>
      <div className="skill-item-grid" style={{ display: 'grid', gap: 10 }}>
        {group.items.map(item => <SkillItem key={item.label} item={item} accent={accent}/>)}
      </div>
    </article>
  );
}

function SkillItem({ item, accent }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 10,
        minHeight: 46, padding: '8px 10px', borderRadius: 14,
        background: hovered ? `${accent}10` : 'rgba(var(--theme-bg-rgb),0.26)',
        border: `1px solid ${hovered ? accent + '44' : 'rgba(var(--theme-text-rgb),0.08)'}`,
        transition: 'background 0.22s ease, border-color 0.22s ease, transform 0.22s ease',
        transform: hovered ? 'translateY(-1px)' : 'none',
      }}>
      <span style={{
        width: 34, height: 34, borderRadius: 12,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: `${item.tone}18`, border: `1px solid ${item.tone}45`,
        color: item.tone, fontFamily: 'Poppins, sans-serif',
        fontWeight: 900, fontSize: item.mark.length > 2 ? 10 : 12,
        lineHeight: 1, flexShrink: 0,
      }}>{item.mark}</span>
      <span style={{
        color: hovered ? accent : 'rgba(var(--theme-text-rgb),0.84)',
        fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 13,
        lineHeight: 1.25,
      }}>{item.label}</span>
    </div>
  );
}


/* ─── Stack Card (sticky-stacking experience/education card) ─── */
function StackCard({ item, index, type, color }) {
  const [hovered, setHovered] = React.useState(false);

  return (
    <div className="stack-card-wrapper" style={{
      position: 'sticky',
      top: 96 + index * 24,
      zIndex: 10 + index,
    }}>
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{
          position: 'relative',
          padding: '36px 40px',
          borderRadius: 24,
          overflow: 'hidden',
          background: hovered
            ? `linear-gradient(135deg, ${color}0E, rgba(var(--theme-surface-rgb),0.55))`
            : `rgba(var(--theme-surface-rgb), ${0.18 + index * 0.06})`,
          border: `1px solid ${hovered ? color + '2E' : 'rgba(var(--theme-text-rgb),0.07)'}`,
          boxShadow: hovered
            ? `0 32px 64px rgba(0,0,0,0.28), 0 0 0 1px ${color}12`
            : `0 ${8 + index * 4}px ${28 + index * 8}px rgba(0,0,0,${0.14 + index * 0.04})`,
          backdropFilter: 'blur(14px)',
          transition: 'all 0.4s cubic-bezier(0.25,0.46,0.45,0.94)',
        }}>
        {/* Content */}
        <div style={{ position: 'relative', zIndex: 1, display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
          {item.logo && (
            <div style={{
              width: 60, height: 60, flexShrink: 0,
              borderRadius: 14,
              background: 'rgba(255,255,255,0.92)',
              border: '1px solid rgba(var(--theme-text-rgb),0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 9,
              boxShadow: hovered ? `0 12px 28px ${color}1C` : '0 4px 14px rgba(0,0,0,0.1)',
              transition: 'box-shadow 0.3s ease',
            }}>
              <img src={item.logo} alt={item.logoAlt || ''} loading="lazy"
                style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
            </div>
          )}

          <div style={{ flex: 1, minWidth: 0 }}>
            <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: 'clamp(17px, 2vw, 21px)', color: 'var(--theme-strong)',
                  margin: 0, lineHeight: 1.3,
                }}>{item.role || item.degree}</h3>
                <div style={{
                  fontFamily: 'Poppins, sans-serif', fontSize: 15,
                  color: color, fontWeight: 600, marginTop: 3,
                }}>{item.company || item.school}</div>
              </div>
              <span style={{
                padding: '5px 14px', borderRadius: 20,
                background: `${color}14`, color: color,
                fontFamily: 'Poppins, sans-serif', fontWeight: 600,
                fontSize: 13, whiteSpace: 'nowrap', flexShrink: 0,
              }}>{item.period}</span>
            </div>

            <p style={{
              fontFamily: 'Poppins, sans-serif', fontSize: 15,
              lineHeight: 1.7, color: 'rgba(var(--theme-text-rgb),0.68)',
              margin: '8px 0 0',
            }}>{item.description}</p>

            {item.highlights && (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
                {item.highlights.map((h, idx) => (
                  <span key={idx} style={{
                    padding: '4px 12px', borderRadius: 12,
                    background: `${color}12`,
                    color: color,
                    fontFamily: 'Poppins, sans-serif', fontWeight: 600,
                    fontSize: 12, letterSpacing: '0.3px',
                  }}>{h}</span>
                ))}
              </div>
            )}
          </div>
        </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',
      logo: 'assets/tan-thanh-logo.png',
      logoAlt: 'Tan Thanh Group logo',
      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',
      logo: 'assets/motico-logo.png',
      logoAlt: 'Motico logo',
      period: '3/2026 - Present',
      description: 'Received business requirements directly from the General Director to design and build CRM and task management workflows. Focused on customer pipeline tracking, follow-up activities, task assignment, progress status, and internal collaboration features for daily operations.',
      highlights: ['CRM Workflow', 'Customer Pipeline', 'Task Management', 'Progress Tracking'],
    },
    {
      role: 'Intern',
      company: 'VNPT Can Tho',
      logo: 'assets/vnpt-logo.png',
      logoAlt: 'VNPT logo',
      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: 'Software Engineering',
      school: 'Can Tho University',
      logo: 'assets/can-tho-university-logo.png',
      logoAlt: 'Can Tho University logo',
      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" className="site-section experience-section" style={{
      padding: '100px 80px 220px', position: 'relative', overflow: 'clip',
    }}>
      <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 variant="scramble">
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
            margin: '0 0 32px', lineHeight: 1.1,
          }}>Work <span style={{ color: primary }}>Experience</span></h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 120 }}>
          {experiences.map((exp, i) => (
            <StackCard key={i} item={exp} index={i} type="experience" color={primary} />
          ))}
        </div>

        {/* Education */}
        <Reveal variant="scramble">
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
            margin: '0 0 32px', lineHeight: 1.1,
          }}><span style={{ color: primary }}>Education</span></h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {education.map((edu, i) => (
            <StackCard key={i} item={edu} index={i} type="education" color={primary} />
          ))}
        </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, position: 'relative' }}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
      {/* Dot */}
      <div style={{
        width: 40, height: 40, borderRadius: '50%', flexShrink: 0,
        background: hovered ? color : 'var(--theme-bg)',
        border: `2px solid ${color}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease',
        position: 'relative',
        zIndex: 2,
        transform: hovered ? 'scale(1.03)' : 'scale(1)',
        boxShadow: hovered
          ? `0 0 0 6px var(--theme-bg), 0 0 0 8px ${color}3D, 0 12px 28px rgba(0,0,0,0.24)`
          : '0 0 0 6px var(--theme-bg)',
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke={hovered ? 'var(--theme-on-accent)' : 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(var(--theme-surface-rgb),0.2)',
        border: `1px solid ${hovered ? color + '30' : 'rgba(var(--theme-text-rgb),0.06)'}`,
        transition: 'all 0.4s ease',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
            {item.logo && (
              <div style={{
                width: 54,
                height: 54,
                flex: '0 0 auto',
                borderRadius: 14,
                background: 'rgba(255,255,255,0.92)',
                border: '1px solid rgba(var(--theme-text-rgb),0.08)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 8,
                boxShadow: hovered ? `0 14px 30px ${color}18` : '0 10px 24px rgba(0,0,0,0.08)',
                transition: 'all 0.3s ease',
              }}>
                <img
                  src={item.logo}
                  alt={item.logoAlt || `${item.company || item.school} logo`}
                  loading="lazy"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'contain',
                    display: 'block',
                  }}
                />
              </div>
            )}
            <div style={{ minWidth: 0 }}>
              <h3 style={{
                fontFamily: 'Poppins, sans-serif', fontWeight: 700,
                fontSize: 20, color: 'var(--theme-strong)', 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>
          </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(var(--theme-text-rgb),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(var(--theme-surface-rgb),0.5)',
                color: 'rgba(var(--theme-text-rgb),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 [hoveredFilter, setHoveredFilter] = React.useState(null);
  const categories = ['All', ...Array.from(new Set(PROJECTS.map(p => p.category)))];

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

  return (
    <section id="projects" className="site-section projects-section" 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 variant="scramble">
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
            margin: '0 0 16px',
          }}>My recent <span style={{ color: primary }}>works</span></h2>
        </Reveal>

        <Reveal delay={0.1}>
          <div className="project-filters" style={{ display: 'flex', gap: 12, marginBottom: 48, flexWrap: 'wrap' }}>
            {categories.map(c => {
              const active = filter === c;
              const hovered = hoveredFilter === c;
              return (
              <button key={c} onClick={() => setFilter(c)}
                onMouseEnter={() => setHoveredFilter(c)}
                onMouseLeave={() => setHoveredFilter(null)}
                style={{
                padding: '10px 20px', borderRadius: 14,
                border: `1px solid ${active || hovered ? primary + '66' : 'rgba(var(--theme-text-rgb),0.10)'}`,
                background: active || hovered
                  ? `linear-gradient(180deg, ${primary}16, rgba(var(--theme-surface-rgb),0.48))`
                  : 'rgba(var(--theme-surface-rgb),0.42)',
                color: active || hovered ? primary : 'rgba(var(--theme-text-rgb),0.78)',
                fontFamily: 'Poppins, sans-serif', fontWeight: 700,
                fontSize: 14, cursor: 'pointer',
                transition: 'background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.24s ease',
                transform: hovered ? 'translateY(-1px)' : 'none',
                boxShadow: active || hovered ? '0 12px 28px rgba(0,0,0,0.22)' : 'none',
              }}>{c}</button>
            )})}
          </div>
        </Reveal>

        <div className="projects-grid" 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 [submitHovered, setSubmitHovered] = React.useState(false);

  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(var(--theme-surface-rgb),0.5)',
    border: `2px solid ${focused === field ? primary : 'transparent'}`,
    color: 'var(--theme-text)', fontFamily: 'Poppins, sans-serif', fontSize: 16,
    outline: 'none', transition: 'all 0.3s', boxSizing: 'border-box',
  });

  return (
    <section id="contact" className="site-section contact-section" 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 className="two-column-grid contact-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1200, width: '100%', margin: '0 auto',
      }}>
        <div>
          <Reveal variant="scramble">
            <h2 style={{
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--theme-strong)',
              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(var(--theme-text-rgb),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 className="contact-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label style={{ display: 'block', fontFamily: 'Poppins, sans-serif', fontWeight: 700, fontSize: 14, color: 'var(--theme-text)', 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: 'var(--theme-text)', 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: 'var(--theme-text)', 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"
              onMouseEnter={() => setSubmitHovered(true)}
              onMouseLeave={() => setSubmitHovered(false)}
              style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '13px 28px', borderRadius: 14,
              border: `1px solid ${sent ? 'rgba(34,197,94,0.58)' : primary + (submitHovered ? '82' : '66')}`,
              background: sent
                ? 'linear-gradient(180deg, rgba(34,197,94,0.18), rgba(var(--theme-surface-rgb),0.54))'
                : `linear-gradient(180deg, ${primary}${submitHovered ? '1F' : '14'}, rgba(var(--theme-surface-rgb),0.52))`,
              color: sent ? '#86EFAC' : primary,
              fontFamily: 'Poppins, sans-serif', fontWeight: 700,
              fontSize: 16, cursor: 'pointer',
              transition: 'background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease',
              alignSelf: 'flex-start',
              transform: submitHovered ? 'translateY(-1px)' : 'none',
              boxShadow: submitHovered
                ? 'inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 36px rgba(0,0,0,0.32)'
                : 'inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 26px rgba(0,0,0,0.22)',
            }}>
              {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(var(--theme-text-rgb),0.8)',
      }}>{label}</span>
    </div>
  );
}