/* Landing page sections. */
const { Button, Tag, Badge, Card, SectionHeading, Icon, MenuItemCard, PriceTag, StarRating } = window.SburgerDesignSystem_d72664;

function Hero() {
  return (
    <section style={{ position: "relative", background: "var(--ink-900)", backgroundImage: "var(--plate-dark)", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "var(--heat-glow)" }} />
      <div className="sb-hero-grid" style={{ ...window.container, position: "relative", display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: "var(--space-7)", alignItems: "center", padding: "var(--space-9) var(--gutter-desktop)" }}>
        <div style={{ display: "grid", gap: "var(--space-5)", justifyItems: "start" }}>
          <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--yellow-500)" }}>San Benedetto del Tronto · Via Volturno 11</span>
          <h1 style={{ color: "var(--text-on-dark)", fontSize: "var(--text-hero)", margin: 0 }}>
            <span style={{ display: "inline-block", transform: "skewX(var(--display-skew))" }}>Il primo smash</span><br />
            <span style={{ display: "inline-block", transform: "skewX(var(--display-skew))", color: "var(--yellow-500)" }}>burger</span> <span style={{ display: "inline-block", transform: "skewX(var(--display-skew))" }}>a SBT</span>
          </h1>
          <p style={{ font: "var(--type-body)", fontSize: "var(--text-lg)", color: "var(--text-on-dark-muted)", maxWidth: "40ch", margin: 0 }}>
            Carne schiacciata sulla piastra, crosta croccante, doppio cheddar. Solo cena, solo panini fatti come si deve.
          </p>
          <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => window.scrollToSection("ordina")}>Ordina ora</Button>
            <Button variant="outline" size="lg" onDark onClick={() => window.scrollToSection("Menu")}>Vedi il menu</Button>
          </div>
          <div style={{ display: "flex", gap: "var(--space-5)", alignItems: "center", marginTop: "var(--space-2)" }}>
            <StarRating value={4.6} count={72} onDark />
            <span style={{ font: "var(--type-body-sm)", fontSize: "var(--text-sm)", color: "var(--text-on-dark-muted)" }}>Google · Tripadvisor</span>
          </div>
        </div>
        <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
          <img src="https://d8j0ntlcm91z4.cloudfront.net/user_35QJNirB4KsxLxgMn66BeyzwcqD/hf_20260817_081220_f19a0793-1e79-4315-a57a-7183ca600dbd.png" alt="Smash burger Sburger" style={{ width: "108%", maxWidth: 620, filter: "drop-shadow(0 30px 40px rgba(0,0,0,.55))" }} />
          <Tag tone="yellow" size="lg" style={{ position: "absolute", right: 0, top: 8, boxShadow: "var(--shadow-sticker)" }}>Doppio smash</Tag>
        </div>
      </div>
      <div style={{ height: 14, background: "var(--stripe-band)" }} />
    </section>
  );
}

function Locale() {
  const points = [
    { icon: "flame", title: "Smash, non hamburger", text: "Carne schiacciata a mano sulla piastra rovente: crosta fuori, succo dentro." },
    { icon: "clock", title: "Solo cena, 19–22", text: "Sei sere su sette. Il martedì la piastra riposa." },
    { icon: "map-pin", title: "In centro, a due passi dal mare", text: "Via Volturno 11 — asporto rapido o consegna con Deliveroo e Glovo." },
  ];
  return (
    <section id="Il locale" style={{ background: "var(--surface-page)", backgroundImage: "var(--grain)", backgroundSize: "var(--grain-size)", padding: "var(--section-y) 0" }}>
      <div style={{ ...window.container, display: "grid", gap: "var(--space-7)" }}>
        <SectionHeading eyebrow="Il locale" title="Tre cose, fatte bene" sub="Niente menu chilometrico: smash burger, patatine, e una salsa che facciamo noi." />
        <div className="sb-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)" }}>
          {points.map((p) => (
            <Card key={p.title} tone="light" border="hairline" style={{ display: "grid", gap: "var(--space-3)" }}>
              <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--red-600)", display: "grid", placeItems: "center" }}>
                <Icon name={p.icon} size={20} color="var(--ink-050)" />
              </span>
              <h4 style={{ margin: 0 }}>{p.title}</h4>
              <p style={{ margin: 0, font: "var(--type-body-sm)", color: "var(--text-muted)" }}>{p.text}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function MenuSection({ onAdd }) {
  return (
    <section id="Menu" style={{ background: "var(--ink-800)", backgroundImage: "var(--plate-dark)", padding: "var(--section-y) 0" }}>
      <div style={{ ...window.container, display: "grid", gap: "var(--space-7)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--space-5)" }}>
          <SectionHeading onDark eyebrow="Il menu" title="Sei panini, zero compromessi" />
          <Button variant="secondary" onClick={() => window.scrollToSection("ordina")}>Ordina ora</Button>
        </div>
        <div className="sb-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", alignItems: "stretch" }}>
          {window.SB.menu.map((m) => (
            <MenuItemCard key={m.name} layout="column" {...m} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Partnership() {
  return (
    <section style={{ background: "var(--red-600)", padding: "var(--section-y-mobile) 0" }}>
      <div className="sb-partnership-grid" style={{ ...window.container, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: "var(--space-6)", alignItems: "center" }}>
        <span style={{ width: 88, height: 88, borderRadius: "var(--radius-md)", background: "var(--ink-050)", display: "grid", placeItems: "center", font: "var(--type-eyebrow)", letterSpacing: "var(--ls-badge)", color: "var(--text-faint)", textAlign: "center", padding: 8 }}>
          Stemma<br />U.S. SBT<br />(da fornire)
        </span>
        <div style={{ display: "grid", gap: "var(--space-2)" }}>
          <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--yellow-500)" }}>Partner ufficiale</span>
          <h3 style={{ color: "var(--ink-050)", margin: 0 }}>U.S. Sambenedettese · stagione 2025/26</h3>
          <p style={{ margin: 0, font: "var(--type-body-sm)", color: "rgba(251,243,228,.82)", maxWidth: "56ch" }}>
            Dopo la partita il panino è d'obbligo. Mostra il biglietto della gara casalinga e ti offriamo le patatine.
          </p>
        </div>
        <Button variant="secondary" size="lg" onClick={() => window.scrollToSection("Menu")}>Scopri l'offerta</Button>
      </div>
    </section>
  );
}

function Reviews() {
  const reviews = [
    { name: "Recensione da inserire", text: "Testo segnaposto — sostituire con recensioni reali raccolte da Google o Tripadvisor con consenso.", stars: 5 },
    { name: "Recensione da inserire", text: "Testo segnaposto — 2–3 righe massimo, tono parlato, nome e piattaforma in fondo.", stars: 5 },
    { name: "Recensione da inserire", text: "Testo segnaposto — includere anche una recensione critica gestita bene, se utile.", stars: 4 },
  ];
  return (
    <section style={{ background: "var(--surface-page)", padding: "var(--section-y) 0" }}>
      <div style={{ ...window.container, display: "grid", gap: "var(--space-7)" }}>
        <SectionHeading eyebrow="Dicono di noi" title="4,6 su 5, e contiamo" sub="Segnaposto: le citazioni reali vanno raccolte dalle piattaforme con il consenso del cliente." />
        <div className="sb-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)" }}>
          {reviews.map((r, i) => (
            <Card key={i} tone="light" border="sign" sticker style={{ display: "grid", gap: "var(--space-3)" }}>
              <StarRating value={r.stars} size={16} />
              <p style={{ margin: 0, font: "var(--type-body)", color: "var(--text-body)" }}>{r.text}</p>
              <span style={{ font: "var(--type-label)", textTransform: "uppercase", letterSpacing: "var(--ls-badge)", color: "var(--text-faint)" }}>{r.name}</span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function FindUs() {
  return (
    <section id="Dove siamo" style={{ background: "var(--gingham-base)", backgroundImage: "var(--gingham)", padding: "var(--section-y) 0" }}>
      <div style={{ ...window.container }}>
        <Card tone="light" border="sign" sticker pad="0" radius="var(--radius-lg)" className="sb-findus-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden" }}>
          <div style={{ padding: "var(--space-7)", display: "grid", gap: "var(--space-5)", alignContent: "start" }}>
            <SectionHeading eyebrow="Dove siamo" title="Via Volturno 11" sub="63074 San Benedetto del Tronto (AP)" />
            <div style={{ display: "grid", gap: "var(--space-1)" }}>
              {window.SB.hours.map(([d, h]) => (
                <div key={d} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "var(--border-w) solid var(--border-hairline)", font: "var(--type-body-sm)", color: h === "Chiuso" ? "var(--text-faint)" : "var(--text-body)" }}>
                  <span>{d}</span>
                  <span style={{ fontFamily: "var(--font-condensed)", fontWeight: "var(--weight-bold)", color: h === "Chiuso" ? "var(--red-600)" : "var(--text-strong)" }}>{h}</span>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: "var(--space-3)" }}>
              <Button variant="primary" href={window.PHONE_TEL}><Icon name="phone" size={16} /> Chiama</Button>
              <Button variant="outline" href={window.MAPS_DIRECTIONS} target="_blank" rel="noopener noreferrer"><Icon name="navigation" size={16} /> Indicazioni</Button>
            </div>
          </div>
          <div style={{ position: "relative", minHeight: 420, borderLeft: "var(--border-w-thick) solid var(--ink-900)" }}>
            <iframe
              title="Mappa — Sburger, Via Volturno 11, San Benedetto del Tronto"
              src="https://www.openstreetmap.org/export/embed.html?bbox=13.8744%2C42.9503%2C13.8844%2C42.9553&layer=mapnik&marker=42.9527962%2C13.8794086"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", filter: "grayscale(15%) contrast(1.05)" }}
              loading="lazy"
            />
          </div>
        </Card>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Locale, MenuSection, Partnership, Reviews, FindUs });