// Home page for Automatic Restaurant & Grill redesign.
const { useState: useStateHome, useEffect: useEffectHome } = React;

function PageHome({ navigate }) {
  return (
    <main className="fade-enter">
      <HeroSection navigate={navigate} />
      <SignatureStrip navigate={navigate} />
      <HeritageBand navigate={navigate} />
      <MixedGrillFeature navigate={navigate} />
      <NearestBranch navigate={navigate} />
      <CateringTeaser navigate={navigate} />
      <PressWall />
    </main>
  );
}

function HeroSection({ navigate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--charcoal)', color: 'var(--cream)' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/hero-background.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        opacity: 0.55,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(31,27,23,0.65) 0%, rgba(31,27,23,0.85) 100%)',
      }} />
      <div className="container container--wide" style={{ position: 'relative', padding: '110px var(--gutter) 100px', minHeight: 640 }}>
        <div style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ color: 'var(--saffron)' }}>Since 1977 · Abu Dhabi → UAE</div>
          <h1 style={{
            fontSize: 'clamp(48px, 7vw, 96px)',
            color: 'var(--paper)',
            lineHeight: 0.98,
            marginTop: 20,
            letterSpacing: '-0.02em',
            fontWeight: 600,
          }}>
            Lebanese grill,<br />mezze and shawarma.<br />
            <span style={{ color: 'var(--saffron)', fontStyle: 'italic' }}>Served generously.</span>
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(245,235,220,0.75)', marginTop: 28, maxWidth: 560, lineHeight: 1.55 }}>
            From our charcoal to your table — the same recipe at every branch, for 49 years.
            Lebanese pita baked on-site. Hummus the way Beirut taught us.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="btn btn--primary" onClick={() => navigate('order')}>
              Order now <Icon.arrow width="14" height="14" />
            </button>
            <button className="btn btn--ghost-light" onClick={() => navigate('branches')}>
              Find your branch
            </button>
          </div>
          <div style={{ marginTop: 56, display: 'flex', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
            <ReviewBadge />
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'rgba(245,235,220,0.55)', textTransform: 'uppercase' }}>
              12 outlets · Dubai &amp; Abu Dhabi
            </div>
          </div>
        </div>

        {/* Floating menu strip preview */}
        <div style={{
          position: 'absolute', bottom: 0, right: -1, transform: 'translateY(50%)',
          display: 'flex', gap: 0, background: 'var(--paper)', borderRadius: 'var(--radius)',
          boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
          overflow: 'hidden',
          maxWidth: 460,
        }}>
          <img src="assets/bestseller-1.jpg" alt="" style={{ width: 130, height: 130, objectFit: 'cover', display: 'block' }} />
          <div style={{ padding: '16px 22px', color: 'var(--ink)', display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 220 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--terracotta)' }}>★ TALABAT BEST-SELLER</div>
            <div className="serif" style={{ fontSize: 22, fontWeight: 600, marginTop: 6, color: 'var(--charcoal)' }}>Arabic Chicken Shawarma</div>
            <div className="mono" style={{ fontSize: 13, marginTop: 10, color: 'var(--ink-2)' }}>AED 35 · pickles, garlic, fries inside</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SignatureStrip({ navigate }) {
  const dishes = [
    { name: 'Meat Shawarma', desc: 'Lamb on saj bread', price: 38, img: 'bestseller-2', ar: 'شاورما لحم' },
    { name: 'Chicken Shawarma', desc: 'Pickles, garlic, fries inside', price: 35, img: 'bestseller-1', ar: 'شاورما دجاج' },
    { name: 'Dual Shawarma', desc: 'Family-style, doubled', price: 58, img: 'bestseller-3', ar: 'شاورما مضاعفة' },
    { name: 'Saj Shawarma', desc: 'Wrapped in fresh saj', price: 48, img: 'bestseller-4', ar: 'شاورما صاج' },
  ];
  return (
    <section className="section">
      <div className="container container--wide">
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 48 }}>
          <div>
            <div className="eyebrow">Talabat best-sellers</div>
            <h2 className="section-title">The four they keep ordering.</h2>
            <p className="lede">Across 1,921 ratings, these are the dishes that earned us 4.7 stars.</p>
          </div>
          <button className="btn btn--ghost" onClick={() => navigate('menu')}>View full menu</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {dishes.map((d, i) => (
            <article key={i} style={{
              background: 'var(--paper)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--radius)',
              overflow: 'hidden',
              transition: 'transform .2s ease, box-shadow .2s ease',
            }} className="signature-card">
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--cream)' }}>
                <img src={`assets/${d.img}.jpg`} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '20px 22px 22px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--terracotta)', letterSpacing: '0.1em' }}>0{i+1} / 04</div>
                  <span className="dish-card__price"><span className="dish-card__price-currency">AED</span>{d.price}</span>
                </div>
                <div className="serif" style={{ fontSize: 22, fontWeight: 600, color: 'var(--charcoal)', marginTop: 6 }}>{d.name}</div>
                <div className="arabic" style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 2 }}>{d.ar}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 10 }}>{d.desc}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`.signature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31,27,23,0.08); }`}</style>
    </section>
  );
}

function HeritageBand({ navigate }) {
  return (
    <section style={{ background: 'var(--cream)', padding: '96px 0' }}>
      <div className="container container--wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">Heritage</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>
              One charcoal grill in 1977.<br/>
              <span style={{ color: 'var(--terracotta)', fontStyle: 'italic' }}>Twelve, today.</span>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Founded on the Abu Dhabi Corniche, Automatic has spent forty-nine years doing one thing —
              charcoal-grilling Lebanese food the way it should be done. The recipe has not changed.
              The portions have not shrunk. The pita is still baked on site.
            </p>
            <div style={{ display: 'flex', gap: 32, marginTop: 40, flexWrap: 'wrap' }}>
              <Stat n="49" sub="years" detail="Same recipe, same charcoal" />
              <Stat n="12" sub="outlets" detail="Dubai &amp; Abu Dhabi" />
              <Stat n="4.7★" sub="rating" detail="1,921 Talabat reviews" />
            </div>
            <button className="btn btn--charcoal" onClick={() => navigate('about')} style={{ marginTop: 36 }}>
              Read our story <Icon.arrow width="14" height="14" />
            </button>
          </div>
          <div style={{ position: 'relative', aspectRatio: '4/5' }}>
            <img src="assets/interior-1.jpg" alt="" style={{ position: 'absolute', top: 0, left: 0, width: '70%', height: '60%', objectFit: 'cover', borderRadius: 'var(--radius)' }} />
            <img src="assets/exterior-1.jpg" alt="" style={{ position: 'absolute', bottom: 0, right: 0, width: '70%', height: '60%', objectFit: 'cover', borderRadius: 'var(--radius)', boxShadow: '0 20px 50px rgba(31,27,23,0.2)' }} />
            <div style={{
              position: 'absolute', top: '35%', right: '5%',
              background: 'var(--paper)',
              padding: '16px 20px',
              borderRadius: 'var(--radius)',
              boxShadow: '0 12px 30px rgba(31,27,23,0.12)',
              maxWidth: 220,
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--terracotta)' }}>FLAGSHIP</div>
              <div className="serif" style={{ fontSize: 18, fontWeight: 600, color: 'var(--charcoal)', marginTop: 4 }}>Al Raffa, Bur Dubai</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 6 }}>Al Khaleej Centre · Mankhool Road</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, sub, detail }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 52, fontWeight: 600, color: 'var(--terracotta)', lineHeight: 1 }}>{n}</div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--charcoal)', marginTop: 8 }}>{sub}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }} dangerouslySetInnerHTML={{ __html: detail }} />
    </div>
  );
}

function MixedGrillFeature({ navigate }) {
  return (
    <section style={{ background: 'var(--charcoal)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      <div className="container container--wide" style={{ padding: '96px var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--saffron)' }}>The Friday-lunch hero</div>
            <h2 className="section-title" style={{ color: 'var(--paper)', marginTop: 14 }}>
              Special Mix Grill
            </h2>
            <div className="arabic" style={{ fontSize: 22, color: 'var(--saffron)', marginTop: 8 }}>مشاوي مشكلة خاصة</div>
            <p style={{ fontSize: 17, color: 'rgba(245,235,220,0.75)', marginTop: 24, maxWidth: 480, lineHeight: 1.6 }}>
              Shish tawook, lamb kabab, lamb chop and kafta — straight off the charcoal,
              with hummus, garlic paste, pickles, oriental salad, pita and fries.
              The plate that turned us into a family ritual.
            </p>

            <div style={{
              marginTop: 36,
              padding: 24,
              border: '1px solid rgba(245,235,220,0.15)',
              borderRadius: 'var(--radius)',
              display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap',
            }}>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'rgba(245,235,220,0.5)' }}>FROM</div>
                <div className="serif" style={{ fontSize: 48, fontWeight: 600, color: 'var(--saffron)', lineHeight: 1 }}>AED 85</div>
                <div style={{ fontSize: 12, color: 'rgba(245,235,220,0.55)', marginTop: 4 }}>Serves 2–3. Add a platter for the table.</div>
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn btn--primary" onClick={() => navigate('order')}>Order on Talabat</button>
                <button className="btn btn--ghost-light" onClick={() => navigate('menu')}>See the full grill menu</button>
              </div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '4/5',
              borderRadius: 'var(--radius-lg)',
              overflow: 'hidden',
              background: 'var(--charcoal-soft)',
            }}>
              <img src="assets/mixed-grill-platter.jpg" alt="Special Mix Grill" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{
              position: 'absolute', bottom: -28, left: -28,
              background: 'var(--terracotta)', color: 'var(--paper)',
              padding: '22px 26px', borderRadius: 'var(--radius)',
              maxWidth: 220,
              boxShadow: '0 20px 50px rgba(0,0,0,0.4)',
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', opacity: 0.85 }}>SERVED WITH</div>
              <div className="serif" style={{ fontSize: 17, lineHeight: 1.3, marginTop: 6, fontWeight: 500 }}>
                Hummus · garlic paste · pickles · oriental salad · pita · fries
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NearestBranch({ navigate }) {
  const [near, setNear] = useStateHome(null);
  const [checking, setChecking] = useStateHome(false);

  // Simulated geolocation — picks Mirdif as the demo "closest"
  const handleDetect = () => {
    setChecking(true);
    setTimeout(() => {
      setNear(window.BRANCHES.find(b => b.id === 'mirdif'));
      setChecking(false);
    }, 1100);
  };

  return (
    <section className="section">
      <div className="container container--wide">
        <div style={{
          background: 'var(--cream)',
          borderRadius: 'var(--radius-lg)',
          padding: '64px',
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 64,
          alignItems: 'center',
        }} className="nearest-grid">
          <div>
            <div className="eyebrow">Branch finder</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>Find the closest charcoal grill.</h2>
            <p className="lede">12 outlets across Dubai &amp; Abu Dhabi. We'll route you to the one with the shortest queue.</p>

            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn--charcoal" onClick={handleDetect} disabled={checking}>
                {checking ? 'Locating…' : '📍 Use my location'}
              </button>
              <button className="btn btn--ghost" onClick={() => navigate('branches')}>Browse all 12 branches</button>
            </div>

            {near && (
              <div style={{ marginTop: 32, padding: 24, background: 'var(--paper)', borderRadius: 'var(--radius)', border: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--terracotta)' }}>YOUR CLOSEST · 4.2 KM AWAY</div>
                <div className="serif" style={{ fontSize: 26, fontWeight: 600, color: 'var(--charcoal)', marginTop: 8 }}>{near.name}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>{near.address}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--olive-dark)', marginTop: 10 }}>● Open now · until {near.hours.split('–')[1] || '00:00'}</div>
                <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <button className="btn btn--primary btn--sm" onClick={() => navigate('order')}>Order from here</button>
                  <button className="btn btn--ghost btn--sm" onClick={() => navigate('branches')}>See branch details</button>
                </div>
              </div>
            )}
          </div>

          <div style={{ position: 'relative', height: 420 }}>
            <MapPreview onPick={() => navigate('branches')} />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .nearest-grid { grid-template-columns: 1fr !important; padding: 40px !important; }
        }
      `}</style>
    </section>
  );
}

function MapPreview({ onPick }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      borderRadius: 'var(--radius)',
      overflow: 'hidden',
      position: 'relative',
      border: '1px solid var(--line)',
      cursor: 'pointer',
    }} onClick={onPick}>
      <LeafletMap
        branches={window.BRANCHES}
        selectedId={'mirdif'}
        onSelect={() => onPick && onPick()}
        defaultCenter={[25.0, 54.8]}
        defaultZoom={9}
        interactive={false}
      />
      <div style={{
        position: 'absolute', top: 16, left: 16, zIndex: 500,
        background: 'var(--paper)',
        borderRadius: 999,
        padding: '8px 14px',
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        letterSpacing: '0.08em',
        color: 'var(--ink-2)',
        boxShadow: '0 4px 12px rgba(31,27,23,0.08)',
        pointerEvents: 'none',
      }}>
        UAE · 12 branches
      </div>
      <div style={{
        position: 'absolute', bottom: 16, right: 16, zIndex: 500,
        background: 'var(--charcoal)', color: 'var(--paper)',
        padding: '10px 14px', borderRadius: 999,
        fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em',
        display: 'flex', alignItems: 'center', gap: 6,
        pointerEvents: 'none',
      }}>
        Open map <Icon.arrow width="12" height="12" />
      </div>
    </div>
  );
}

function CateringTeaser({ navigate }) {
  return (
    <section className="section">
      <div className="container container--wide">
        <div style={{
          position: 'relative',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          minHeight: 420,
          display: 'flex', alignItems: 'center',
        }}>
          <img src="assets/family-platter-feast.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(31,27,23,0.85) 0%, rgba(31,27,23,0.45) 70%, rgba(31,27,23,0) 100%)' }} />
          <div style={{ position: 'relative', padding: 64, color: 'var(--paper)', maxWidth: 560 }}>
            <div className="eyebrow" style={{ color: 'var(--saffron)' }}>Catering for 8 – 800</div>
            <h2 className="section-title" style={{ color: 'var(--paper)', marginTop: 14 }}>
              Office Friday. School fête. Sunday majlis.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(245,235,220,0.85)', marginTop: 18, lineHeight: 1.6 }}>
              Mezze platters, mixed-grill trays, sandwich boxes. 48-hour lead time, delivered hot
              with chafing dishes. Or message us on WhatsApp — we answer.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <button className="btn btn--primary" onClick={() => navigate('catering')}>Get a quote</button>
              <a className="btn btn--ghost-light" href="https://wa.me/971565266357" target="_blank" rel="noopener">
                <Icon.whatsapp width="14" height="14" /> WhatsApp 056 526 6357
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PressWall() {
  return (
    <section className="section section--cream">
      <div className="container container--wide">
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 48 }}>
          <div>
            <div className="eyebrow">In the press</div>
            <h2 className="section-title">What people keep writing about us.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {window.PRESS.map((p, i) => (
            <blockquote key={i} style={{
              background: 'var(--paper)', padding: 32, borderRadius: 'var(--radius)',
              border: '1px solid var(--line)', margin: 0,
            }}>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.35, color: 'var(--charcoal)', fontStyle: 'italic' }}>
                "{p.quote}"
              </div>
              <div className="mono" style={{ marginTop: 18, fontSize: 11, letterSpacing: '0.12em', color: 'var(--terracotta)' }}>
                — {p.source} · {p.date}
              </div>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PageHome = PageHome;