function Home({ setRoute, goToMenuCat }) {
  return (
    <main>
      {/* Hero */}
      <section className="hero-section" style={{ padding: "60px 0 40px" }}>
        <div className="container hero-grid">
          <div>
            <div className="hero-cta-mobile">
              <button className="btn btn-primary" onClick={() => setRoute("menu")}>
                Commander en ligne <Icon.ArrowRight />
              </button>
            </div>
            <h1 style={{ marginBottom: 24 }}>
              Le goût de l'Italie,<br/>
              <em style={{ color: "var(--accent)", fontStyle: "italic" }}>au cœur de Bercy.</em>
            </h1>
            <div className="hero-img-mobile">
              <HeroImage />
            </div>
            <div className="row stats-row" style={{ gap: 32, marginBottom: 24, flexWrap: "wrap" }}>
              <Stat n="2001" label="Maison fondée" />
              <Stat n="100%" label="Pâte à pizza maison" />
            </div>
            <div style={{ marginBottom: 32 }}>
              <div className="label" style={{ color: "var(--accent)", marginBottom: 4 }}>La carte</div>
              <div style={{ fontFamily: "Instrument Serif, serif", fontSize: 22, marginBottom: 14 }}>Nos spécialités</div>
              <div className="cat-grid">
                {[
                  { id: "pizzas",   label: "Pizzas",           sub: "25 recettes – Fameuses, Spéciales & Divas" },
                  { id: "pasta",    label: "Pâtes & Lasagnes", sub: "Pâtes fraîches et lasagnes maison" },
                  { id: "insalate", label: "Salades",          sub: "7 créations fraîches de saison" },
                  { id: "carni",    label: "Viandes",          sub: "Entrecôtes bœuf & escalopes de dinde" },
                ].map(c => (
                  <button key={c.id} onClick={() => goToMenuCat(c.id)} style={{
                    background: "var(--cream)", border: "1px solid var(--line)",
                    borderRadius: 16, padding: 18, textAlign: "left",
                    transition: "background .15s",
                  }} onMouseEnter={e => e.currentTarget.style.background = "var(--cream-2)"}
                     onMouseLeave={e => e.currentTarget.style.background = "var(--cream)"}>
                    <div style={{ fontFamily: "Instrument Serif, serif", fontSize: 22, marginBottom: 4 }}>{c.label}</div>
                    <div className="small muted">{c.sub}</div>
                    <div className="row" style={{ marginTop: 12, color: "var(--accent)", fontSize: 13, fontWeight: 500 }}>
                      Découvrir <Icon.ArrowRight />
                    </div>
                  </button>
                ))}
              </div>
            </div>

            <div className="row cta-row" style={{ gap: 12 }}>
              <button className="btn btn-primary" onClick={() => setRoute("menu")}>
                Voir le menu <Icon.ArrowRight />
              </button>
              <a className="btn btn-ghost" href={`tel:${RESTAURANT.phone}`}>
                <Icon.Phone /> Réserver une table
              </a>
            </div>

          </div>

          <div className="hero-img-desktop" style={{ position: "relative" }}>
            <HeroImage />
          </div>
        </div>
      </section>

      {/* Quick info strip */}
      <section style={{ padding: "32px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container info-strip">
          <Info icon={<Icon.Pin />}   title="Adresse"     value={RESTAURANT.address}    sub={RESTAURANT.metro} />
          <Info icon={<Icon.Clock />} title="Horaires" value="11:30 – 15:00  ·  18:00 – 21:45" sub="Du lundi au samedi" />
          <Info icon={<Icon.Phone />} title="Téléphone"   value={RESTAURANT.phone}      sub="Réservations & livraison" />
          <Info icon={<Icon.Mail />}  title="Email"       value={RESTAURANT.email}      sub="Réponse sous 24 h" />
        </div>
      </section>

    </main>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div className="stat-n" style={{ fontFamily: "Instrument Serif, serif", lineHeight: 1 }}>{n}</div>
      <div className="small muted" style={{ marginTop: 4 }}>{label}</div>
    </div>
  );
}

function Info({ icon, title, value, sub }) {
  return (
    <div className="row" style={{ alignItems: "flex-start", gap: 14 }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: "var(--cream)", color: "var(--ink)",
        display: "grid", placeItems: "center", flex: "none"
      }}>{icon}</div>
      <div>
        <div className="label" style={{ marginBottom: 2 }}>{title}</div>
        <div style={{ fontWeight: 500 }}>{value}</div>
        <div className="small muted">{sub}</div>
      </div>
    </div>
  );
}

function Row({ icon, text, sub }) {
  return (
    <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
      <div style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(255,255,255,.06)", display: "grid", placeItems: "center", flex: "none" }}>{icon}</div>
      <div>
        <div style={{ fontWeight: 500 }}>{text}</div>
        <div className="small" style={{ color: "#8a857c" }}>{sub}</div>
      </div>
    </div>
  );
}

function HeroImage() {
  return (
    <div style={{
      position: "relative", aspectRatio: "4/5",
      borderRadius: 24, overflow: "hidden",
      background: "#1a1410",
      border: "1px solid var(--line)",
    }}>
      <img
        src="assets/pexels-rumpy-34480202.jpg"
        alt="Pizza au feu de bois Cap Bercy"
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
      />
    </div>
  );
}

window.Home = Home;