// Nav + Hero
const NAV_LINKS = [
  ['Residential','#residential', false],
  ['Commercial','#commercial', false],
  ['Railbike','Railbike Lighting.html', true],
  ['Demo','#gun-case-demo', false],
  ['AI for SMB','randy.html', true],
  ['Service Areas','#service-areas', false],
];

function Nav({ onQuote }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', f); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '20px 40px',
      background: scrolled ? 'rgba(10,10,10,0.92)' : 'rgba(10,10,10,0.0)',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(43,43,43,0.6)' : '1px solid transparent',
      transition: 'all .25s ease',
      display: 'grid',
      gridTemplateColumns: 'auto 1fr auto',
      alignItems: 'center',
      gap: 48,
    }}>
      <a href="#top" style={{display:'flex',alignItems:'center',gap:14}}>
        <img src="public/img/thraxel-logo.png" alt="" style={{height:32,width:'auto',filter:'drop-shadow(0 0 8px rgba(200,16,46,0.35))'}}/>
        <span style={{
          fontFamily:'Orbitron,sans-serif',fontWeight:900,letterSpacing:'0.32em',
          fontSize:18,color:'#e8e8eb',textTransform:'uppercase',
        }}>THRAXEL</span>
      </a>
      <div className="nav-links" style={{display:'flex',gap:44,alignItems:'center',justifyContent:'center'}}>
        {NAV_LINKS.map(([label,href,external]) => (
          <a key={label} href={href} style={{
            fontFamily: 'Orbitron, sans-serif', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.22em',
            color: external ? '#fff' : 'var(--thraxel-light-grey)',
            textTransform:'uppercase',
            transition: 'color .15s ease',
            whiteSpace:'nowrap',
            display:'inline-flex', alignItems:'center', gap:8,
          }} onMouseEnter={e=>e.currentTarget.style.color='var(--thraxel-red)'} onMouseLeave={e=>e.currentTarget.style.color = external?'#fff':'var(--thraxel-light-grey)'}>
            {label}
            {external && <span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'var(--thraxel-red)',boxShadow:'0 0 8px rgba(200,16,46,0.8)'}}/>}
          </a>
        ))}
      </div>
      <button className="btn-red" onClick={()=>onQuote('residential')} style={{padding:'14px 24px',fontSize:12}}>GET A QUOTE</button>
      <style>{`@media (max-width:1100px){.nav-links{display:none!important}}`}</style>
    </nav>
  );
}

function Hero({ onQuote, onExplore }) {
  return (
    <section id="top" style={{position:'relative',height:'100vh',minHeight:720,overflow:'hidden'}}>
      <VideoBg src="public/video/ll-hero.mp4" />
      {/* Vignette */}
      <div style={{
        position:'absolute',inset:0,
        background:'linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.45) 70%, rgba(10,10,10,0.95) 100%)',
      }} />
      <div style={{
        position:'absolute',inset:0,
        background:'radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(10,10,10,0.5) 100%)',
      }} />
      <div className="grain" />

      <div style={{
        position:'relative',zIndex:2,height:'100%',
        display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 64px',maxWidth:1600,margin:'0 auto',
      }}>
        <div className="eyebrow" style={{marginBottom:24,marginTop:80,maxWidth:'68ch',lineHeight:1.5}}>PERMANENT LIGHTING · LANDSCAPE LIGHTING · HOLIDAY LIGHTING<br/>RESIDENTIAL · COMMERCIAL · POP-UP EVENTS · &amp; MORE</div>
        <h1 className="chrome-text" style={{
          fontSize:'clamp(56px, 9vw, 132px)', lineHeight:0.92,
          letterSpacing:'0.03em', textTransform:'uppercase',
          maxWidth:'15ch',
        }}>Built for every season.</h1>
        <div style={{
          fontFamily:'Orbitron,sans-serif', fontWeight:800,
          fontSize:'clamp(28px, 4vw, 56px)', color:'var(--thraxel-red)',
          letterSpacing:'0.04em', textTransform:'uppercase',
          marginTop:18, lineHeight:1,
        }}>Controlled from your pocket.</div>
        <p style={{
          maxWidth:620, marginTop:28, fontSize:19, color:'var(--thraxel-light-grey)',
          lineHeight:1.55,
        }}>Custom-controlled by <strong style={{color:'#fff'}}>Thraxel Lighting</strong> — our own app. Coming soon to the Apple App Store, with a web app for everyone else. One install. Every occasion. Every season.</p>
        <div style={{display:'flex',gap:16,marginTop:40,flexWrap:'wrap'}}>
          <button className="btn-red" onClick={()=>onQuote('residential')}>Get a Quote <Icons.arrow /></button>
          <button className="btn-ghost" onClick={onExplore}>Explore the System</button>
        </div>

        {/* Availability strip — App Store + Web App */}
        <div style={{
          marginTop:36, paddingTop:24,
          borderTop:'1px solid rgba(255,255,255,0.08)',
          display:'flex',alignItems:'center',gap:20,flexWrap:'wrap',
        }}>
          <div style={{
            fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:10,letterSpacing:'0.2em',
            color:'var(--thraxel-light-grey)', textTransform:'uppercase',
          }}>Available Soon</div>

          {/* Apple App Store badge */}
          <div style={{
            display:'inline-flex',alignItems:'center',gap:12,
            padding:'10px 18px 10px 14px',
            background:'#0a0a0a',border:'1px solid #2a2a2e',
            opacity:0.92,
          }}>
            {/* Apple logo SVG */}
            <svg width="22" height="26" viewBox="0 0 384 512" fill="#fff" aria-hidden="true">
              <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
            </svg>
            <div style={{display:'flex',flexDirection:'column',lineHeight:1.1}}>
              <span style={{fontSize:9,letterSpacing:'0.18em',color:'var(--thraxel-light-grey)',fontFamily:'Orbitron,sans-serif',fontWeight:700,textTransform:'uppercase'}}>Coming soon to</span>
              <span style={{fontSize:18,color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:800,letterSpacing:'0.04em',marginTop:3}}>App Store</span>
            </div>
          </div>

          {/* Web app badge */}
          <div style={{
            display:'inline-flex',alignItems:'center',gap:12,
            padding:'10px 18px 10px 14px',
            background:'#0a0a0a',border:'1px solid #2a2a2e',
            opacity:0.92,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" aria-hidden="true">
              <circle cx="12" cy="12" r="10"/>
              <path d="M2 12h20"/>
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
            </svg>
            <div style={{display:'flex',flexDirection:'column',lineHeight:1.1}}>
              <span style={{fontSize:9,letterSpacing:'0.18em',color:'var(--thraxel-light-grey)',fontFamily:'Orbitron,sans-serif',fontWeight:700,textTransform:'uppercase'}}>Also as a</span>
              <span style={{fontSize:18,color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:800,letterSpacing:'0.04em',marginTop:3}}>Web App</span>
            </div>
          </div>

          <div style={{
            fontFamily:'var(--body)',fontSize:13,color:'var(--thraxel-light-grey)',
            maxWidth:'30ch',lineHeight:1.45,
          }}>Android &amp; non-iOS users get the full experience in any modern browser.</div>
        </div>
      </div>

      {/* scroll cue removed per user request */}
    </section>
  );
}

Object.assign(window, { Nav, Hero });