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

// ============= ICONS =============
const WAIcon = ({ size = 16 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.01zM12.04 20.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.83c-.01 4.54-3.71 8.23-8.25 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23a7.5 7.5 0 0 1-1.38-1.72c-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48a.92.92 0 0 0-.66.31c-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.54.12.16 1.73 2.64 4.18 3.7.59.25 1.04.4 1.4.52.59.19 1.12.16 1.55.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.15-1.18-.06-.1-.23-.16-.48-.28z"/>
  </svg>
);

const ArrowIcon = ({ size = 14 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square">
    <path d="M5 12 H19 M13 6 L19 12 L13 18" />
  </svg>
);

// ============= NAV =============
const Nav = ({ onWA }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const closeMenu = () => setMobileOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="wrap nav-inner">
          <a href="#top" className="nav-logo" aria-label="Greek's home">
            <img src="assets/logo-light.png" alt="Greek's — Comida Grega" />
          </a>
          <div className="nav-links">
            <a href="#sobre">Sobre</a>
            <a href="#cardapio">Cardápio</a>
            <a href="#onde">Onde estamos</a>
            <a href="#delivery">Delivery</a>
            <a href="#faq">FAQ</a>
          </div>
          <a className="btn-wa nav-cta" href="#" onClick={(e) => { e.preventDefault(); onWA("nav"); }}>
            <WAIcon /> Chamar no WhatsApp
          </a>
          <button
            className={`nav-hamburger ${mobileOpen ? "open" : ""}`}
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label={mobileOpen ? "Fechar menu" : "Abrir menu"}
            aria-expanded={mobileOpen}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>
      <div className={`nav-mobile ${mobileOpen ? "open" : ""}`} aria-hidden={!mobileOpen}>
        <a href="#sobre" onClick={closeMenu}>Sobre</a>
        <a href="#cardapio" onClick={closeMenu}>Cardápio</a>
        <a href="#onde" onClick={closeMenu}>Onde estamos</a>
        <a href="#delivery" onClick={closeMenu}>Delivery</a>
        <a href="#faq" onClick={closeMenu}>FAQ</a>
        <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); closeMenu(); onWA("mobile-nav"); }}>
          <WAIcon /> Chamar no WhatsApp
        </a>
      </div>
    </>
  );
};

// ============= HERO =============
const HERO_VARIANTS = {
  A: {
    head: (
      <>
        Os deuses gregos<br/>
        comiam <em className="italic crack">assim</em>.<br/>
        <span className="strike">Você tá perdendo.</span>
      </>
    ),
    sub: "Sanduíches gregos e hambúrgueres feitos com ingredientes de primeira — sem enrolação, sem mediocridade. Na Praça do Polar, toda semana, esperando por você.",
  },
  B: {
    head: (
      <>
        Fortaleza nunca tinha<br/>
        provado nada <em className="italic crack">assim</em>.<br/>
        <span className="strike">Até agora.</span>
      </>
    ),
    sub: "Comida grega de verdade na Praça do Polar. Ingredientes selecionados, preparo na hora e um sabor que a cidade ainda não conhecia.",
  },
  C: {
    head: (
      <>
        O melhor sanduíche<br/>
        que você vai comer<br/>
        tem <em className="italic crack">sotaque grego</em>.
      </>
    ),
    sub: "Na Praça do Polar, em Fortaleza. Sanduíches gregos e hambúrgueres com ingredientes de primeira. Feitos na hora, do jeito certo.",
  },
};

const Hero = ({ headline, onWA }) => {
  const v = HERO_VARIANTS[headline] || HERO_VARIANTS.A;
  return (
    <section className="hero" id="top">
      <div className="hero-bg" />
      <img src="assets/food-1.png" className="hero-photo" alt="" />
      <div className="wrap hero-inner">
        <span className="eyebrow">Food truck · Praça do Polar · Fortaleza</span>
        <h1 className="display hero-headline">{v.head}</h1>
        <p className="hero-sub">{v.sub}</p>
        <div className="hero-cta">
          <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("hero"); }}>
            <WAIcon size={18} /> Chamar no WhatsApp
          </a>
          <a className="btn-ghost" href="#cardapio">
            Ver o cardápio <ArrowIcon />
          </a>
        </div>
        <p className="hero-micro">Saiba onde estamos hoje, veja o cardápio e tire suas dúvidas. Respondemos rápido.</p>
      </div>
      <div className="wrap hero-foot">
        <div><span className="blink" />Aberto hoje · 18h–23h</div>
        <div>Pedidos pelo WhatsApp · Pague na entrega</div>
        <div>Est. 2024</div>
      </div>
    </section>
  );
};

// ============= MARQUEE =============
const Marquee = () => {
  const items = [
    "Sanduíches Gregos", "·", "Hambúrgueres Artesanais", "·",
    "Ingredientes de Primeira", "·", "Praça do Polar", "·",
    "Fortaleza", "·", "Feito na Hora", "·",
  ];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {[...Array(4)].map((_, i) => (
          <React.Fragment key={i}>
            {items.map((w, j) => <span key={j}>{w}</span>)}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

// ============= VALUE PROP =============
const ValueProp = () => (
  <section className="section vp" id="sobre">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="num">01 / Proposta</div>
          <h2>Por que<br/>vale a pena.</h2>
        </div>
        <p>Sem precisar pegar avião, sem pagar caro num restaurante cheio de frescura. Um food truck com identidade, com orgulho do que serve e com o sabor que a cidade merecia há muito tempo.</p>
      </div>
      <div className="vp-grid">
        <div>
          <h3 className="vp-lede">
            Existe um motivo pra comida grega<br/>
            <em>durar mais de 2.000 anos.</em>
          </h3>
          <div className="vp-body">
            <p>Não é magia. É ingrediente de qualidade, combinações que fazem sentido e aquele cuidado que você sente na primeira mordida — antes mesmo de terminar de mastigar.</p>
            <p>O Greek's trouxe isso pra Fortaleza. Sem precisar pegar avião, sem pagar caro num restaurante cheio de frescura. Um food truck com identidade, com orgulho do que serve e com o sabor que a cidade merecia há muito tempo.</p>
            <p>Se você quer comer algo diferente de verdade — diferente no sabor, diferente na experiência, diferente em tudo — você já encontrou.</p>
          </div>
        </div>
        <aside className="vp-side">
          <div className="vp-stat">
            <div className="n">2.000+</div>
            <div className="l">Anos de tradição culinária</div>
          </div>
          <div className="vp-stat">
            <div className="n">100%</div>
            <div className="l">Ingredientes selecionados</div>
          </div>
          <div className="vp-stat">
            <div className="n">0</div>
            <div className="l">Frescura. Só comida boa.</div>
          </div>
        </aside>
      </div>
    </div>
  </section>
);

// ============= PAIN =============
const PAIN_ITEMS = [
  "Aquela sensação de abrir o lanche e já saber exatamente como vai ser o sabor. Sem surpresa. Sem emoção.",
  "O food truck bonito no Instagram que decepciona na primeira mordida.",
  "Pagar R$40, R$50 num hambúrguer \"artesanal\" que poderia ser de qualquer rede.",
  "Não ter opção diferente por perto quando a fome bate no meio do rolê na Praça do Polar.",
  "Comer bem em Fortaleza e sentir que falta algo — aquele sabor com identidade, com história, com personalidade.",
];

const Pain = () => (
  <section className="section pain">
    <div className="wrap">
      <div className="num" style={{ fontFamily: "var(--narrow)", fontWeight: 700, fontSize: 13, letterSpacing: "0.22em", color: "var(--orange)", marginBottom: 18, textTransform: "uppercase" }}>
        02 / A real
      </div>
      <h2 className="pain-question">
        Quando foi a última vez<br/>
        que um lanche te <em>surpreendeu</em><br/>
        de verdade?
      </h2>
      <p className="pain-sub">
        Seja honesto. Fortaleza tem opção pra tudo — menos pra quem quer sair do óbvio sem gastar uma fortuna.
      </p>
      <ul className="pain-list">
        {PAIN_ITEMS.map((t, i) => (
          <li className="pain-item" key={i}>
            <div className="mark">—</div>
            <p>{t}</p>
          </li>
        ))}
      </ul>
      <div className="pain-cap">
        Você merece <span className="strike">mais do mesmo</span> <span className="orange">mais.</span>
      </div>
    </div>
  </section>
);

// ============= SOLUTION =============
const Solution = () => (
  <section className="section sol">
    <div className="wrap">
      <div className="sol-grid">
        <div className="sol-img">
          <img src="assets/food-2-red.png" alt="Sanduíches gregos do Greek's" loading="lazy" />
          <div className="sol-tag">Pita · grelha aberta · feito na hora</div>
        </div>
        <div>
          <div className="num" style={{ fontFamily: "var(--narrow)", fontWeight: 700, fontSize: 13, letterSpacing: "0.22em", color: "var(--orange)", marginBottom: 18, textTransform: "uppercase" }}>
            03 / A resposta
          </div>
          <h2>O Greek's existe por causa disso.</h2>
          <p>Comida grega e hambúrguer não são categorias opostas aqui — são <strong>dois jeitos diferentes de fazer a mesma coisa bem feita</strong>: ingredientes de primeira, combinações que surpreendem, preparo que você percebe no sabor.</p>
          <p>Cada sanduíche que sai do nosso truck carrega o mesmo compromisso: você vai morder, parar por um segundo, e entender por que isso é diferente.</p>
          <div className="sol-tagline">
            Não é hype.<br/>
            <em>É comida.</em> Boa, de verdade.
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============= BENEFITS =============
const BENEFITS = [
  { n: "01", t: "Ingredientes de primeira", d: "A qualidade que você sente antes mesmo de ver o preço. Não existe \"versão econômica\" do Greek's — só existe bem feito." },
  { n: "02", t: "Sabor que Fortaleza não tinha", d: "Comida grega de verdade na cidade. Se você ainda não experimentou, já está atrasado." },
  { n: "03", t: "Rápido sem ser descuidado", d: "Food truck com eficiência e sem pressa de empurrar algo pra fora. Você espera o tempo certo. Não mais do que isso." },
  { n: "04", t: "Pra qualquer momento", d: "Almoço, tarde, noite, rolê na praça ou fome do nada. O Greek's tá lá quando você precisar." },
  { n: "05", t: "Uma experiência que você conta", d: "Tem coisa que você come e esquece. Tem coisa que você come e já manda pro grupo. O Greek's é o segundo tipo." },
  { n: "06", t: "Identidade de verdade", d: "Da embalagem ao sabor, tudo tem o estilo Greek's. Você percebe quando uma marca tem orgulho do que faz." },
];

const Benefits = () => (
  <section className="section benefits">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="num">04 / O que muda</div>
          <h2>Seis razões<br/>pra atravessar a cidade.</h2>
        </div>
        <p>O que o Greek's entrega — e por que isso importa pra quem está cansado de mais do mesmo.</p>
      </div>
      <div className="benefits-grid">
        {BENEFITS.map((b) => (
          <article className="benefit" key={b.n}>
            <div className="n">{b.n}</div>
            <h3>{b.t}</h3>
            <p>{b.d}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ============= SOCIAL PROOF =============
const TESTIMONIALS = [
  {
    quote: "Nunca tinha comido nada assim em Fortaleza. Voltei no dia seguinte só pra ter certeza que tava bom mesmo. Tava melhor.",
    name: "Marina Sales",
    meta: "Aldeota · 2 visitas em 3 dias",
    initial: "M",
  },
  {
    quote: "O gyros é absurdo. Foto não faz justiça. Sotaque grego em Fortaleza? Faz sentido demais.",
    name: "Pedro Henrique",
    meta: "Meireles · Cliente desde Set/24",
    initial: "P",
  },
  {
    quote: "Indico pra todo mundo. É o tipo de lugar que você come, sai e já tá pensando quando vai voltar.",
    name: "Luana Tavares",
    meta: "Praia de Iracema · Frequenta semanal",
    initial: "L",
  },
];

const Proof = () => (
  <section className="section proof">
    <div className="wrap">
      <div className="proof-head">
        <h2>Quem já provou,<br/><em>voltou.</em></h2>
        <div className="proof-stats">
          <div className="proof-stat">
            <div className="n">4.9<small>/5</small></div>
            <div className="l">Avaliação Google</div>
          </div>
          <div className="proof-stat">
            <div className="n">2k+</div>
            <div className="l">Sanduíches servidos</div>
          </div>
          <div className="proof-stat">
            <div className="n">87%</div>
            <div className="l">Clientes que voltam</div>
          </div>
        </div>
      </div>
      <div className="proof-grid">
        {TESTIMONIALS.map((t, i) => (
          <article className="testimonial" key={i}>
            <div className="stars">★★★★★</div>
            <blockquote>{t.quote}</blockquote>
            <div className="who">
              <div className="ava">{t.initial}</div>
              <div>
                <div className="name">{t.name}</div>
                <div className="meta">{t.meta}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ============= MENU =============
const MENU_DATA = {
  Gregos: [
    { name: "Gyros Clássico", desc: "Pita grelhada, carne grega no espeto vertical, tzatziki, tomate, cebola roxa, batata.", price: "32", tag: "Bestseller", img: "assets/food-2-red.png" },
    { name: "Souvlaki Especial", desc: "Espetinho marinado, pita aberta, feta, azeitona kalamata, pimentão grelhado.", price: "34", tag: null, img: "assets/food-1.png" },
    { name: "Pita Vegetariana", desc: "Falafel crocante, hummus, pepino fresco, tomate, molho de iogurte e ervas.", price: "28", tag: "Veggie", img: "assets/food-2-red.png" },
  ],
  Hambúrgueres: [
    { name: "Greek Burger", desc: "Blend 180g, pão de fermentação natural, queijo, alface, tomate, molho da casa.", price: "32", tag: null, img: "assets/food-1.png" },
    { name: "Olympus Duplo", desc: "Blend 180g duplo, cheddar derretido, bacon, cebola caramelizada, picles.", price: "42", tag: "Bestseller", img: "assets/food-2-red.png" },
    { name: "Feta Burger", desc: "Blend 180g, feta grego, tomate seco, rúcula, molho de iogurte e limão.", price: "38", tag: "Novo", img: "assets/food-1.png" },
  ],
  Pratos: [
    { name: "Greek Box", desc: "Carne grega, arroz, salada grega, batata, tzatziki. Pra quem tem fome de verdade.", price: "39", tag: null, img: "assets/food-2-red.png" },
    { name: "Fritas Greek's", desc: "Batatas crocantes com tempero grego, raspas de feta e limão.", price: "18", tag: null, img: "assets/fries.png" },
    { name: "Salada Grega", desc: "Tomate, pepino, cebola roxa, azeitona kalamata, feta, azeite e orégano.", price: "24", tag: "Light", img: "assets/food-1.png" },
  ],
};

const Menu = ({ onWA }) => {
  const [tab, setTab] = useState("Gregos");
  const items = MENU_DATA[tab];
  return (
    <section className="section menu" id="cardapio">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="num">05 / Cardápio</div>
            <h2>O que tem<br/>hoje.</h2>
          </div>
          <p>Sanduíches gregos e hambúrgueres com ingredientes selecionados. Feitos na hora, do jeito certo. O cardápio pode mudar conforme o dia — chama no WhatsApp pra confirmar o que tá rolando agora.</p>
        </div>
        <div className="menu-tabs" role="tablist">
          {Object.keys(MENU_DATA).map((k) => (
            <button
              key={k}
              role="tab"
              aria-selected={tab === k}
              className={`menu-tab ${tab === k ? "active" : ""}`}
              onClick={() => setTab(k)}
            >
              {k}
            </button>
          ))}
        </div>
        <div className="menu-grid">
          {items.map((it, i) => (
            <article className="menu-card" key={tab + i}>
              <div className="img">
                <img src={it.img} alt={it.name} loading="lazy" />
                {it.tag && <div className="tag">{it.tag}</div>}
              </div>
              <div className="body">
                <div className="row">
                  <h3>{it.name}</h3>
                  <div className="price"><small>R$</small>{it.price}</div>
                </div>
                <p className="desc">{it.desc}</p>
              </div>
            </article>
          ))}
        </div>
        <div className="menu-cta">
          <div className="q">Quer saber o que está disponível agora?</div>
          <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("menu"); }}>
            <WAIcon size={18} /> Chamar no WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
};

// ============= LOCATION =============
const Location = ({ onWA }) => {
  // determine today (Mon=1..Sun=0)
  const today = new Date().getDay();
  const days = [
    { d: "Seg", h: "Fechado", i: 1 },
    { d: "Ter", h: "18h — 23h", i: 2 },
    { d: "Qua", h: "18h — 23h", i: 3 },
    { d: "Qui", h: "18h — 23h", i: 4 },
    { d: "Sex", h: "18h — 00h", i: 5 },
    { d: "Sáb", h: "12h — 00h", i: 6 },
    { d: "Dom", h: "12h — 22h", i: 0 },
  ];
  return (
    <section className="section loc" id="onde">
      <div className="wrap">
        <div className="loc-grid">
          <div className="loc-info">
            <span className="eyebrow">06 / Onde estamos</span>
            <h2>Nos<br/>encontre.</h2>
            <div className="where">Praça do Polar</div>
            <div className="city">Fortaleza · CE</div>
            <p style={{ color: "var(--fg-muted)", fontSize: 17, maxWidth: "44ch", margin: 0 }}>
              É aqui que acontece. Estacionamos no canto da praça e ligamos o forno. Procura pela fila — ou pelo cheiro.
            </p>
            <div className="loc-hours">
              <h4>Horários</h4>
              <table>
                <tbody>
                  {days.map((d) => (
                    <tr key={d.d} className={d.i === today ? "today" : ""}>
                      <td>{d.d}{d.i === today ? " · hoje" : ""}</td>
                      <td>{d.h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div style={{ marginTop: 28 }}>
              <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("location"); }}>
                <WAIcon size={18} /> Confirma se a gente tá aberto
              </a>
            </div>
          </div>
          <div className="loc-map" aria-label="Mapa Praça do Polar">
            <FakeMap />
            <div className="marker">
              <div className="marker-label">Greek's · aqui</div>
              <div className="marker-dot" />
              <div className="marker-tip" />
            </div>
            <a className="btn-ghost loc-cta" href="https://maps.google.com/?q=Pra%C3%A7a+do+Polar+Fortaleza" target="_blank" rel="noreferrer">
              Abrir no Maps <ArrowIcon />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// CSS-drawn fake map (styled like Apple/Google dark mode)
const FakeMap = () => (
  <svg viewBox="0 0 600 460" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
    <defs>
      <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M40 0 L 0 0 0 40" fill="none" stroke="#1A1A1A" strokeWidth="1"/>
      </pattern>
    </defs>
    <rect width="600" height="460" fill="#141414" />
    <rect width="600" height="460" fill="url(#grid)" />
    {/* park (Praça do Polar) */}
    <path d="M 220 140 Q 290 110 380 150 Q 420 220 380 300 Q 300 340 220 310 Q 170 230 220 140 Z"
          fill="#0F1E12" stroke="#1F3A24" strokeWidth="1" />
    {/* roads */}
    <path d="M 0 230 H 600" stroke="#2A2A2A" strokeWidth="22" />
    <path d="M 0 230 H 600" stroke="#1A1A1A" strokeWidth="18" />
    <path d="M 300 0 V 460" stroke="#2A2A2A" strokeWidth="18" />
    <path d="M 300 0 V 460" stroke="#1A1A1A" strokeWidth="14" />
    <path d="M 60 60 Q 200 100 300 80 T 540 110" stroke="#222" strokeWidth="8" fill="none" />
    <path d="M 80 380 Q 200 350 320 380 T 560 360" stroke="#222" strokeWidth="8" fill="none" />
    {/* road labels */}
    <text x="50" y="225" fill="#3A3A3A" fontFamily="Inter, sans-serif" fontSize="10" letterSpacing="1.4">AV. DA ABOLIÇÃO</text>
    <text x="306" y="50" fill="#3A3A3A" fontFamily="Inter, sans-serif" fontSize="10" letterSpacing="1.4" transform="rotate(90 306 50)">R. DOS PACAJÚS</text>
    {/* park label */}
    <text x="300" y="220" fill="#2F4A35" fontFamily="Inter, sans-serif" fontSize="11" letterSpacing="2" textAnchor="middle">PRAÇA DO POLAR</text>
    {/* tiny dots */}
    {[[120,90],[480,80],[100,360],[510,380],[80,180],[520,260]].map(([x,y],i) => (
      <rect key={i} x={x} y={y} width="36" height="22" fill="#1A1A1A" />
    ))}
  </svg>
);

// ============= DELIVERY =============
const Delivery = ({ onWA }) => (
  <section className="section delivery" id="delivery">
    <div className="wrap">
      <div className="delivery-grid">
        <div>
          <span className="eyebrow" style={{ color: "var(--bg)" }}>07 / Em breve</span>
          <h2>Delivery chegando.<br/>O Greek's na sua porta.</h2>
          <p>Estamos preparando para chegar até você com o mesmo padrão de sempre — ingredientes de primeira e aquele sabor que você já conhece (ou está prestes a conhecer). Quando abrir, você vai ser o primeiro a saber.</p>
          <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("delivery"); }}>
            <WAIcon size={18} /> Entrar na lista de novidades
          </a>
          <div className="micro">Sem spam. Só o que importa.</div>
        </div>
        <div className="delivery-side">
          <div className="delivery-badge">
            <svg className="rot" viewBox="0 0 400 400" aria-hidden="true">
              <defs>
                <path id="circle" d="M 200,200 m -180,0 a 180,180 0 1,1 360,0 a 180,180 0 1,1 -360,0" />
              </defs>
              <text>
                <textPath href="#circle" startOffset="0">
                  GREEK'S DELIVERY · EM BREVE · NA SUA PORTA · COMIDA GREGA · 
                </textPath>
              </text>
            </svg>
            <div>
              <div className="inner">Em<br/>breve</div>
              <div className="sub">Aguarde o sinal</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============= ABOUT =============
const About = () => (
  <section className="section about">
    <div className="wrap">
      <div className="about-grid">
        <div className="about-imgs">
          <div className="a"><img src="assets/shirt.png" alt="Camiseta Greek's" loading="lazy" /></div>
          <div className="b"><img src="assets/fries.png" alt="Fritas Greek's" loading="lazy" /></div>
        </div>
        <div>
          <span className="eyebrow">08 / Sobre</span>
          <h2>Por que <em>grego?</em></h2>
          <p>Porque a Grécia não inventou só filosofia e democracia. Inventou o conceito de <strong style={{ color: "var(--fg)" }}>comer bem na rua</strong> — comida com identidade, feita com cuidado, pra qualquer pessoa.</p>
          <p>O Greek's nasceu do respeito por isso. A ideia de que comida de rua não precisa ser genérica, que ingrediente de qualidade não é luxo e que Fortaleza merecia uma opção diferente de verdade.</p>
          <p>É isso que a gente faz. Todo dia. Em cada sanduíche que sai daqui.</p>
          <div className="about-sign">
            <img src="assets/logo-light.png" alt="Greek's" />
            <div className="t">A casa, a marca,<br/>o sotaque.</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============= FAQ =============
const FAQ_ITEMS = [
  { q: "Onde fica o Greek's?", a: "Na Praça do Polar, Fortaleza. Siga nossas redes ou chama no WhatsApp pra confirmar o ponto exato no dia." },
  { q: "Quais os dias e horários de funcionamento?", a: "De terça a quinta das 18h às 23h. Sexta das 18h à 00h. Sábado das 12h à 00h. Domingo das 12h às 22h. Segunda fechamos pra descansar." },
  { q: "Tem delivery?", a: "Em breve. Por enquanto, a experiência completa é presencial. Entra na nossa lista pelo WhatsApp e você vai ser avisado no lançamento." },
  { q: "Tem opção sem carne / vegetariana?", a: "Tem sim. A Pita Vegetariana com falafel e a Salada Grega são as queridinhas de quem não come carne. Falafel feito na hora, sem industrializado." },
  { q: "Como faço pra saber se estão abertos hoje?", a: "Chama no WhatsApp — a forma mais rápida. Ou acompanha pelo Instagram, onde avisamos sempre que abrimos." },
  { q: "Posso fazer pedido antecipado?", a: "Pode sim, pelo WhatsApp. Recomendado para grupos a partir de 4 pessoas ou se você tá com pressa. A gente prepara e você passa pra retirar." },
  { q: "Vale a pena mesmo?", a: "Quem pergunta isso ainda não provou. Depois que provar, a pergunta some." },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">09 / FAQ</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 88px)", lineHeight: 0.92, margin: "18px 0 24px" }}>
              Perguntas<br/>que a galera<br/>faz.
            </h2>
            <p style={{ color: "var(--fg-muted)", maxWidth: "32ch", margin: 0 }}>
              Se a sua não tá aqui, chama no WhatsApp. A gente responde rápido.
            </p>
          </div>
          <div className="faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <div
                key={i}
                className={`faq-item ${open === i ? "open" : ""}`}
                onClick={() => setOpen(open === i ? -1 : i)}
                role="button"
                tabIndex={0}
                aria-expanded={open === i}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(open === i ? -1 : i); } }}
              >
                <div className="faq-q">
                  <span>{item.q}</span>
                  <span className="plus" aria-hidden="true" />
                </div>
                <div className="faq-a">
                  <div>
                    <p style={{ paddingBottom: 18 }}>{item.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============= FINAL CTA =============
const Final = ({ onWA }) => (
  <section className="section final">
    <div className="final-bg" />
    <div className="wrap final-inner">
      <span className="eyebrow final-eyebrow">10 / É agora</span>
      <h2>A fome não<br/>vai <em>esperar.</em></h2>
      <p>Você chegou até aqui. Já sabe que o Greek's é diferente — no sabor, nos ingredientes, na identidade. Agora é simples: aparece na Praça do Polar, pede o seu, morde e entende.</p>
      <div className="final-cta">
        <a className="btn-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("final"); }}>
          <WAIcon size={18} /> Chamar no WhatsApp agora
        </a>
        <a className="btn-ghost" href="#cardapio">
          Ver o cardápio completo <ArrowIcon />
        </a>
      </div>
      <div className="final-ps">
        <div className="label">P.S.</div>
        <p>A Grécia durou milênios porque o que ela fazia, ela fazia bem. O Greek's chegou em Fortaleza com o mesmo princípio. Vem provar — e descobre por que vale a viagem até a Praça do Polar.</p>
      </div>
    </div>
  </section>
);

// ============= FOOTER =============
const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="foot-grid">
        <div className="brand">
          <img src="assets/logo-light.png" alt="Greek's" />
          <p>Comida grega e hambúrgueres na Praça do Polar, Fortaleza. Ingredientes de primeira. Sem frescura.</p>
        </div>
        <div>
          <h5>Navegar</h5>
          <div className="links">
            <a href="#sobre">Sobre</a>
            <a href="#cardapio">Cardápio</a>
            <a href="#onde">Onde estamos</a>
            <a href="#faq">FAQ</a>
          </div>
        </div>
        <div>
          <h5>Contato</h5>
          <div className="links">
            <a href="#">WhatsApp</a>
            <a href="#">@greeks.fortaleza</a>
            <a href="https://maps.google.com/?q=Pra%C3%A7a+do+Polar+Fortaleza" target="_blank" rel="noreferrer">Praça do Polar</a>
          </div>
        </div>
        <div>
          <h5>Horário</h5>
          <div className="links">
            <span>Ter–Qui · 18h–23h</span>
            <span>Sex · 18h–00h</span>
            <span>Sáb · 12h–00h</span>
            <span>Dom · 12h–22h</span>
          </div>
        </div>
      </div>
      <div className="foot-meta">
        <div>© 2026 Greek's · Comida Grega</div>
        <div>Fortaleza · CE · Brasil</div>
        <div>Feito com fome · não com frescura</div>
      </div>
    </div>
  </footer>
);

// Export to global
Object.assign(window, {
  WAIcon, ArrowIcon,
  Nav, Hero, Marquee,
  ValueProp, Pain, Solution, Benefits, Proof,
  Menu, Location, Delivery, About, FAQ, Final, Footer,
});