// ---- BRAISE — Home / vitrine ------------------------------------------

function HeroResaWidget({ go, setSeed }) {
  // mini availability widget that seeds the booking flow
  const [date, setDate] = useState("");
  const [service, setService] = useState("diner");
  const [party, setParty] = useState(2);
  const tomorrow = (() => { const d = new Date(); d.setDate(d.getDate() + 1); if (isClosed(d)) d.setDate(d.getDate() + 1); return toISO(d); })();

  return (
    <div style={{
      background: "color-mix(in oklch, var(--paper) 92%, transparent)",
      backdropFilter: "blur(8px)", border: "1px solid color-mix(in oklch, var(--bone) 40%, transparent)",
      borderRadius: "var(--radius-lg)", padding: 22, boxShadow: "0 24px 60px -30px oklch(0.2 0.02 40 / 0.5)",
    }}>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "flex-end" }}>
        <div style={{ flex: "1 1 150px" }}>
          <label className="field-label">Date</label>
          <input className="field" type="text" readOnly value={date ? formatLong(date) : ""} placeholder="Choisir une date"
            onClick={() => { setDate(date || tomorrow); }} style={{ cursor: "pointer", textTransform: "capitalize" }} />
        </div>
        <div style={{ flex: "1 1 120px" }}>
          <label className="field-label">Service</label>
          <div style={{ display: "flex", gap: 6 }}>
            {SERVICES.map((s) => (
              <button key={s.id} onClick={() => setService(s.id)} style={{
                flex: 1, padding: "13px 8px", borderRadius: "var(--field-radius)", fontSize: 13.5, fontWeight: 500,
                border: `1px solid ${service === s.id ? "var(--ember)" : "var(--field-border)"}`,
                background: service === s.id ? "var(--ember-soft)" : "var(--field-bg)",
                color: service === s.id ? "var(--ember-deep)" : "var(--ink-soft)",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
              }}><Icon name={s.icon} size={15} />{s.name}</button>
            ))}
          </div>
        </div>
        <div style={{ flex: "0 0 auto" }}>
          <label className="field-label">Couverts</label>
          <select className="field" value={party} onChange={(e) => setParty(+e.target.value)} style={{ cursor: "pointer", minWidth: 76 }}>
            {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => <option key={n} value={n}>{n}</option>)}
          </select>
        </div>
        <button className="btn btn--ember" style={{ flex: "1 1 100%", padding: "15px 24px" }}
          onClick={() => { setSeed({ date: date || tomorrow, service, party }); go("reserver"); }}>
          Voir les disponibilités <Icon name="arrow-right" size={16} />
        </button>
      </div>
    </div>
  );
}

function Home({ go, setSeed }) {
  return (
    <div className="page-fade">
      {/* ---- Hero ---- */}
      <section style={{ position: "relative", marginTop: -74, minHeight: "min(92vh, 760px)", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <Ph tone="dark" style={{ position: "absolute", inset: 0 }} label="ambiance — salle & foyer au feu de bois" />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, oklch(0.18 0.02 40 / 0.92), oklch(0.18 0.02 40 / 0.30) 55%, oklch(0.18 0.02 40 / 0.55))" }} />
        <div className="container" style={{ position: "relative", paddingTop: 120, paddingBottom: 56, width: "100%" }}>
          <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 0.9fr", gap: 48, alignItems: "end" }}>
            <div className="stagger">
              <div className="eyebrow eyebrow--light" style={{ marginBottom: 22, animationDelay: "0.05s" }}>Lyon · Cuisine au feu de bois</div>
              <h1 style={{ fontSize: "clamp(46px, 7vw, 92px)", color: "var(--bone)", lineHeight: 0.98, animationDelay: "0.12s" }}>
                Le goût<br />de la flamme
              </h1>
              <p style={{ marginTop: 26, maxWidth: 440, fontSize: 17.5, lineHeight: 1.7, color: "color-mix(in oklch, var(--bone) 82%, transparent)", animationDelay: "0.2s" }}>
                {RESTO.intro}
              </p>
            </div>
            <div className="stagger" style={{ animationDelay: "0.28s" }}>
              <HeroResaWidget go={go} setSeed={setSeed} />
            </div>
          </div>
        </div>
      </section>

      {/* ---- Concept split ---- */}
      <section className="container" style={{ padding: "100px 32px" }}>
        <div className="home-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <Ph tone="ember" style={{ aspectRatio: "4/5", borderRadius: "var(--radius-lg)" }} label="plat signature au feu" />
          <div>
            <SectionHead eyebrow="La maison" title="Vingt-huit couverts, un seul foyer"
              sub="Tout passe par le feu. Le bois de chêne et de hêtre donne le tempo du service : on saisit, on fume, on laisse braiser. Le menu change chaque semaine au gré du marché et de l'arrivage." />
            <div style={{ marginTop: 30, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
              {[["leaf", "Produits de saison", "Maraîchers et pêche du jour, circuit court."],
                ["flame", "Cuisson au bois", "Foyer ouvert, braises de chêne et de hêtre."]].map(([ic, t, d]) => (
                <div key={t}>
                  <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--ember-soft)", color: "var(--ember-deep)", display: "grid", placeItems: "center", marginBottom: 12 }}>
                    <Icon name={ic} size={19} />
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 19, marginBottom: 4 }}>{t}</div>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ---- Signatures ---- */}
      <section style={{ background: "var(--bone-deep)", padding: "100px 0" }}>
        <div className="container">
          <SectionHead eyebrow="À la carte" title="Quelques signatures" align="center"
            sub="Un aperçu de la carte du moment. Elle évolue au fil des semaines." />
          <div className="sig-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22, marginTop: 52 }}>
            {SIGNATURES.map((s) => (
              <div key={s.id}>
                <Ph tone={s.tone} style={{ aspectRatio: "3/4", borderRadius: "var(--radius-lg)", marginBottom: 16 }} label="plat" />
                <div className="eyebrow" style={{ marginBottom: 8, color: "var(--ink-faint)" }}>{s.cat}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.15 }}>{s.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---- Hours + CTA ---- */}
      <section className="container" style={{ padding: "100px 32px" }}>
        <div className="home-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <SectionHead eyebrow="Horaires" title="Quand passer" />
            <div style={{ marginTop: 28, border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
              {RESTO.hours.map(([day, time], i) => (
                <div key={day} style={{
                  display: "flex", justifyContent: "space-between", gap: 16, padding: "16px 22px",
                  borderBottom: i < RESTO.hours.length - 1 ? "1px solid var(--line-soft)" : "none",
                  background: time === "Fermé" ? "var(--bone-deep)" : "var(--paper)",
                }}>
                  <span style={{ fontWeight: 500, fontSize: 14.5 }}>{day}</span>
                  <span style={{ fontSize: 14.5, color: time === "Fermé" ? "var(--ink-faint)" : "var(--ink-soft)", fontFamily: "var(--font-mono)", fontSize: 13 }}>{time}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap", fontSize: 14, color: "var(--ink-soft)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="pin" size={16} style={{ color: "var(--ember)" }} />{RESTO.address}</span>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="phone" size={16} style={{ color: "var(--ember)" }} />{RESTO.phone}</span>
            </div>
          </div>
          <div style={{ background: "var(--espresso)", borderRadius: "var(--radius-lg)", padding: "52px 44px", color: "var(--bone)", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: -40, right: -40, width: 180, height: 180, borderRadius: "50%", background: "radial-gradient(circle, var(--ember) 0%, transparent 70%)", opacity: 0.4 }} />
            <div className="eyebrow eyebrow--light" style={{ position: "relative", marginBottom: 18 }}>Réservation</div>
            <h2 style={{ position: "relative", fontSize: "clamp(28px, 4vw, 40px)", color: "var(--bone)", marginBottom: 16 }}>
              Réservez votre table
            </h2>
            <p style={{ position: "relative", margin: "0 0 30px", fontSize: 15.5, lineHeight: 1.7, color: "color-mix(in oklch, var(--bone) 76%, transparent)", maxWidth: 360 }}>
              En ligne, en moins d'une minute. Un acompte de {fmtEur(DEPOSIT_PER_SEAT)} par couvert confirme la table et se déduit de l'addition.
            </p>
            <button className="btn" style={{ position: "relative", background: "var(--ember)", borderColor: "var(--ember)", color: "var(--paper)" }} onClick={() => go("reserver")}>
              Réserver une table <Icon name="arrow-right" size={16} />
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });