/* 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' }}>Tickets available · 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}>Finally understand your face,</MaskLine>
              <MaskLine delay={2}>so makeup <em style={{ fontStyle: 'italic', fontWeight: 300 }}>makes sense.</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="https://events.humanitix.com/the-face-edit-foundation-workshop" target="_blank" rel="noopener" className="btn btn-solid">Book your seat <span className="btn-arrow"/></a>
              <a href="/workshops/" 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="https://events.humanitix.com/the-face-edit-foundation-workshop" target="_blank" rel="noopener" className="btn btn-solid">Book your seat <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.webp"
            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',
    ]} />
  );
}

// ========================================
// WHAT THE FACE EDIT IS
// ========================================
function MethodSection() {
  return (
    <section style={{ borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)' }}>
      <div className="container" style={{ padding: '9rem 0 7rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '5rem', alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: '100px' }}>
            <div className="eyebrow">The Face Edit</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, marginTop: '1.5rem', letterSpacing: '-0.02em' }}>
              A personalised makeup education experience.
            </h2>
          </div>
          <div>
            <Reveal>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.45, margin: '0 0 2.5rem', maxWidth: '52ch' }}>
                The Face Edit teaches women how to identify the makeup, colours, placement, and techniques that best suit their unique features, colouring, and contrast level.
              </p>
            </Reveal>
            <Reveal>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.45, margin: '0 0 3.5rem', maxWidth: '52ch', fontStyle: 'italic', fontWeight: 300, color: 'var(--ink-soft)' }}>
                Instead of following trends blindly, The Face Edit helps you understand the "why" behind beauty so you can create your own signature look with confidence.
              </p>
            </Reveal>
            <a href="/workshops/" className="btn btn-ghost">Read the full method <span className="btn-arrow"/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========================================
// 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="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>
        <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="https://events.humanitix.com/the-face-edit-foundation-workshop" target="_blank" rel="noopener" className="btn btn-solid">Book your seat <span className="btn-arrow"/></a>
        <button className="btn btn-ghost" onClick={onReset}>Start again</button>
      </div>
    </div>
  );
}

// ========================================
// WAITLIST
// ========================================
function Waitlist() {
  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' }}>
            Tickets
            </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 is delivered over three hours in a small-group, premium environment.
              During the session, you will have the opportunity to ask Kylie your personal questions
              and receive guidance tailored to your needs. Waitlist members receive priority access
              to available seats before they are released to the public.
            </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' }}>
            <div className="mono" style={{ marginBottom: '1.5rem' }}>Tickets · Book now</div>
            <div className="display" style={{ fontSize: '28px', lineHeight: 1.1, marginBottom: '2rem' }}>
              <em style={{ fontWeight: 300 }}>Click here to view</em> current available sessions
            </div>
            <a href="https://events.humanitix.com/the-face-edit-foundation-workshop" target="_blank" rel="noopener" className="btn btn-solid" style={{ display: 'flex', justifyContent: 'center', width: '100%', marginBottom: '1rem' }}>
              Book your seat <span className="btn-arrow"/>
            </a>
            <a href="https://thefaceedit.us17.list-manage.com/subscribe?u=49dfda9ebf8b3039b6d013d27&id=2804d4f9bf" target="_blank" rel="noopener" className="btn" style={{ display: 'flex', justifyContent: 'center', width: '100%', marginBottom: '2rem' }}>
              Join the waitlist
            </a>
            <p style={{ fontSize: '14px', lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>
              If no sessions are available or booked out please join the waitlist. The Face Edit fills from the inside out. Waitlist members hear first, always. Drop your details below and we'll be in touch the moment new dates are confirmed.
            </p>
          </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="/workshops/" style={{ borderBottom: '1px solid var(--ink)' }}>Face Edit Method</a></li>
        <li>· Meet <a href="/about/" 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 />
      <Waitlist />
      <Footer />
      {editMode && <TweaksPanel tweaks={tweaks} update={update} />}
    </div>
  );
}

Object.assign(window, { HomePage });
