/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Reveal hook ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Bake placeholder ----------
function Placeholder({ label }) {
  return <div className="placeholder">{label}</div>;
}

// ---------- TopBar ----------
function TopBar({ cartCount, onCartOpen }) {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" href="#top" aria-label="Kelly's Country Kitchen">
          <img src="assets/KCK-stamp-cherry.png" alt="" />
          <span>
            Kelly's
            <span className="lock">Country Kitchen · Est. 2019</span>
          </span>
        </a>
        <nav>
          <a href="#shop" data-num="01">Bake board</a>
          <a href="#diary" data-num="02">This week</a>
          <a href="#about" data-num="03">About Kelly</a>
          <a href="#gallery" data-num="04">Gallery</a>
          <a href="#contact" data-num="05">Order</a>
        </nav>
        <div className="right">
          <span className="stamp">
            <span className="dot" />
            Oven on
          </span>
          <button className="cart-btn" onClick={onCartOpen}>
            Basket <span className="pip">{cartCount}</span>
          </button>
        </div>
      </div>
    </header>
  );
}

// ---------- Ribbon marquee ----------
function Ribbon() {
  const items = ["Lemon syrup loaf", "Anzac biscuits", "Passionfruit slice", "Country soda bread", "Buttermilk scones", "Ginger crinkles", "Pavlova", "Celebration cakes"];
  return (
    <div className="ribbon" aria-hidden="true">
      <div className="ribbon-track">
        <span>
          {items.map((t, i) => (
            <React.Fragment key={i}>
              {t} <span className="sep">✻</span>
            </React.Fragment>
          ))}
        </span>
        <span>
          {items.map((t, i) => (
            <React.Fragment key={"b" + i}>
              {t} <span className="sep">✻</span>
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

// ---------- HERO variants ----------
function HeroEditorial() {
  return (
    <section className="hero" id="top">
      <div className="hero-ledger">
        <div><span className="label">Vol.</span> 07 · Issue 26</div>
        <div className="center"><span className="label">Today</span> Tuesday, 28 April 2026</div>
        <div className="right"><span className="label">Weather</span> 18° · light cloud · perfect for bread</div>
      </div>
      <div className="hero-grid">
        <h1 className="hero-title">
          <span className="l1">Real baking,</span>
          <span className="l2">from my kitchen</span>
          <span className="l3">to <em>yours</em>.</span>
        </h1>
        <div className="hero-side">
          <div className="hero-photo">
            <img src="assets/hero-cake-board.jpg" alt="A long cream cake on a wooden board, layered with fresh berries, citrus and edible flowers" />
            <div className="caption">
              <span>No. 01 — This week's centerpiece</span>
              <span className="price">$95</span>
            </div>
          </div>
          <p className="hero-blurb">
            <b>Kelly's Country Kitchen</b> is a one-woman bakery built on old-fashioned recipes,
            quality ingredients, and the kind of treats that taste like they came from your nan's oven —
            because most of them did.
          </p>
          <div className="hero-actions">
            <a href="#shop" className="btn primary">
              See the bake board <span className="arr" />
            </a>
            <a href="#about" className="btn ghost">Meet Kelly</a>
          </div>
        </div>
      </div>
      <div className="hero-stamp">
        <svg className="ring" viewBox="0 0 200 200">
          <defs>
            <path id="stampPath" d="M100,100 m-78,0 a78,78 0 1,1 156,0 a78,78 0 1,1 -156,0" />
          </defs>
          <text fill="var(--ink)" fontFamily="var(--mono)" fontSize="11" letterSpacing="3.5">
            <textPath href="#stampPath" startOffset="0">
              MADE WITH BUTTER · MADE WITH PATIENCE · MADE WITH LOVE ·
            </textPath>
          </text>
        </svg>
        <div className="center">Kelly's</div>
      </div>
    </section>
  );
}

function HeroChalkboard() {
  return (
    <section className="hero" id="top" style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(60px, 10vw, 140px) var(--gutter)" }}>
      <div className="hero-ledger" style={{ borderColor: "rgba(255,255,255,0.16)", color: "rgba(255,255,255,0.7)" }}>
        <div><span className="label" style={{opacity:0.5}}>Today's</span> Bake Board</div>
        <div className="center">Kelly's Country Kitchen</div>
        <div className="right">Tue 28 April · oven on at 6am</div>
      </div>
      <h1 className="hero-title" style={{ color: "var(--paper)", fontSize: "clamp(3rem, 14vw, 12rem)", textAlign: "center" }}>
        <span className="l3" style={{ display: "block" }}>What's <em style={{color:"var(--accent)"}}>baking</em></span>
        <span className="l2" style={{ marginLeft: 0, color: "var(--accent)", textAlign: "center" }}>this week</span>
      </h1>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 20, marginTop: 50, fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.06em" }}>
        {["Lemon syrup loaf — $18", "Anzac biscuits — $14", "Passionfruit slice — $22", "Soda bread — $12", "Buttermilk scones — $16", "Ginger crinkles — $14"].map((t, i) => (
          <div key={i} style={{ borderTop: "1px dashed rgba(255,255,255,0.25)", paddingTop: 14, color: "rgba(255,255,255,0.85)" }}>
            <span style={{ color: "var(--accent)" }}>0{i + 1}.</span> {t}
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 60 }}>
        <a href="#shop" className="btn primary">Order before noon for tomorrow <span className="arr" /></a>
      </div>
    </section>
  );
}

function HeroFullPhoto() {
  return (
    <section className="hero" id="top" style={{ padding: 0, height: "calc(100vh - 70px)", minHeight: 600, position: "relative", overflow: "hidden" }}>
      <img src="assets/hero-cake-board.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)" }} />
      <div style={{ position: "absolute", inset: 0, padding: "var(--gutter)", display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#fff" }}>
        <div className="hero-ledger" style={{ borderColor: "rgba(255,255,255,0.4)", color: "rgba(255,255,255,0.9)" }}>
          <div><span className="label" style={{opacity:0.6}}>No.</span> 026</div>
          <div className="center">A homestyle bakery in your neighbourhood</div>
          <div className="right">Scroll for the bake board ↓</div>
        </div>
        <h1 className="hero-title" style={{ color: "#fff", fontSize: "clamp(3rem, 13vw, 13rem)", textAlign: "left", lineHeight: 0.85, mixBlendMode: "normal" }}>
          <span className="l1">Real baking,</span>
          <span className="l2" style={{ color: "#FFD3D9", marginLeft: "clamp(40px, 12vw, 200px)" }}>from my kitchen</span>
          <span className="l3" style={{ fontStyle: "italic" }}>to <em style={{padding:0}}>yours</em>.</span>
        </h1>
      </div>
    </section>
  );
}

// ---------- Section header ----------
function SectionHead({ num, kicker, title, scriptWord, meta }) {
  return (
    <header className="section-head reveal">
      <h3 className="section-num">{num}</h3>
      <div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.22em", color: "var(--accent)", textTransform: "uppercase", marginBottom: 14 }}>{kicker}</div>
        <h2 className="section-title">
          {title} {scriptWord && <span className="script">{scriptWord}</span>}
        </h2>
      </div>
      <div className="section-meta">{meta}</div>
    </header>
  );
}

// ---------- Shop / Bake board ----------
// Loads the original Kelly's Country Kitchen shop widget from
// https://kellyscountrykitchen.onrender.com/shop.js into the #kck-shop mount.
function Shop() {
  useEffect(() => {
    if (document.querySelector('script[data-kck-shop]')) return;
    const s = document.createElement("script");
    s.src = "https://shop.drewwilsonwebdesign.com.au/shop.js";
    s.async = true;
    s.setAttribute("data-kck-shop", "true");
    document.body.appendChild(s);
  }, []);

  return (
    <section className="section" id="shop">
      <SectionHead num="01" kicker="Order online" title="The bake" scriptWord="board" meta={<span>Updated weekly<br />Fresh from the kitchen</span>} />
      <div className="bakeboard-intro reveal">
        <div className="lede">"Whatever's in season, whatever's good. I bake it once, you take it home." </div>
      </div>
      <div id="kck-shop" className="reveal" />
    </section>
  );
}

// ---------- Maternity / schedule notice ----------
function MaternityNotice() {
  // Kelly is due in ~8 weeks (late June 2026), planning 3-4 months off.
  const milestones = [
    { when: "Now → late June", label: "Last bakes before baby", body: "Full bake board, market Saturdays, custom cakes booking up fast.", state: "open" },
    { when: "Late June 2026", label: "Oven cools down", body: "Final pickup day before maternity leave. Cakes & loaves only — no new orders past this.", state: "soft" },
    { when: "July → October", label: "On maternity leave", body: "Three to four months off, more or less. Sleeping when the baby sleeps. Eating other people's baking for once.", state: "rest" },
    { when: "Late October", label: "Back to the kitchen", body: "Returning gently — small bake board to start, market Saturdays first, custom cakes once we've found our rhythm.", state: "soft" }
  ];
  const weeksToGo = 8;
  return (
    <section className="section" id="diary" style={{ paddingTop: 0 }}>
      <SectionHead num="02" kicker="A note from the kitchen" title="A little baker on the" scriptWord="way" meta={<span>Maternity leave<br />Late June – October '26</span>} />
      <div className="maternity reveal">
        <aside className="maternity-aside">
          <div className="weeks">
            <span className="big-num">{weeksToGo}</span>
            <span className="lab">weeks to go</span>
          </div>
          <p className="aside-copy">
            Some happy news from the kitchen — a <em>little baker</em> is on the way.
            I'll be hanging up my apron in late June for three to four months of maternity leave,
            then easing back to the oven before the year is out.
          </p>
          <p className="aside-copy thanks">
            Thank you for the years of orders, the birthday cakes,
            the Saturday-morning hellos. The oven will be back. <span className="script-inline">— Kelly</span>
          </p>
        </aside>
        <ol className="timeline">
          {milestones.map((m, i) => (
            <li key={i} className={"tl " + m.state}>
              <div className="tl-dot" aria-hidden="true" />
              <div className="tl-when">{m.when}</div>
              <div className="tl-body">
                <h4>{m.label}</h4>
                <p>{m.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ---------- About ----------
function About() {
  return (
    <section className="section" id="about" style={{ paddingTop: 0 }}>
      <SectionHead num="03" kicker="A little about" title="Hi, I'm" scriptWord="Kelly" meta={<span>Baker · Owner<br />Recipe-keeper-in-chief</span>} />
      <div className="about-grid">
        <div className="poly-stack reveal" aria-hidden="true">
          <div className="poly p1 solo">
            <div className="tape" />
            <img src="assets/kelly-portrait.jpg" alt="Kelly" />
            <div className="cap">that's me</div>
          </div>
        </div>
        <div className="about-copy reveal">
          <h3 className="eyebrow">Family recipe no. 042</h3>
          <h2 className="display">
            I've been baking since I was tall enough to <em>lick the beaters</em>.
          </h2>
          <p>
            Kelly's Country Kitchen started the way all the best things do — friends asking for "just one more"
            of whatever I'd brought along. These days I bake out of my own kitchen for locals, neighbours,
            birthdays, weekends, and anyone who misses the taste of something proper homemade.
          </p>
          <div className="recipe-card">
            <p className="pull">If it's worth baking, it's worth baking slowly.</p>
            <ul className="ingredients-list">
              <li data-i="01" data-q="always"><span>Real butter, never margarine</span><span className="dots" /></li>
              <li data-i="02" data-q="always"><span>Free-range eggs from the farm down the road</span><span className="dots" /></li>
              <li data-i="03" data-q="always"><span>Fruit when it's in, never when it isn't</span><span className="dots" /></li>
              <li data-i="04" data-q="never"><span>Stabilisers, preservatives, premixes</span><span className="dots" /></li>
              <li data-i="05" data-q="never"><span>Anything I wouldn't feed my own family</span><span className="dots" /></li>
            </ul>
          </div>
          <div className="about-signature">
            <span className="sig">Kelly</span>
            <span className="role">Baker, founder<br />Est. 2019</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Values ----------
function Values() {
  const v = [
    { num: "i", title: "Baked", em: "fresh", body: "Every order is made the day before pickup. No freezers, no shortcuts, no mystery ingredients." },
    { num: "ii", title: "Old", em: "fashioned", body: "Family favourites passed down through handwritten cards and flour-dusted notebooks." },
    { num: "iii", title: "Made with", em: "love", body: "Every loaf, slice and cake leaves the kitchen the way I'd serve it to my own family." }
  ];
  return (
    <section className="section" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="values-grid reveal">
        {v.map((x, i) => (
          <div className="value" key={i}>
            <span className="num">No. {x.num}</span>
            <h3>{x.title} <em>{x.em}</em></h3>
            <p>{x.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Gallery ----------
function Gallery() {
  const tiles = [
    { c: "t1", l: "Saturday spread", real: "assets/hero-cake-board.jpg" },
    { c: "t2", l: "Cooling rack" },
    { c: "t3", l: "Kelly's hands" },
    { c: "t4", l: "Berry close-up" },
    { c: "t5", l: "Old recipe book" },
    { c: "t6", l: "Market morning" }
  ];
  return (
    <section className="section" id="gallery" style={{ paddingTop: 0 }}>
      <SectionHead num="04" kicker="From the kitchen" title="Recent" scriptWord="bakes" meta={<span>Following on Instagram<br />@kellyscountrykitchen</span>} />
      <div className="gallery reveal">
        {tiles.map((t, i) => (
          <div key={i} className={"tile " + t.c + (t.real ? " real" : "")} data-label={t.l}>
            {t.real && <img src={t.real} alt={t.l} />}
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Contact ----------
function Contact() {
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    e.target.reset();
  };
  return (
    <section className="section" id="contact" style={{ paddingTop: 0 }}>
      <SectionHead num="05" kicker="Get in touch" title="Drop me a" scriptWord="note" meta={<span>I read every message<br />Reply within 24 hrs</span>} />
      <div className="contact-grid">
        <form className="note-card reveal" onSubmit={submit}>
          <div className="stamp-tl" aria-hidden="true" />
          <h4 className="salutation">Dear Kelly,</h4>
          <p>
            I'd love to ask about <em style={{ fontStyle: "italic", color: "var(--accent)" }}>a custom order</em> /
            a market pickup / a wholesale chat. Here are the details —
          </p>
          <div className="note-fields">
            <div className="field">
              <label>Your name</label>
              <input type="text" required defaultValue="" placeholder="First & last" />
            </div>
            <div className="field">
              <label>Phone</label>
              <input type="tel" placeholder="Optional" />
            </div>
            <div className="field full">
              <label>Email</label>
              <input type="email" required placeholder="hello@example.com" />
            </div>
            <div className="field full">
              <label>What are you after?</label>
              <select defaultValue="cake">
                <option value="cake">Celebration or birthday cake</option>
                <option value="biscuits">Biscuits & slices</option>
                <option value="bread">Bread & buns</option>
                <option value="weekly">Weekly market order</option>
                <option value="wholesale">Cafe / wholesale</option>
                <option value="hi">Just saying hi</option>
              </select>
            </div>
            <div className="field full">
              <label>Tell me about it</label>
              <textarea required placeholder="How many, when you'd like it, any allergies or special requests..." />
            </div>
          </div>
          <div className="note-actions">
            <button className="btn primary" type="submit">
              {sent ? "Sent — thanks!" : "Send the note"} <span className="arr" />
            </button>
            <span className="note-meta">Yours in butter · K.</span>
          </div>
        </form>
        <aside className="contact-side reveal">
          <div className="contact-block">
            <div className="lab">Email</div>
            <p className="val">hello@kellyscountrykitchen.com.au</p>
          </div>
          <div className="contact-block">
            <div className="lab">Pickup & delivery</div>
            <p className="val">Local pickup by arrangement. Happy to drop off bigger orders nearby.</p>
          </div>
          <div className="contact-block hours">
            <div className="lab">Baking hours</div>
            <div className="val">
              <span>Tue – Fri</span><span>7am – 3pm</span>
              <span>Saturday</span><span>6am – 12pm market</span>
              <span>Sun – Mon</span><span>Resting the oven</span>
            </div>
          </div>
          <div className="contact-block">
            <div className="lab">Following</div>
            <p className="val">@kellyscountrykitchen</p>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <h5>Kelly's Country Kitchen</h5>
          <h2 className="big">A homestyle bakery, one <em>oven</em>, two hands.</h2>
          <p style={{ color: "rgba(255,255,255,0.7)", maxWidth: "42ch" }}>
            Small-batch cakes, biscuits, slices and breads from old-fashioned recipes.
            Bake board updated every Sunday night.
          </p>
        </div>
        <div>
          <h5>The bakery</h5>
          <ul>
            <li><a href="#shop">Bake board</a></li>
            <li><a href="#diary">This week</a></li>
            <li><a href="#about">About Kelly</a></li>
            <li><a href="#gallery">Gallery</a></li>
          </ul>
        </div>
        <div>
          <h5>Order</h5>
          <ul>
            <li><a href="#contact">Custom cakes</a></li>
            <li><a href="#contact">Market preorder</a></li>
            <li><a href="#contact">Wholesale</a></li>
            <li><a href="#contact">Get in touch</a></li>
          </ul>
        </div>
        <div>
          <h5>Elsewhere</h5>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Saturday market</a></li>
            <li><a href="mailto:hello@kellyscountrykitchen.com.au">Email Kelly</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Kelly's Country Kitchen · ABN 00 000 000 000</span>
        <span>Made with butter in regional Australia</span>
      </div>
    </footer>
  );
}

// ---------- Cart Drawer ----------
function CartDrawer({ open, onClose, cart, onQty }) {
  const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
  return (
    <>
      <div className={"scrim " + (open ? "open" : "")} onClick={onClose} />
      <aside className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
        <div className="drawer-head">
          <h3>Your <em>basket</em></h3>
          <button className="drawer-close" onClick={onClose}>×</button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ? (
            <div className="drawer-empty">
              <img src="assets/KCK-whisk-cherry.png" alt="" />
              Nothing here yet — <br/>fill it up with something good.
            </div>
          ) : (
            cart.map((i) => (
              <div className="cart-row" key={i.id}>
                <div className="pic" />
                <div>
                  <div className="nm">{i.name}</div>
                  <div className="ctrl">
                    <button onClick={() => onQty(i.id, -1)}>−</button>
                    {i.qty}
                    <button onClick={() => onQty(i.id, 1)}>+</button>
                  </div>
                </div>
                <div className="pr">${i.price * i.qty}</div>
              </div>
            ))
          )}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="drawer-total">
              <span>Total <em style={{fontFamily:"var(--script)", fontStyle:"normal", color:"var(--accent)"}}>so far</em></span>
              <span className="v">${total.toFixed(2)}</span>
            </div>
            <a href="#contact" className="btn primary" onClick={onClose}>Checkout via order note <span className="arr" /></a>
            <div className="note">Pickup or local delivery · Pay on collection</div>
          </div>
        )}
      </aside>
    </>
  );
}

// ---------- Tweaks ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cherry",
  "hero": "editorial",
  "density": "default",
  "texture": "noise",
  "showRibbon": true
}/*EDITMODE-END*/;

function Tweaks({ tweaks, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks" defaultPos={{ right: 20, bottom: 20 }}>
      <window.TweakSection title="Theme">
        <window.TweakRadio
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "cherry", label: "Cherry" },
            { value: "sage", label: "Sage" },
            { value: "linen", label: "Linen" },
            { value: "midnight", label: "Midnight" }
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Hero variant">
        <window.TweakRadio
          value={tweaks.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "chalkboard", label: "Bake Board" },
            { value: "fullphoto", label: "Full Photo" }
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Density">
        <window.TweakRadio
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "cozy", label: "Cozy" },
            { value: "default", label: "Default" },
            { value: "airy", label: "Airy" }
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Background texture">
        <window.TweakRadio
          value={tweaks.texture}
          onChange={(v) => setTweak("texture", v)}
          options={[
            { value: "none", label: "Clean" },
            { value: "noise", label: "Noise" },
            { value: "paper", label: "Paper" },
            { value: "grid", label: "Grid" }
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Marquee ribbon">
        <window.TweakToggle value={tweaks.showRibbon} onChange={(v) => setTweak("showRibbon", v)} label="Show under hero" />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// ---------- App ----------
function App() {
  const [cart, setCart] = useState([]);
  const [drawerOpen, setDrawerOpen] = useState(false);

  // Locked-in design choices (formerly Tweaks)
  const HERO_VARIANT = "fullphoto"; // editorial | chalkboard | fullphoto
  const SHOW_RIBBON = false;

  useReveal();

  const addToCart = (item) => {
    setCart((c) => {
      const ex = c.find((x) => x.id === item.id);
      if (ex) return c.map((x) => x.id === item.id ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { id: item.id, name: item.name, price: item.price, qty: 1 }];
    });
    setDrawerOpen(true);
  };
  const setQty = (id, delta) => {
    setCart((c) =>
      c
        .map((x) => x.id === id ? { ...x, qty: x.qty + delta } : x)
        .filter((x) => x.qty > 0)
    );
  };
  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  const Hero = HERO_VARIANT === "chalkboard" ? HeroChalkboard : HERO_VARIANT === "fullphoto" ? HeroFullPhoto : HeroEditorial;

  return (
    <div className="app">
      <TopBar cartCount={cartCount} onCartOpen={() => setDrawerOpen(true)} />
      <Hero />
      {SHOW_RIBBON && <Ribbon />}
      <Shop />
      <MaternityNotice />
      <About />
      <Values />
      <Gallery />
      <Contact />
      <Footer />
      <CartDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} cart={cart} onQty={setQty} />
    </div>
  );
}

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