/* global React */

/* ============================================================
   NAV — shared
   ============================================================ */
function Nav({ onOpenMenu, onOpenLocations, onScrollTo }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-brand" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'})}}>
          <img src="assets/logo-simple.png" alt="Crave" className="nav-logo" />
        </a>
        <div className="nav-links">
          <a href="#menu" onClick={(e)=>{e.preventDefault(); onScrollTo('menu')}}>Burgers</a>
          <a href="#menu" onClick={(e)=>{e.preventDefault(); onScrollTo('menu')}}>Sides</a>
          <a href="#menu" onClick={(e)=>{e.preventDefault(); onScrollTo('menu')}}>Shakes</a>
          <a href="#story" onClick={(e)=>{e.preventDefault(); onScrollTo('story')}}>Story</a>
          <a href="#locations" onClick={(e)=>{e.preventDefault(); onScrollTo('locations')}}>Find Us</a>
        </div>
        <div className="nav-actions">
          <button className="btn btn-dark nav-btn" onClick={onOpenMenu}>Full Menu</button>
          <button className="btn btn-primary nav-btn" onClick={onOpenLocations}>Order Now ↗</button>
          <button className="nav-burger" aria-label="Menu" onClick={()=>setMobileOpen(o=>!o)}>
            <span /><span /><span />
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="nav-mobile">
          <a onClick={()=>{setMobileOpen(false); onScrollTo('menu')}}>Burgers</a>
          <a onClick={()=>{setMobileOpen(false); onScrollTo('menu')}}>Sides</a>
          <a onClick={()=>{setMobileOpen(false); onScrollTo('menu')}}>Shakes</a>
          <a onClick={()=>{setMobileOpen(false); onScrollTo('story')}}>Story</a>
          <a onClick={()=>{setMobileOpen(false); onScrollTo('locations')}}>Find Us</a>
          <button className="btn btn-dark" onClick={()=>{setMobileOpen(false); onOpenMenu()}}>Full Menu</button>
          <button className="btn btn-primary" onClick={()=>{setMobileOpen(false); onOpenLocations()}}>Order Now ↗</button>
        </div>
      )}
    </nav>
  );
}

/* ============================================================
   HERO 2 — Split red/white grid w/ burger image (was 02)
   ============================================================ */
function HeroSplit() {
  return (
    <section className="hero" data-screen-label="Hero 02 — Split Grid">
      <div className="h2-grid">
        <div className="h2-left">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span className="pill" style={{background:'var(--bone)', color:'var(--black)'}}>● Open Now</span>
            <span className="label" style={{opacity:.85}}>No.001 / Bali</span>
          </div>
          <h1>
            NO<br/>
            SHORTCUTS.<br/>
            JUST <em>BOLD</em><br/>
            FLAVORS.
          </h1>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <p style={{maxWidth:420, fontSize:17, lineHeight:1.5, margin:0}}>
              Hand-smashed Angus. House sauces. Buns toasted on a hot grill. We don't do subtle.
              Just hot, fresh, eaten with no mercy.
            </p>
            <div className="row">
              <a className="btn btn-dark" href="#order">Order Now ↗</a>
              <a className="btn btn-ghost" href="#menu">See the Menu</a>
            </div>
          </div>
        </div>
        <div className="h2-right">
          <img src="assets/photo-fried-onion.jpeg" alt="Crave fried onion smash burger" className="photo" />
          <div className="h2-corner-checker check-bw" />
          <div style={{position:'absolute', bottom: 18, left: 18, zIndex: 2, display:'flex', flexDirection:'column', gap:6}}>
            <span className="pill pill-red">Crave Pick</span>
            <span style={{background:'var(--black)', color:'var(--bone)', padding:'6px 12px', fontWeight:800, letterSpacing:'0.06em', fontSize:14, textTransform:'uppercase'}}>
              Dbl. Fried Onion · 155K
            </span>
          </div>
        </div>
      </div>
      <div className="check-strip check-rw" style={{height: 18}} />
    </section>
  );
}

/* ============================================================
   HERO 3 — Marquee + Flames Logo
   ============================================================ */
function HeroMarquee() {
  const words = ['CRAVE IT', 'SMASH IT', 'EAT LOUD', 'BITE NO MERCY', 'BALI BURGER CO.', 'SINCE BALI'];
  return (
    <section className="hero h3" data-screen-label="Hero 03 — Marquee">
      <div className="h3-marquee-row red">
        <div className="marquee">
          <div className="marquee-track">
            {Array.from({length:2}).flatMap((_,j)=> words.concat(words).map((w,i)=> (
              <span key={`${j}-${i}`} className="marquee-text">
                {w}<span className="dot" />
              </span>
            )))}
          </div>
        </div>
      </div>

      <div className="h3-center">
        <div className="col checker check-rw h3-side" />
        <div className="col middle">
          <img src="assets/logo-simple.png" alt="Crave wordmark" className="h3-flames" />
          <span className="label" style={{color:'var(--red)'}}>★ Bali's loudest smash burger ★</span>
          <h1>
            HOT,<br/>
            FRESH<br/>
            <span className="red">&amp; FAST.</span>
          </h1>
          <p style={{maxWidth: 480, margin:'0 auto', fontSize:16, lineHeight:1.5}}>
            Open daily until late — sometimes 3 AM late. Smash burgers built loud, sauced heavy, served on a stainless tray.
          </p>
          <div className="h3-cta">
            <a className="btn btn-primary" href="#order">Order Now ↗</a>
            <a className="btn" href="#menu">See Menu</a>
          </div>
          <div className="row h3-meta-row">
            <span className="h3-meta">Ungasan</span>
            <span style={{width:6, height:6, background:'var(--red)', borderRadius:999}} />
            <span className="h3-meta">Berawa</span>
            <span style={{width:6, height:6, background:'var(--red)', borderRadius:999}} />
            <span className="h3-meta">Open Late</span>
          </div>
        </div>
        <div className="col checker check-rw h3-side" />
      </div>

      <div className="h3-marquee-row dark">
        <div className="marquee marquee-reverse">
          <div className="marquee-track">
            {Array.from({length:2}).flatMap((_,j)=> ['100% AUSSIE ANGUS', 'TRUFFLE PARM', 'CRAVE FRIES', 'OREO SHAKE', 'CHEESE PULL', 'CRUNCHY BACON'].concat(['100% AUSSIE ANGUS', 'TRUFFLE PARM', 'CRAVE FRIES', 'OREO SHAKE', 'CHEESE PULL', 'CRUNCHY BACON']).map((w,i)=> (
              <span key={`${j}-${i}`} className="marquee-text">
                {w}<span className="dot" />
              </span>
            )))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   HERO 5 — Burger collage magazine
   ============================================================ */
function HeroCollage() {
  return (
    <section className="hero h5" data-screen-label="Hero 05 — Collage">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18, flexWrap:'wrap', gap: 12}}>
          <span className="label">Issue 01 · Bali · {new Date().getFullYear()}</span>
          <span className="label" style={{color:'var(--red)'}}>★ Smash Burger Specialist ★</span>
        </div>

        <div className="h5-grid">
          <div className="h5-headline" style={{gridColumn:'span 7', gridRow:'span 4'}}>
            <span className="label" style={{background:'var(--bone)', color:'var(--black)', padding:'4px 10px', alignSelf:'start'}}>The Cover Story</span>
            <div>
              <h1 className="display" style={{margin:0}}>
                STACKS<br/>
                ON STACKS<br/>
                ON STACKS.
              </h1>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', flexWrap:'wrap', gap: 14}}>
              <p style={{maxWidth: 360, fontSize:15, lineHeight:1.5, margin:0}}>
                Eight burgers. Two locations. One mission: to make Bali crave like it's never craved before.
              </p>
              <a className="btn btn-dark" href="#menu">See All ↗</a>
            </div>
          </div>

          <div className="h5-tile" style={{gridColumn:'span 5', gridRow:'span 4'}}>
            <img src="assets/photo-cheese.jpeg" alt="Cheese smash" />
            <span className="pill pill-red">CHEESE · 99K</span>
          </div>

          <div className="h5-tile" style={{gridColumn:'span 3', gridRow:'span 3'}}>
            <img src="assets/photo-fried-onion.jpeg" alt="Fried onion" />
            <span className="pill">FRIED ONION · 155K</span>
          </div>
          <div className="h5-tile" style={{gridColumn:'span 3', gridRow:'span 3'}}>
            <img src="assets/photo-classic.jpeg" alt="Classic" />
            <span className="pill">CLASSIC · 95K</span>
          </div>
          <div className="h5-tile" style={{gridColumn:'span 3', gridRow:'span 3'}}>
            <img src="assets/photo-shake.jpeg" alt="Oreo shake" />
            <span className="pill pill-red">OREO · 52K</span>
          </div>

          <div className="h5-cta-block" style={{gridColumn:'span 3', gridRow:'span 3'}}>
            <span className="label" style={{color:'var(--red)'}}>Order Up</span>
            <p style={{fontFamily:'Bagel Fat One, serif', fontSize:28, lineHeight:0.95, margin:0}}>
              Get it<br/>delivered.
            </p>
            <div style={{display:'flex', flexDirection:'column', gap: 8}}>
              <a className="btn btn-primary" href="#order" style={{width:'100%', justifyContent:'center', padding:'12px 16px'}}>GoFood ↗</a>
              <a className="btn btn-ghost" href="#order" style={{width:'100%', justifyContent:'center', padding:'12px 16px'}}>GrabFood ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, HeroSplit, HeroMarquee, HeroCollage });