/* OTHER BURGER — section components */
const { useState, useEffect, useRef } = React;
const ORDER_URL = "https://pedidos.otherburger.com.br/loja/pedidos";

const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 88, behavior: "smooth" });
};

/* lucide icon — manual innerHTML so React never reconciles the generated <svg> */
function Icon({ name, size = 20, sw = 2, cls, style }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    el.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    el.appendChild(i);
    window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": sw } });
  }, [name, size, sw]);
  return <span ref={ref} className={"ic " + (cls || "")} style={style} aria-hidden="true"></span>;
}

/* ---------------- NAV ---------------- */
function Nav() {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const f = () => setSolid(window.scrollY > 24);
    f();window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <header className={"nav" + (solid ? " solid" : "")}>
      <div className="wrap nav-inner">
        <a className="logo-link" href="#top" onClick={(e) => {e.preventDefault();window.scrollTo({ top: 0, behavior: "smooth" });}} aria-label="Other Burger">
          <img src="assets/logo-color.png" alt="Other Burger" style={{ width: "90px", height: "53px" }} />
        </a>
        <nav className="nav-links">
          <a href="#cardapio" onClick={(e) => {e.preventDefault();scrollTo("cardapio");}} style={{ fontSize: "19px" }}>Cardápio</a>
          <a href="#nave" onClick={(e) => {e.preventDefault();scrollTo("nave");}} style={{ fontSize: "19px" }}>A Nave</a>
          <a href="#delivery" onClick={(e) => {e.preventDefault();scrollTo("delivery");}} style={{ fontSize: "19px" }}>Delivery</a>
        </nav>
        <a className="btn btn-primary btn-sm" href={ORDER_URL} target="_blank" rel="noopener noreferrer">
          <Icon name="shopping-bag" size={16} /> Pedir Agora
        </a>
      </div>
    </header>);

}

/* ---------------- HERO ---------------- */
function Hero({ headline }) {
  const words = (headline || "NO BAD BURGERS").trim().split(/\s+/);
  const lineClass = ["l1", "l2", "l3"];
  const chips = [
  { ic: "badge-check", t: "Desde 2026" },
  { ic: "flame", t: "Feito na hora" },
  { ic: "bike", t: "Somente delivery" }];

  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <span className="glow g1"></span>
        <span className="glow g2"></span>
        <Stars />
        <img className="hero-watermark" src="assets/logo-white.png" alt="" aria-hidden="true" />
      </div>
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="eyebrow" style={{ fontSize: "13px" }}><span className="dot"></span>Transmissão recebida — Guapimirim, RJ</span>
          <h1 className="d">
            {words.map((w, i) => <span key={i} className={lineClass[i % 3]}>{w}</span>)}
          </h1>
          <p className="hero-sub">
            Smash burgers suculentos, pão de batata selado na manteiga e tecnologia alienígena
            aplicada no sabor. A gente não é daqui — e o sabor também não.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href={ORDER_URL} target="_blank" rel="noopener noreferrer">
              <Icon name="shopping-bag" size={18} /> Pedir Agora
            </a>
            <button className="btn btn-ghost" onClick={() => scrollTo("cardapio")}>Ver Cardápio</button>
          </div>
          <div className="hero-meta">
            {chips.map((c) =>
            <span className="chip" key={c.t}><Icon name={c.ic} size={16} /> <b style={{ fontSize: "14px" }}>{c.t}</b></span>
            )}
          </div>
        </div>
        <div className="hero-visual">
          <div className="beam"></div>
          <div className="ufo" aria-hidden="true"><Icon name="rocket" size={44} sw={1.6} /></div>
          <img className="hero-burger" src="assets/hero-burgers.jpg" alt="Pilha de smash burgers Other Burger" />
          <div className="hero-disc"></div>
        </div>
      </div>
    </section>);

}
function Stars() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    let html = "";
    for (let i = 0; i < 46; i++) {
      const s = (Math.random() * 1.6 + 0.6).toFixed(1);
      html += `<i style="position:absolute;left:${(Math.random() * 100).toFixed(1)}%;top:${(Math.random() * 100).toFixed(1)}%;width:${s}px;height:${s}px;border-radius:50%;background:rgba(255,255,255,${(Math.random() * .5 + .25).toFixed(2)})"></i>`;
    }
    el.innerHTML = html;
  }, []);
  return <div ref={ref} style={{ position: "absolute", inset: 0 }}></div>;
}

/* ---------------- MARQUEE ---------------- */
function Marquee() {
  const items = ["No Bad Burgers", "Other Burger", "Faça Contato", "Tecnologia Alienígena", "Guapimirim · RJ", "Não Somos Daqui"];
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">{row.map((t, i) => <span key={i}>{t}</span>)}</div>
    </div>);

}

/* ---------------- STORY ---------------- */
function Story() {
  const points = [
  { ic: "venetian-mask", h: "Tripulação mascarada", p: "Quem chapeia o burger veste a máscara. A identidade é classificada, o sabor não." },
  { ic: "flame", h: "Chapa quente, crosta perfeita", p: "Smash prensado na chapa até formar aquela crostinha dourada que vicia." },
  { ic: "bike", h: "Só delivery, direto na sua base", p: "Atendemos toda a Guapimirim. Você faz contato, a gente decola até você." }];

  return (
    <section className="section story" id="nave">
      <div className="wrap">
        <div className="story-grid">
          <div className="story-media reveal">
            <img src="assets/cook.jpg" alt="Cozinheiro com máscara alienígena na chapa" />
            <div className="tint"></div>
            <div className="tag">Nave de Comando</div>
          </div>
          <div className="reveal">
            <span className="eyebrow alt">A Nave</span>
            <h2 className="d" style={{ fontSize: "clamp(30px,7vw,56px)", margin: "14px 0 0", lineHeight: ".95" }}>
              Burger de outro<br />planeta, feito em<br />Guapimirim
            </h2>
            <p style={{ color: "var(--muted)", fontSize: "16px", marginTop: "16px", maxWidth: "44ch" }}>
              Other Burger é uma hamburgeria smash com pegada sci-fi B-movie, operando só por delivery
              no interior do RJ. A missão é simples: nenhum burger ruim sai da nave.
            </p>
            <div className="story-points">
              {points.map((p) =>
              <div className="story-point" key={p.h}>
                  <span className="n"><Icon name={p.ic} size={18} /></span>
                  <div>
                    <h4 style={{ fontSize: "22px", fontWeight: "100" }}>{p.h}</h4>
                    <p>{p.p}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- ITEM CARD ---------------- */
function ItemCard({ it }) {
  return (
    <article className="item reveal">
      <div className="item-top">
        <div>
          <div className="item-name">{it.name}{it.veg && <span className="badge-veg">Vegano</span>}</div>
          <div className="item-sub">{it.sub}</div>
        </div>
        <a className="add" href={ORDER_URL} target="_blank" rel="noopener noreferrer" aria-label={"Pedir " + it.name}>
          <Icon name="plus" size={22} sw={2.4} />
        </a>
      </div>
      <p className="item-desc">{it.desc}</p>
    </article>);

}

/* ---------------- MENU ---------------- */
function Menu({ data }) {
  const [active, setActive] = useState(data[0].id);
  useEffect(() => {
    const obs = new IntersectionObserver(
      (es) => es.forEach((e) => {if (e.isIntersecting) setActive(e.target.id.replace("cat-", ""));}),
      { rootMargin: "-45% 0px -50% 0px" }
    );
    data.forEach((c) => {const el = document.getElementById("cat-" + c.id);if (el) obs.observe(el);});
    return () => obs.disconnect();
  }, [data]);
  return (
    <section className="section" id="cardapio" style={{ paddingTop: "clamp(40px,7vw,72px)" }}>
      <div className="wrap section-head reveal">
        <span className="eyebrow">Cardápio</span>
        <h2 className="d">Faça contato<br />com seu pedido</h2>
        <p>Tudo o que sai da nave. Escolha pelo app de pedidos e prepare-se para a abdução de sabor.</p>
      </div>
      <div className="menu-tabs">
        <div className="wrap menu-tabs-inner">
          {data.map((c) =>
          <button key={c.id} className={"tab" + (active === c.id ? " active" : "")} onClick={() => scrollTo("cat-" + c.id)} style={{ fontSize: "23px", color: "rgb(211, 224, 82)" }}>
              <Icon name={c.icon} size={15} /> {c.label}
            </button>
          )}
        </div>
      </div>
      <div className="wrap">
        {data.map((c) =>
        <div className="cat" id={"cat-" + c.id} key={c.id}>
            <div className="cat-head reveal"><h3 className="d">{c.title}</h3></div>
            <p className="cat-tagline reveal">{c.tagline}</p>
            {c.id === "burgers" && <Spotlight />}
            <div className={"items" + (c.id === "burgers" ? " two" : "")}>
              {c.items.map((it, i) => <ItemCard key={i} it={it} />)}
            </div>
          </div>
        )}
      </div>
    </section>);

}
function Spotlight() {
  return (
    <div className="spotlight reveal">
      <div className="spotlight-media">
        <img src="assets/hero-burgers.jpg" alt="Smash burgers Other Burger" />
      </div>
      <div className="spotlight-body">
        <span className="kick"><Icon name="radio" size={15} /> Contato imediato</span>
        <h4>Monte do<br />seu jeito</h4>
        <p>Empilhe smashes, escolha os toppings e mande ver. Qual o nível da sua fome? Você decide quanto sabor o seu sistema terrestre aguenta.</p>
        <div className="row">
          <a className="btn btn-primary btn-sm" href={ORDER_URL} target="_blank" rel="noopener noreferrer">
            <Icon name="shopping-bag" size={16} /> Pedir no app
          </a>
        </div>
      </div>
    </div>);

}

/* ---------------- DELIVERY / ORDER CTA ---------------- */
function OrderCTA() {
  const info = [
  { ic: "map-pin", t: "Guapimirim · RJ" },
  { ic: "bike", t: "Somente delivery" },
  { ic: "clock", t: "Ter–Dom · 18h–23h30" }];

  return (
    <section className="section order" id="delivery">
      <div className="wrap">
        <div className="order-card reveal">
          <div className="rings"></div>
          <span className="eyebrow" style={{ color: "var(--accent-ink)", opacity: .72 }}>Pronto para o contato?</span>
          <h2>Faça seu<br />pedido agora</h2>
          <p>Decolamos até você. Atendemos toda a Guapimirim por delivery — é só transmitir a fome.</p>
          <div className="order-actions">
            <a className="btn btn-dark" href={ORDER_URL} target="_blank" rel="noopener noreferrer">
              <Icon name="shopping-bag" size={18} /> Pedir Agora
            </a>
            <button className="btn btn-outline" onClick={() => scrollTo("cardapio")}>Ver Cardápio</button>
          </div>
          <div className="order-info">
            {info.map((x) => <span className="oi" key={x.t}><Icon name={x.ic} size={16} /> {x.t}</span>)}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap foot-grid">
        <div className="foot-brand">
          <img className="foot-logo" src="assets/logo-color.png" alt="Other Burger" />
          <p>Smash burgers de outro planeta, entregues em Guapimirim. No bad burgers — palavra de alienígena.</p>
        </div>
        <div className="foot-col">
          <h5 style={{ fontFamily: "Sink", fontSize: "22px" }}>Nave</h5>
          <a href="#cardapio" onClick={(e) => {e.preventDefault();scrollTo("cardapio");}}>Cardápio</a>
          <a href="#nave" onClick={(e) => {e.preventDefault();scrollTo("nave");}}>A Nave</a>
          <a href="#delivery" onClick={(e) => {e.preventDefault();scrollTo("delivery");}}>Delivery</a>
        </div>
        <div className="foot-col">
          <h5 style={{ fontSize: "21px" }}>Pedir</h5>
          <a href={ORDER_URL} target="_blank" rel="noopener noreferrer">App de pedidos</a>
          <a href="https://instagram.com/otherburger" target="_blank" rel="noopener noreferrer">Instagram</a>
        </div>
        <div className="foot-col">
          <h5 style={{ fontSize: "23px" }}>Base</h5>
          <p>Guapimirim, RJ</p>
          <p>Ter–Dom · 18h–23h30</p>
          <p>Somente delivery</p>
        </div>
      </div>
      <div className="wrap foot-bottom">
        <span>© 2026 Other Burger — No Bad Burgers</span>
        <span className="badge" style={{ fontFamily: "\"Inter Tight\"", fontSize: "12px" }}>Nave de Comando · Guapimirim RJ</span>
      </div>
    </footer>);

}

/* ---------------- FLOATING ORDER FAB ---------------- */
function OrderFab() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const f = () => setShow(window.scrollY > window.innerHeight * 0.7);
    f();window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <div className={"order-fab" + (show ? " show" : "")}>
      <a className="order-fab-btn" href={ORDER_URL} target="_blank" rel="noopener noreferrer">
        <Icon name="shopping-bag" size={20} /> <span>Pedir Agora</span>
        <Icon name="arrow-right" size={18} />
      </a>
    </div>);

}

Object.assign(window, { Icon, Nav, Hero, Marquee, Story, Menu, OrderCTA, Footer, OrderFab, ORDER_URL });