// Ravi Restaurant — shared components
// Loaded as Babel JSX. Components exported to window for cross-file use.

const { useState, useEffect, useRef, useMemo } = React;

// ---- Tiny SVG icon set ----
function Icon({ name, size = 18, ...rest }) {
  const s = size;
  const p = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
  switch (name) {
    case "arrow":
      return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case "phone":
      return <svg {...p}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>;
    case "pin":
      return <svg {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0116 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "clock":
      return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "wa":
      return <svg {...p} viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 2.1.55 4.15 1.6 5.96L2 22l4.27-1.12a9.95 9.95 0 005.77 1.83h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.84 9.84 0 0012.04 2zm5.83 14.13c-.25.7-1.44 1.34-2 1.38-.53.05-1.18.08-2.97-.65-2.5-1.02-4.11-3.57-4.24-3.74-.12-.17-1-1.34-1-2.55 0-1.21.63-1.8.85-2.05.22-.25.49-.31.65-.31h.47c.15 0 .35-.06.55.42.2.49.7 1.7.76 1.83.06.13.1.27.02.45-.08.18-.13.29-.24.45-.12.16-.25.36-.36.48-.12.13-.25.27-.11.53.13.25.59.97 1.27 1.57.87.78 1.6 1.02 1.85 1.14.25.13.4.11.55-.06.15-.18.63-.74.8-.99.17-.25.34-.21.57-.13.23.09 1.45.69 1.7.81.25.13.42.18.48.29.06.11.06.65-.19 1.34z"/></svg>;
    case "menu":
      return <svg {...p}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case "x":
      return <svg {...p}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case "compass":
      return <svg {...p}><circle cx="12" cy="12" r="9"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" /></svg>;
    case "star":
      return <svg {...p} fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>;
    case "external":
      return <svg {...p}><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>;
    default: return null;
  }
}

// ---- Sticky Nav ----
function Nav({ route, onNav, register, setRegister }) {
  const [solid, setSolid] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { setMobileOpen(false); }, [route]);

  const links = [
    { id: 'story', label: 'Our Story' },
    { id: 'menu', label: 'Menu' },
    { id: 'branches', label: 'Branches' },
    { id: 'press', label: 'Press' },
    { id: 'visit', label: 'Visit' },
  ];
  const isActive = (id) => route === id || (id === 'branches' && route.startsWith('branch/'));

  return (
    <div className={`nav-wrap ${solid ? 'solid' : ''}`}>
      <div className="container nav">
        <div className="brand" onClick={() => onNav('home')}>
          <span className="word">Ravi<span className="accent">.</span></span>
          <span className="since">Since 1978 · Dubai</span>
        </div>
        <div className="nav-links">
          {links.map(l => (
            <div key={l.id}
              className={`nav-link ${isActive(l.id) ? 'active' : ''}`}
              onClick={() => onNav(l.id)}>{l.label}</div>
          ))}
          <button className="btn btn-primary btn-sm nav-cta" onClick={() => onNav('reserve')}>
            Reserve · SZR
          </button>
        </div>
        <button className="nav-toggle" onClick={() => setMobileOpen(o => !o)} aria-label="Menu">
          <Icon name={mobileOpen ? 'x' : 'menu'} />
        </button>
      </div>
      {mobileOpen && (
        <div className="mobile-panel">
          {links.map(l => (
            <div key={l.id} className={`nav-link ${isActive(l.id) ? 'active' : ''}`} onClick={() => onNav(l.id)}>{l.label}</div>
          ))}
          <div className="nav-link" onClick={() => onNav('reserve')}>Reserve · SZR</div>
        </div>
      )}
    </div>
  );
}

// ---- Footer ----
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="grid">
          <div>
            <div className="brandmark">Ravi<em>.</em></div>
            <p style={{ maxWidth: '36ch', opacity: 0.8, fontSize: 15 }}>
              Pakistani food, the way the Chaudary family has been making it since 1978. Six rooms across Dubai. One kitchen.
            </p>
          </div>
          <div>
            <h4>Branches</h4>
            <ul>
              {window.RAVI.BRANCHES.map(b => (
                <li key={b.slug} onClick={() => onNav('branch/' + b.slug)} style={{ cursor: 'pointer' }}>{b.name}</li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Site</h4>
            <ul>
              <li onClick={() => onNav('story')} style={{ cursor: 'pointer' }}>Our Story</li>
              <li onClick={() => onNav('menu')} style={{ cursor: 'pointer' }}>Menu</li>
              <li onClick={() => onNav('press')} style={{ cursor: 'pointer' }}>Press</li>
              <li onClick={() => onNav('visit')} style={{ cursor: 'pointer' }}>Visit</li>
              <li onClick={() => onNav('reserve')} style={{ cursor: 'pointer' }}>Reserve SZR</li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:+97143315353" className="body-link">+971 4 331 5353</a></li>
              <li><a href="mailto:officialravirestaurants@gmail.com" className="body-link">officialravirestaurants@gmail.com</a></li>
              <li><a href="https://www.talabat.com/uae/ravi-restaurant" target="_blank" rel="noreferrer" className="body-link">Order on Talabat</a></li>
              <li><a href="https://www.instagram.com/ravirestaurantsuae/" target="_blank" rel="noreferrer" className="body-link">Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="meta-line">
          <span>© 1978–2026 Ravi Restaurant LLC · Dubai, UAE</span>
          <span>Halal · Family-owned · Six branches</span>
        </div>
      </div>
    </footer>
  );
}

// ---- WhatsApp FAB ----
function WhatsAppFab() {
  const href = "https://wa.me/971589650044?text=" + encodeURIComponent("Hi Ravi — ");
  return (
    <a className="wa-fab" href={href} target="_blank" rel="noreferrer" aria-label="Message Ravi on WhatsApp">
      <Icon name="wa" size={20} />
      <span className="label">Message us</span>
    </a>
  );
}

// ---- Register tabs (Satwa / SZR mode) ----
function RegisterTabs({ register, setRegister }) {
  return (
    <div className="register-tabs" role="tablist">
      <button className={`register-tab ${register === 'satwa' ? 'active' : ''}`} onClick={() => setRegister('satwa')}>
        <span className="dot satwa" />
        Original — Satwa
      </button>
      <button className={`register-tab ${register === 'szr' ? 'active' : ''}`} onClick={() => setRegister('szr')}>
        <span className="dot szr" />
        Fine Dining — SZR
      </button>
    </div>
  );
}

// ---- Press strip (logos along a band) ----
function PressStrip() {
  const items = [
    { o: "Bourdain", d: "CNN · 2010" },
    { o: "Adidas", d: "2022 Drop" },
    { o: "AP Wire", d: "2022" },
    { o: "Gulf News", d: "Friday Mag" },
    { o: "Lonely Planet", d: "Guide" },
    { o: "BBC", d: "—" },
    { o: "Visit Dubai", d: "Official" },
    { o: "Emirates", d: "Official" },
  ];
  return (
    <div className="press-strip">
      {items.map((p, i) => (
        <div key={i} className="press-cell">
          <div className="outlet">{p.o}</div>
          <div className="date">{p.d}</div>
        </div>
      ))}
    </div>
  );
}

// ---- Dish marquee ----
function DishMarquee() {
  const items = [
    { name: "Chicken Biryani", price: "AED 28" },
    { name: "Mutton Karahi", price: "AED 38" },
    { name: "Nihari", price: "AED 28" },
    { name: "Chicken Tikka", price: "AED 22" },
    { name: "Halwa Puri", price: "AED 18" },
    { name: "Karak Chai", price: "AED 2" },
    { name: "Seekh Kebab", price: "AED 18" },
    { name: "Mutton Peshawari", price: "AED 38" },
  ];
  const doubled = [...items, ...items];
  return (
    <div className="dish-strip">
      <div className="dish-strip-track">
        {doubled.map((it, i) => (
          <div className="dish-strip-item" key={i}>
            <span className="star" />
            <span>{it.name}</span>
            <span className="price">{it.price}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---- Branch pill (small card on home) ----
function BranchPill({ b, onClick }) {
  return (
    <div className="branch-pill" onClick={onClick}>
      <div className="badge">{b.flag || (b.register === 'szr' ? 'FINE DINING' : 'NEIGHBOURHOOD')}</div>
      <h3>{b.name}</h3>
      <div className="meta">{b.hours}</div>
      <div className="meta" style={{ marginTop: 'auto', paddingTop: 12, color: 'var(--register-accent)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em' }}>
        VISIT →
      </div>
    </div>
  );
}

// ---- Full branch card (used on branch detail / branches list) ----
function BranchCard({ b, onNav }) {
  return (
    <div className={`branch-card ${b.pending ? 'pending' : ''}`}>
      <div className="photo">
        {b.flag && <span className="flag">{b.flag}</span>}
        <img src={b.img} alt={`Ravi ${b.name}`} loading="lazy" />
      </div>
      <div className="body">
        <div className="eyebrow">{b.register === 'szr' ? 'Sheikh Zayed Road' : 'Original Family Branch'}</div>
        <h3 style={{ marginTop: 8 }}>{b.name}</h3>
        <p className="lede" style={{ marginTop: 12, fontSize: 18 }}>{b.blurb}</p>
        <dl className="lines">
          <div className="row"><dt>Address</dt><dd>{b.address}</dd></div>
          <div className="row"><dt>Phone</dt>
            <dd>
              <a className="body-link" href={`tel:${b.phone.replace(/\s/g,'')}`}>{b.phone}</a>
              {b.phoneAlt && <span style={{ opacity: 0.5 }}> / <a className="body-link" href={`tel:${b.phoneAlt.replace(/\s/g,'')}`}>{b.phoneAlt}</a></span>}
            </dd>
          </div>
          <div className="row"><dt>Hours</dt><dd>{b.hours}{b.hoursNote && <div style={{ opacity: 0.6, fontSize: 13, marginTop: 4 }}>{b.hoursNote}</div>}</dd></div>
          {b.whatsapp && <div className="row"><dt>WhatsApp</dt><dd>{b.whatsapp}</dd></div>}
        </dl>
        <div className="ctas">
          <a className="btn btn-primary" href={b.mapsHref} target="_blank" rel="noreferrer">
            <Icon name="pin" size={16} />Get Directions
          </a>
          {b.talabat && (
            <a className="btn btn-ghost" href={b.talabat} target="_blank" rel="noreferrer">
              Order on Talabat <Icon name="external" size={14} />
            </a>
          )}
          {b.register === 'szr' && (
            <button className="btn btn-ghost" onClick={() => onNav('reserve')}>
              Reserve a table <Icon name="arrow" size={14} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ---- Hero (Home) ----
function Hero({ register, setRegister, onNav }) {
  const isSzr = register === 'szr';
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 24, flexWrap: 'wrap' }}>
              <span className="chip">Pakistani · Halal · Since 1978</span>
              <span className="note-flag"><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--register-accent)' }} /> 6 rooms across Dubai</span>
            </div>
            <h1>
              The same family.<br />
              The same River-Ravi<br />
              <span className="accent">recipes.</span>
            </h1>
            <p className="lede" style={{ marginTop: 28, maxWidth: '40ch' }}>
              {isSzr
                ? 'From a plastic-tablecloth Satwa institution to a marble-and-walnut room opposite the Museum of the Future. Same nihari. Same karahi. A little more finesse.'
                : 'Plastic tablecloths, fluorescent tubes, a kitchen the diners can see — because that\u2019s the point. Forty-seven years on, the room still fills up at midnight.'}
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => onNav('menu')}>
                See the menu <Icon name="arrow" size={14} />
              </button>
              <button className="btn btn-ghost" onClick={() => onNav('branches')}>
                Find a branch
              </button>
            </div>
            <div style={{ marginTop: 36 }}>
              <RegisterTabs register={register} setRegister={setRegister} />
            </div>
          </div>
          <dl className="hero-meta">
            <div><dt>Founded</dt><dd>1978 · Al Satwa</dd></div>
            <div><dt>Rooms</dt><dd>Satwa · Karama · Al Nahda · Al Rigga · SZR</dd></div>
            <div><dt>Daily covers</dt><dd>400–500 · 50-seat flagship</dd></div>
            <div><dt>Price</dt><dd>{isSzr ? '$$$ · Smart casual' : '$ · Come as you are'}</dd></div>
          </dl>
        </div>
        <div className="hero-img-wrap">
          {isSzr ? <SzrHeroPlaceholder /> : (
            <>
              <img src="media/satwa-fascia.jpg" alt="Ravi Restaurant Satwa fascia at night" />
              <div className="hero-caption">Al Satwa · Al Dhiyafa Road · The green fascia, 11:42pm</div>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

// ---- Find Nearest Ravi (geolocation) ----
function FindNearest({ onNav }) {
  // Approximate coordinates for each branch (rough Dubai locations for prototype demo)
  const COORDS = {
    'satwa': [25.2289, 55.2774],
    'karama': [25.2521, 55.3025],
    'al-nahda': [25.2937, 55.3712],
    'al-rigga': [25.2680, 55.3225],
    'sheikh-zayed-road': [25.2049, 55.2778],
  };
  const [status, setStatus] = useState('idle'); // idle | locating | found | denied
  const [nearest, setNearest] = useState(null);

  const dist = (a, b) => {
    const R = 6371;
    const dLat = (b[0]-a[0]) * Math.PI/180;
    const dLon = (b[1]-a[1]) * Math.PI/180;
    const lat1 = a[0]*Math.PI/180, lat2 = b[0]*Math.PI/180;
    const x = Math.sin(dLat/2)**2 + Math.cos(lat1)*Math.cos(lat2)*Math.sin(dLon/2)**2;
    return 2 * R * Math.asin(Math.sqrt(x));
  };

  const find = () => {
    setStatus('locating');
    if (!navigator.geolocation) { setStatus('denied'); return; }
    navigator.geolocation.getCurrentPosition(
      pos => {
        const me = [pos.coords.latitude, pos.coords.longitude];
        let best = null;
        for (const b of window.RAVI.BRANCHES) {
          const d = dist(me, COORDS[b.slug] || [25.25, 55.3]);
          if (!best || d < best.d) best = { b, d };
        }
        setNearest(best);
        setStatus('found');
      },
      () => {
        // Demo fallback: pretend we're near Downtown Dubai
        const me = [25.21, 55.27];
        let best = null;
        for (const b of window.RAVI.BRANCHES) {
          const d = dist(me, COORDS[b.slug] || [25.25, 55.3]);
          if (!best || d < best.d) best = { b, d };
        }
        setNearest(best);
        setStatus('found');
      },
      { timeout: 6000 }
    );
  };

  return (
    <div className="find-near">
      <div>
        <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>Find your Ravi</div>
        <h2 style={{ marginTop: 12 }}>Six rooms.<br /><em style={{ fontStyle: 'italic', color: 'var(--ravi-green-neon)' }}>One is closer than you think.</em></h2>
      </div>
      <div>
        {status === 'idle' && (
          <div>
            <p style={{ opacity: 0.85, marginTop: 0 }}>
              Tap once. We&rsquo;ll point you at the nearest family-operated branch — with hours, phone, and turn-by-turn directions.
            </p>
            <button className="btn btn-light" onClick={find}>
              <Icon name="compass" size={16} /> Find nearest Ravi
            </button>
          </div>
        )}
        {status === 'locating' && (
          <div className="result">
            <span className="spinner" /> Locating you in Dubai…
          </div>
        )}
        {status === 'found' && nearest && (
          <div className="result">
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', opacity: 0.6 }}>NEAREST</div>
            <div className="branch-name">{nearest.b.name}</div>
            <div className="distance">{nearest.d.toFixed(1)} km away · {nearest.b.hours}</div>
            <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button className="btn btn-light btn-sm" onClick={() => onNav('branch/' + nearest.b.slug)}>Open branch page</button>
              <a className="btn btn-ghost btn-sm" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }} href={nearest.b.mapsHref} target="_blank" rel="noreferrer">Directions</a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ---- SZR Hero Placeholder ----
// The brief flags the SZR photoshoot as a P0 production gap — "ONLY SZR shot on file"
// turned out to actually be the Satwa fascia. So we lean in honestly:
// a type-led editorial card on marble-cream, with the room facts laid out.
function SzrHeroPlaceholder() {
  return (
    <div className="szr-placeholder">
      <div className="szr-placeholder-grain" />
      <div className="szr-placeholder-inner">
        <div className="szr-placeholder-eyebrow">
          <span className="dot" />
          Photoshoot · February 2026
        </div>
        <div className="szr-placeholder-mark">
          R<span className="r-italic">a</span>vi<br />
          <em>SZR</em>
        </div>
        <div className="szr-placeholder-meta">
          <div>
            <div className="lbl">Address</div>
            <div className="val">Sheikh Zayed Road, opposite the Museum of the Future</div>
          </div>
          <div>
            <div className="lbl">Materials</div>
            <div className="val">Italian marble · Walnut · Linen</div>
          </div>
          <div>
            <div className="lbl">Hours</div>
            <div className="val">12:30 – 15:30 · 19:00 – 23:30</div>
          </div>
        </div>
        <div className="szr-placeholder-note">
          The fine-dining room opened January 2026.<br />
          Photography by Mariam Al-Mansoori arrives in February.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, Nav, Footer, WhatsAppFab, RegisterTabs, PressStrip,
  DishMarquee, BranchPill, BranchCard, Hero, FindNearest,
  SzrHeroPlaceholder,
});