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

// Resource resolver: in the standalone-bundled file, window.__resources[id]
// holds an inlined blob URL; otherwise we fall back to the on-disk path.
const __RES = (typeof window !== "undefined" && window.__resources) || {};
const asset = (id, path) => __RES[id] || path;

// ──────────────────────────────────────────────────────────
// Tweak defaults
// ──────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "japonesa",
  "displayFont": "provicali",
  "cardStyle": "editorial",
  "featureLastCard": true,
  "showCoupon": true,
  "showFaq": true,
  "headline": "Sabores que reúnem pessoas."
}/*EDITMODE-END*/;

// ──────────────────────────────────────────────────────────
// Icons
// ──────────────────────────────────────────────────────────
const I = {
  whatsapp: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  ),
  menu: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="16" rx="2"/>
      <path d="M7 8h10M7 12h10M7 16h6"/>
    </svg>
  ),
  delivery: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7h11l3 4h4v6h-3"/>
      <path d="M3 7v10h2"/>
      <circle cx="7" cy="17" r="2"/>
      <circle cx="17" cy="17" r="2"/>
    </svg>
  ),
  instagram: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>
  ),
  arrow: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7"/>
    </svg>
  ),
  copy: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="11" height="11" rx="2"/>
      <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
    </svg>
  ),
  check: (
    <svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12l5 5L20 6"/>
    </svg>
  ),
  plus: (
    <svg style={{width:14, height:14}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  insta: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>
  ),
  wa: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  ),
  waMark: (
    <span className="wa-mark"><img src={asset("waMark", "assets/whatsapp.webp")} alt="" aria-hidden="true" /></span>
  ),
  mail: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 7 9-7"/>
    </svg>
  ),
};

// ──────────────────────────────────────────────────────────
// Brand data
// ──────────────────────────────────────────────────────────
const BRANDS = [
  {
    id: "ela",
    klass: "b-ela",
    num: "01",
    cat: "Pizzaria pop / Forno alto",
    name: "Ela Pizza",
    pitch: "Pizza pop, massa fininha e sabor que grita. A pizzaria que virou cultura de bairro — e ninguém pediu silêncio.",
    placeholderTag: "Food shot · ela pizza",
    logoImg: asset("logoEla", "assets/logo-ela.jpg"),
    foodImg: asset("foodEla", "assets/food-ela.jpg"),
    links: {
      whatsapp: "https://wa.me/5566999022274?text=Ol%C3%A1%20vim%20pelo%20Instagram%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es!%F0%9F%8D%95",
      menu: "https://elapizzadelivery.pedir.online/#/",
      instagram: "https://www.instagram.com/elapizzadelivery?igsh=bzllYXdxd3dsNjE0",
    },
  },
  {
    id: "maki",
    klass: "b-maki",
    num: "02",
    cat: "Sushi & Temakeria · NOVO",
    name: "Maki Maki",
    pitch: "Sushi e temaki para dividir (ou não). Combinados generosos, molhos da casa e aquele wasabi que respeita quem pede.",
    placeholderTag: "Food shot · temaki + combinado",
    logoImg: asset("logoMaki", "assets/logo-maki.jpg"),
    foodImg: asset("foodMaki", "assets/food-maki.jpg"),
    links: {
      whatsapp: "https://wa.me/5566996651183?text=Ol%C3%A1%20vim%20pelo%20Instagram%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es!%F0%9F%8D%A3",
      menu: "https://makimaki.pedir.online/#/",
      instagram: "https://www.instagram.com/makimaki_sushietemaki?igsh=MW03ZmU4OGQ2NTdncQ==",
    },
  },
  {
    id: "riso",
    klass: "b-riso",
    num: "03",
    cat: "Pizzaria clássica / Forno a lenha",
    name: "Riso Pizza",
    pitch: "A pizzaria que abraça. Receitas da nonna, ingredientes simples e aquele cheirinho que faz a casa parar.",
    placeholderTag: "Food shot · pizza margherita",
    logoImg: asset("logoRiso", "assets/logo-riso.jpg"),
    foodImg: asset("foodRiso", "assets/food-riso.jpg"),
    links: {
      whatsapp: "https://wa.me/5566996105078?text=Ol%C3%A1%20vim%20pelo%20Instagram%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es!%F0%9F%8D%95",
      menu: "https://risopizza.pedir.online/#/",
      instagram: "https://www.instagram.com/riso.pizza.delivery?igsh=NnN6cml2cmNnc3Jp",
    },
  },
  {
    id: "baita",
    klass: "b-baita",
    num: "04",
    cat: "Espetos / Fogo alto",
    name: "Baita Espeto",
    pitch: "Espeto de boteco com gente grande na brasa. Tempero forte, ponto exato, embalagem que aguenta o trajeto.",
    placeholderTag: "Food shot · espeto na brasa",
    logoImg: asset("logoBaita", "assets/logo-baita.jpg"),
    foodImg: asset("foodBaita", "assets/food-baita.jpg"),
    links: {
      whatsapp: "https://wa.me/5566996709916?text=Ol%C3%A1%20vim%20pelo%20Instagram%20e%20gostaria%20de%20saber%20mais%20informa%C3%A7%C3%B5es!%20%F0%9F%8D%96",
      menu: "https://baitaespeto.pedir.online/#/",
      instagram: "https://www.instagram.com/baita.espeto?igsh=OGdoY2F3N3c1MWYx",
    },
  },
  {
    id: "kare",
    klass: "b-kare",
    num: "05",
    cat: "Sushi premium / Omakasê",
    name: "Kare Sushi",
    pitch: "Sushi premium para ocasiões que merecem. Peixe selecionado, corte limpo e tempero feito com a calma de quem leva o ofício a sério.",
    placeholderTag: "Food shot · nigiri premium",
    logoImg: asset("logoKare", "assets/logo-kare.jpg"),
    foodImg: asset("foodKare", "assets/food-kare.jpg"),
    links: {
      whatsapp: "https://wa.me/5566997191255?text=Ol%C3%A1%20vim%20pelo%20Instagram%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es!%F0%9F%8D%A3",
      menu: "https://karesushi.pedir.online/#/off",
      instagram: "https://www.instagram.com/kare.sushi.sorriso?igsh=MW0yeTk3dmp6ZHF4NA==",
    },
  },
];

const FAQS = [
  { q: "Preciso baixar algum aplicativo?",
    a: "Não. Tudo funciona direto no navegador do celular. É rápido, leve, e não ocupa memória." },
  { q: "Funciona bem pelo link da bio do Instagram?",
    a: "Sim. O site foi otimizado exatamente para quem chega pelo link da bio. Toques largos, carregamento rápido e atalhos para cada marca." },
  { q: "Cada marca tem WhatsApp próprio?",
    a: "Sim. Ao escolher a marca, você fala direto com o atendimento especializado dela — sem central, sem intermediário." },
  { q: "Como uso o cupom CHEF?",
    a: "Copie o cupom no topo da página, escolha a marca e cole no momento do pedido. Vale para a primeira compra em qualquer operação do grupo." },
  { q: "Vocês entregam em toda a cidade?",
    a: "Atendemos as principais regiões. Cada marca tem sua área de cobertura — confira antes de fechar o pedido." },
];

// ──────────────────────────────────────────────────────────
// Subcomponents
// ──────────────────────────────────────────────────────────
function Topbar() {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#top" className="brand-mark">
          <img src={asset("panelaLogo", "assets/panela-logo.png")} alt="Panela Company" className="brand-logo" />
        </a>
        <nav className="topbar-nav">
          <a href="#marcas">Marcas</a>
          <a href="#sobre">Sobre</a>
        </nav>
      </div>
    </header>
  );
}

function QuickPick() {
  return (
    <div className="quickpick">
      <div className="container">
        <div className="quickpick-strip" role="navigation" aria-label="Atalho de marcas">
          {BRANDS.map(b => (
            <a key={b.id} href={"#brand-" + b.id} className="qp-chip" data-brand={b.id}>
              <span className="swatch">{b.num}</span>
              <span>{b.name}</span>
              <span className="arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function MobileCTABar({ onOpenSheet }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 360);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"mobile-cta-bar" + (visible ? " is-visible" : "")}>
      <button className="pick" onClick={onOpenSheet} aria-label="Escolher marca">
        <span className="dots"><i></i><i></i><i></i></span>
        <span className="col">
          <small>Escolher</small>
          <b>Marca</b>
        </span>
      </button>
    </div>
  );
}

function BrandSheet({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [open]);
  return (
    <div
      className={"brand-sheet" + (open ? " is-open" : "")}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      role="dialog"
      aria-modal="true"
    >
      <div className="brand-sheet-inner">
        <div className="grip"></div>
        <h3>Escolha sua marca</h3>
        <p>Toque para abrir o WhatsApp da operação.</p>
        <div className="brand-sheet-list">
          {BRANDS.map(b => (
            <a key={b.id} href={"#brand-" + b.id} data-brand={b.id} onClick={onClose}>
              <span className="dot">{b.num}</span>
              <span className="meta">
                <b>{b.name}</b>
                <small>{b.cat}</small>
              </span>
              <span className="chev">→</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function VerticalVideoGallery() {
  // In the standalone bundle, only the videos that were actually inlined are
  // available; drop any slot whose video wasn't bundled. In the normal project
  // file (__RES empty) all 8 slots play from disk.
  const allSlots = [1, 2, 3, 4, 5, 6, 7, 8];
  const isBundled = Object.keys(__RES).length > 0;
  const slots = isBundled ? allSlots.filter((n) => __RES["vid" + n]) : allSlots;
  // duplicate once for seamless loop
  const items = [...slots, ...slots];
  const frameRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const [activeDot, setActiveDot] = React.useState(0);

  React.useEffect(() => {
    const frame = frameRef.current;
    if (!frame) return;
    const cards = Array.from(frame.querySelectorAll(".vgallery-card"));

    // Lazy-load videos only as their card enters (or nears) the visible area.
    // This is what keeps the initial mobile payload small — the poster JPG
    // (~50-100KB) shows immediately, the MP4 (~1-15MB) only downloads on demand.
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        const card = e.target;
        const v = card.querySelector("video");
        if (!v) return;
        if (e.isIntersecting) {
          // Lazy-attach src on first reveal
          if (!v.src && v.dataset.src) {
            v.src = v.dataset.src;
            v.load();
          }
          const p = v.play();
          if (p && p.catch) p.catch(() => {});
          // Fade out poster once frame data is ready
          v.addEventListener("loadeddata", () => card.classList.add("is-loaded"), { once: true });
        } else if (!v.paused) {
          v.pause();
        }
      });
    }, { root: frame, rootMargin: "30% 30% 30% 30%", threshold: 0.01 });

    cards.forEach((c) => io.observe(c));

    // Track scroll position for dot pagination (mobile only — when horizontal)
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const isHorizontal = frame.scrollWidth > frame.clientWidth + 10;
        if (!isHorizontal) return;
        const card = frame.querySelector(".vgallery-card");
        if (!card) return;
        const cardW = card.getBoundingClientRect().width + 12; // gap
        const idx = Math.round(frame.scrollLeft / cardW) % slots.length;
        setActiveDot(Math.max(0, idx));
      });
    };
    frame.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => { io.disconnect(); frame.removeEventListener("scroll", onScroll); };
  }, [slots.length]);

  const jumpTo = (i) => {
    const frame = frameRef.current;
    if (!frame) return;
    const card = frame.querySelector(".vgallery-card");
    if (!card) return;
    const cardW = card.getBoundingClientRect().width + 12;
    frame.scrollTo({ left: cardW * i, behavior: "smooth" });
  };

  // Mobile marquee: JS-driven horizontal auto-scroll (bulletproof across
  // devices — does not rely on CSS animation timelines).
  React.useEffect(() => {
    const frame = frameRef.current;
    const track = trackRef.current;
    if (!frame || !track) return;

    const mq = window.matchMedia("(max-width: 720px)");
    let raf = 0;
    let offset = 0;
    let last = 0;
    const SPEED = 36; // px per second

    const isMobile = () => mq.matches;

    const step = (ts) => {
      if (!last) last = ts;
      const dt = (ts - last) / 1000;
      last = ts;
      // half = width of one full (non-duplicated) set of cards
      const half = track.scrollWidth / 2;
      if (half > 0) {
        offset += SPEED * dt;
        if (offset >= half) offset -= half;
        track.style.transform = "translateX(" + (-offset) + "px)";
      }
      raf = requestAnimationFrame(step);
    };

    const start = () => {
      if (raf) return;
      // Disable the CSS keyframe animation; JS owns the transform now.
      track.style.animation = "none";
      last = 0;
      raf = requestAnimationFrame(step);
    };
    const stop = () => {
      cancelAnimationFrame(raf);
      raf = 0;
      track.style.transform = "";
      track.style.animation = "";
    };

    const sync = () => { if (isMobile()) start(); else stop(); };

    sync();
    const onVis = () => {
      if (document.hidden) { cancelAnimationFrame(raf); raf = 0; }
      else if (isMobile()) { last = 0; if (!raf) raf = requestAnimationFrame(step); }
    };
    document.addEventListener("visibilitychange", onVis);
    mq.addEventListener ? mq.addEventListener("change", sync) : mq.addListener(sync);

    return () => {
      stop();
      document.removeEventListener("visibilitychange", onVis);
      mq.removeEventListener ? mq.removeEventListener("change", sync) : mq.removeListener(sync);
    };
  }, [slots.length]);

  return (
    <div className="vgallery" aria-label="Galeria vertical de vídeos">
      <div className="vgallery-frame" ref={frameRef}>
        <div className="vgallery-track" ref={trackRef}>
          {items.map((n, i) => (
            <div className="vgallery-card" data-slot={n} key={i}>
              <img
                className="vgallery-poster"
                src={asset("poster" + n, `media/posters/slot-${n}.jpg`)}
                alt=""
                aria-hidden="true"
                loading={i < 4 ? "eager" : "lazy"}
                fetchpriority={i < 2 ? "high" : "auto"}
              />
              <video
                muted
                loop
                playsInline
                preload="none"
                disablePictureInPicture
                controlsList="nofullscreen nodownload"
                data-src={asset("vid" + n, `media/slot-${n}.mp4`)}
                poster={asset("poster" + n, `media/posters/slot-${n}.jpg`)}
              ></video>
            </div>
          ))}
        </div>
      </div>
      <div className="vgallery-mobile-ui" aria-hidden="true">
        <div className="vgallery-swipe-hint">
          <span>arraste</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 5l7 7-7 7"/>
          </svg>
        </div>
        <div className="vgallery-dots" role="tablist">
          {slots.map((n, i) => (
            <button
              key={n}
              className={"vgallery-dot" + (activeDot === i ? " is-active" : "")}
              onClick={() => jumpTo(i)}
              aria-label={"Vídeo " + (i + 1)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

function Hero({ headline }) {
  // Pre-split headline at first period if any
  const [main, ...rest] = headline.split(/(?<=\.)\s+/);
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-inner">
          <div className="hero-text">
            <div className="eyebrow" style={{marginBottom: 22}}>● Panela Company · Desde 2022</div>
            <h1 className="display display-xl">
              <span className="underline">Sabores</span> que <span className="accent">reúnem</span><br/>
              pessoas.
            </h1>
            <p className="lede">
              Cinco marcas, uma cozinha-mãe. Reunimos pizzarias, espetaria e sushi sob a mesma obsessão por sabor, consistência e atendimento de gente que cozinha de verdade.
            </p>
            <div className="hero-meta">
              <div className="stat">
                <div className="num">05</div>
                <div className="lbl">Marcas</div>
              </div>
              <div className="stat">
                <div className="num">4<span style={{color:"var(--gold)"}}>+</span></div>
                <div className="lbl">Anos</div>
              </div>
              <div className="stat">
                <div className="num">50K<span style={{color:"var(--gold)"}}>+</span></div>
                <div className="lbl">Pedidos</div>
              </div>
              <div className="stat">
                <div className="num">98%</div>
                <div className="lbl">Aprovação</div>
              </div>
            </div>
          </div>
          <div className="hero-side">
            <VerticalVideoGallery />
          </div>
        </div>
      </div>
    </section>
  );
}

function Coupon() {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    try { navigator.clipboard?.writeText("CHEF"); } catch (e) {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };
  return (
    <div className="coupon">
      <div className="coupon-card">
        <div className="coupon-icon">人</div>
        <div className="coupon-text">
          <div className="eyebrow">Desconto exclusivo · primeira compra</div>
          <div className="title">15% de boas-vindas em qualquer marca do grupo</div>
          <div className="sub">Pedido direto, sem intermediários. Pontos acumulam para trocar por produtos.</div>
        </div>
        <div className="coupon-action">
          <div className="coupon-code">CHEF</div>
          <button className={"coupon-copy" + (copied ? " copied" : "")} onClick={copy}>
            {copied ? <>{I.check} copiado</> : <>{I.copy} copiar</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function BrandCard({ brand, featured }) {
  return (
    <article className={"brand-card " + brand.klass + (featured ? " featured" : "")} id={"brand-" + brand.id}>
      <div className="visual">
        <div className="bg"></div>
        {brand.foodImg
          ? <img className="food-img" src={brand.foodImg} alt={brand.name + " — prato"} loading="lazy" decoding="async" />
          : <span className="placeholder-tag">▢ {brand.placeholderTag}</span>}
      </div>
      <div className="body">
        <div>
          <div className="brand-head">
            <span className="brand-logo-badge">
              <img src={brand.logoImg} alt={brand.name} loading="lazy" decoding="async" width="120" height="120" />
            </span>
            <span className="num">{brand.num}</span>
          </div>
          <div className="cat">{brand.cat}</div>
          <p className="pitch">{brand.pitch}</p>
        </div>
        <div className="actions">
          <a className="btn btn-primary whatsapp" href={(brand.links && brand.links.whatsapp) || "#"} target="_blank" rel="noopener noreferrer">
            {I.waMark} Peça pelo WhatsApp
          </a>
          <a className="btn btn-secondary" href={(brand.links && brand.links.menu) || "#"} target="_blank" rel="noopener noreferrer">{I.menu} Cardápio</a>
          <a className="btn btn-secondary" href={(brand.links && brand.links.instagram) || "#"} target="_blank" rel="noopener noreferrer">{I.instagram} Instagram</a>
        </div>
      </div>
    </article>
  );
}

function BrandsSection({ featureLastCard }) {
  return (
    <section className="section" id="marcas">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">● Nossas marcas</div>
            <h2 className="display display-l" style={{marginTop: 12}}>Escolha sua marca,<br/>fale direto com a cozinha.</h2>
            <p className="lede">Cada operação tem seu próprio WhatsApp, cardápio e identidade — porque cada marca cozinha o que sabe fazer melhor.</p>
          </div>
          <div className="meta">
            <div><b>05</b> marcas ativas</div>
            <div><b>Pedido direto</b> · sem app</div>
            <div><b>Resposta</b> em minutos</div>
          </div>
        </div>
        <div className="brand-grid">
          {BRANDS.map((b, i) => (
            <BrandCard
              key={b.id}
              brand={b}
              featured={featureLastCard && i === BRANDS.length - 1}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about" id="sobre">
      <div className="container">
        <div className="about-grid">
          <div className="about-portrait">
            <img src={asset("pedroGaby", "assets/pedro-gaby.jpg")} alt="Pedro e Gaby, fundadores da Panela Company" loading="lazy" />
            <span className="label">Pedro &amp; Gaby · Fundadores</span>
          </div>
          <div className="about-text">
            <div className="eyebrow on-dark">● Quem somos</div>
            <h2 className="display display-l" style={{marginTop: 12}}>
              Somos <span className="accent">Pedro e Gaby</span> — um casal movido pelo mesmo propósito:<br/>
              cozinha, marca e gente.
            </h2>
            <p>
              Nossa história no empreendedorismo começou em 2022, quando decidimos transformar uma paixão em algo maior. Desde então, não construímos apenas restaurantes — desenvolvemos marcas com identidade, padrão e visão de crescimento.
            </p>
            <p>
              Atuamos no universo do delivery com diferentes operações: <strong>pizzas, espetos e sushis</strong>. Cada marca nasce com um conceito claro, foco extremo em qualidade e um compromisso inegociável com a experiência do cliente — do pedido à última mordida.
            </p>
            <p>
              <strong>Nosso sonho é grande</strong> — e é só o começo. Queremos levar nossas marcas para todo o Brasil e nos tornar referência nacional em comida delivery, provando que é possível crescer sem perder identidade, qualidade e propósito.
            </p>
            <div className="about-stats">
              <div className="stat">
                <div className="num">05</div>
                <div className="lbl">Marcas</div>
              </div>
              <div className="stat">
                <div className="num">4<span className="plus">+</span></div>
                <div className="lbl">Anos de estrada</div>
              </div>
              <div className="stat">
                <div className="num">50K<span className="plus">+</span></div>
                <div className="lbl">Pedidos entregues</div>
              </div>
              <div className="stat">
                <div className="num">98%</div>
                <div className="lbl">Aprovação dos clientes</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function OwnerStrip() {
  return (
    <section className="owner" id="contato">
      <div className="container-narrow">
        <div className="eyebrow">● Fale direto com o dono</div>
        <h2 className="display display-m" style={{marginTop: 10}}>Dúvidas, sugestões, críticas<br/>ou parcerias?</h2>
        <p className="lede">Estamos sempre ouvindo. A resposta vem do Pedro ou da Gaby — sem central, sem robô.</p>
        <a className="btn btn-primary whatsapp" href="#">{I.waMark} Falar no WhatsApp</a>
        <div className="signature">— Pedro &amp; Gaby</div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container-narrow">
        <div className="section-head" style={{gridTemplateColumns:"1fr"}}>
          <div>
            <div className="eyebrow">● Perguntas frequentes</div>
            <h2 className="display display-l" style={{marginTop: 12}}>O essencial,<br/>sem rodeios.</h2>
          </div>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div
              key={i}
              className={"faq-item" + (open === i ? " open" : "")}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="q">
                <span>{f.q}</span>
                <span className="toggle">{I.plus}</span>
              </div>
              <div className="a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="brand-block">
            <img src={asset("panelaLogo", "assets/panela-logo.png")} alt="Panela Company" className="footer-logo" />
            <p>Grupo gastronômico independente, construindo marcas memoráveis em pizza, espeto e sushi.</p>
            <div className="social-row">
              <a href="#" aria-label="Instagram">{I.insta}</a>
              <a href="#" aria-label="WhatsApp">{I.wa}</a>
              <a href="#" aria-label="E-mail">{I.mail}</a>
            </div>
          </div>
          <div>
            <h4>Marcas</h4>
            <ul>
              {BRANDS.map(b => <li key={b.id}><a href="#marcas">{b.name}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>Grupo</h4>
            <ul>
              <li><a href="#sobre">Quem somos</a></li>
              <li><a href="#contato">Fale com o dono</a></li>
              <li><a href="#">Trabalhe conosco</a></li>
              <li><a href="#">Seja franqueado</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Panela Company · Todos os direitos reservados</span>
        </div>
      </div>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────
// Tweaks panel
// ──────────────────────────────────────────────────────────
function PanelaTweaks({ t, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks · Panela">
      <window.TweakSection label="Paleta" />
      <window.TweakRadio
        label="Direção"
        value={t.palette}
        options={["japonesa", "terracota", "ônix"]}
        onChange={v => setTweak("palette", v)}
      />
      <window.TweakSection label="Tipografia" />
      <window.TweakRadio
        label="Display"
        value={t.displayFont}
        options={["provicali", "shippori", "cormorant"]}
        onChange={v => setTweak("displayFont", v)}
      />
      <window.TweakSection label="Cards" />
      <window.TweakToggle
        label="Destaque na última marca"
        value={t.featureLastCard}
        onChange={v => setTweak("featureLastCard", v)}
      />
      <window.TweakSection label="Seções" />
      <window.TweakToggle
        label="Mostrar cupom"
        value={t.showCoupon}
        onChange={v => setTweak("showCoupon", v)}
      />
      <window.TweakSection label="Cabeçalho" />
      <window.TweakText
        label="Headline"
        value={t.headline}
        onChange={v => setTweak("headline", v)}
      />
    </window.TweaksPanel>
  );
}

// ──────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [sheetOpen, setSheetOpen] = useState(false);

  // Apply palette + font via root CSS vars
  useEffect(() => {
    const root = document.documentElement;

    const palettes = {
      japonesa: {
        "--ink": "#0E0E0E",
        "--ink-2": "#1A1614",
        "--paper": "#F6F1E7",
        "--paper-2": "#EFE7D6",
        "--line-soft": "#E2D9C5",
        "--red": "#8B1A1A",
        "--red-deep": "#6B0F0F",
        "--gold": "#C9A24A",
        "--gold-soft": "#E2C275",
      },
      terracota: {
        "--ink": "#1A120E",
        "--ink-2": "#26170F",
        "--paper": "#F4EADC",
        "--paper-2": "#ECDFCC",
        "--line-soft": "#DCC9AE",
        "--red": "#A6321C",
        "--red-deep": "#7E2310",
        "--gold": "#D9A35A",
        "--gold-soft": "#EBC388",
      },
      "ônix": {
        "--ink": "#0A0A0A",
        "--ink-2": "#141414",
        "--paper": "#EFEDE7",
        "--paper-2": "#E5E2D9",
        "--line-soft": "#D6D2C6",
        "--red": "#7A0E0E",
        "--red-deep": "#560808",
        "--gold": "#B89556",
        "--gold-soft": "#D3B47C",
      },
    };
    const fonts = {
      provicali: '"Provicali", "Shippori Mincho", serif',
      shippori: '"Shippori Mincho", "Provicali", serif',
      cormorant: '"Cormorant Garamond", "Provicali", serif',
      fraunces: '"Fraunces", "Provicali", serif',
    };

    const p = palettes[t.palette] || palettes.japonesa;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty("--font-display", fonts[t.displayFont] || fonts.shippori);
  }, [t.palette, t.displayFont]);

  return (
    <>
      <Topbar />
      <Hero headline={t.headline} />
      <QuickPick />
      {t.showCoupon && <Coupon />}
      <BrandsSection featureLastCard={t.featureLastCard} />
      <About />
      <OwnerStrip />
      <Footer />
      <MobileCTABar onOpenSheet={() => setSheetOpen(true)} />
      <BrandSheet open={sheetOpen} onClose={() => setSheetOpen(false)} />
      <PanelaTweaks t={t} setTweak={setTweak} />
    </>
  );
}

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