/* ============================================================
   Yolk & Gold — page composition + Tweaks
   ============================================================ */

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandName":        "Yolk & Gold",
  "couponHeadline":   "You cracked it.",
  "couponBody":       "10% off your table — just show us this when you sit down.",
  "ctaLabel":         "Reserve a table",
  "percentOff":       10,
  "tapCount":         10,
  "palette":          "default"
}/*EDITMODE-END*/;

// ─── The dishes — copy verbatim from brief
const DISHES = [
  {
    n: "I",
    name: "Gold-Yolk Benedict",
    desc: "House muffin, wood-smoked ham, a yolk that runs like sunrise.",
    price: "19",
  },
  {
    n: "II",
    name: "Brown-Butter Dutch Baby",
    desc: "Oven-puffed, lemon, a drift of powdered sugar.",
    price: "16",
  },
  {
    n: "III",
    name: "The Golden Hash",
    desc: "Crisp potato, farm egg, charred allium, chili gold.",
    price: "17",
  },
  {
    n: "IV",
    name: "Honeycomb Latte",
    desc: "Espresso, raw honey, steamed to a hush.",
    price: "7",
  },
];

// ─── Wordmark — used in header and footer
function Wordmark({ size = "header", brandName }) {
  // Try to split brandName around "&"
  const parts = brandName.split(/(\s*&\s*)/);
  return (
    <span className={`wordmark wordmark--${size}`}>
      {parts.map((p, i) => {
        if (/^\s*&\s*$/.test(p)) {
          return <span key={i} className="amp">&amp;</span>;
        }
        // Inject a tiny yolk dot after the first word
        return <span key={i}>{p.trim()}</span>;
      })}
    </span>
  );
}

// ─── Header
function Header({ brandName, onMenuOpen }) {
  return (
    <header className="site-header">
      <div className="header-light" aria-hidden="true" />
      <div className="wrap site-header__inner">
        <div className="site-header__spacer" />
        <Wordmark brandName={brandName} />
        <button className="hamburger" onClick={onMenuOpen} aria-label="Open menu">
          <span className="hamburger__bars" aria-hidden="true" />
          <span className="hamburger__label">Menu</span>
        </button>
      </div>
    </header>
  );
}

// ─── Menu sheet
function MenuSheet({ open, onClose }) {
  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    if (open) {
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }
  }, [open, onClose]);

  const click = (sel) => (e) => {
    e.preventDefault();
    onClose();
    setTimeout(() => {
      const el = document.querySelector(sel);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 280);
  };

  return (
    <div className={`menu-sheet ${open ? "is-open" : ""}`} onClick={onClose}>
      <button className="menu-sheet__close" onClick={onClose}>Close</button>
      <ul className="menu-sheet__list" onClick={(e) => e.stopPropagation()}>
        <li><a href="#spread"   onClick={click("#spread")}>The Spread</a></li>
        <li className="italic"><a href="#mornings" onClick={click("#mornings")}>Our Mornings</a></li>
        <li><a href="#visit"    onClick={click("#visit")}>Visit</a></li>
        <li className="italic"><a href="#visit"    onClick={click("#visit")}>Reserve</a></li>
      </ul>
    </div>
  );
}

// ─── Hero — only the egg animates
function Hero({ brandName, couponHeadline, couponBody, ctaLabel, percentOff, tapCount, onReserve }) {
  return (
    <section className="hero">
      <div className="hero__wash" aria-hidden="true" />
      <div className="wrap">
        <div className="hero__eyebrow eyebrow">Brunch — Portland, OR</div>
        <h1 className="hero__title display">
          Brunch worth <em>getting up</em> for.
        </h1>
        <p className="hero__sub">
          Farm eggs, wood-fire, and golden-hour mornings — made by hand in Portland.
        </p>

        <div className="hero__stage">
          <CrackableEgg
            brandName={brandName}
            couponHeadline={couponHeadline}
            couponBody={couponBody}
            ctaLabel={ctaLabel}
            percentOff={percentOff}
            tapCount={tapCount}
            onReserve={onReserve}
          />
        </div>
      </div>
    </section>
  );
}

// ─── Pointer — the one wayfinding visual, NOT a button styled
function Pointer({ targetId }) {
  const onClick = (e) => {
    e.preventDefault();
    const el = document.getElementById(targetId);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <div
      className="pointer"
      onClick={onClick}
      role="presentation"
      aria-hidden="true"
    >
      <span className="pointer__label">The Spread</span>
      <span className="pointer__line" />
    </div>
  );
}

// ─── The Spread
function Spread() {
  return (
    <section className="section spread" id="spread">
      <div className="wrap">
        <div className="section__head">
          <div className="eyebrow">No. 01</div>
          <h2 className="section__title display">
            The <em>Spread</em>
          </h2>
        </div>
        <ul className="spread__list">
          {DISHES.map((d) => (
            <li key={d.name} className="dish">
              <div className="dish__num">No. {d.n}</div>
              <div>
                <h3 className="dish__name">{d.name}</h3>
                <p className="dish__desc">{d.desc}</p>
              </div>
              <div className="dish__price">${d.price}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─── Our Mornings
function Mornings() {
  return (
    <section className="section mornings" id="mornings">
      <div className="wrap mornings__inner">
        <div className="mornings__copy">
          <div className="eyebrow">No. 02</div>
          <h2 className="mornings__title display">
            Our <em>Mornings</em>
          </h2>
          <div className="mornings__body">
            <p>
              We start before the light does. Eggs from a farm an hour out,
              dough proofed overnight, butter browned by hand.
            </p>
            <p>
              By the time you're up, the good part's ready.
            </p>
          </div>
        </div>
        <div className="mornings__sun" aria-hidden="true" />
      </div>
    </section>
  );
}

// ─── Visit / Reserve
function Visit({ ctaLabel, onReserve }) {
  return (
    <section className="section visit" id="visit">
      <div className="wrap visit__inner">
        <div className="section__head">
          <div className="eyebrow">No. 03</div>
          <h2 className="section__title display">
            Come find the <em>gold</em>.
          </h2>
        </div>

        <div className="visit__detail-grid">
          <div className="visit__detail">
            <div className="eyebrow">Hours</div>
            <div className="visit__detail-value">Daily<br/>8am – 2pm</div>
          </div>
          <div className="visit__detail">
            <div className="eyebrow">Address</div>
            <div className="visit__detail-value">
              <span className="muted">[street address]</span><br/>
              Portland, OR
            </div>
          </div>
          <div className="visit__detail">
            <div className="eyebrow">Telephone</div>
            <div className="visit__detail-value">
              <span className="muted">[phone]</span>
            </div>
          </div>
        </div>

        <button className="cta" onClick={onReserve}>
          {ctaLabel}
          <span className="cta__arrow" />
        </button>
      </div>
    </section>
  );
}

// ─── Footer
function Footer({ brandName }) {
  return (
    <footer className="site-footer">
      <div className="wrap site-footer__inner">
        <span className="site-footer__wordmark">{brandName}</span>
        <span className="site-footer__legal">© 2026 — made by hand at first light</span>
      </div>
    </footer>
  );
}

// ─── Reservation modal — gentle stub for the CTA click
function ReserveModal({ open, onClose, brandName }) {
  if (!open) return null;
  return (
    <div
      className="menu-sheet is-open"
      style={{ background: "color-mix(in oklab, var(--ink) 60%, transparent)", backdropFilter: "blur(8px)" }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--shell)",
          color: "var(--ink)",
          padding: "44px 40px 32px",
          borderRadius: 8,
          maxWidth: 460,
          width: "calc(100% - 40px)",
          textAlign: "center",
          border: "1px solid color-mix(in oklab, var(--gold-deep) 40%, transparent)",
          boxShadow: "0 30px 80px -20px rgba(0,0,0,.45)",
          position: "relative",
        }}
      >
        <button
          onClick={onClose}
          style={{
            position: "absolute", top: 16, right: 18,
            fontFamily: "var(--f-display)",
            fontSize: 12, letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--smoke)",
          }}
        >Close</button>
        <div className="eyebrow" style={{ marginBottom: 14 }}>{brandName}</div>
        <h3 className="display" style={{ fontSize: "clamp(28px, 3vw, 38px)", margin: "0 0 12px", lineHeight: 1.05 }}>
          We'll save your <em style={{ fontStyle: "italic", color: "var(--gold-deep)" }}>table</em>.
        </h3>
        <p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.5, margin: "0 auto 24px", maxWidth: "32ch" }}>
          Booking opens here. <em style={{ fontStyle: "italic" }}>(Placeholder — wire to your reservation system.)</em>
        </p>
        <button className="cta" style={{ padding: "14px 28px", fontSize: 16 }} onClick={onClose}>
          Got it
          <span className="cta__arrow" />
        </button>
      </div>
    </div>
  );
}

// ─── Tweaks panel
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Egg" />
      <TweakSlider label="Taps to crack" value={t.tapCount} min={5} max={15} step={1}
                   onChange={(v) => setTweak('tapCount', v)} />
      <TweakNumber label="Percent off" value={t.percentOff} min={5} max={50} step={1}
                   onChange={(v) => setTweak('percentOff', v)} />

      <TweakSection label="Brand &amp; copy" />
      <TweakText  label="Brand"       value={t.brandName}      onChange={(v) => setTweak('brandName', v)} />
      <TweakText  label="Hatched line" value={t.couponHeadline} onChange={(v) => setTweak('couponHeadline', v)} />
      <TweakText  label="Coupon body" value={t.couponBody}     onChange={(v) => setTweak('couponBody', v)} />
      <TweakText  label="CTA label"   value={t.ctaLabel}       onChange={(v) => setTweak('ctaLabel', v)} />

      <TweakSection label="Palette" />
      <TweakRadio
        label="Mood"
        value={t.palette}
        options={["default", "sunlit", "dusk"]}
        onChange={(v) => setTweak('palette', v)}
      />
    </TweaksPanel>
  );
}

// ─── App root
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);
  const [reserveOpen, setReserveOpen] = useState(false);

  // Apply palette via data attribute
  useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette || "default");
  }, [t.palette]);

  const openReserve = () => setReserveOpen(true);

  return (
    <div className="page">
      <Header brandName={t.brandName} onMenuOpen={() => setMenuOpen(true)} />
      <MenuSheet open={menuOpen} onClose={() => setMenuOpen(false)} />

      <main>
        <Hero
          brandName={t.brandName}
          couponHeadline={t.couponHeadline}
          couponBody={t.couponBody}
          ctaLabel={t.ctaLabel}
          percentOff={t.percentOff}
          tapCount={t.tapCount}
          onReserve={openReserve}
        />
        <Pointer targetId="spread" />
        <Spread />
        <Mornings />
        <Visit ctaLabel={t.ctaLabel} onReserve={openReserve} />
      </main>

      <Footer brandName={t.brandName} />

      <ReserveModal open={reserveOpen} onClose={() => setReserveOpen(false)} brandName={t.brandName} />
    </div>
  );
}
// NOTE: Claude Design's <Tweaks> dev-editing panel render removed for the public deploy
// (2026-05-28). useTweaks(TWEAK_DEFAULTS) is retained — it supplies the brand/copy/tap-count
// config initialized to the correct defaults; the editing UI itself does not ship.

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