// Luxury hero v2 — anchored, confident, product-forward

const LNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('.ccl-host') || window;
    const onS = () => {
      const top = el === window ? window.scrollY : el.scrollTop;
      setScrolled(top > 8);
    };
    el.addEventListener('scroll', onS, { passive: true });
    onS();
    return () => el.removeEventListener('scroll', onS);
  }, []);
  return (
    <nav className="ccl-nav" style={scrolled ? {boxShadow: '0 1px 0 var(--ccl-hairline), 0 8px 24px -16px rgba(20,17,14,0.08)'} : {}}>
      <div className="ccl-nav-inner">
        <a href="#" className="ccl-brand">
          <span className="ccl-brand-mark">C</span>
          ComplyChip
        </a>
        <div className="ccl-navlinks">
          <a href="#product" className="ccl-active">Product</a>
          <a href="#solutions">Solutions</a>
          <a href="#ai">AI</a>
          <a href="#security">Security</a>
          <a href="#early-access">Early access</a>
          <a href="#docs">Docs</a>
        </div>
        {/* Hidden for now — uncomment when auth + access flow is live
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <a href="/index.html" style={{fontSize:13.5, color:'var(--ccl-ink-2)', padding:'8px 12px', textDecoration:'none', fontWeight:500, whiteSpace:'nowrap'}}>Sign in</a>
          <button className="ccl-btn ccl-btn-primary ccl-btn-sm" style={{whiteSpace:'nowrap'}}>Request access <LIcon name="arrR" size={13}/></button>
        </div>
        */}
      </div>
    </nav>
  );
};

// Hero product preview — static, beautiful, doesn't rely on scroll transforms
const HeroPreview = () => {
  const [tab, setTab] = React.useState('portfolio');
  const [pulseI, setPulseI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setPulseI(i => (i + 1) % 4), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="ccl-hero-frame">
      <div className="ccl-hero-toolbar">
        <div className="ccl-hero-dots"><span/><span/><span/></div>
        <div className="ccl-hero-toolbar-tabs">
          <span className={tab==='portfolio'?'on':''} onClick={() => setTab('portfolio')}>Portfolio</span>
          <span className={tab==='vendors'?'on':''} onClick={() => setTab('vendors')}>Vendors</span>
          <span className={tab==='copilot'?'on':''} onClick={() => setTab('copilot')}>Compliance Copilot</span>
        </div>
        <div className="ccl-hero-url">app.complychip.com</div>
      </div>
      <div style={{padding:'28px 32px 32px', display:'grid', gridTemplateColumns:'1fr', gap:24, minHeight:480}}>
        {/* Top — score + summary */}
        <div>
          <div style={{fontFamily:'var(--ccl-mono)', fontSize:10, letterSpacing:'0.18em', color:'rgba(241,237,227,0.55)', textTransform:'uppercase', marginBottom:18, display:'flex', alignItems:'center', gap:10}}>
            <span style={{width:6, height:6, borderRadius:999, background:'#5a8470', boxShadow:'0 0 10px #5a8470'}}/>
            Live · 5 entities · 287 docs · 200 vendors
          </div>
          <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:24, alignItems:'end'}}>
            <div>
              <div style={{fontFamily:'var(--ccl-mono)', fontSize:10.5, letterSpacing:'0.14em', color:'rgba(241,237,227,0.6)', textTransform:'uppercase', marginBottom:6}}>Portfolio score</div>
              <div style={{display:'flex', alignItems:'baseline', gap:12}}>
                <div style={{fontFamily:'var(--ccl-display)', fontSize:88, fontWeight:500, lineHeight:0.9, letterSpacing:'-0.04em', color:'var(--ccl-paper)', fontVariationSettings:"'opsz' 144"}}>78</div>
                <div style={{fontFamily:'var(--ccl-mono)', fontSize:12, color:'#8db49a'}}>+6.2<br/><span style={{color:'rgba(241,237,227,0.5)', fontSize:9.5, letterSpacing:'0.14em', textTransform:'uppercase'}}>90d</span></div>
              </div>
              <div style={{fontFamily:'var(--ccl-display)', fontSize:18, fontWeight:500, fontStyle:'italic', color:'var(--ccl-paper)', letterSpacing:'-0.02em', marginTop:8, fontVariationSettings:"'opsz' 36", opacity:0.9}}>Healthy, with watchpoints.</div>
            </div>
            <svg viewBox="0 0 220 60" style={{width:'100%', height:48}}>
              <defs><linearGradient id="hg2" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#5a8470" stopOpacity="0.32"/><stop offset="1" stopColor="#5a8470" stopOpacity="0"/></linearGradient></defs>
              <path d="M0 46 L15 42 L30 44 L45 36 L60 38 L75 30 L90 26 L105 30 L120 22 L135 20 L150 16 L165 20 L180 12 L195 16 L210 8 L220 6 L220 60 L0 60 Z" fill="url(#hg2)"/>
              <path d="M0 46 L15 42 L30 44 L45 36 L60 38 L75 30 L90 26 L105 30 L120 22 L135 20 L150 16 L165 20 L180 12 L195 16 L210 8 L220 6" stroke="#8db49a" strokeWidth="1.4" fill="none"/>
            </svg>
          </div>
        </div>
        {/* Bottom — action cards */}
        <div style={{display:'flex', flexDirection:'column', gap:8, paddingTop:8, borderTop:'1px solid #25201b'}}>
          <div style={{fontFamily:'var(--ccl-mono)', fontSize:10, letterSpacing:'0.18em', color:'rgba(241,237,227,0.55)', textTransform:'uppercase', marginBottom:4, marginTop:8}}>What needs you · this week</div>
          {[
            {h:'Overdue · 2', t:'#7d2e3a', items:[['OSHA Safety Cert', 'Harbor Industrial', '12d ago'],['Fire Inspection', 'Downtown Tower', '4d ago']]},
            {h:'Expiring · 3', t:'#a8854a', items:[['Workers Comp', 'Riverside Medical', 'in 9d']]},
            {h:'For review · 1', t:'#8db49a', items:[['Vendor Risk Q2', 'BuildRight Co.', 'today']]},
          ].map((c, ci) => (
            <div key={c.h} style={{padding:'10px 14px', background:'#1a1612', border:'1px solid #25201b', borderRadius:10, position:'relative'}}>
              {ci === pulseI % 3 && <span style={{position:'absolute', top:10, right:12, width:6, height:6, borderRadius:999, background:c.t, boxShadow:`0 0 10px ${c.t}`, animation:'pulse 1.6s ease-in-out infinite'}}/>}
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                <span style={{width:5, height:5, borderRadius:999, background:c.t}}/>
                <span style={{fontFamily:'var(--ccl-mono)', fontSize:9.5, color:c.t, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500}}>{c.h}</span>
              </div>
              {c.items.map(([n, e, d]) => (
                <div key={n} style={{display:'flex', justifyContent:'space-between', padding:'3px 0', fontSize:12, color:'var(--ccl-paper)'}}>
                  <span><span style={{fontWeight:500}}>{n}</span><span style={{color:'rgba(241,237,227,0.55)', marginLeft:6, fontSize:11.5}}>{e}</span></span>
                  <span style={{color:c.t, fontFamily:'var(--ccl-mono)', fontSize:10.5}}>{d}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
      <style>{`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`}</style>
    </div>
  );
};

// Decorative floating cards — drift around the hero preview with parallax
const FloatCardScore = () => (
  <div className="ccl-float-card ccl-float-card--score">
    <div className="ccl-float-eb">Score · live</div>
    <div className="ccl-float-row">
      <div className="ccl-float-big">94</div>
      <svg viewBox="0 0 80 32" style={{width:64, height:28}}>
        <path d="M0 24 L12 22 L24 18 L36 20 L48 14 L60 10 L72 6 L80 4" stroke="#5a8470" strokeWidth="1.6" fill="none"/>
      </svg>
    </div>
    <div className="ccl-float-meta">+6.2 · 90d</div>
  </div>
);

const FloatCardDoc = () => (
  <div className="ccl-float-card ccl-float-card--doc">
    <div className="ccl-float-eb">Indexed · 1.2s</div>
    <div className="ccl-float-doc-title">MSA-0418.pdf</div>
    <div className="ccl-float-lines">
      <span style={{width:'92%'}}/><span style={{width:'78%'}}/><span style={{width:'88%'}}/><span style={{width:'62%'}}/>
    </div>
    <div className="ccl-float-tags">
      <span>NDA</span><span>Harbor</span><span>2026</span>
    </div>
  </div>
);

const FloatCardAlert = () => (
  <div className="ccl-float-card ccl-float-card--alert">
    <div className="ccl-float-pulse"/>
    <div className="ccl-float-eb" style={{color:'#7d2e3a'}}>Action · overdue</div>
    <div className="ccl-float-doc-title">OSHA Safety Cert</div>
    <div className="ccl-float-meta">Harbor Industrial · 12d ago</div>
  </div>
);

// Subtle dotted grid that lives behind the hero
const HeroGrid = () => (
  <div className="ccl-hero-grid" aria-hidden="true">
    <svg width="100%" height="100%">
      <defs>
        <pattern id="hgdots" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="1" fill="rgba(20,17,14,0.07)"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#hgdots)"/>
    </svg>
  </div>
);

const LHero = () => (
  <section className="ccl-hero">
    <HeroGrid/>
    <div className="ccl-hero-inner">
      <div className="ccl-hero-copy">
        <LParallax speed={0.06}>
          <span className="ccl-hero-meta">
            <span className="ccl-hero-meta-pill">Private beta</span>
            AI-native compliance · design partners open
            <LIcon name="arrR" size={12}/>
          </span>
        </LParallax>
        <h1 className="ccl-h1">
          Compliance,<br/>
          rebuilt around <em>AI.</em>
        </h1>
        <p className="ccl-hero-sub">
          ComplyChip is the AI-native intelligence layer for regulated industries — built on a compliance-specific knowledge base, purpose-built models, and workflows engineered from the ground up. The system reads. The system understands. The Compliance Copilot answers — with sources.
        </p>
        <div className="ccl-hero-actions">
          <LMagnetic strength={0.18}>
            <button className="ccl-btn ccl-btn-primary">Apply for early access <LIcon name="arrR" size={14}/></button>
          </LMagnetic>
          <LMagnetic strength={0.14}>
            <a href="#product" className="ccl-btn ccl-btn-ghost">See the AI in action</a>
          </LMagnetic>
        </div>
      </div>
      <div className="ccl-hero-stage">
        {/* Floating decoration cards — pointer-events:none so they don't block the preview */}
        <LParallax speed={-0.08} className="ccl-float-pos ccl-float-pos--score">
          <LFloat dx={4} dy={8} dur={6.5}><FloatCardScore/></LFloat>
        </LParallax>
        <LParallax speed={0.14} className="ccl-float-pos ccl-float-pos--doc">
          <LFloat dx={6} dy={10} dur={8} delay={1.2}><FloatCardDoc/></LFloat>
        </LParallax>
        <LParallax speed={-0.18} className="ccl-float-pos ccl-float-pos--alert">
          <LFloat dx={5} dy={12} dur={7.4} delay={0.6}><FloatCardAlert/></LFloat>
        </LParallax>

        <LParallax speed={-0.04}>
          <LTilt max={3.5}>
            <HeroPreview/>
          </LTilt>
        </LParallax>
      </div>
    </div>
  </section>
);

// AI-stack strip — replaces "trusted by" with the AI infrastructure under the hood
const LTrustStrip = () => {
  const stack = [
    { n: 'Compliance reasoning', s: 'Domain-tuned extraction' },
    { n: 'Compliance Copilot', s: 'Cited answers over your corpus' },
    { n: 'Knowledge base', s: 'Compliance-specific embeddings' },
    { n: 'Agent orchestration', s: 'Multi-step AI reasoning' },
    { n: 'AI-native workflows', s: 'Purpose-built compliance pipelines' },
    { n: 'Embeddings & OCR', s: 'From scan to searchable' },
    { n: 'Knowledge graph', s: 'Entities, documents, regulations' },
    { n: 'Audit trail', s: 'Every answer logged' },
  ];
  return (
    <div className="ccl-trust-strip">
      <div className="ccl-trust-strip-inner">
        <div className="ccl-trust-label">The AI stack <em>auditors will trust</em></div>
        <LMarquee duration={46} className="ccl-trust-marquee">
          {stack.map(s => (
            <div key={s.n} className="ccl-trust-logo ccl-trust-logo-ai">
              <span className="ccl-trust-logo-n">{s.n}</span>
              <span className="ccl-trust-logo-s">{s.s}</span>
            </div>
          ))}
        </LMarquee>
      </div>
    </div>
  );
};

window.LNav = LNav;
window.LHero = LHero;
window.LTrustStrip = LTrustStrip;