/* global React */
const { useState } = React;
const { AmaraIcon: Icon, AmaraReveal: Reveal } = window;

// ---------- HERO ----------
function Hero() {
  return (
    <section className="hero">
      <video className="hero__video" src="assets/video-dough.mp4" poster="assets/img-hands-dough.webp" autoPlay muted loop playsInline />
      <div className="hero__scrim" />
      <div className="hero__content">
        <div className="hero__inner">
          <div className="eyebrow">Surrey, BC · Est. concept</div>
          <h1 className="hero__title">Recipes that outlived empires.</h1>
          <p className="hero__sub">Slow-cooked Punjabi food from a kitchen that refuses shortcuts. Surrey, BC.</p>
          <div className="hero__ctas">
            <a className="btn btn--primary" href="reservations.html">Reserve a table <Icon.Arrow /></a>
            <a className="tlink" href="menu.html">See the menu <Icon.Arrow className="arrow" /></a>
          </div>
        </div>
      </div>
      <div className="hero__meta">
        <span>Dinner · Tuesday to Saturday</span>
        <span className="dot">·</span>
        <span>5:30 to 10:30</span>
        <span className="dot">·</span>
        <span>By reservation</span>
      </div>
    </section>
  );
}

// ---------- OPENING PHILOSOPHY (60 words) ----------
function Philosophy() {
  return (
    <section className="philo">
      <div className="philo__inner">
        <Reveal>
          <div className="philo__rule">
            <span className="line" />
            <span className="label">A Note from the Kitchen</span>
            <span className="line" />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p className="philo__text">
            We cook the <em>old way</em>. Pulses soaked overnight. Meat rubbed and rested for a day. Bread made by hand before each service. From the clay oven, lentils over a low flame for hours, greens slow-cooked in the winter months. <em>Nothing here is quick.</em> Nothing is claimed. The food, we hope, will speak for itself.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- BENTO (4 dishes, asymmetric) ----------
function Bento() {
  const dishes = [
    {
      img: "assets/img-dal-copper.webp",
      tag: "The long cook",
      name: "Dal Makhani",
      gur: "ਦਾਲ ਮੱਖਣੀ",
      desc: "Black urad over a low flame. Four hours. Cream added last, off the heat.",
      span: true,
    },
    {
      img: "assets/img-tandoor.webp",
      tag: "From the clay oven",
      name: "Sheekh Kebab",
      gur: "ਸੀਖ ਕਬਾਬ",
      desc: "Lamb, green chilli, raw papaya. Skewered over coals.",
    },
    {
      img: "assets/img-prep-mortar.webp",
      tag: "By hand",
      name: "Sarson da Saag",
      gur: "ਸਰ੍ਹੋਂ ਦਾ ਸਾਗ",
      desc: "Mustard greens, stone-ground corn roti, white butter. In the winter months.",
    },
    {
      img: "assets/img-spices-slate.webp",
      tag: "From the pantry",
      name: "Seven pulses. Twelve spices.",
      gur: "",
      desc: "Three oils. Nothing frozen. Nothing from a jar. Nothing we cannot trace to a village.",
    },
  ];
  return (
    <section className="bento" id="menu">
      <div className="bento__inner">
        <Reveal>
          <div className="section__head" style={{padding:0, marginBottom: 60}}>
            <div className="eyebrow">The Menu <span className="gur">· ਮੇਨੂ</span></div>
            <h2 className="section__title">A short list, <em>written by hand.</em> Updated when the village sends word.</h2>
          </div>
        </Reveal>
        <div className="bento__grid">
          {dishes.map((d, i) => (
            <Reveal key={d.name} delay={i * 60} className={"bento__card" + (d.span ? " span-2" : "")}>
              <img className="bento__img" src={d.img} alt="" />
              <div className="bento__scrim" />
              <div className="bento__body">
                <div className="bento__tag">{d.tag}</div>
                <h3 className="bento__name">{d.name}{d.gur && <span className="bento__gur">{d.gur}</span>}</h3>
                <p className="bento__desc">{d.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <div style={{textAlign: 'center', marginTop: 56}}>
            <a className="tlink" href="menu.html">See the full menu <Icon.Arrow className="arrow" /></a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- KITCHEN SPLIT ----------
function KitchenSplit() {
  return (
    <section className="ksplit" id="kitchen">
      <div className="ksplit__grid">
        <Reveal className="ksplit__media">
          <img src="assets/img-tandoor.webp" alt="A tandoor, fired at dusk." />
          <div className="ksplit__caption">The tandoor · fired at 4pm</div>
        </Reveal>
        <Reveal delay={120}>
          <div className="eyebrow">The Kitchen <span className="gur">· ਰਸੋਈ</span></div>
          <h2 className="ksplit__title">A tandoor, lined with <em>river clay.</em></h2>
          <div className="ksplit__body">
            <p>Fired at four. By six, it holds the heat we need. Bread goes on the wall, meat on the skewer, and both leave blistered on one side — the old way, taught to our head cook by a mamaji who would not let him near the coals until he turned sixteen.</p>
            <p>The pantry runs on seven pulses and twelve whole spices. Ghee from a single dairy. Nothing frozen. Nothing from a jar.</p>
            <div style={{marginTop: 28}}>
              <a className="tlink" href="story.html">Read our story <Icon.Arrow className="arrow" /></a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- PRIVATE DINING TEASER ----------
function PrivateTeaser() {
  return (
    <section className="private" id="private">
      <div className="private__inner">
        <Reveal>
          <p className="private__line">A long table, a set menu, and the kitchen cooking <em>for you alone.</em></p>
        </Reveal>
        <Reveal delay={120}>
          <div className="private__right">
            <span className="private__meta">Private dining · 10 to 24 guests</span>
            <a className="btn btn--secondary" href="#">Enquire about a private evening <Icon.Arrow /></a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- RESERVATION BLOCK (inline, on Paper card) ----------
function ReserveBlock() {
  return (
    <section className="res-block" id="visit">
      <div className="res-block__wrap">
        <Reveal>
          <div className="res-card">
            <div className="res-card__eyebrow">Reserve a table</div>
            <h3 className="res-card__title">We hold your table until quarter past.</h3>
            <p className="res-card__sub">Dinner service is small — around forty seats a night, turned once. Reserving is the only way in on a Friday or Saturday.</p>
            <div className="res-row">
              <div className="field">
                <label htmlFor="r-date">Date</label>
                <input id="r-date" type="text" defaultValue="Thursday, 26 March" />
              </div>
              <div className="field">
                <label htmlFor="r-time">Time</label>
                <select id="r-time" defaultValue="7:00 pm">
                  <option>5:30 pm</option><option>6:00 pm</option><option>6:30 pm</option>
                  <option>7:00 pm</option><option>7:30 pm</option><option>8:00 pm</option><option>8:30 pm</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="r-party">Guests</label>
                <select id="r-party" defaultValue="4 guests">
                  <option>2 guests</option><option>3 guests</option><option>4 guests</option>
                  <option>5 guests</option><option>6 guests</option><option>7 guests</option><option>8 guests</option>
                </select>
              </div>
            </div>
            <div className="res-row" style={{gridTemplateColumns: '1fr'}}>
              <div className="field">
                <label htmlFor="r-note">A note to the kitchen · optional</label>
                <textarea id="r-note" placeholder="Allergies, an occasion, or something we ought to know."></textarea>
              </div>
            </div>
            <div className="res-card__foot">
              <button className="btn btn--primary">Hold the table <Icon.Arrow /></button>
              <span className="res-card__note">Walk-ins welcomed at the counter seats, Tuesday through Thursday.</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HomeHero = Hero;
window.HomePhilosophy = Philosophy;
window.HomeBento = Bento;
window.HomeKitchenSplit = KitchenSplit;
window.HomePrivateTeaser = PrivateTeaser;
window.HomeReserveBlock = ReserveBlock;