/* Home page, hero, method, side-by-side, quiz, waitlist */

const { useState, useEffect, useRef } = React;

// ========================================
// HERO, 3 variants, driven by data-hero
// ========================================
function Hero() {
  return (
    <section style={{ position: 'relative' }}>
      <HeroSideBySide />
      <HeroPortrait />
      <HeroTypeLed />
    </section>
  );
}

// shared hero chrome
function HeroMeta() {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center',
      gap: '1.5rem',
      padding: '1.25rem var(--gutter)',
      borderBottom: '1px solid var(--hair)'
    }}>
      <span className="mono">Makeup, edited for you</span>
      <span className="mono">·</span>
      <span className="mono" style={{ textAlign: 'right' }}>Waitlist · Limited spaces</span>
    </div>
  );
}

/* ---------- Variant A: Side-by-Side (default) ---------- */
function HeroSideBySide() {
  return (
    <div data-hero-variant="side-by-side" className="hero-variant">
      <HeroMeta />
      <div className="container-wide" style={{ padding: '4rem var(--gutter) 2rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '4rem', alignItems: 'end' }}>
          <div>
            <h1 className="display" style={{
              fontSize: 'clamp(56px, 9vw, 148px)',
              lineHeight: 0.92,
              margin: 0,
              letterSpacing: '-0.03em'
            }}>
              <MaskLine delay={1}>You don't need</MaskLine>
              <MaskLine delay={2}><em style={{ fontStyle: 'italic', fontWeight: 300 }}>more</em> makeup.</MaskLine>
              <MaskLine delay={3}>You need</MaskLine>
              <MaskLine delay={4}><em style={{ fontStyle: 'italic', fontWeight: 300 }}>better decisions.</em></MaskLine>
            </h1>
          </div>
          <Reveal className="reveal">
            <p style={{ fontSize: '17px', lineHeight: 1.55, maxWidth: '38ch', color: 'var(--ink-soft)', margin: '0 0 2rem' }}>
              The Face Edit is not a tutorial. It is a decision-making system,
              built on <em>contrast, colour,</em> and <em>balance</em>, that teaches you
              how to see your own face, and edit it into your signature look.
            </p>
            <div style={{ display: 'flex', gap: '12px', marginBottom: '3rem' }}>
              <a href="#waitlist" className="btn btn-solid">Join The Waitlist <span className="btn-arrow"/></a>
              <a href="the-face-edit.html" className="btn">The Method</a>
            </div>
          </Reveal>
        </div>
      </div>

      {/* The actual side-by-side */}
      <SideBySideEdit />
    </div>
  );
}

/* ---------- Variant B: Portrait ---------- */
function HeroPortrait() {
  return (
    <div data-hero-variant="portrait" className="hero-variant">
      <HeroMeta />
      <div style={{ position: 'relative' }}>
        <Photo
          variant="stripes"
          ratio="16/10"
          tag="PORTRAIT / KYLIE NOLAN"
          caption="Place editorial portrait here · close crop · soft light · neutral wardrobe"
          style={{ borderBottom: '1px solid var(--hair)' }}
        />
        <div style={{
          position: 'absolute', inset: 0,
          display: 'grid', placeItems: 'center', padding: 'var(--gutter)'
        }}>
          <div style={{ textAlign: 'center', maxWidth: '16ch' }}>
            <h1 className="display" style={{
              fontSize: 'clamp(64px, 11vw, 200px)',
              lineHeight: 0.9, margin: 0, color: 'var(--ink)',
              mixBlendMode: 'multiply'
            }}>
              <MaskLine delay={1}>The Face</MaskLine>
              <MaskLine delay={2}><em style={{ fontWeight: 300 }}>Edit.</em></MaskLine>
            </h1>
            <Reveal>
              <p className="mono" style={{ marginTop: '2rem' }}>
              Premium beauty education by Kylie Nolan
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Variant C: Type-led ---------- */
function HeroTypeLed() {
  return (
    <div data-hero-variant="type-led" className="hero-variant">
      <HeroMeta />
      <div className="container" style={{ padding: '7vh var(--gutter) 6vh' }}>
        <h1 className="display" style={{
          fontSize: 'clamp(72px, 15vw, 260px)',
          lineHeight: 0.86, margin: 0, letterSpacing: '-0.035em', textAlign: 'left'
        }}>
          <MaskLine delay={1}>Edit,</MaskLine>
          <MaskLine delay={2}><em style={{ fontWeight: 300, fontStyle: 'italic' }}>don't</em> add.</MaskLine>
        </h1>
        <div style={{
          marginTop: '4rem',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem',
          paddingTop: '2rem', borderTop: '1px solid var(--hair)'
        }}>
          <MetaBlock n="01" t="Contrast" s="How much your face can hold." />
          <MetaBlock n="02" t="Colour" s="What suits, not what's trending." />
          <MetaBlock n="03" t="Balance" s="Where the attention goes." />
          <div style={{ display: 'grid', placeItems: 'end' }}>
            <a href="#waitlist" className="btn btn-solid">Join Waitlist <span className="btn-arrow"/></a>
          </div>
        </div>
      </div>
    </div>
  );
}

function MetaBlock({ n, t, s }) {
  return (
    <Reveal>
      <div className="num" style={{ marginBottom: '0.6rem' }}>{n}</div>
      <div className="display" style={{ fontSize: '30px', marginBottom: '0.4rem' }}>{t}</div>
      <div style={{ color: 'var(--ink-muted)', fontSize: '13.5px', lineHeight: 1.45 }}>{s}</div>
    </Reveal>
  );
}

// ========================================
// THE SIDE-BY-SIDE EDIT (editorial image)
// ========================================
function SideBySideEdit() {
  return (
    <div className="container-wide" style={{ padding: '3rem var(--gutter) 6rem' }}>
      <div style={{ marginBottom: '2rem' }}>
        <div className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', marginTop: '0.4rem' }}>
          One face. <em style={{ fontWeight: 300 }}>Two approaches.</em>
        </div>
      </div>

      <Reveal>
        <figure style={{ margin: 0, border: '1px solid var(--hair)', background: '#f6f4ef' }}>
          <img
            src="assets/generic-vs-face-edit.png"
            alt="Two approaches, one face. The generic approach, a cluttered marble surface of trending products, viral colours and heavy application. Versus The Face Edit approach, an edited set of personalised products, the right tools, and a clear focus."
            style={{ display: 'block', width: '100%', height: 'auto' }}
          />
        </figure>
      </Reveal>

      <div className="num" style={{ marginTop: '1.5rem', textAlign: 'center' }}>
        The difference isn't more product. It's the right product, edited to your face.
      </div>
    </div>
  );
}

// ========================================
// MARQUEE
// ========================================
function BeliefMarquee() {
  return (
    <Marquee items={[
      'Editing over adding',
      'Understanding over copying',
      'Skin over coverage',
      'Individual over trend',
      'Feeling over perfection',
    ]} />
  );
}

// ========================================
// METHOD / CORE FRAMEWORK
// ========================================
function MethodSection() {
  return (
    <section className="container" style={{ padding: '9rem 0 7rem' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '4rem', marginBottom: '5rem', alignItems: 'end' }}>
        <div className="eyebrow">The Method</div>
        <h2 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', margin: 0 }}>
          <MaskLine delay={1}>Three pillars.</MaskLine>
          <MaskLine delay={2}><em style={{ fontWeight: 300 }}>One system.</em></MaskLine>
        </h2>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        borderTop: '1px solid var(--ink)',
        borderBottom: '1px solid var(--hair)'
      }}>
        <MethodPillar n="01" title="Contrast" sub="How much." body="Depth, intensity, strength. How much your face can hold before it overwhelms, or before it disappears." />
        <MethodPillar n="02" title="Colour" sub="What suits." body="Tone, undertone, enhancement. Opposites enhance. Bringing life to the face, not noise." />
        <MethodPillar n="03" title="Balance" sub="Where attention goes." body="One feature should lead. When everything is strong, nothing stands out. Effortless is engineered." />
      </div>

      <div style={{ marginTop: '3rem', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '2rem', alignItems: 'center' }}>
        <span className="mono">01 / The Method</span>
        <div className="rule" style={{ background: 'var(--hair)' }} />
        <a href="the-face-edit.html" className="btn btn-ghost">Read the full method <span className="btn-arrow"/></a>
      </div>
    </section>
  );
}

function MethodPillar({ n, title, sub, body }) {
  const [hover, setHover] = useState(false);
  return (
    <Reveal
      className=""
      style={{
        padding: '3rem 2.5rem 2.5rem',
        borderRight: '1px solid var(--hair)',
        transition: 'background 0.4s var(--ease-out)',
      }}
    >
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          minHeight: '360px',
          display: 'flex', flexDirection: 'column',
          background: hover ? 'var(--pink-bg)' : 'transparent',
          transition: 'background 0.4s var(--ease-out)',
          padding: '1rem',
          margin: '-1rem'
        }}
      >
        <div className="num">{n}</div>
        <div className="display" style={{ fontSize: '64px', marginTop: '0.5rem', lineHeight: 0.9 }}>{title}</div>
        <div className="display-italic display" style={{ fontSize: '22px', fontStyle: 'italic', fontWeight: 300, color: 'var(--ink-soft)', marginTop: '0.3rem' }}>{sub}</div>
        <div style={{ flex: 1 }} />
        <p style={{ fontSize: '15px', lineHeight: 1.55, color: 'var(--ink-soft)', marginTop: '3rem', maxWidth: '34ch' }}>
          {body}
        </p>
      </div>
    </Reveal>
  );
}

// ========================================
// EDITORIAL QUOTE SECTION
// ========================================
function EditorialSpread() {
  return (
    <section style={{ padding: '7rem 0 0' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '5rem', alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: '2rem' }}>Signature Moment · 02</div>
          <div className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 88px)', lineHeight: 1, marginBottom: '2rem' }}>
            <em style={{ fontWeight: 300 }}>"</em>She gives them a way of <em style={{ fontWeight: 300 }}>seeing</em> their face.<em style={{ fontWeight: 300 }}>"</em>
          </div>
          <p style={{ fontSize: '16px', lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: '46ch' }}>
            Most artists apply makeup. Kylie interprets the face and teaches the client how to see it.
            Clients don't just look better, they feel seen, understood, and beautiful.
          </p>
          <div className="mono" style={{ marginTop: '2rem' }}>The Critical Differentiator</div>
        </div>
        <Reveal>
          <figure style={{ margin: 0, position: 'relative' }}>
            <img
              src="assets/model-1.png"
              alt="A client photographed after a Face Edit, soft glam, balanced contrast, calm confidence"
              loading="lazy"
              style={{
                display: 'block',
                width: '100%',
                aspectRatio: '3/4',
                objectFit: 'cover',
                background: 'var(--pink-bg)'
              }}
            />
            <figcaption className="mono" style={{
              marginTop: '0.9rem',
              color: 'var(--ink-muted)',
              display: 'flex',
              justifyContent: 'space-between',
              gap: '1rem'
            }}>
              <span>The Face Edit · Client</span>
              <span>Soft glam · Balanced contrast</span>
            </figcaption>
          </figure>
        </Reveal>
      </div>
    </section>
  );
}

// ========================================
// MINI QUIZ, FIND YOUR CONTRAST
// ========================================
function ContrastQuiz() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});

  const questions = [
    {
      key: 'hair_vs_skin',
      q: 'Look at your hair and your skin, placed next to each other.',
      opts: [
        { v: 'low', l: 'They feel close in tone. Soft, blended.' },
        { v: 'med', l: 'There\'s definition, but nothing dramatic.' },
        { v: 'high', l: 'Strong difference. One reads much darker.' },
      ]
    },
    {
      key: 'features',
      q: 'Without makeup, how would you describe your features?',
      opts: [
        { v: 'low', l: 'Soft, delicate, they recede a little.' },
        { v: 'med', l: 'Balanced. Present, but not sharp.' },
        { v: 'high', l: 'Defined. They hold the room.' },
      ]
    },
    {
      key: 'instinct',
      q: 'When you wear what most people call "a lot of makeup"…',
      opts: [
        { v: 'low', l: 'It overwhelms me. I disappear under it.' },
        { v: 'med', l: 'It works sometimes, and sometimes doesn\'t.' },
        { v: 'high', l: 'It looks right. A little feels like nothing.' },
      ]
    }
  ];

  const result = (() => {
    const tally = Object.values(answers).reduce((a, v) => (a[v] = (a[v]||0)+1, a), {});
    const top = Object.entries(tally).sort((a,b) => b[1]-a[1])[0];
    return top ? top[0] : null;
  })();

  const select = (k, v) => {
    const next = { ...answers, [k]: v };
    setAnswers(next);
    if (step < questions.length - 1) setTimeout(() => setStep(step + 1), 320);
    else setTimeout(() => setStep(questions.length), 320);
  };

  const reset = () => { setStep(0); setAnswers({}); };

  return (
    <section style={{ background: 'var(--pink-bg)', padding: '7rem 0', borderTop: '1px solid var(--hair-soft)', borderBottom: '1px solid var(--hair-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '4rem', alignItems: 'start' }}>
          <div>
            <div className="eyebrow">Interactive</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 88px)', lineHeight: 0.95, marginTop: '1rem' }}>
              <em style={{ fontWeight: 300 }}>Find</em><br />your contrast.
            </h2>
            <p style={{ fontSize: '15px', lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: '30ch', marginTop: '1.5rem' }}>
              A three-question start to the Face Edit. It won't decide for you, it will show you
              where to begin looking.
            </p>

            <figure style={{ margin: '2.5rem 0 0', position: 'relative' }}>
              <img
                src="assets/contrast-comparison.png"
                alt="Low, medium and high contrast faces shown side by side with their matching tonal palettes"
                loading="lazy"
                style={{
                  display: 'block',
                  width: '100%',
                  aspectRatio: '16/9',
                  objectFit: 'cover',
                  background: 'white',
                  border: '1px solid var(--hair)'
                }}
              />
              <figcaption className="mono" style={{
                marginTop: '0.7rem',
                color: 'var(--ink-muted)',
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: '0.5rem',
                fontSize: '10px'
              }}>
                <span>Low contrast</span>
                <span style={{ textAlign: 'center' }}>Medium</span>
                <span style={{ textAlign: 'right' }}>High contrast</span>
              </figcaption>
            </figure>

            <div className="mono" style={{ marginTop: '2.5rem' }}>
            {step < questions.length ? `Q ${step + 1} of ${questions.length}` : 'Your result'}
            </div>
            <ProgressDots total={questions.length} step={step} />
          </div>

          <div style={{ minHeight: '360px', position: 'relative' }}>
            {step < questions.length ? (
              <QuizStep
                key={step}
                q={questions[step]}
                onSelect={(v) => select(questions[step].key, v)}
                selected={answers[questions[step].key]}
                num={step + 1}
              />
            ) : (
              <QuizResult level={result} onReset={reset} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProgressDots({ total, step }) {
  return (
    <div style={{ display: 'flex', gap: '6px', marginTop: '12px' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          width: '28px', height: '2px',
          background: i <= step ? 'var(--ink)' : 'rgba(0,0,0,0.15)',
          transition: 'background 0.3s var(--ease-out)'
        }}/>
      ))}
    </div>
  );
}

function QuizStep({ q, onSelect, selected, num }) {
  return (
    <div style={{ animation: 'fadeUp 0.5s var(--ease-out)' }}>
      <div className="num" style={{ marginBottom: '1rem' }}>0{num}</div>
      <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.15, marginBottom: '2.5rem', maxWidth: '22ch' }}>
        {q.q}
      </div>
      <div style={{ display: 'grid', gap: '0' }}>
        {q.opts.map((o) => (
          <button
            key={o.v}
            onClick={() => onSelect(o.v)}
            className="quiz-opt"
            style={{
              textAlign: 'left',
              padding: '1.25rem 0',
              borderTop: '1px solid var(--ink)',
              display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '1.5rem',
              alignItems: 'center',
              fontSize: '17px',
              background: selected === o.v ? 'rgba(0,0,0,0.04)' : 'transparent',
              paddingLeft: selected === o.v ? '1rem' : '0',
              paddingRight: selected === o.v ? '1rem' : '0',
              transition: 'all 0.25s var(--ease-out)',
              width: '100%'
            }}
          >
            <span className="mono">0{q.opts.indexOf(o)+1}</span>
            <span>{o.l}</span>
            <span className="mono">{selected === o.v ? '●' : '○'}</span>
          </button>
        ))}
        <div style={{ borderTop: '1px solid var(--ink)' }}/>
      </div>
    </div>
  );
}

function QuizResult({ level, onReset }) {
  const map = {
    low:  { t: 'Low contrast', s: 'Soft · minimal', body: 'Your face holds less than most tutorials are teaching. Less product, softer tones, and lighter hand will make you look more, not less, like yourself.', tone: 'Softer tones. Muted depth. Skin-like finish.' },
    med:  { t: 'Balanced contrast', s: 'Medium', body: 'You can hold a range. The trap is defaulting to one setting forever, your Face Edit is learning when to push, and when to pull back.', tone: 'Flexible depth. Let one feature lead.' },
    high: { t: 'High contrast', s: 'Defined · strong', body: 'Your features carry weight on their own. "A little bit of makeup" often reads as nothing, your edit is confident depth, refined, never loud.', tone: 'Defined brow, eye, or lip. Never all three.' },
  };
  const r = map[level] || map.med;
  return (
    <div style={{ animation: 'fadeUp 0.6s var(--ease-out)' }}>
      <div className="num" style={{ marginBottom: '1rem' }}>YOUR INDICATION</div>
      <div className="display" style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.95, marginBottom: '0.3rem' }}>
        {r.t}
      </div>
      <div className="display" style={{ fontSize: '24px', fontStyle: 'italic', fontWeight: 300, color: 'var(--ink-soft)', marginBottom: '2rem' }}>
        {r.s}
      </div>
      <p style={{ fontSize: '17px', lineHeight: 1.55, maxWidth: '42ch', marginBottom: '2rem' }}>{r.body}</p>
      <div style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', padding: '1rem 0', marginBottom: '2rem' }}>
        <span className="mono">The direction</span>
        <div style={{ fontSize: '17px', marginTop: '0.4rem', fontStyle: 'italic', fontFamily: 'var(--f-display)', fontWeight: 300 }}>
          {r.tone}
        </div>
      </div>
      <div style={{ display: 'flex', gap: '12px' }}>
        <a href="#waitlist" className="btn btn-solid">Get the full edit <span className="btn-arrow"/></a>
        <button className="btn btn-ghost" onClick={onReset}>Start again</button>
      </div>
    </div>
  );
}

// ========================================
// WAITLIST
// ========================================
function Waitlist() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [city, setCity] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email) return;
    setSubmitted(true);
  };

  return (
    <section id="waitlist" style={{ background: 'var(--ink)', color: 'white', padding: '8rem 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '6rem', alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: '1.5rem' }}>
            Waitlist
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(54px, 8vw, 128px)', lineHeight: 0.9, margin: 0, color: 'white' }}>
              <MaskLine delay={1}>Spaces are</MaskLine>
              <MaskLine delay={2}><em style={{ fontWeight: 300 }}>intentionally</em></MaskLine>
              <MaskLine delay={3}>limited.</MaskLine>
            </h2>
            <p style={{ fontSize: '17px', lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', maxWidth: '42ch', marginTop: '2.5rem' }}>
              Each Face Edit workshop runs across three hours. Two hours of teaching, one hour of
              social conversation. Small group, premium environment. Waitlist members are offered
              seats before public release.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, auto)', gap: '2rem', marginTop: '3rem' }}>
              <DarkStat n="2h" l="Workshop" />
              <DarkStat n="1h" l="Social Hour" />
              <DarkStat n="3h" l="Total" />
              <DarkStat n="Limited" l="Seating" />
            </div>
          </div>

          <div style={{ background: 'white', color: 'var(--ink)', padding: '3rem' }}>
            {!submitted ? (
              <form onSubmit={submit}>
                <div className="mono" style={{ marginBottom: '1rem' }}>The Waitlist · Private first release</div>
                <div className="display" style={{ fontSize: '32px', lineHeight: 1, marginBottom: '2.5rem' }}>
                  <em style={{ fontWeight: 300 }}>Reserve</em><br />your seat.
                </div>

                <FormField label="Full name" value={name} onChange={setName} />
                <FormField label="Email" value={email} onChange={setEmail} type="email" />
                <FormField label="City or region" value={city} onChange={setCity} />

                <button type="submit" className="btn btn-solid" style={{ width: '100%', marginTop: '2rem', justifyContent: 'center' }}>
                  Join Waitlist <span className="btn-arrow"/>
                </button>
                <p className="mono" style={{ marginTop: '1.5rem', color: 'var(--ink-muted)', textTransform: 'none', letterSpacing: '0.03em', fontSize: '11px' }}>
                  No mass marketing. You'll hear from Kylie directly when a date opens.
                </p>
              </form>
            ) : (
              <SubmittedCard name={name || 'there'} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function DarkStat({ n, l }) {
  return (
    <div>
      <div className="display" style={{ fontSize: '38px', color: 'white' }}>{n}</div>
      <div className="mono" style={{ color: 'rgba(255,255,255,0.5)', marginTop: '4px' }}>{l}</div>
    </div>
  );
}

function FormField({ label, value, onChange, type = 'text' }) {
  return (
    <div className={`field ${value ? 'filled' : ''}`} style={{ marginBottom: '1.5rem' }}>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={(e) => e.target.parentElement.classList.add('filled')}
        onBlur={(e) => { if (!e.target.value) e.target.parentElement.classList.remove('filled'); }}
      />
      <label>{label}</label>
    </div>
  );
}

function SubmittedCard({ name }) {
  return (
    <div style={{ animation: 'fadeUp 0.6s var(--ease-out)' }}>
      <div className="mono" style={{ marginBottom: '1rem' }}>Confirmed · 01</div>
      <div className="display" style={{ fontSize: '40px', lineHeight: 0.95, marginBottom: '1.5rem' }}>
        Welcome, <em style={{ fontWeight: 300 }}>{name}.</em>
      </div>
      <p style={{ fontSize: '16px', lineHeight: 1.5, color: 'var(--ink-soft)' }}>
        You're on the list. Kylie personally reviews every entry, expect a note from her when a
        workshop date opens in your region.
      </p>
      <div className="rule rule-ink" style={{ margin: '2.5rem 0 1.5rem' }} />
      <div className="mono">In the meantime,</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '1rem 0 0', display: 'grid', gap: '0.8rem' }}>
        <li>· Read the full <a href="the-face-edit.html" style={{ borderBottom: '1px solid var(--ink)' }}>Face Edit Method</a></li>
        <li>· Meet <a href="about.html" style={{ borderBottom: '1px solid var(--ink)' }}>Kylie</a></li>
        <li>· Follow along <a href="https://www.instagram.com/kylie_nolan/" target="_blank" rel="noopener" style={{ borderBottom: '1px solid var(--ink)' }}>@kylie_nolan</a></li>
      </ul>
    </div>
  );
}

// ========================================
// PAGE COMPOSITION
// ========================================
function HomePage() {
  const { tweaks, editMode, update } = useTweaks();

  return (
    <div data-screen-label="Home" className="page">
      <Nav current="home" />
      <Hero />
      <BeliefMarquee />
      <MethodSection />
      <EditorialSpread />
      <ContrastQuiz />
      <Waitlist />
      <Footer />
      {editMode && <TweaksPanel tweaks={tweaks} update={update} />}
    </div>
  );
}

Object.assign(window, { HomePage });
