// Frangos — Reserve + Story pages
function ReservePage() {
  const { t } = useApp();
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", phone: "", date: "", time: "20:00", guests: 2, area: 0 });
  const ok = form.name.trim() && form.phone.trim() && form.date && form.time;

  if (sent) {
    return (
      <main className="page page-narrow" data-screen-label="Reserve / Confirmation">
        <div className="confirm-card">
          <div className="confirm-flame"><Flame size={40} color="#fff"></Flame></div>
          <h1 className="display confirm-title">{t.reserve.confirmTitle}</h1>
          <p className="confirm-no">{form.date} · {form.time} · {form.guests} <span>{t.reserve.guests.toLowerCase()}</span> · {t.reserve.areas[form.area]}</p>
          <p className="section-sub">{t.reserve.confirmBody}</p>
          <button className="btn btn-outline" onClick={() => { setSent(false); setForm({ ...form, name: "", phone: "" }); }}>{t.reserve.another}</button>
        </div>
      </main>
    );
  }

  return (
    <main className="page page-narrow" data-screen-label="Reserve">
      <header className="page-head">
        <div className="kicker"><Flame size={13} color="var(--accent)"></Flame><span>{t.nav.reserve}</span></div>
        <h1 className="display page-title">{t.reserve.title}</h1>
        <p className="section-sub">{t.reserve.sub}</p>
      </header>
      <form className="reserve-form" onSubmit={(e) => { e.preventDefault(); if (ok) { setSent(true); window.scrollTo(0, 0); } }}>
        <label className="field"><span>{t.reserve.name}</span>
          <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}></input>
        </label>
        <label className="field"><span>{t.reserve.phone}</span>
          <input type="tel" dir="ltr" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}></input>
        </label>
        <div className="field-row">
          <label className="field"><span>{t.reserve.date}</span>
            <input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })}></input>
          </label>
          <label className="field"><span>{t.reserve.time}</span>
            <input type="time" value={form.time} onChange={(e) => setForm({ ...form, time: e.target.value })}></input>
          </label>
        </div>
        <div className="field">
          <span>{t.reserve.guests}</span>
          <div className="guest-row">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((n) => (
              <button type="button" key={n} className={"guest-btn" + (form.guests === n ? " on" : "")} onClick={() => setForm({ ...form, guests: n })}>{n}</button>
            ))}
          </div>
        </div>
        <div className="field">
          <span>{t.reserve.area}</span>
          <div className="pay-options">
            {t.reserve.areas.map((a, i) => (
              <button type="button" key={a} role="radio" aria-checked={form.area === i} className={"pay-btn" + (form.area === i ? " on" : "")} onClick={() => setForm({ ...form, area: i })}>{a}</button>
            ))}
          </div>
        </div>
        <button type="submit" className="btn btn-accent btn-block" disabled={!ok}>{t.reserve.submit}</button>
      </form>
    </main>
  );
}

function StoryPage() {
  const { t } = useApp();
  return (
    <main className="page" data-screen-label="Our story">
      <header className="page-head">
        <div className="kicker"><Flame size={13} color="var(--accent)"></Flame><span>{t.story.kicker}</span></div>
        <h1 className="display page-title">{t.story.title}</h1>
      </header>
      <Reveal className="story-hero">
        <img src="images/chef-passion.jpg" alt="Frangos chef plating a dish" loading="lazy"></img>
      </Reveal>
      <div className="story-cols">
        <Reveal as="p" className="story-p">{t.story.p1}</Reveal>
        <Reveal as="p" className="story-p" delay={120}>{t.story.p2}</Reveal>
      </div>
      <div className="values-grid">
        {t.story.values.map((v, i) => (
          <Reveal key={i} delay={i * 110} className="value-card">
            <Flame size={22} color="var(--accent)"></Flame>
            <h3>{v.t}</h3>
            <p>{v.d}</p>
          </Reveal>
        ))}
      </div>
      <Reveal className="halal-card">
        <HalalBadge size="lg"></HalalBadge>
        <div>
          <h2 className="display halal-title">{t.story.halalTitle}</h2>
          <p className="section-sub">{t.story.halalBody}</p>
        </div>
      </Reveal>
      <div className="story-gallery">
        {["images/wings-grilled.jpg", "images/spread-drinks.jpg", "images/chef-grill.jpg"].map((src, i) => (
          <Reveal key={src} delay={i * 100} className="gal-img">
            <img src={src} alt="" loading="lazy"></img>
          </Reveal>
        ))}
      </div>
    </main>
  );
}

Object.assign(window, { ReservePage, StoryPage });