// NIVANA STREET KITCHEN — landing page sections
// Composes the design-system components from window.DesignSystem_96f58b.
const DS = window.DesignSystem_96f58b;
const { Button, Badge, SectionHeading, Slogan, MenuCard } = DS;

const LOGO = "assets/logos/nivana-logo-sm.png";
const MARK = "assets/logos/nivana-mark.png";
const IMG_FOOD = "assets/imagery/naan-pizza.jpg";
const IMG_HERO = "assets/imagery/hero-chef.jpg";
const VID_HERO = "assets/video/mahirs-reel.mp4";
const VID_POSTER = "assets/imagery/video-stills/dough.jpg";
const IMG_COMMUNITY = "assets/imagery/chef-training.jpg";

function NavBar({ active }) {
  const links = [
    { label: 'Menu', href: 'index.html#menu' },
    { label: 'Our Story', href: 'our-story.html' },
    { label: 'Foundation', href: 'foundation.html' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px clamp(16px, 5vw, 48px)',
      background: 'rgba(10,10,10,0.82)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center' }}><img src={MARK} alt="Nivana" style={{ height: 40 }} /></a>
      <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {links.map(l => {
          const isActive = active === l.label;
          return (
            <a key={l.label} href={l.href} style={{
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13,
              textTransform: 'uppercase', letterSpacing: '0.1em',
              color: isActive ? 'var(--tandoori-orange)' : 'var(--cream-dim)', textDecoration: 'none',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--tandoori-orange)'}
            onMouseLeave={e => e.currentTarget.style.color = isActive ? 'var(--tandoori-orange)' : 'var(--cream-dim)'}>{l.label}</a>
          );
        })}
      </nav>
    </header>
  );
}

function Hero({ onMenu }) {
  const vref = React.useRef(null);
  React.useEffect(() => {
    const v = vref.current; if (!v) return;
    // Stitch the strongest fire-cooked moments into a seamless loop.
    const SEG = [[28.4,31.4],[25.2,28.0],[15.6,18.2],[45.6,48.4]];
    let i = 0;
    const play = (idx) => { i = idx % SEG.length; try { v.currentTime = SEG[i][0]; } catch(e){} const p = v.play(); if (p&&p.catch) p.catch(()=>{}); };
    const onTime = () => { if (v.currentTime >= SEG[i][1]) play(i+1); };
    const onData = () => play(0);
    v.addEventListener('loadeddata', onData);
    v.addEventListener('timeupdate', onTime);
    if (v.readyState >= 2) play(0);
    return () => { v.removeEventListener('loadeddata', onData); v.removeEventListener('timeupdate', onTime); };
  }, []);
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--char-900)' }}>
      {/* fallback image — shown if the video can't load/play */}
      <img src={IMG_HERO} alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'right center', opacity: 0.7,
      }} />
      <video ref={vref} autoPlay muted loop playsInline preload="auto" poster={VID_POSTER} src={VID_HERO}
        onError={(e) => { e.currentTarget.style.display = 'none'; }} style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'contain', objectPosition: 'center', opacity: 0.92, filter: 'saturate(1.08) contrast(1.04)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.74) 40%, rgba(10,10,10,0.34) 72%, rgba(10,10,10,0.6) 100%)',
      }} />
      <div style={{
        position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(64px, 12vw, 140px) clamp(16px, 5vw, 48px)',
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 24,
      }}>
        <span className="nv-eyebrow" style={{ color: 'var(--tandoori-orange)' }}>Home of the Loaded Naan™</span>
        <h1 className="nv-display" style={{
          fontSize: 'clamp(3.5rem, 11vw, 9rem)', color: 'var(--nivana-cream)', maxWidth: 14 + 'ch',
        }}>
          More Than<br/><span className="nv-flame-text">Pizza</span>
        </h1>
        <p style={{ fontSize: 'clamp(1rem,2.5vw,1.35rem)', color: 'var(--cream-dim)', maxWidth: '46ch', margin: 0, lineHeight: 1.55 }}>
          Modern Indian street food. Fire-cooked naan pizzas, loaded with flavour —
          built by young people learning real skills for real futures.
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 8 }}>
          <Button variant="pink" size="lg" onClick={onMenu}>View Menu</Button>
          <Button variant="outline" size="lg" onClick={() => { window.location.href = 'our-story.html'; }}>Our Story</Button>
        </div>
        <Slogan color="orange" size="lg" style={{ marginTop: 12 }}>Loaded with flavour.</Slogan>
      </div>
    </section>
  );
}

function MarqueeStrip() {
  const items = ['Great Food', 'Real Impact', 'Stronger Together', 'Fuelled by Purpose', 'Loaded with Flavour'];
  return (
    <div style={{ background: 'var(--nivana-pink)', overflow: 'hidden', padding: '12px 0' }}>
      <div style={{ display: 'flex', gap: 0, whiteSpace: 'nowrap', justifyContent: 'center', flexWrap: 'wrap' }}>
        {items.map((t, i) => (
          <span key={i} style={{
            fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.04em',
            fontSize: 'clamp(1rem,2.4vw,1.5rem)', color: 'var(--nivana-cream)', padding: '0 22px',
            display: 'inline-flex', alignItems: 'center', gap: 22,
          }}>{t}<span style={{ color: 'var(--tandoori-orange)' }}>•</span></span>
        ))}
      </div>
    </div>
  );
}

function MenuSection() {
  const Art = window.PizzaArt;
  const dishes = [
    { name: 'Naangherita', flavour: 'naangherita', price: '£8.95', tags: ['Bestseller', 'Veg'], description: 'San Marzano tomato, melting mozzarella, fresh basil. The classic, on naan.' },
    { name: 'Punjabi Pepperoni', flavour: 'punjabi-pepperoni', price: '£9.95', tags: ['\uD83C\uDF36 Hot'], description: 'Spiced pepperoni, mozzarella and a kick of chilli. Bold and smoky.' },
    { name: 'Veggie Vibes', flavour: 'veggie-vibes', price: '£8.95', tags: ['Veg'], description: 'Peppers, red onion, courgette and sweetcorn. Fresh, fast, fired.' },
    { name: 'Tandoori Mixed Grill', flavour: 'tandoori-mixed-grill', price: '£9.95', tags: ['Loaded'], description: 'Tandoori chicken, red onion and coriander, fire-charred. More than pizza.' },
  ];
  return (
    <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(56px,9vw,96px) clamp(16px,5vw,48px)' }}>
      <SectionHeading eyebrow="The Naan Pizzas" title="Loaded & Fire-Cooked" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px,1fr))', gap: 22, marginTop: 40 }}>
        {dishes.map(d => (
          <MenuCard key={d.name} {...d} visual={Art ? <Art.NaanPizzaArt flavour={d.flavour} /> : null} />
        ))}
      </div>
      <p style={{ marginTop: 32, color: 'var(--char-400)', fontSize: 14, letterSpacing: '0.02em' }}>
        Find us on the road — catch the trailer at matchdays, festivals and events across Birmingham.
      </p>
    </section>
  );
}

function ImpactSection() {
  const stats = [
    { k: 'Real Skills', v: 'Kitchen training' },
    { k: 'Real Jobs', v: 'Paid placements' },
    { k: 'Real Futures', v: 'Lasting careers' },
  ];
  return (
    <section style={{ background: 'var(--char-700)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(56px,9vw,96px) clamp(16px,5vw,48px)', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(32px,6vw,72px)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <SectionHeading eyebrow="Powered by Mahirs Foundation" title="Great Food. Real Impact." flame />
          <p style={{ color: 'var(--cream-dim)', fontSize: '1.1rem', lineHeight: 1.6, margin: 0, maxWidth: '46ch' }}>
            Every loaded naan funds something bigger. Nivana is a social enterprise giving
            young people a fire-lit start — real kitchen skills, real jobs, real futures.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 8 }}>
            {stats.map(s => (
              <div key={s.k} style={{ flex: '1 1 140px', background: 'var(--char-900)', border: '1px solid var(--line-soft)', borderRadius: 'var(--radius-md)', padding: '16px 18px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--tandoori-orange)', letterSpacing: '0.03em' }}>{s.k}</div>
                <div style={{ fontSize: 13, color: 'var(--cream-dim)', marginTop: 2 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', aspectRatio: '4/3', border: '1px solid var(--line-medium)' }}>
          <img src={IMG_COMMUNITY} alt="Community" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <Slogan color="cream" size="md" style={{ position: 'absolute', left: 20, bottom: 16, textShadow: '0 2px 12px rgba(0,0,0,0.8)' }}>Stronger together.</Slogan>
        </div>
      </div>
    </section>
  );
}

function PoweredBy({ style }) {
  const row = { display: 'flex', alignItems: 'center', gap: 12 };
  const label = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cream-dim)', whiteSpace: 'nowrap' };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, ...style }}>
      <div style={row}>
        <span style={label}>Brought to you by</span>
        <img src="assets/logos/mahirs-experience.png" alt="Mahirs Experience" style={{ height: 30, display: 'block' }} />
      </div>
      <div style={row}>
        <span style={label}>Powered by</span>
        <img src="assets/logos/mahirs-foundation-teal.png" alt="Mahirs Foundation" style={{ height: 34, display: 'block' }} />
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--char-900)', padding: 'clamp(40px,7vw,72px) clamp(16px,5vw,48px)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 32, justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ maxWidth: 320 }}>
          <img src={LOGO} alt="Nivana Street Kitchen" style={{ height: 84 }} />
          <p style={{ color: 'var(--char-400)', fontSize: 13, marginTop: 12, lineHeight: 1.6 }}>
            Nivana Street Kitchen — a trading brand of Mahirs Foundation. Bold. Urban. Authentic. Purpose driven.
          </p>
          <PoweredBy style={{ marginTop: 18 }} />
        </div>
        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          {[['Eat', [['Our Pizzas', 'index.html#menu'], ['Find the Trailer', 'index.html#menu']]], ['About', [['Our Story', 'our-story.html'], ['The Foundation', 'foundation.html'], ['Work With Us', 'foundation.html#get-involved']]]].map(([h, links]) => (
            <div key={h}>
              <div className="nv-eyebrow" style={{ color: 'var(--tandoori-orange)', marginBottom: 14 }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {links.map(([l, href]) => <a key={l} href={href} style={{ color: 'var(--cream-dim)', textDecoration: 'none', fontSize: 14 }}>{l}</a>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 'var(--container-max)', margin: '36px auto 0', paddingTop: 20, borderTop: '1px solid var(--line-soft)', color: 'var(--char-400)', fontSize: 12, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
        <span>© 2026 Nivana Street Kitchen · Home of the Loaded Naan™</span>
        <span style={{ letterSpacing: '0.08em', textTransform: 'uppercase' }}>Great Food · Real Impact · Stronger Together</span>
      </div>
    </footer>
  );
}

window.NivanaLanding = { NavBar, Hero, MarqueeStrip, MenuSection, ImpactSection, Footer };