/* PC Liquors — public storefront UI kit.
   Composes the design-system primitives (window.PCLiquorsDesignSystem_ae5d4f)
   into a rich, interactive marketing + shop experience. */
const DS = window.PCLiquorsDesignSystem_ae5d4f;
const { Button, Badge, Tag, Input, Card } = DS;

/* ---------- inline icons (Lucide-style, 1.8px stroke) ---------- */
const I = (p) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={p.w||1.8} strokeLinecap="round" strokeLinejoin="round" style={p.style}>{p.children}</svg>;
const IconSearch = (p)=><I {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></I>;
const IconBag = (p)=><I {...p}><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18M16 10a4 4 0 01-8 0"/></I>;
const IconWine = (p)=><I {...p}><path d="M8 22h8M12 15v7M7 2h10l-1 7a4 4 0 01-8 0L7 2zM5.5 9h13"/></I>;
const IconPin = (p)=><I {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0116 0z"/><circle cx="12" cy="10" r="3"/></I>;
const IconClock = (p)=><I {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></I>;
const IconPhone = (p)=><I {...p}><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 11.5a16 16 0 006 6l1.1-1.1a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z"/></I>;
const IconStar = (p)=><I {...p}><path d="M12 2l3 6.3 7 1-5 4.9 1.2 7L12 18.8 5.8 21.2 7 14.2l-5-4.9 7-1L12 2z"/></I>;
const IconTruck = (p)=><I {...p}><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7M5.5 19a2 2 0 100-4 2 2 0 000 4zM18.5 19a2 2 0 100-4 2 2 0 000 4z"/></I>;
const IconLeaf = (p)=><I {...p}><path d="M11 20A7 7 0 014 13c0-6 8-9 16-9 0 8-4 13-9 13z"/><path d="M4 21c4-4 6-6 9-7"/></I>;
const IconArrow = (p)=><I {...p}><path d="M5 12h14M13 6l6 6-6 6"/></I>;
const IconX = (p)=><I {...p}><path d="M18 6L6 18M6 6l12 12"/></I>;
const IconMinus = (p)=><I {...p}><path d="M5 12h14"/></I>;
const IconPlus = (p)=><I {...p}><path d="M12 5v14M5 12h14"/></I>;
const IconShield = (p)=><I {...p}><path d="M12 2l8 4v6c0 5-3.4 8.5-8 10-4.6-1.5-8-5-8-10V6l8-4z"/></I>;
const IconID = (p)=><I {...p}><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="12" r="2"/><path d="M14 10h5M14 14h5M4 17c.6-1.6 2-2.5 4-2.5s3.4.9 4 2.5"/></I>;
const IconMenu = (p)=><I {...p}><path d="M3 12h18M3 6h18M3 18h18"/></I>;

/* ---------- brand + business data (Palm Valley Liquors, dba PC Liquors) ---------- */
const LOCATIONS = [
  { name: "PC Liquors — Palm Valley", status: "open", address: "4500 E Palm Valley Blvd, Unit 114", city: "Round Rock, TX 78665", phone: "(737) 205-7029", hours: "Mon–Sat 10am–9pm · Sun Closed" },
  { name: "PC Liquors — Pflugerville", status: "soon", address: "Location details announced soon", city: "Pflugerville, TX", phone: "—", hours: "Opening soon" },
];
const DELIVERY_PARTNERS = [
  { name: "Uber Eats", href: "https://www.ubereats.com/" },
  { name: "DoorDash", href: "https://www.doordash.com/" },
  { name: "Instacart", href: "https://www.instacart.com/" },
  { name: "Gopuff", href: "https://www.gopuff.com/" },
];
const PROMO = { active: true, eyebrow: "New Year, New Cellar", text: "15% off all sparkling wine & champagne, in-store and online, through Jan 5.", cta: "Shop the sale" };

/* ---------- product placeholder (bottle silhouette in brand tones) ---------- */
function Bottle({ tone }) {
  const tones = {
    whiskey: ["#C8962B", "#8A6418"], wine: ["#6B1E26", "#4E141B"],
    vodka: ["#9FB7C4", "#5E7480"], gin: ["#244A3B", "#18342A"],
    tequila: ["#D9AE4C", "#A87B22"], rum: ["#7A4A22", "#4E2E14"],
  };
  const [a, b] = tones[tone] || tones.whiskey;
  return (
    <div className="pl-bottle">
      <div className="pl-bottle__neck" />
      <div className="pl-bottle__body" style={{ background: `linear-gradient(160deg, ${a}, ${b})` }}>
        <div className="pl-bottle__label" />
      </div>
    </div>
  );
}

const PRODUCTS = [
  { name: "Buffalo Trace", kind: "Kentucky Bourbon", tone: "whiskey", price: 28.99, cat: "Whiskey", tag: "Staff pick" },
  { name: "Caymus Cabernet", kind: "Napa Valley, 2021", tone: "wine", price: 89.00, cat: "Wine", tag: "Rare" },
  { name: "Grey Goose", kind: "French Vodka, 750ml", tone: "vodka", price: 34.49, cat: "Vodka" },
  { name: "Hendrick's Gin", kind: "Scotland, 750ml", tone: "gin", price: 36.99, cat: "Gin" },
  { name: "Don Julio 1942", kind: "Añejo Tequila", tone: "tequila", price: 159.99, cat: "Tequila", tag: "Premium" },
  { name: "Diplomático Reserva", kind: "Venezuelan Rum", tone: "rum", price: 44.99, cat: "Rum" },
  { name: "Macallan 12", kind: "Single Malt Scotch", tone: "whiskey", price: 74.99, cat: "Whiskey", tag: "Staff pick" },
  { name: "Whispering Angel", kind: "Côtes de Provence Rosé", tone: "wine", price: 22.99, cat: "Wine" },
];

const CATS = ["All", "Whiskey", "Wine", "Vodka", "Gin", "Tequila", "Rum"];

/* ---------- age gate ---------- */
function AgeGate({ onPass }) {
  const [denied, setDenied] = React.useState(false);
  return (
    <div className="agegate">
      <div className="agegate__card">
        <IconWine s={30} style={{ color: "var(--gold-500)" }} />
        <h2>You must be 21 or older</h2>
        <p>PC Liquors sells alcohol. Please confirm your age to enter the site.</p>
        {denied ? <p className="agegate__denied">You must be 21+ to view this site.</p> : (
          <div className="agegate__actions">
            <Button variant="primary" size="lg" onClick={onPass}>I'm 21 or older</Button>
            <Button variant="ghost" size="lg" onClick={() => setDenied(true)}>I'm under 21</Button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- promo banner ---------- */
function PromoBanner({ onShop }) {
  const [dismissed, setDismissed] = React.useState(false);
  if (!PROMO.active || dismissed) return null;
  return (
    <div className="promo-strip">
      <span className="promo-strip__eyebrow">{PROMO.eyebrow}</span>
      <span className="promo-strip__text">{PROMO.text}</span>
      <button className="promo-strip__cta" onClick={onShop}>{PROMO.cta} <IconArrow s={13} /></button>
      <button className="promo-strip__x" aria-label="Dismiss" onClick={() => setDismissed(true)}><IconX s={15} /></button>
    </div>
  );
}

/* ---------- header ---------- */
function SiteHeader({ route, go, cartCount, onCart, mobileOpen, onToggleMobile }) {
  const link = (id, label) => (
    <button className={"site-nav__link" + (route === id ? " is-active" : "")} onClick={() => go(id)}>{label}</button>
  );
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <button className="site-brand" onClick={() => go("home")}>
          <img src="./assets/logo-horizontal-dark.svg" alt="PC Liquors" />
        </button>
        <nav className="site-nav">
          {link("home", "Home")}
          {link("shop", "Shop")}
          {link("about", "About")}
          {link("contact", "Visit & Contact")}
          {link("faq", "Policies & FAQ")}
        </nav>
        <div className="site-header__actions">
          <button className="site-icon-btn" aria-label="Search"><IconSearch s={18} /></button>
          <button className="site-icon-btn site-icon-btn--cart" aria-label="Cart" onClick={onCart}>
            <IconBag s={18} />{cartCount > 0 && <span className="site-icon-btn__badge">{cartCount}</span>}
          </button>
          <a className="site-admin-link" href="./admin/">Owner / Admin Login</a>
          <Button size="sm" variant="primary" rightIcon={<IconBag s={15} />} onClick={() => go("shop")}>Order Online</Button>
          <button className="site-menu-btn" aria-label="Menu" aria-expanded={mobileOpen} onClick={onToggleMobile}>
            {mobileOpen ? <IconX s={20} /> : <IconMenu s={20} />}
          </button>
        </div>
      </div>
      <nav className={"site-mobile-nav" + (mobileOpen ? " is-open" : "")}>
        {link("home", "Home")}
        {link("shop", "Shop")}
        {link("about", "About")}
        {link("contact", "Visit & Contact")}
        {link("faq", "Policies & FAQ")}
        <a className="site-mobile-nav__admin" href="./admin/">Owner / Admin Login</a>
      </nav>
    </header>
  );
}

/* ---------- hero ---------- */
function Hero({ go }) {
  return (
    <section className="hero">
      <div className="hero__bg" />
      <div className="hero__inner">
        <div className="hero__copy">
          <span className="hero__eyebrow">Fine Wines & Spirits · Round Rock, TX</span>
          <h1 className="hero__title">The bottle you<br/>came for.<span className="hero__amp"> &amp; </span>three<br/>you didn't.</h1>
          <p className="hero__lead">A thoughtfully curated neighborhood shop on Palm Valley Blvd — rare whiskey, grower champagne, and everyday pours, with a clerk who actually knows the shelf.</p>
          <div className="hero__cta">
            <Button size="lg" variant="primary" rightIcon={<IconArrow s={17} />} onClick={() => go("shop")}>Browse the shelf</Button>
            <Button size="lg" variant="outline" onClick={() => go("contact")}>Visit the store</Button>
          </div>
          <div className="hero__trust">
            <span><IconTruck s={16} /> Pickup &amp; delivery via Uber Eats, DoorDash &amp; more</span>
            <span><IconShield s={16} /> ID checked on every order · 21+</span>
          </div>
        </div>
        <div className="hero__art">
          <div className="hero__shelf">
            {["whiskey","wine","gin","tequila"].map((t,i)=>(
              <div className="hero__bottle" key={i} style={{ ["--d"]: i }}><Bottle tone={t} /></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- value strip ---------- */
function ValueStrip() {
  const items = [
    { icon: <IconLeaf s={20} />, t: "Curated, not crowded", d: "Every label is chosen and tasted by our team." },
    { icon: <IconTruck s={20} />, t: "Pickup or delivery", d: "In-store pickup, or order out through our delivery partners." },
    { icon: <IconWine s={20} />, t: "Ask our staff", d: "Pairing help in-store, any day we're open." },
  ];
  return (
    <section className="vstrip">
      {items.map((it, i) => (
        <div className="vstrip__item" key={i}>
          <span className="vstrip__icon">{it.icon}</span>
          <div><div className="vstrip__t">{it.t}</div><div className="vstrip__d">{it.d}</div></div>
        </div>
      ))}
    </section>
  );
}

/* ---------- product card ---------- */
function ProductCard({ p, onAdd }) {
  return (
    <article className="pcard">
      <div className="pcard__media"><Bottle tone={p.tone} />
        {p.tag && <span className="pcard__tag"><Badge tone={p.tag === "Rare" || p.tag === "Premium" ? "wine" : "gold"}>{p.tag}</Badge></span>}
      </div>
      <div className="pcard__body">
        <div className="pcard__cat">{p.cat}</div>
        <div className="pcard__name">{p.name}</div>
        <div className="pcard__kind">{p.kind}</div>
        <div className="pcard__foot">
          <span className="pcard__price">${p.price.toFixed(2)}</span>
          <Button size="sm" variant="secondary" onClick={onAdd}>Add</Button>
        </div>
      </div>
    </article>
  );
}

/* ---------- featured (home) ---------- */
function Featured({ go, onAdd }) {
  return (
    <section className="section">
      <div className="section__head">
        <div>
          <span className="section__eyebrow">This week on the shelf</span>
          <h2 className="section__title">Staff picks &amp; new arrivals</h2>
        </div>
        <Button variant="ghost" rightIcon={<IconArrow s={15} />} onClick={() => go("shop")}>See all</Button>
      </div>
      <div className="pgrid">
        {PRODUCTS.slice(0, 4).map((p, i) => <ProductCard key={i} p={p} onAdd={() => onAdd(p)} />)}
      </div>
    </section>
  );
}

/* ---------- delivery partner strip ---------- */
function DeliveryStrip() {
  return (
    <section className="delivery-strip">
      <div className="delivery-strip__inner">
        <div className="delivery-strip__head">
          <IconTruck s={20} />
          <div><b>Order delivery through our partners</b><span>Standard delivery fees &amp; ID check apply per platform.</span></div>
        </div>
        <div className="delivery-strip__logos">
          {DELIVERY_PARTNERS.map((d) => (
            <a key={d.name} className="delivery-chip" href={d.href} target="_blank" rel="noreferrer">{d.name}<IconArrow s={13} /></a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- editorial band ---------- */
function Editorial() {
  return (
    <section className="editorial">
      <div className="editorial__inner">
        <span className="editorial__eyebrow">Notes from the counter</span>
        <p className="editorial__quote">"We don't carry everything. We carry the things we'd open ourselves."</p>
        <div className="editorial__by">— The PC Liquors team, Round Rock</div>
      </div>
    </section>
  );
}

/* ---------- shop ---------- */
function Shop({ onAdd }) {
  const [cat, setCat] = React.useState("All");
  const list = cat === "All" ? PRODUCTS : PRODUCTS.filter((p) => p.cat === cat);
  return (
    <section className="section section--shop">
      <div className="shop__head">
        <span className="section__eyebrow">The shelf</span>
        <h2 className="section__title">Shop the store</h2>
        <p className="shop__sub">Order online for in-store pickup, or check our delivery partners below. {PRODUCTS.length} of 400+ labels shown.</p>
      </div>
      <div className="shop__bar">
        <label className="shop__search"><IconSearch s={17} /><input placeholder="Search whiskey, brand, region…" /></label>
        <div className="shop__cats">
          {CATS.map((c) => <Tag key={c} active={c === cat} onClick={() => setCat(c)} >{c}</Tag>)}
        </div>
      </div>
      <div className="pgrid">
        {list.map((p, i) => <ProductCard key={i} p={p} onAdd={() => onAdd(p)} />)}
      </div>
      <DeliveryStrip />
    </section>
  );
}

/* ---------- about ---------- */
function About() {
  return (
    <section className="section section--about">
      <div className="about">
        <span className="section__eyebrow">Our story</span>
        <h2 className="section__title">A Round Rock original, growing carefully</h2>
        <p className="about__lead">PC Liquors started as Palm Valley Liquors, a single shop on Palm Valley Blvd in Round Rock. We're a women-led, independent store — every bottle on the shelf is one we'd pour ourselves.</p>
        <div className="about__grid">
          <Card padded>
            <b>Round Rock — open now</b>
            <p>Our original location, at the intersection of Palm Valley Blvd and Red Bud Lane. Walk-ins welcome, staff on hand for pairing help.</p>
          </Card>
          <Card padded>
            <b>Pflugerville — opening soon</b>
            <p>Our second location, launching under the PC Liquors name. Details on address and opening date will post here first.</p>
          </Card>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ / policy ---------- */
const FAQS = [
  { q: "Do I need to be 21 to order?", a: "Yes. Every online order and in-store purchase requires valid, government-issued photo ID showing you are 21 or older, no exceptions." },
  { q: "How does ID verification work for delivery?", a: "Delivery orders placed through our partners (Uber Eats, DoorDash, Instacart, Gopuff) require the person accepting the delivery to show ID matching the name on the order. Orders are refused if ID can't be verified or the recipient appears intoxicated." },
  { q: "Can I pick up in-store?", a: "Yes — order online and select in-store pickup at checkout. Bring ID; orders are held for 48 hours." },
  { q: "What payment methods do you accept?", a: "Major credit/debit cards online via Stripe, and cards, cash or approved mobile payments in-store." },
  { q: "What's your return policy?", a: "Unopened bottles in original condition can be returned within 7 days with a receipt. We can't accept returns on opened bottles, per state liquor regulations." },
  { q: "Do you deliver outside your partner apps?", a: "Not yet — all delivery currently runs through our third-party partners so every order gets ID-checked at the door." },
];
function FAQ() {
  return (
    <section className="section section--faq">
      <span className="section__eyebrow">Policies</span>
      <h2 className="section__title">Liquor policy &amp; FAQ</h2>
      <div className="faq-list">
        {FAQS.map((f,i)=>(
          <div className="faq-item" key={i}>
            <div className="faq-item__q"><IconID s={16} />{f.q}</div>
            <p className="faq-item__a">{f.a}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- contact ---------- */
function Contact() {
  return (
    <section className="section section--contact">
      <div className="contact">
        <div className="contact__info">
          <span className="section__eyebrow">Visit &amp; contact</span>
          <h2 className="section__title">Come by the shop</h2>
          <p className="contact__lead">Street parking out front, walk-ins welcome, and staff on hand to help you pick.</p>
          {LOCATIONS.map((loc) => (
            <ul className="contact__rows" key={loc.name}>
              <li className="contact__loctitle">{loc.name} {loc.status === "soon" && <Badge tone="gold">Coming soon</Badge>}</li>
              <li><span className="contact__ic"><IconPin s={18} /></span><div><b>{loc.address}</b><span>{loc.city}</span></div></li>
              <li><span className="contact__ic"><IconClock s={18} /></span><div><b>{loc.hours}</b></div></li>
              <li><span className="contact__ic"><IconPhone s={18} /></span><div><b>{loc.phone}</b></div></li>
            </ul>
          ))}
          <div className="contact__map"><span><IconPin s={16}/> Map placeholder — drop in Google Maps embed</span></div>
        </div>
        <Card className="contact__form" padded>
          <h3 className="contact__formtitle">Reserve a bottle</h3>
          <p className="contact__formsub">Tell us what you're after — we'll set it aside at our Round Rock store.</p>
          <div className="field"><label>Your name</label><Input placeholder="Jordan Ellis" /></div>
          <div className="field"><label>Email</label><Input placeholder="you@email.com" /></div>
          <div className="field"><label>What can we pull for you?</label><Input placeholder="A peaty Islay scotch under $80…" /></div>
          <Button variant="primary" fullWidth>Send request</Button>
          <p className="contact__fine">Must be 21+. We'll confirm by email before holding.</p>
        </Card>
      </div>
    </section>
  );
}

/* ---------- footer ---------- */
function SiteFooter({ go }) {
  return (
    <footer className="site-footer">
      <div className="site-footer__inner">
        <div className="site-footer__brand">
          <img src="./assets/logo-horizontal-light.svg" alt="PC Liquors" />
          <p>Fine wines &amp; spirits for the neighborhood — Round Rock, with Pflugerville opening soon.</p>
          <div className="site-footer__delivery">
            {DELIVERY_PARTNERS.map((d)=>(<a key={d.name} href={d.href} target="_blank" rel="noreferrer">{d.name}</a>))}
          </div>
        </div>
        <div className="site-footer__cols">
          <div><h4>Shop</h4><button onClick={()=>go("shop")}>Whiskey</button><button onClick={()=>go("shop")}>Wine</button><button onClick={()=>go("shop")}>Spirits</button></div>
          <div><h4>Visit</h4><button onClick={()=>go("contact")}>Store hours</button><button onClick={()=>go("contact")}>Directions</button><button onClick={()=>go("faq")}>Policies</button></div>
          <div><h4>Company</h4><button onClick={()=>go("about")}>About us</button><button onClick={()=>go("faq")}>FAQ</button><button onClick={()=>go("contact")}>Contact</button></div>
        </div>
      </div>
      <div className="site-footer__bar">
        <span>© 2026 PC Liquors · Round Rock, TX · TABC permit displayed in-store</span>
        <span className="site-footer__bar-right">Please drink responsibly · 21+ · <a href="./admin/">Owner / Admin Login</a></span>
      </div>
    </footer>
  );
}

/* ---------- cart drawer ---------- */
function CartDrawer({ open, items, onClose, onQty, onCheckout, checking, checkoutError }) {
  const subtotal = items.reduce((s, it) => s + it.p.price * it.qty, 0);
  return (
    <div className={"cart-drawer" + (open ? " is-open" : "")}>
      <div className="cart-drawer__scrim" onClick={onClose} />
      <div className="cart-drawer__panel">
        <div className="cart-drawer__head"><h3>Your order</h3><button onClick={onClose}><IconX s={18} /></button></div>
        {items.length === 0 ? <p className="cart-drawer__empty">Your cart is empty. Add a bottle from the shop.</p> : (
          <React.Fragment>
            <div className="cart-drawer__list">
              {items.map((it) => (
                <div className="cart-line" key={it.p.name}>
                  <div className="cart-line__name"><b>{it.p.name}</b><span>${it.p.price.toFixed(2)}</span></div>
                  <div className="cart-line__qty">
                    <button onClick={() => onQty(it.p, it.qty - 1)}><IconMinus s={13} /></button>
                    <span>{it.qty}</span>
                    <button onClick={() => onQty(it.p, it.qty + 1)}><IconPlus s={13} /></button>
                  </div>
                </div>
              ))}
            </div>
            <div className="cart-drawer__sub"><span>Subtotal</span><b>${subtotal.toFixed(2)}</b></div>
            {checkoutError && <p className="cart-drawer__err">{checkoutError}</p>}
            <Button variant="primary" fullWidth onClick={onCheckout} disabled={checking}>{checking ? "Redirecting…" : "Checkout with card"}</Button>
            <p className="contact__fine">Must be 21+ to order. ID checked at pickup or delivery.</p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ---------- cart toast ---------- */
function CartToast({ item }) {
  if (!item) return null;
  return (
    <div className="cart-toast">
      <DS.Toast tone="success">Added <b>{item.name}</b> to your order.</DS.Toast>
    </div>
  );
}

/* ---------- app ---------- */
function PCLiquorsSite() {
  const [route, setRoute] = React.useState("home");
  const [toast, setToast] = React.useState(null);
  const [verified, setVerified] = React.useState(() => sessionStorage.getItem("pc_age_ok") === "1");
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [checking, setChecking] = React.useState(false);
  const [checkoutError, setCheckoutError] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const go = (r) => { setRoute(r); setMobileOpen(false); window.scrollTo({ top: 0 }); };
  const onAdd = (p) => {
    setCart((c) => {
      const found = c.find((it) => it.p.name === p.name);
      if (found) return c.map((it) => it.p.name === p.name ? { ...it, qty: it.qty + 1 } : it);
      return [...c, { p, qty: 1 }];
    });
    setToast(p); clearTimeout(window.__pcT); window.__pcT = setTimeout(() => setToast(null), 2200);
  };
  const onQty = (p, qty) => setCart((c) => qty <= 0 ? c.filter((it) => it.p.name !== p.name) : c.map((it) => it.p.name === p.name ? { ...it, qty } : it));
  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  const onCheckout = async () => {
    setChecking(true); setCheckoutError(null);
    try {
      const res = await fetch("/api/create-checkout-session", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: cart.map((it) => ({ name: it.p.name, price: it.p.price, qty: it.qty })) }),
      });
      const data = await res.json();
      if (data && data.url) { window.location.href = data.url; return; }
      throw new Error(data && data.error ? data.error : "Checkout is not configured yet.");
    } catch (e) {
      setCheckoutError("Stripe checkout isn't wired up yet — add STRIPE_SECRET_KEY in your Vercel project's environment variables.");
    } finally {
      setChecking(false);
    }
  };

  const passAge = () => { sessionStorage.setItem("pc_age_ok", "1"); setVerified(true); };
  if (!verified) return <AgeGate onPass={passAge} />;

  return (
    <div className="site">
      <PromoBanner onShop={() => go("shop")} />
      <SiteHeader route={route} go={go} cartCount={cartCount} onCart={() => setCartOpen(true)} mobileOpen={mobileOpen} onToggleMobile={() => setMobileOpen((o) => !o)} />
      <main>
        {route === "home" && <React.Fragment><Hero go={go} /><ValueStrip /><Featured go={go} onAdd={onAdd} /><DeliveryStrip /><Editorial /></React.Fragment>}
        {route === "shop" && <Shop onAdd={onAdd} />}
        {route === "about" && <About />}
        {route === "contact" && <Contact />}
        {route === "faq" && <FAQ />}
      </main>
      <SiteFooter go={go} />
      <CartToast item={toast} />
      <CartDrawer open={cartOpen} items={cart} onClose={() => setCartOpen(false)} onQty={onQty} onCheckout={onCheckout} checking={checking} checkoutError={checkoutError} />
    </div>
  );
}

window.PCLiquorsSite = PCLiquorsSite;