/* Sburger landing page — shared nav + footer chrome. */
const NS = window.SburgerDesignSystem_d72664;
const { Button, IconButton, Icon } = NS;

window.scrollToSection = function (id) {
  const el = document.getElementById(id);
  if (!el) return;
  const headerOffset = 88;
  const top = el.getBoundingClientRect().top + window.pageYOffset - headerOffset;
  window.scrollTo({ top, behavior: "smooth" });
};

window.ORDER_LINKS = {
  yellgo: "https://sburger.web2.yellgo.cloud/store",
  deliveroo: "https://deliveroo.it/",
  glovo: "https://glovoapp.com/it/",
};
window.PHONE_TEL = "tel:+393240858003";
window.WHATSAPP_LINK = "https://wa.me/393240858003";
window.MAPS_DIRECTIONS = "https://www.google.com/maps/dir/?api=1&destination=42.9527962,13.8794086";

function Wordmark({ height = 30 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
      <img src="favicon-32.png" alt="" style={{ height, width: "auto", borderRadius: 6 }} />
      <span style={{ fontFamily: "var(--font-display)", fontSize: height, lineHeight: 1, color: "var(--sb-yellow)", textTransform: "uppercase", display: "inline-block", transform: "skewX(var(--display-skew))" }}>
        Sburger
      </span>
    </span>
  );
}

const SB = {
  address: "Via Volturno 11, San Benedetto del Tronto",
  phone: "+39 324 085 8003",
  ig: "@sburgersbt",
  hours: [
    ["Lunedì", "19:00 – 22:00"],
    ["Martedì", "Chiuso"],
    ["Mercoledì", "19:00 – 22:00"],
    ["Giovedì", "19:00 – 22:00"],
    ["Venerdì", "19:00 – 22:00"],
    ["Sabato", "19:00 – 22:00"],
    ["Domenica", "19:00 – 22:00"],
  ],
  menu: [
    { name: "Original", price: 9.5, description: "Doppio smash, doppio cheddar, cipolla, cetriolini, salsa sburger.", badges: [{ label: "Best seller", tone: "new" }], image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_081220_f19a0793-1e79-4315-a57a-7183ca600dbd.png" },
    { name: "Spicy", price: 10.5, description: "Jalapeño, cipolla fritta, bacon, ketchup piccante.", badges: [{ label: "Piccante", tone: "spicy" }], image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_083454_b3489bf3-ed2d-49b0-9397-a6df57cbeb44.png" },
    { name: "Fresh", price: 9.5, description: "Doppio smash, lattuga, pomodoro, salsa sburger.", image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_083458_a8c954bb-1ee7-42be-9318-6ba4b00b266d.png" },
    { name: "Chicken", price: 9.0, description: "Pollo croccante, lattuga, maionese, pane brioche.", image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_083502_33affcd2-8e78-4eb4-ba18-a14332f5d541.png" },
    { name: "Veggie", price: 9.0, description: "Burger vegetale, lattuga, pomodoro, salsa yogurt.", badges: [{ label: "Veggie", tone: "veggie" }], image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_083516_304854ff-edd1-4f5f-a832-38a53f2f26c6.png" },
    { name: "Kids", price: 6.5, description: "Smash singolo, cheddar, patatine piccole.", badges: [{ label: "Kids", tone: "kids" }], image: "https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_083522_74f6a41e-272d-4e9d-83ae-c3439ae95015.png" },
  ],
};

const container = { width: "100%", maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 var(--gutter-desktop)" };

function Nav() {
  const links = ["Menu", "Il locale", "Dove siamo"];
  const go = (id) => (e) => { e.preventDefault(); window.scrollToSection(id); };
  return (
    <header className="sb-safe-top" style={{ position: "sticky", top: 0, zIndex: 40, background: "var(--ink-900)", borderBottom: "var(--border-w-sign) solid var(--red-600)" }}>
      <div className="sb-nav-row" style={{ ...container, height: 76, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-5)" }}>
        <Wordmark height={32} />
        <nav className="sb-nav-links" style={{ display: "flex", gap: "var(--space-5)", alignItems: "center" }}>
          {links.map((l) => (
            <a key={l} href={`#${l}`} onClick={go(l)} style={{ font: "var(--type-label)", textTransform: "uppercase", letterSpacing: "var(--ls-badge)", color: "var(--text-on-dark)", borderBottom: "2px solid transparent" }}>{l}</a>
          ))}
          <a className="sb-nav-phone" href={window.PHONE_TEL} style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", font: "var(--type-body-sm)", color: "var(--text-on-dark-muted)", textDecoration: "none", borderBottom: "none" }}>
            <Icon name="phone" size={15} /> {SB.phone}
          </a>
          <Button variant="primary" size="sm" onClick={() => window.scrollToSection("ordina")}>Ordina ora</Button>
        </nav>
      </div>
    </header>
  );
}

function FooterCTA() {
  const channels = [
    { label: "Ordina diretto (Yellgo)", icon: "shopping-bag", href: window.ORDER_LINKS.yellgo },
    { label: "Deliveroo", icon: "bike", href: window.ORDER_LINKS.deliveroo },
    { label: "Glovo", icon: "bike", href: window.ORDER_LINKS.glovo },
  ];
  return (
    <footer style={{ background: "var(--ink-900)", color: "var(--text-on-dark)", paddingTop: "var(--space-9)" }}>
      <div id="ordina" style={{ ...container, display: "grid", gap: "var(--space-7)" }}>
        <div className="sb-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "var(--space-7)", alignItems: "start" }}>
          <div style={{ display: "grid", gap: "var(--space-4)", justifyItems: "start" }}>
            <h2 style={{ color: "var(--text-on-dark)", fontSize: "var(--text-display-2)" }}>Fame adesso?</h2>
            <p style={{ font: "var(--type-body)", color: "var(--text-on-dark-muted)", maxWidth: "38ch", margin: 0 }}>
              Il sito non gestisce ordini o pagamenti: si ordina tramite queste piattaforme, poi si ritira in Via Volturno o si riceve a domicilio.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
              {channels.map((c, i) => (
                <Button key={c.label} variant={i === 0 ? "primary" : "outline"} onDark href={c.href} target="_blank" rel="noopener noreferrer">
                  <Icon name={c.icon} size={16} /> {c.label}
                </Button>
              ))}
            </div>
          </div>
          <div style={{ display: "grid", gap: "var(--space-3)", font: "var(--type-body-sm)", color: "var(--text-on-dark-muted)" }}>
            <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--yellow-500)" }}>Contatti</span>
            <a href={window.MAPS_DIRECTIONS} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "none" }}>{SB.address}</a>
            <a href={window.PHONE_TEL} style={{ color: "inherit", textDecoration: "none", borderBottom: "none" }}>{SB.phone}</a>
            <a href="https://instagram.com/sburgersbt" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "none" }}>{SB.ig}</a>
            <div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-2)" }}>
              <IconButton icon="instagram" label="Instagram" onDark href="https://instagram.com/sburgersbt" target="_blank" rel="noopener noreferrer" />
              <IconButton icon="message-circle" label="WhatsApp" onDark href={window.WHATSAPP_LINK} target="_blank" rel="noopener noreferrer" />
              <IconButton icon="map-pin" label="Mappa" onDark href={window.MAPS_DIRECTIONS} target="_blank" rel="noopener noreferrer" />
            </div>
          </div>
        </div>
        <div className="sb-footer-bottom" style={{ borderTop: "var(--border-w) solid var(--border-on-dark)", padding: "var(--space-5) 0", display: "flex", justifyContent: "space-between", font: "var(--type-body-sm)", fontSize: "var(--text-sm)", color: "var(--text-faint)" }}>
          <span>© 2026 Sburger — The Original Smash Burger</span>
          <span>P. IVA da inserire · Privacy · Cookie</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SB, container, Nav, FooterCTA });