// main.jsx — Eddie Classic homepage (sections + form + app)
const { useState, useEffect, useRef, useMemo } = React;

/* ════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */
function Nav({ activeSection, onJump }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'philosophy', label: 'Philosophy' },
    { id: 'signatures', label: 'Signatures' },
    { id: 'services', label: 'Services' },
    { id: 'sourcing', label: 'Sourcing' },
    { id: 'experience', label: 'Experience' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner">
        <a className="nav__brand" onClick={() => onJump('top')}>
          <span className="nav__mono">E</span>
          <span className="nav__wordmark">
            <span className="a">Eddie</span>
            <span className="b">CLASSIC</span>
          </span>
        </a>
        <div className="nav__links">
          {links.map(l => (
            <a key={l.id}
               className={`nav__link ${activeSection === l.id ? 'is-active' : ''}`}
               onClick={() => onJump(l.id)}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav__cta-wrap">
          <button className="btn btn--small" onClick={() => onJump('inquiry')}>
            Private inquiry <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ════════════════════════════════════════════════════════════
   LOGOMARK — animated hero (plate + brush "Eddie" + gold "CLASSIC")
   ═══════════════════════════════════════════════════════════ */
function LogoMark({ replayKey }) {
  const letters = ['E', 'd', 'd', 'i', 'e'];
  return (
    <div className="logomark" key={replayKey} aria-hidden="true">
      <span className="logomark__shadow" />
      <span className="logomark__plate" />
      <div className="logomark__text">
        <div className="logomark__eddie-wrap">
          <span className="logomark__eddie" aria-label="Eddie">
            {letters.map((c, i) => (
              <span key={i} className="logomark__ch" style={{ '--i': i }}>{c}</span>
            ))}
          </span>
          <span className="logomark__settle" />
        </div>
        <span className="logomark__rule" />
        <span className="logomark__classic">CLASSIC</span>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   HERO — four variants
   ═══════════════════════════════════════════════════════════ */
function Hero({ variant, onJump, tone }) {
  const [replayKey, setReplayKey] = useState(0);
  return (
    <section className="hero wrap" data-variant={variant} data-tone={tone} data-screen-label="01 Hero" id="top">
      <div className="hero__meta">
        <span className="mono"><span className="dot" />By private commission</span>
        <span className="mono fg-3">EST. MARSEILLE · Worldwide</span>
      </div>

      {variant === 'logomark' && (
        <>
          <LogoMark replayKey={replayKey} />
          <p className="hero__lede hero__lede--center reveal is-in">
            A bespoke personal chef service for private villas and super yachts—
            classical French mastery, sourced from the soil beneath your feet.
          </p>
          <button className="logomark__replay" onClick={() => setReplayKey(k => k + 1)}>
            ↻ replay
          </button>
        </>
      )}

      {variant === 'statement' && (
        <h1 className="hero__statement reveal is-in">
          The table, set for those <em>who have tasted</em> everything—<br />
          and arrived <em>still hungry</em>.
        </h1>
      )}

      {variant === 'pair' && (
        <>
          <h1 className="hero__statement reveal is-in">
            A bespoke table.<br />
            <em>Quietly, anywhere</em><br />
            on earth.
          </h1>
          <div className="hero__pair">
            <p className="hero__lede" style={{ maxWidth: '36ch' }}>
              Classical French brigade technique, locally-sourced provenance,
              menus written for the body that will eat them.
              Villas and super yachts, by commission only.
            </p>
            <div className="ph hero__pair-img">
              <span className="ph__corner">PL. 01 / 12</span>
              <span className="ph__label">Portrait — Chef en plonge</span>
            </div>
          </div>
        </>
      )}

      {variant === 'silent' && (
        <div className="hero__statement-wrap">
          <h1 className="hero__statement reveal is-in">
            One <em>table</em>.<br />
            One <em>season</em>.<br />
            One <em>guest</em>.
          </h1>
        </div>
      )}

      {variant !== 'pair' && variant !== 'logomark' && (
        <div className="hero__foot">
          <p className="hero__lede">
            A bespoke personal chef service for private villas and super yachts—
            classical French mastery, sourced from the soil beneath your feet.
          </p>
          <div className="hero__actions">
            <button className="btn" onClick={() => onJump('inquiry')}>
              Begin a private inquiry <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost" onClick={() => onJump('philosophy')}>
              The philosophy
            </button>
          </div>
        </div>
      )}

      {variant === 'logomark' && (
        <div className="hero__foot hero__foot--center">
          <div className="hero__actions hero__actions--center">
            <button className="btn" onClick={() => onJump('inquiry')}>
              Begin a private inquiry <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost" onClick={() => onJump('philosophy')}>
              The philosophy
            </button>
          </div>
        </div>
      )}

      {variant === 'pair' && (
        <div className="hero__foot" style={{ marginTop: 'clamp(40px,5vw,80px)' }}>
          <div />
          <div className="hero__actions">
            <button className="btn" onClick={() => onJump('inquiry')}>
              Begin a private inquiry <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost" onClick={() => onJump('philosophy')}>
              The philosophy
            </button>
          </div>
        </div>
      )}
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   STATEMENT — editorial pull-quote between hero and marquee
   ═══════════════════════════════════════════════════════════ */
function Statement({ tone }) {
  return (
    <section className="statement-block wrap" data-tone={tone} data-screen-label="01b Statement">
      <span className="statement-block__eyebrow mono fg-3">— A note before we begin —</span>
      <h2 className="statement-block__quote reveal">
        The table, set for those <em>who have tasted</em> everything—<br />
        and arrived <em>still hungry</em>.
      </h2>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════════════════ */
function Marquee({ items, tone }) {
  const list = [...items, ...items];
  return (
    <div className="marquee" data-tone={tone}>
      <div className="marquee__track">
        {list.map((it, i) => (
          <span key={i} className="marquee__item">{it}</span>
        ))}
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   PHILOSOPHY
   ═══════════════════════════════════════════════════════════ */
function Philosophy({ tone }) {
  return (
    <section className="section wrap" id="philosophy" data-tone={tone} data-screen-label="02 Philosophy">
      <div className="section__head">
        <div className="num">№ 01 — Philosophy</div>
        <h2>
          Cuisine drawn from the <em>old discipline</em>, served at the <em>edge of where</em> the ingredients still grow.
        </h2>
      </div>

      <div className="philo">
        <div className="philo__body">
          <p>
            Trained in the first-class French brigade beneath chefs whose names
            you would recognise—and many you would not—Eddie's cuisine is rooted
            in the technique that built modern gastronomy.
          </p>
          <p>
            But discipline alone does not feed a body. Each menu is composed for
            the guest who will eat it: their palate, their season, their wellbeing.
            <em> Food, here, is treated as nourishment and as healing</em>—the precision
            of the brigade marrying the produce of the place.
          </p>
          <p>
            Familiar techniques. Ingredients you have walked past. A table you
            will remember without quite knowing why.
          </p>
        </div>

        <aside className="philo__aside">
          <div className="row">
            <span className="k">Training</span>
            <span className="v">First-class brigade, Lyon &amp; Paris</span>
          </div>
          <div className="row">
            <span className="k">Lineage</span>
            <span className="v">Bocuse · Passard · Pic</span>
          </div>
          <div className="row">
            <span className="k">Discipline</span>
            <span className="v">Sauces, terrines, pastry, garde-manger</span>
          </div>
          <div className="row">
            <span className="k">Languages</span>
            <span className="v">English, French, Italian, conversational Greek</span>
          </div>
          <div className="row">
            <span className="k">Engagements / year</span>
            <span className="v">Twelve, by election</span>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   MANIFESTO — full-bleed interlude
   ═══════════════════════════════════════════════════════════ */
function Manifesto({ tone }) {
  return (
    <section className="manifesto" data-tone={tone} data-screen-label="03 Manifesto">
      <div className="wrap manifesto__inner">
        <div className="manifesto__eyebrow">
          <span className="mono fg-3">Intermède · 01</span>
          <span className="mono fg-3">Read slowly</span>
        </div>

        <blockquote className="manifesto__quote">
          We cook for the body that will eat the food.
          The body, <strong>and the season</strong>, and the
          <em> hour</em> at which the table is set.
        </blockquote>

        <div className="manifesto__foot">
          <div className="col">
            <span className="k">Doctrine</span>
            <span className="v">Old technique. New geography. One table at a time.</span>
          </div>
          <div className="col">
            <span className="k">Materia</span>
            <span className="v">What the producer would feed their own family.</span>
          </div>
          <div className="col">
            <span className="k">Outcome</span>
            <span className="v">A meal that nourishes, before it impresses.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   SIGNATURES — feature + mosaic
   ═══════════════════════════════════════════════════════════ */
function Signatures({ tone }) {
  const feature = {
    no: '№ I · Feature',
    title: <>Loup de mer, <em>sel de Camargue</em></>,
    sub: 'Sea bass · fennel pollen · verjus',
    line: 'Cured at the shore where it is landed. Finished on coals from the olive prunings of a grove fourteen kilometres inland. Salt from the salt-marsh forty miles south of where you are sitting. The fish, the salt, the fire — all of one place.',
    image: 'images/loup-de-mer.png',
    alt: 'Loup de mer, sel de Camargue',
    meta: [
      ['Origin', 'Camargue, France'],
      ['Season', 'April – October'],
      ['Service', 'Plated, family-style'],
      ['Pairing', '2018 Tempier Bandol'],
    ],
  };
  const dishes = [
    {
      no: '№ II',
      title: 'Pithiviers de pigeon',
      sub: 'Squab · foie · winter truffle',
      line: 'Three days of préparation, six minutes on the plate. Carved tableside.',
      image: 'images/pithiviers.png',
    },
    {
      no: '№ III',
      title: 'Sabayon de yuzu',
      sub: 'Yuzu · honey · Champagne',
      line: 'A dessert that exists for ninety seconds. Eaten standing.',
      image: 'images/sabayon.png',
    },
    {
      no: '№ IV',
      title: 'Velouté de topinambour',
      sub: 'Sunchoke · hazelnut · sage brûlée',
      line: 'Built on a sauce mère that left the kitchen forty hours earlier.',
      image: 'images/veloute.png',
    },
    {
      no: '№ V',
      title: 'Cèpes, beurre noisette',
      sub: 'Porcini · brown butter · old vine',
      line: 'Foraged the morning of. Eaten the evening of.',
      image: 'images/cepes.png',
    },
    {
      no: '№ VI',
      title: 'Soufflé de figue',
      sub: 'Fig · goat milk · lavender',
      line: 'The soufflé does not wait. The guests, also, do not wait.',
      image: 'images/souffle.png',
    },
  ];

  return (
    <section className="section wrap" id="signatures" data-tone={tone} data-screen-label="04 Signatures">
      <div className="section__head">
        <div className="num">№ 02 — Signatures</div>
        <h2>
          A small collection of <em>recurring compositions</em>—
          never repeated, never quite the same.
        </h2>
      </div>

      <article className="sig-feature">
        <div className={`ph sig-feature__img ${feature.image ? 'ph--photo' : ''}`}>
          {feature.image && <img className="ph__img" src={feature.image} alt={feature.alt} loading="lazy" />}
          <span className="ph__corner">{feature.no}</span>
          <span className="ph__label">Plated — Loup de mer</span>
        </div>
        <div className="sig-feature__body">
          <span className="sig-feature__no">{feature.no}</span>
          <h3 className="sig-feature__title">{feature.title}</h3>
          <span className="sig-feature__sub">{feature.sub}</span>
          <p className="sig-feature__line">{feature.line}</p>
          <div className="sig-feature__meta">
            {feature.meta.map(([k, v], i) => (
              <span key={i}>{k} <em>· {v}</em></span>
            ))}
          </div>
        </div>
      </article>

      <div className="signatures">
        {dishes.map((d, i) => (
          <article key={i} className="sig">
            <div className={`ph sig__img ${d.image ? 'ph--photo' : ''}`}>
              {d.image && <img className="ph__img" src={d.image} alt={d.title} loading="lazy" />}
              <span className="ph__corner">{d.no}</span>
              <span className="ph__label">Plated — {d.title.split(',')[0]}</span>
            </div>
            <span className="sig__no">{d.no}</span>
            <h3 className="sig__title">{d.title}</h3>
            <span className="sig__sub">{d.sub}</span>
            <p className="sig__line">{d.line}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   SEASON STRIP
   ═══════════════════════════════════════════════════════════ */
function SeasonStrip({ tone }) {
  const months = [
    { m: 'Now · May', v: 'Côte d\'Azur', is: true },
    { m: 'Jun – Jul', v: 'Aegean charters' },
    { m: 'Aug – Sep', v: 'Sardinia, Capri' },
    { m: 'Dec – Feb', v: 'Hokkaidō winter' },
  ];
  return (
    <div className="season" data-tone={tone}>
      <div className="wrap season__row">
        <div className="season__label">Currently &amp; next · 2026</div>
        <div className="season__list">
          {months.map((s, i) => (
            <div key={i} className={`season__item ${s.is ? 'is-now' : ''}`}>
              <span className="m">{s.m}</span>
              <span className="v">{s.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════ */
function Services({ onJump, tone }) {
  const items = [
    {
      no: '№ 01',
      title: <>Private <em>villas</em></>,
      desc: 'Multi-day residencies in private houses—the Riviera, the Cyclades, the Cap, the Hamptons. We arrive forty-eight hours before service.',
      meta: '3–14 days · 4–24 guests',
    },
    {
      no: '№ 02',
      title: <>Super <em>yachts</em></>,
      desc: 'Single charters and full-season placements aboard 50m+ vessels. Galley adaptation, provisioning rotation across ports, dietary continuity at sea.',
      meta: 'Weekly · Charter · Season',
    },
    {
      no: '№ 03',
      title: <>Singular <em>events</em></>,
      desc: 'A wedding eve. A milestone. A negotiation that requires a quiet room and exceptional food.',
      meta: 'One night · 8–80 guests',
    },
    {
      no: '№ 04',
      title: <>Wellness <em>residencies</em></>,
      desc: 'Closed retreats where the menu is composed in conversation with a guest\'s physician, naturopath, or coach. Healing as the brief, beauty as the medium.',
      meta: '7–21 days · By referral',
    },
  ];

  return (
    <section className="section wrap" id="services" data-tone={tone} data-screen-label="05 Services">
      <div className="section__head">
        <div className="num">№ 03 — Engagements</div>
        <h2>
          Four ways the table is set.<br />
          <em>The kitchen travels.</em>
        </h2>
      </div>

      <div className="services">
        {items.map((s, i) => (
          <div key={i} className="service" onClick={() => onJump('inquiry')}>
            <span className="service__num">{s.no}</span>
            <h3 className="service__title">{s.title}</h3>
            <p className="service__desc">{s.desc}</p>
            <span className="service__meta">{s.meta}</span>
            <div className="service__arrow" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M4 14L14 4M14 4H6M14 4V12" stroke="currentColor" strokeWidth="1.2" />
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   SOURCING — map + producer portraits
   ═══════════════════════════════════════════════════════════ */
function Sourcing({ tone }) {
  const pins = [
    { x: 47, y: 38, label: 'Provence' },
    { x: 51, y: 41, label: 'Liguria' },
    { x: 55, y: 36, label: 'Piedmont' },
    { x: 58, y: 50, label: 'Crete' },
    { x: 26, y: 32, label: 'Brittany' },
    { x: 78, y: 60, label: 'Kerala' },
    { x: 18, y: 75, label: 'Cape' },
    { x: 85, y: 28, label: 'Hokkaidō' },
  ];

  const producers = [
    {
      name: 'Famille Aubert',
      where: 'Bandol · FR',
      line: 'Three generations of olive oil from a single grove of two hundred trees. We have bought theirs for nine years.',
      image: 'images/famille-aubert.png',
    },
    {
      name: 'Hiroshi Tanaka',
      where: 'Hokkaidō · JP',
      line: 'Sea-urchin diver, third generation. Works alone, between five and nine in the morning, June through August.',
      image: 'images/hiroshi-tanaka.png',
    },
    {
      name: 'Maria Skoulariki',
      where: 'Sfakia, Crete · GR',
      line: 'Forager of wild greens — stamnagathi, fennel pollen, mountain thyme. Will not pick on a Sunday.',
      image: 'images/maria-skoulariki.png',
    },
  ];

  return (
    <section className="sourcing-section" id="sourcing" data-screen-label="06 Sourcing">
      <div className="wrap">
        <div className="sourcing-card" data-tone={tone}>
          <span className="sourcing-card__corner mono">№ 04 / Sourcing</span>

          <div className="section__head">
            <div className="num">Provenance</div>
            <h2>
              The pantry is wherever <em>you are sleeping</em>.
            </h2>
          </div>

          <div className="sourcing">
            <div className="map sourcing__map">
              <div className="map__grid" />
              <span className="map__label">PROVENANCE · GLOBAL</span>
              <span className="map__compass">N ↑</span>
              {pins.map((p, i) => (
                <span key={i} className="map__pin" style={{ left: `${p.x}%`, top: `${p.y}%` }} data-label={p.label} />
              ))}
            </div>

            <div>
              <p style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 'clamp(20px,1.6vw,28px)', lineHeight: 1.4, color: 'var(--fg-2)', maxWidth: '38ch', marginBottom: 32 }}>
                We do not import an ingredient we can find within a half-day's drive. Where the geography is generous, the table is generous. Where it is severe, the cooking is severe — and better for it.
              </p>
              <div className="mono fg-3" style={{ borderTop: '1px solid var(--line)', paddingTop: 16 }}>
                12 producers · 7 countries · 1 way of working
              </div>
            </div>
          </div>

          <div className="producers">
            {producers.map((p, i) => (
              <article key={i} className="producer">
                <div className={`ph producer__img ${p.image ? 'ph--photo' : ''}`}>
                  {p.image && <img className="ph__img" src={p.image} alt={`${p.name} — ${p.where}`} loading="lazy" />}
                  <span className="ph__corner">№ {String(i + 1).padStart(2, '0')}</span>
                  <span className="ph__label">Portrait — {p.name}</span>
                </div>
                <div className="producer__row">
                  <h3 className="producer__name">{p.name}</h3>
                  <span className="producer__where">{p.where}</span>
                </div>
                <p className="producer__line">{p.line}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   EXPERIENCE — vertical staggered
   ═══════════════════════════════════════════════════════════ */
function Experience({ tone }) {
  const steps = [
    {
      no: 'i',
      when: 'Week — 8',
      title: <>A long <em>conversation</em>.</>,
      desc: 'A first call. Palate, history, intolerances, longings. Who you are when you eat. What you are recovering from. What you have never tried. We will write nothing down for the first hour.',
    },
    {
      no: 'ii',
      when: 'Week — 4',
      title: <>The menu, <em>drafted</em>.</>,
      desc: 'A bespoke menu drawn against your dates, your geography, your guests. Three drafts is the average. Iterated until each course earns its place at the table — and only then is the producer in Bandol called.',
    },
    {
      no: 'iii',
      when: 'Week of',
      title: <>The pantry, <em>gathered</em>.</>,
      desc: 'Provisioning routed through the producers we trust. Eddie arrives forty-eight hours before service. The kitchen becomes a working brigade — the saucier, the rôtisseur, the pâtissier all from our standing team.',
    },
    {
      no: 'iv',
      when: 'The evening',
      title: <>The table, <em>held</em>.</>,
      desc: 'Service from amuse-bouche through mignardise. Pacing read from the room — never the clock. A hand-bound book of the menu is left at each place, signed.',
    },
  ];

  return (
    <section className="section wrap" id="experience" data-tone={tone} data-screen-label="07 Experience">
      <div className="section__head">
        <div className="num">№ 05 — The experience</div>
        <h2>
          Four movements, <em>composed slowly</em>,
          executed quietly.
        </h2>
      </div>

      <div className="process-stagger">
        {steps.map((s, i) => (
          <div key={i} className="proc">
            <span className="proc__num">{s.no}.</span>
            <span className="proc__when">{s.when}</span>
            <h3 className="proc__title">{s.title}</h3>
            <p className="proc__desc">{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   DISCRETION
   ═══════════════════════════════════════════════════════════ */
function Discretion({ tone }) {
  const quotes = [
    {
      q: 'Eddie cooked for fourteen of us in Sardinia for six nights. I cannot tell you what he served. I can tell you that two of my guests have not stopped writing to me about it since.',
      who: 'Family principal',
      where: 'Costa Smeralda · summer',
    },
    {
      q: 'Our doctor wrote the brief. Eddie wrote the menu. We left lighter, and not by accident.',
      who: 'Retreat host',
      where: 'Cap d\'Antibes · spring',
    },
    {
      q: 'Three weeks at sea, four ports, twenty-six guests rotating in and out. Not one menu repeated. Not one note off.',
      who: 'Yacht captain',
      where: 'Aegean charter · August',
    },
  ];

  const [idx, setIdx] = useState(0);
  const cur = quotes[idx];
  const stats = [
    { v: <><em>12</em></>, k: 'Engagements / year' },
    { v: <>96<em>%</em></>, k: 'Of guests, returning' },
    { v: <><em>48</em>h</>, k: 'On site, before service' },
    { v: <>42<em>°</em></>, k: 'Average sourcing latitude' },
  ];

  return (
    <section className="discretion" id="discretion" data-tone={tone} data-screen-label="08 Discretion">
      <div className="wrap">
        <div className="section__head" style={{ paddingTop: 'clamp(60px,7vw,100px)' }}>
          <div className="num">№ 06 — In confidence</div>
          <h2>Some tables are <em>kept private</em> on principle.</h2>
        </div>

        <div className="testimonial">
          <div>
            <blockquote className="testimonial__quote">{cur.q}</blockquote>
            <div className="testimonial__byline">
              <span className="k">Attributed</span>
              <span className="v">{cur.who} · {cur.where}</span>
            </div>
            <div className="testimonial__nav">
              <button onClick={() => setIdx((idx - 1 + quotes.length) % quotes.length)} aria-label="Previous">
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 1L3 7L9 13" stroke="currentColor" strokeWidth="1.2" fill="none" /></svg>
              </button>
              <span className="dots">{String(idx + 1).padStart(2, '0')} / {String(quotes.length).padStart(2, '0')}</span>
              <button onClick={() => setIdx((idx + 1) % quotes.length)} aria-label="Next">
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M5 1L11 7L5 13" stroke="currentColor" strokeWidth="1.2" fill="none" /></svg>
              </button>
            </div>
          </div>

          <div className="ph" style={{ aspectRatio: '4/5', width: '100%' }}>
            <span className="ph__corner">VOL. {String(idx + 1).padStart(2, '0')}</span>
            <span className="ph__label">Interior — service, golden hour</span>
          </div>
        </div>

        <div className="discretion__stats">
          {stats.map((s, i) => (
            <div key={i} className="stat">
              <span className="v">{s.v}</span>
              <span className="k">{s.k}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   INQUIRY FORM
   ═══════════════════════════════════════════════════════════ */
function InquiryForm() {
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [data, setData] = useState({
    occasion: '', venue: '', location: '', dates: '', guests: '',
    dietary: [], intentions: [], name: '', email: '', notes: '',
  });

  const dietaryOpts = ['Pescatarian', 'Vegetarian', 'Vegan', 'Gluten-free', 'Dairy-free', 'Shellfish-free', 'No alcohol', 'Specific allergies'];
  const intentionOpts = ['Celebration', 'Discovery', 'Wellness / healing', 'Discretion', 'Family', 'Negotiation', 'A surprise'];

  const steps = [
    { k: 'occasion', label: 'The occasion' },
    { k: 'logistics', label: 'Logistics' },
    { k: 'intention', label: 'Intention' },
    { k: 'contact', label: 'Introduction' },
  ];

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const canNext = (() => {
    if (step === 0) return data.occasion && data.venue;
    if (step === 1) return data.location && data.dates && data.guests;
    if (step === 2) return data.intentions.length > 0;
    if (step === 3) return data.name && data.email;
    return false;
  })();

  if (done) {
    return (
      <div className="form">
        <div className="form__success">
          <div className="mark" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 22 22"><path d="M5 11L9 15L17 6" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
          </div>
          <h3>Your note <em>is received</em>.</h3>
          <p>
            Eddie reads each inquiry personally. You will hear from us by hand
            within seventy-two hours, by email — and, where appropriate, by call.
          </p>
          <p style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)' }}>
            We do not always say yes. When we do, we begin slowly.
          </p>
          <div className="ref">
            Reference · EC-{(Math.random().toString(36).slice(2, 7)).toUpperCase()}-{new Date().getFullYear()}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="form">
      <div className="form__steps">
        {steps.map((s, i) => (
          <React.Fragment key={s.k}>
            <span className={`s ${i === step ? 'is-active' : ''} ${i < step ? 'is-done' : ''}`}>
              <span className="b">{i < step ? '✓' : (i + 1).toString().padStart(2, '0')}</span>
              {s.label}
            </span>
            {i < steps.length - 1 && <span className="sep">/</span>}
          </React.Fragment>
        ))}
      </div>

      {step === 0 && (
        <>
          <h3 className="form__title">First, the <em>occasion</em>.</h3>
          <div className="field">
            <label className="field__label">In a sentence — what brings you here</label>
            <input className="field__input" placeholder="A milestone birthday in August, in Saint-Tropez"
                   value={data.occasion} onChange={e => set('occasion', e.target.value)} />
          </div>
          <div className="field">
            <label className="field__label">The venue</label>
            <div className="chips">
              {['Private villa', 'Super yacht', 'Estate', 'Other'].map(o => (
                <span key={o} className={`chip ${data.venue === o ? 'is-on' : ''}`} onClick={() => set('venue', o)}>{o}</span>
              ))}
            </div>
          </div>
        </>
      )}

      {step === 1 && (
        <>
          <h3 className="form__title">Then, the <em>practical</em>.</h3>
          <div className="field">
            <label className="field__label">Where in the world</label>
            <input className="field__input" placeholder="Saint-Tropez, France"
                   value={data.location} onChange={e => set('location', e.target.value)} />
          </div>
          <div className="field__row">
            <div className="field">
              <label className="field__label">Dates (or season)</label>
              <input className="field__input" placeholder="14 – 21 August 2026"
                     value={data.dates} onChange={e => set('dates', e.target.value)} />
            </div>
            <div className="field">
              <label className="field__label">Guests</label>
              <input className="field__input" placeholder="12"
                     value={data.guests} onChange={e => set('guests', e.target.value)} />
            </div>
          </div>
          <div className="field">
            <label className="field__label">Dietary, if any (multi-select)</label>
            <div className="chips">
              {dietaryOpts.map(o => (
                <span key={o} className={`chip ${data.dietary.includes(o) ? 'is-on' : ''}`}
                      onClick={() => toggle('dietary', o)}>{o}</span>
              ))}
            </div>
          </div>
        </>
      )}

      {step === 2 && (
        <>
          <h3 className="form__title">Now, the <em>intention</em>.</h3>
          <p style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 17, color: 'var(--fg-2)', marginBottom: 22 }}>
            What is this table really for?  Pick anything that resonates — Eddie reads these notes carefully.
          </p>
          <div className="field">
            <div className="chips">
              {intentionOpts.map(o => (
                <span key={o} className={`chip ${data.intentions.includes(o) ? 'is-on' : ''}`}
                      onClick={() => toggle('intentions', o)}>{o}</span>
              ))}
            </div>
          </div>
          <div className="field">
            <label className="field__label">A few words more (optional)</label>
            <textarea className="field__textarea"
                      placeholder="Recovery from illness, an anniversary, an honoured guest — anything you would like the table to hold."
                      value={data.notes} onChange={e => set('notes', e.target.value)} />
          </div>
        </>
      )}

      {step === 3 && (
        <>
          <h3 className="form__title">Finally, an <em>introduction</em>.</h3>
          <div className="field__row">
            <div className="field">
              <label className="field__label">Name</label>
              <input className="field__input" placeholder="As you prefer to be addressed"
                     value={data.name} onChange={e => set('name', e.target.value)} />
            </div>
            <div className="field">
              <label className="field__label">Email</label>
              <input className="field__input" type="email" placeholder="discreet@..."
                     value={data.email} onChange={e => set('email', e.target.value)} />
            </div>
          </div>
          <div className="field">
            <label className="field__label">Referred by (optional)</label>
            <input className="field__input" placeholder="A name, a house, a previous guest"
                   onChange={() => {}} />
          </div>
          <p style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 16, color: 'var(--fg-3)', marginTop: 16, lineHeight: 1.5 }}>
            We will reply by hand within seventy-two hours. Your details are held in confidence; nothing is stored outside our office.
          </p>
        </>
      )}

      <div className="form__actions">
        <span className="form__back" hidden={step === 0} onClick={() => setStep(s => Math.max(0, s - 1))}>
          ← Back
        </span>
        {step < steps.length - 1 ? (
          <button className="btn" disabled={!canNext} style={{ opacity: canNext ? 1 : 0.4 }}
                  onClick={() => canNext && setStep(s => s + 1)}>
            Continue <span className="arrow">→</span>
          </button>
        ) : (
          <button className="btn" disabled={!canNext} style={{ opacity: canNext ? 1 : 0.4 }}
                  onClick={() => canNext && setDone(true)}>
            Send your inquiry <span className="arrow">→</span>
          </button>
        )}
      </div>
    </div>
  );
}

function InquirySection({ tone }) {
  return (
    <section className="inquiry section" id="inquiry" data-tone={tone} data-screen-label="09 Inquiry">
      <div className="wrap inquiry__inner">
        <div className="inquiry__head">
          <div className="eyebrow" style={{ marginBottom: 24 }}>№ 07 — Private inquiry</div>
          <h2>
            Begin the<br /><em>conversation</em>.
          </h2>
          <p>
            Eddie accepts twelve engagements each year. Tell us about yours.
            Every inquiry is read personally; we reply within seventy-two hours.
          </p>
          <div className="inquiry__contact">
            <div className="row">
              <span className="k">By telephone</span>
              <span className="v">+33 (0) 4 91 00 00 00</span>
            </div>
            <div className="row">
              <span className="k">By email</span>
              <span className="v">private@eddieclassic.com</span>
            </div>
            <div className="row">
              <span className="k">Office hours</span>
              <span className="v">Monday – Friday · 09h00 – 17h00 CET</span>
            </div>
          </div>
        </div>

        <InquiryForm />
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
function Footer({ tone }) {
  return (
    <footer className="footer" data-tone={tone}>
      <div className="wrap">
        <h2 className="footer__big">
          <em>Eddie</em> Classic
        </h2>

        <div className="footer__grid">
          <div className="footer__col">
            <span className="h">Office</span>
            <span className="item">14 rue Saint-Sauveur<small>Marseille 13002 · France</small></span>
            <span className="item">+33 (0) 4 91 00 00 00<small>By appointment</small></span>
          </div>
          <div className="footer__col">
            <span className="h">Inquiries</span>
            <a>private@eddieclassic.com</a>
            <a>concierge@eddieclassic.com</a>
            <a>press — no.</a>
          </div>
          <div className="footer__col">
            <span className="h">Currently</span>
            <span className="item">Côte d'Azur<small>Through September</small></span>
            <span className="item">Aegean charters<small>August – October</small></span>
            <span className="item">Hokkaidō winter<small>December – February</small></span>
          </div>
          <div className="footer__col">
            <span className="h">Read</span>
            <a>The Notebook</a>
            <a>On healing</a>
            <a>Memoranda</a>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© MMXXVI · Eddie Classic</span>
          <span>By private commission only</span>
          <span>v. {new Date().toISOString().slice(0, 10)}</span>
        </div>
      </div>
    </footer>
  );
}

/* ════════════════════════════════════════════════════════════
   APP
   ═══════════════════════════════════════════════════════════ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "linen",
  "mode": "mix",
  "heroVariant": "logomark"
}/*EDITMODE-END*/;

// Which sections are dark when in 'mix' mode
const MIX_TONES = {
  hero:        'light',
  statement:   'light',
  marquee1:    'dark',
  philosophy:  'light',
  manifesto:   'dark',
  signatures:  'light',
  season:      'dark',
  services:    'light',
  sourcing:    'dark',
  experience:  'light',
  discretion:  'dark',
  inquiry:     'light',
  footer:      'dark',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeSection, setActiveSection] = useState('top');

  useEffect(() => {
    document.documentElement.dataset.palette = t.palette;
    // Document-level mode: when 'mix' we anchor to light, but individual sections override via data-tone
    document.documentElement.dataset.mode = t.mode === 'mix' ? 'light' : t.mode;
  }, [t.palette, t.mode]);

  const tone = (name) => {
    if (t.mode === 'mix') return MIX_TONES[name] || 'light';
    return t.mode;
  };

  const jump = (id) => {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  useEffect(() => {
    const ids = ['philosophy', 'signatures', 'services', 'sourcing', 'experience', 'inquiry'];
    const onScroll = () => {
      const y = window.scrollY + 200;
      let cur = 'top';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActiveSection(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });
    document.querySelectorAll('.reveal:not(.is-in)').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [t.heroVariant]);

  const paletteOptions = {
    linen: ['#f3ecdf', '#1a1612', '#8a6a3f'],
    sage:  ['#ece5d6', '#1e2620', '#5e7050'],
    noir:  ['#f7f3ea', '#0e0d0b', '#86714a'],
  };
  const paletteOptionsDark = {
    linen: ['#161310', '#ece4d2', '#c9a55c'],
    sage:  ['#141815', '#e3dcc7', '#aebd92'],
    noir:  ['#0b0a08', '#f1ead7', '#d8b97a'],
  };
  const paletteVals = t.mode === 'dark' ? paletteOptionsDark : paletteOptions;

  return (
    <>
      <Nav activeSection={activeSection} onJump={jump} />

      <Hero variant={t.heroVariant} onJump={jump} tone={tone('hero')} />

      <Statement tone={tone('statement')} />

      <Marquee tone={tone('marquee1')} items={[
        'Bocuse-trained',
        'By private commission',
        'Villas & super yachts',
        'Provence · Aegean · Hokkaidō',
        'Twelve engagements / year',
        'Food as nourishment',
      ]} />

      <Philosophy tone={tone('philosophy')} />
      <Manifesto tone={tone('manifesto')} />
      <Signatures tone={tone('signatures')} />
      <SeasonStrip tone={tone('season')} />
      <Services onJump={jump} tone={tone('services')} />
      <Sourcing tone={tone('sourcing')} />
      <Experience tone={tone('experience')} />
      <Discretion tone={tone('discretion')} />
      <InquirySection tone={tone('inquiry')} />
      <Footer tone={tone('footer')} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Hue"
          value={paletteVals[t.palette]}
          options={[paletteVals.linen, paletteVals.sage, paletteVals.noir]}
          onChange={(v) => {
            const key = Object.keys(paletteVals).find(k =>
              JSON.stringify(paletteVals[k]) === JSON.stringify(v)
            );
            if (key) setTweak('palette', key);
          }}
        />
        <TweakSelect
          label="Tone"
          value={t.mode}
          options={[
            { value: 'light', label: 'Light — cream throughout' },
            { value: 'dark',  label: 'Dark — ink throughout' },
            { value: 'mix',   label: 'Mix — alternating' },
          ]}
          onChange={(v) => setTweak('mode', v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Layout"
          value={t.heroVariant}
          options={[
            { value: 'logomark',  label: 'Logomark — animated wordmark' },
            { value: 'statement', label: 'Statement — full-bleed serif' },
            { value: 'pair',      label: 'Pair — editorial split' },
            { value: 'silent',    label: 'Silent — three words' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />

        <TweakSection label="Navigate" />
        <TweakButton label="Philosophy" onClick={() => jump('philosophy')} />
        <TweakButton label="Signatures" onClick={() => jump('signatures')} />
        <TweakButton label="Services" onClick={() => jump('services')} />
        <TweakButton label="Sourcing" onClick={() => jump('sourcing')} />
        <TweakButton label="Experience" onClick={() => jump('experience')} />
        <TweakButton label="Inquiry" onClick={() => jump('inquiry')} secondary />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);