// Home page

function HomePage({ setPage }) {
  return (
    <main className="home">
      {/* Hero */}
      <section className="hero">
        <div className="hero__media">
          <img src="assets/nihari-1.jpg" alt="Nihari with ghee and ginger" />
          <div className="hero__scrim"></div>
        </div>
        <div className="hero__content">
          <div className="hero__eyebrow">
            <span className="eyebrow-dot"></span> Since 1973 · Deira to all of the UAE
          </div>
          <h1 className="hero__h1">
            Authentic Pakistani <em>flavours</em><br/>since 1973.
          </h1>
          <p className="hero__sub">
            22 branches across the UAE. One central kitchen serving
            <strong> 100,000 meals a day.</strong> Still hot on your plate.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={() => setPage("branches")}>
              <PinIcon /> Find My Nearest Branch
            </button>
            <button className="btn btn--gold btn--lg" onClick={() => setPage("order")}>
              Order on Talabat <ArrowIcon />
            </button>
          </div>
          <div className="hero__meta">
            <Stat n="22" l="UAE branches" />
            <div className="hero__div" />
            <Stat n="100K" l="meals / day" />
            <div className="hero__div" />
            <Stat n="52 yrs" l="of service" />
            <div className="hero__div" />
            <Stat n="5 AM – 2 AM" l="daily hours" />
          </div>
        </div>
      </section>

      {/* Signature strip */}
      <section className="section section--cream">
        <div className="container">
          <SectionHead
            kicker="Signatures · Talabat best-sellers"
            title="The dishes that built the family business."
            sub="Four plates, one karahi, fifty-two years."
          />
          <div className="sig-grid">
            <SigCard img="assets/nihari-1.jpg" name="Nihari" price={21} desc="Slow-cooked overnight. Breakfast ritual at Muteena, Karama, Fahidi." />
            <SigCard img="assets/haleem.jpg" name="Shahi Haleem" price={19} desc="Lentils, wheat, mutton — pounded for hours." />
            <SigCard img="assets/karahi-tikka.jpg" name="Karachi Tikka Karahi" price={30} desc="Charred tikka folded into karahi gravy." />
            <SigCard img="assets/biryani-mutton.jpg" name="Prawn Biryani" price={40} desc="Long-grain rice, prawns, our signature masala." />
          </div>
          <div className="center"><button className="btn btn--ghost" onClick={() => setPage("menu")}>See the full menu <ArrowIcon /></button></div>
        </div>
      </section>

      {/* Day-part rhythm — 5 AM to 2 AM */}
      <section className="section daypart">
        <div className="container">
          <SectionHead
            kicker="From 5 AM to 2 AM · daily"
            title="A 21-hour kitchen, three meals deep."
            sub="Most outlets pour the first sulaimani at 5 AM and pull the last roti at 2 AM. Three flagships never close. Here's what's on the pass at each shift."
          />
          <div className="dp-grid">
            <DayPartCard
              tag="05:00 — 11:00"
              kicker="Breakfast"
              title="Nihari before the heat sets in."
              img="assets/nihari-2.jpg"
              dishes={[
                { name: "Nihari", price: 21 },
                { name: "Shahi Haleem", price: 19 },
                { name: "Mutton Paya", price: 17 },
                { name: "Halwa Puri", price: 15 },
                { name: "Sulaimani Tea", price: 2 },
              ]}
              note="A daily ritual at Muteena, Karama, Fahidi. The ghee top is non-negotiable."
            />
            <DayPartCard
              tag="11:00 — 17:00"
              kicker="Lunch"
              title="Karahi, biryani, a stack of roti."
              img="assets/biryani-mutton.jpg"
              dishes={[
                { name: "Mutton Biryani", price: 22 },
                { name: "Chicken Karahi", price: 17 },
                { name: "Daal Gosht", price: 21 },
                { name: "Tandoori Roti", price: 2 },
                { name: "KDR Combo Tray", price: "26–31" },
              ]}
              note="AED 20–40 a head. Less than AED 100 feeds a family of four."
            />
            <DayPartCard
              tag="19:00 — 02:00"
              kicker="Evening & Late Night"
              title="BBQ off the skewer."
              img="assets/chicken-tikka.jpg"
              dishes={[
                { name: "Chicken Tikka", price: 16 },
                { name: "Mumtaz Chicken Kebab", price: 21 },
                { name: "Bihari Boti", price: 19 },
                { name: "Mutton Seekh", price: 24 },
                { name: "Royal Mix Grill (4 pax)", price: 102 },
              ]}
              note="Three flagships — Karama One, Muteena, Fahidi — run the grill past midnight."
            />
          </div>
        </div>
      </section>

      {/* Central kitchen story */}
      <section className="kitchen">
        <div className="container kitchen__grid">
          <div className="kitchen__left">
            <div className="kitchen__num">100,000</div>
            <div className="kitchen__label">meals leave our central kitchen every day.</div>
            <p className="kitchen__copy">
              In Al Qusais Industrial 3, one kitchen feeds 22 dining rooms — and the labour camps,
              weddings, corporate floors and family weekends in between.
              First in our category with <strong>ISO 9001, ISO 22000</strong> and <strong>HACCP</strong>.
            </p>
            <button className="btn btn--primary" onClick={() => setPage("catering")}>
              Enquire about catering <ArrowIcon />
            </button>
          </div>
          <div className="kitchen__right">
            <div className="kitchen__pill"><span className="dot"></span> Live · 4 trays out the door / second</div>
            <div className="kitchen__counter"><LiveCounter /></div>
            <div className="kitchen__legend">
              <div><b>1973</b> Founded</div>
              <div><b>22</b> Branches</div>
              <div><b>3</b> Emirates</div>
              <div><b>1,300+</b> Staff at peak</div>
            </div>
          </div>
        </div>
      </section>

      {/* Founder teaser */}
      <section className="section">
        <div className="container founder">
          <div className="founder__photo founder__photo--real">
            <img src="assets/tripadvisor-restaurant.jpg" alt="Karachi Darbar neon signage at night, Muteena branch" />
            <div className="founder__photo-cap">
              <span className="founder__photo-dot"></span>
              Muteena flagship · neon signage, c. 2018 (Tripadvisor)
            </div>
          </div>
          <div className="founder__copy">
            <div className="kicker">Our story · Fifty-two years</div>
            <blockquote className="pullquote">
              "In 1967, Haji Mohammad Farooq stepped off a cruise ship in Dubai with very little.
              Six years later he bought a small Deira restaurant called <em>Tipu Sultan</em> for
              <strong> AED 60,000</strong> — AED 20,000 down and the rest paid as the karahi-pans went on the fire."
            </blockquote>
            <p className="founder__rest">
              Fifty-two years on, his son Ayaz runs 22 Karachi Darbar branches across the UAE and
              a central kitchen that sends out 100,000 meals a day. The roti is still hot, and it still costs what it should.
            </p>
            <button className="btn btn--ghost" onClick={() => setPage("story")}>Read the full story <ArrowIcon /></button>
          </div>
        </div>
      </section>

      {/* Branch finder teaser */}
      <section className="branch-teaser">
        <div className="container branch-teaser__grid">
          <div>
            <div className="kicker kicker--gold">Open now · 22 branches</div>
            <h2 className="h2">From Karama to Ajman — there's a Darbar near you.</h2>
            <p className="lead">
              Three flagships open 24 hours. Most outlets pour the first chai at 5 AM and pull the last roti at 2 AM.
              We mapped every branch to its phone, hours and parking — something the old site never did.
            </p>
            <button className="btn btn--primary btn--lg" onClick={() => setPage("branches")}>
              <CompassIcon /> Use my location
            </button>
          </div>
          <div className="branch-teaser__map">
            <BranchPreview setPage={setPage} />
          </div>
        </div>
      </section>

      {/* From our dining rooms — real UGC + storefronts */}
      <section className="section section--cream">
        <div className="container">
          <SectionHead
            kicker="From our dining rooms · not from a stock library"
            title="What the room actually looks like."
            sub="A wall of photographs from Tripadvisor camera rolls, regulars, and the day shift. Real branches, real plates, no garnish team."
          />
          <div className="ugc-grid">
            <figure className="ugc ugc--tall">
              <img src="assets/tripadvisor-restaurant.jpg" alt="Muteena neon sign" />
              <figcaption><span className="ugc__pill">Storefront · Muteena</span></figcaption>
            </figure>
            <figure className="ugc">
              <img src="assets/dining-1.jpg" alt="Lunchtime dining room" />
              <figcaption><span className="ugc__pill">Lunch crowd · Karama</span></figcaption>
            </figure>
            <figure className="ugc">
              <img src="assets/ugc-bbq.jpg" alt="BBQ table spread, customer photo" />
              <figcaption><span className="ugc__pill">Customer · BBQ table</span></figcaption>
            </figure>
            <figure className="ugc ugc--wide">
              <img src="assets/halwa-puri.jpg" alt="Halwa puri breakfast plate" />
              <figcaption><span className="ugc__pill">5 AM · Halwa Puri</span></figcaption>
            </figure>
            <figure className="ugc">
              <img src="assets/ugc-pot.jpg" alt="Clay-pot karahi served at the table" />
              <figcaption><span className="ugc__pill">Clay-pot karahi</span></figcaption>
            </figure>
            <figure className="ugc">
              <img src="assets/paratha.jpg" alt="Paratha stack" />
              <figcaption><span className="ugc__pill">Hot off the tandoor</span></figcaption>
            </figure>
          </div>
          <p className="ugc__note">
            Founder portrait, central-kitchen scale photoshoot and updated flagship signage are commissioned for launch.
            Everything above is real and live today.
          </p>
        </div>
      </section>

      {/* Karachi Grill — sub-brand bridge */}
      <section className="grill-bridge">
        <div className="container grill-bridge__grid">
          <div className="grill-bridge__photo">
            <img src="assets/tripadvisor-in-dubai.jpg" alt="Karachi Grill, Jumeirah — dining room" />
            <div className="grill-bridge__photo-cap">
              <span className="grill-bridge__photo-dot"></span> Villa 290 · Jumeirah Beach Road
            </div>
          </div>
          <div className="grill-bridge__copy">
            <div className="kicker kicker--cream">Sister brand · for when you need a tablecloth</div>
            <h2 className="h2 grill-bridge__h">
              Same kitchen DNA.<br/>
              <em>A different room.</em>
            </h2>
            <p className="grill-bridge__lead">
              Karachi Grill is our fusion Indo-Pak fine-dining sibling at Villa 290 on Jumeirah Beach Road.
              Built for an anniversary, a quiet booth, an Eid family dinner. The karahi tastes the same.
              The lighting is different.
            </p>
            <ul className="grill-bridge__list">
              <li><span className="dot"></span> Lunch &amp; dinner · 12:00 PM – 12:00 AM</li>
              <li><span className="dot"></span> Reservations on EazyDiner</li>
              <li><span className="dot"></span> Shared CRM with the group · <a href="mailto:cro@karachigrilluae.com">cro@karachigrilluae.com</a></li>
            </ul>
            <div className="grill-bridge__cta">
              <button className="btn btn--gold btn--lg" onClick={() => setPage("karachi-grill")}>
                Visit Karachi Grill <ArrowIcon />
              </button>
              <a className="btn btn--ghost btn--lg" href="https://www.karachigrilluae.com/" target="_blank" rel="noreferrer">
                karachigrilluae.com ↗
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Press strip */}
      <section className="press-strip">
        <div className="container">
          <div className="press-strip__inner">
            {window.PRESS.map((p, i) => (
              <figure key={i} className="press-quote">
                <blockquote>"{p.quote}"</blockquote>
                <figcaption>— {p.outlet}, {p.year}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Footer CTA */}
      <section className="footer-cta">
        <div className="container footer-cta__inner">
          <h2 className="h2 footer-cta__h">Hungry? Three taps and a hot roti.</h2>
          <div className="footer-cta__buttons">
            <button className="btn btn--primary btn--lg" onClick={() => setPage("order")}>Order on Talabat</button>
            <button className="btn btn--gold btn--lg" onClick={() => setPage("branches")}>Find my branch</button>
            <a href="tel:+97142673131" className="btn btn--ghost btn--lg"><PhoneIcon /> Call Head Office</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function Stat({ n, l }) {
  return <div className="stat"><div className="stat__n">{n}</div><div className="stat__l">{l}</div></div>;
}

function SectionHead({ kicker, title, sub }) {
  return (
    <div className="sec-head">
      <div className="kicker">{kicker}</div>
      <h2 className="h2">{title}</h2>
      {sub && <p className="sec-head__sub">{sub}</p>}
    </div>
  );
}

function SigCard({ img, name, price, desc }) {
  return (
    <article className="sig">
      <div className="sig__img"><img src={img} alt={name} /></div>
      <div className="sig__body">
        <div className="sig__row">
          <h3 className="sig__name">{name}</h3>
          <div className="sig__price">AED <b>{price}</b></div>
        </div>
        <p className="sig__desc">{desc}</p>
      </div>
    </article>
  );
}

function DayPartCard({ tag, kicker, title, img, dishes, note }) {
  return (
    <article className="dp">
      <div className="dp__img"><img src={img} alt={title} /><div className="dp__scrim"></div><div className="dp__tag">{tag}</div></div>
      <div className="dp__body">
        <div className="dp__kicker">{kicker}</div>
        <h3 className="dp__h">{title}</h3>
        <ul className="dp__list">
          {dishes.map((d, i) => (
            <li key={i}>
              <span className="dp__name">{d.name}</span>
              <span className="dp__dots" aria-hidden></span>
              <span className="dp__price">AED <b>{d.price}</b></span>
            </li>
          ))}
        </ul>
        <p className="dp__note">{note}</p>
      </div>
    </article>
  );
}

function LiveCounter() {
  const [n, setN] = React.useState(67423);
  React.useEffect(() => {
    const t = setInterval(() => setN(v => v + Math.floor(Math.random() * 5) + 1), 600);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="counter">
      <div className="counter__digits">{n.toLocaleString()}</div>
      <div className="counter__label">meals plated · today, so far</div>
    </div>
  );
}

function BranchPreview({ setPage }) {
  const featured = window.BRANCHES.filter(b => b.flagship).slice(0, 3);
  return (
    <div className="branch-prev">
      <div className="branch-prev__head">
        <span className="dot dot--live"></span> 3 of 22 flagships
      </div>
      {featured.map(b => (
        <div key={b.id} className="branch-prev__row" onClick={() => setPage("branches")}>
          <div>
            <div className="branch-prev__name">{b.name}</div>
            <div className="branch-prev__addr">{b.area}, {b.emirate}</div>
          </div>
          <div className="branch-prev__meta">
            <span className="badge badge--24">{b.hours === "24 hours" ? "24h" : "5–2"}</span>
          </div>
        </div>
      ))}
      <button className="branch-prev__more" onClick={() => setPage("branches")}>
        See all 22 branches <ArrowIcon />
      </button>
    </div>
  );
}

Object.assign(window, { HomePage });