// Luxury sections v2 — content-rich tabbed capabilities + editorial trust

// (CAPS, StageVisual, LCapabilities moved to ccl-product.jsx)

// Benchmarks — internal evaluation numbers, no customer claims
const LNumbers = () => (
  <section className="ccl-section" id="proof">
    <div className="ccl-wrap">
      <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'end', marginBottom:48}}>
        <div>
          <div className="ccl-eyebrow"><span className="ccl-eyebrow-num">▲</span>Benchmarks · internal eval</div>
          <h2 className="ccl-h2" style={{marginTop:24}}>What our AI<br/>can <em>actually do.</em></h2>
        </div>
        <div style={{fontFamily:'var(--ccl-mono)', fontSize:11, letterSpacing:'0.14em', color:'var(--ccl-mute)', textTransform:'uppercase', textAlign:'right'}}>
          Internal eval set · 4,200 docs<br/>Benchmarked April 2026
        </div>
      </div>
      <div className="ccl-numbers">
        {[
          {n:<><LCountUp to={94}/><em>%</em></>, l:'Field extraction accuracy on contracts & certifications', m:'Purpose-built model vs. 71% with off-the-shelf RAG'},
          {n:<><LCountUp to={1.2} decimals={1}/><em>s</em></>, l:'Median time from upload to indexed and searchable', m:'Compliance-tuned reasoning · domain-specific knowledge base'},
          {n:<><LCountUp to={47}/><em>frameworks</em></>, l:'Pre-mapped in our compliance knowledge base', m:'14 more shipping each quarter'},
        ].map((s, i) => (
          <LReveal key={i} delay={i * 100} className="ccl-number">
            <div className="ccl-number-num">{s.n}</div>
            <div className="ccl-number-lbl">{s.l}</div>
            <div className="ccl-number-meta">{s.m}</div>
          </LReveal>
        ))}
      </div>
    </div>
  </section>
);

// Design partner / early access — replaces customer testimonials for a brand-new product
const LTestimonials = () => (
  <section className="ccl-section ccl-section-cream" id="early-access">
    <div className="ccl-wrap">
      <div className="ccl-section-head">
        <div className="ccl-eyebrow"><span className="ccl-eyebrow-num">✺</span>Design partner program</div>
        <h2 className="ccl-h2" style={{marginTop:24}}>Help us build<br/>the <em>AI compliance</em> stack.</h2>
        <p className="ccl-lede">ComplyChip is building compliance-specific AI from the ground up. We are taking on twelve design partners this quarter — teams whose problems will shape our knowledge base, our models, and what ships next. Concierge onboarding, direct line to the founders, and pricing fixed for life.</p>
      </div>
      <div className="ccl-ea-grid">
        <LReveal className="ccl-ea-main">
          <div className="ccl-ea-eb">What you get</div>
          <ul className="ccl-ea-list">
            <li><strong>Concierge onboarding.</strong> A founder migrates your first 500 documents on a screen-share. Day one to indexed: a single afternoon.</li>
            <li><strong>Direct line to the team.</strong> Shared channel with the people writing the prompts. Ship-or-bin a feature within the week.</li>
            <li><strong>Pricing fixed for life.</strong> Lock the design-partner rate now and keep it through GA — no renegotiation when we raise.</li>
            <li><strong>Roadmap influence.</strong> The frameworks, integrations, and workflows you need most jump the queue.</li>
          </ul>
          <div className="ccl-ea-actions">
            <LMagnetic strength={0.18}><button className="ccl-btn ccl-btn-primary">Apply to be a design partner <LIcon name="arrR" size={14}/></button></LMagnetic>
            <LMagnetic strength={0.14}><a href="#product" className="ccl-btn ccl-btn-ghost">See what we've built so far</a></LMagnetic>
          </div>
        </LReveal>
        <div className="ccl-ea-side">
          <LReveal delay={100} className="ccl-ea-stat">
            <div className="ccl-ea-stat-num"><LCountUp to={12}/></div>
            <div className="ccl-ea-stat-lbl">Design-partner seats — this cohort</div>
            <div className="ccl-ea-stat-bar"><span style={{width:'42%'}}/></div>
            <div className="ccl-ea-stat-foot">5 of 12 claimed · closes June 30</div>
          </LReveal>
          <LReveal delay={200} className="ccl-ea-stat">
            <div className="ccl-ea-stat-eb">Right fit if you</div>
            <ul className="ccl-ea-fit">
              <li>own compliance or vendor risk for a regulated team</li>
              <li>have 100+ documents and 20+ vendors today</li>
              <li>have 30 minutes a week to tell us where it's wrong</li>
            </ul>
          </LReveal>
        </div>
      </div>
    </div>
  </section>
);

// LHowItWorks moved to ccl-howitworks.jsx

const IndVisual = ({ kind }) => {
  switch (kind) {
    case 'chip':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          <g className="ccl-iv-chip-pins">
            {[0,1,2,3].map(i => <rect key={`t${i}`} x={70 + i*16} y="28" width="6" height="14" fill="#14110e" rx="1"/>)}
            {[0,1,2,3].map(i => <rect key={`b${i}`} x={70 + i*16} y="118" width="6" height="14" fill="#14110e" rx="1"/>)}
            {[0,1,2,3].map(i => <rect key={`l${i}`} x="28" y={50 + i*16} width="14" height="6" fill="#14110e" rx="1"/>)}
            {[0,1,2,3].map(i => <rect key={`r${i}`} x="158" y={50 + i*16} width="14" height="6" fill="#14110e" rx="1"/>)}
          </g>
          <rect x="56" y="42" width="88" height="86" rx="8" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.4"/>
          <rect x="72" y="58" width="56" height="54" rx="3" fill="none" stroke="#14110e" strokeWidth="1" opacity="0.4"/>
          <circle cx="100" cy="85" r="5" fill="#1f3a30" className="ccl-iv-pulse"/>
        </svg>
      );
    case 'bell':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          {/* Bellhop service bell — dome */}
          <path d="M58 118 Q58 60 100 56 Q142 60 142 118 Z" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6" strokeLinejoin="round"/>
          {/* Base plate */}
          <rect x="48" y="118" width="104" height="8" rx="2" fill="#14110e"/>
          {/* Top stem & button */}
          <line x1="100" y1="56" x2="100" y2="44" stroke="#14110e" strokeWidth="1.6"/>
          <circle cx="100" cy="42" r="6" fill="#1f3a30" className="ccl-iv-pulse"/>
          {/* Dome detail line */}
          <path d="M72 102 Q100 96 128 102" fill="none" stroke="#14110e" strokeWidth="1" opacity="0.35"/>
          {/* Ring waves */}
          <path d="M40 60 Q46 52 54 50" fill="none" stroke="#1f3a30" strokeWidth="1.4" opacity="0.4"/>
          <path d="M160 60 Q154 52 146 50" fill="none" stroke="#1f3a30" strokeWidth="1.4" opacity="0.4"/>
          <path d="M32 76 Q40 66 50 64" fill="none" stroke="#1f3a30" strokeWidth="1.2" opacity="0.22"/>
          <path d="M168 76 Q160 66 150 64" fill="none" stroke="#1f3a30" strokeWidth="1.2" opacity="0.22"/>
        </svg>
      );
    case 'cross':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          {/* Hospital building outline */}
          <rect x="48" y="44" width="104" height="80" rx="6" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
          {/* Roofline detail */}
          <line x1="48" y1="58" x2="152" y2="58" stroke="#14110e" strokeWidth="1" opacity="0.35"/>
          {/* Medical cross */}
          <rect x="88" y="66" width="24" height="48" fill="#1f3a30"/>
          <rect x="76" y="78" width="48" height="24" fill="#1f3a30"/>
          {/* EKG pulse line below */}
          <path className="ccl-iv-check" d="M30 140 L62 140 L70 128 L80 152 L92 140 L106 132 L120 140 L170 140" fill="none" stroke="#7d2e3a" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="200" strokeDashoffset="0"/>
        </svg>
      );
    case 'cap':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          {/* Mortarboard top — diamond shape */}
          <path d="M36 70 L100 44 L164 70 L100 96 Z" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6" strokeLinejoin="round"/>
          {/* Cap band */}
          <path d="M68 84 V102 Q68 118 100 118 Q132 118 132 102 V84" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
          {/* Band detail */}
          <line x1="68" y1="96" x2="132" y2="96" stroke="#14110e" strokeWidth="1" opacity="0.3"/>
          {/* Tassel cord */}
          <path d="M148 70 Q156 78 152 92 L152 112" fill="none" stroke="#14110e" strokeWidth="1.4"/>
          {/* Tassel button on top */}
          <circle cx="148" cy="70" r="3" fill="#14110e"/>
          {/* Tassel pom */}
          <circle cx="152" cy="118" r="6" fill="#1f3a30" className="ccl-iv-pulse"/>
        </svg>
      );
    case 'gear':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          <g transform="translate(100 80)" className="ccl-iv-gear">
            {[0,1,2,3,4,5,6,7].map(i => (
              <rect key={i} x="-5" y="-46" width="10" height="14" fill="#14110e" rx="2" transform={`rotate(${i*45})`}/>
            ))}
            <circle r="32" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
            <circle r="10" fill="#1f3a30"/>
          </g>
          <g transform="translate(50 50)" className="ccl-iv-gear-sm">
            {[0,1,2,3,4,5].map(i => (
              <rect key={i} x="-3" y="-22" width="6" height="8" fill="#14110e" rx="1" transform={`rotate(${i*60})`}/>
            ))}
            <circle r="14" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.4"/>
            <circle r="4" fill="#14110e"/>
          </g>
        </svg>
      );
    case 'building':
      return (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice">
          {/* Skyline: three towers */}
          <rect x="48" y="74" width="34" height="58" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
          <rect x="84" y="46" width="42" height="86" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
          <rect x="128" y="68" width="32" height="64" fill="var(--ccl-paper)" stroke="#14110e" strokeWidth="1.6"/>
          {/* Center building windows */}
          {[0,1,2,3,4,5].map(r => [0,1,2].map(c => {
            const isLit = (r === 2 && c === 1) || (r === 4 && c === 0);
            return <rect key={`c${r}${c}`} x={89 + c*11} y={51 + r*13} width="7" height="8" fill={isLit ? '#1f3a30' : '#14110e'} opacity={isLit ? 1 : 0.18} className={isLit ? 'ccl-iv-window' : ''}/>;
          }))}
          {/* Left building windows */}
          {[0,1,2,3].map(r => [0,1].map(c => 
            <rect key={`l${r}${c}`} x={54 + c*13} y={80 + r*13} width="7" height="8" fill="#14110e" opacity="0.18"/>
          ))}
          {/* Right building windows */}
          {[0,1,2,3].map(r => [0,1].map(c => 
            <rect key={`r${r}${c}`} x={133 + c*12} y={75 + r*13} width="7" height="8" fill="#14110e" opacity="0.18"/>
          ))}
          {/* Antenna */}
          <line x1="105" y1="46" x2="105" y2="32" stroke="#14110e" strokeWidth="1.4"/>
          <circle cx="105" cy="30" r="2.5" fill="#1f3a30" className="ccl-iv-pulse"/>
        </svg>
      );
    default: return null;
  }
};

const IndCard = ({ ind, idx }) => {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.setProperty('--rx', `${(-y * 5).toFixed(2)}deg`);
    el.style.setProperty('--ry', `${(x * 6).toFixed(2)}deg`);
    el.style.setProperty('--mx', `${(x * 14).toFixed(1)}px`);
    el.style.setProperty('--my', `${(y * 10).toFixed(1)}px`);
  };
  const onLeave = () => {
    const el = ref.current; if (!el) return;
    el.style.setProperty('--rx', '0deg');
    el.style.setProperty('--ry', '0deg');
    el.style.setProperty('--mx', '0px');
    el.style.setProperty('--my', '0px');
  };
  return (
    <div className="ccl-ind-cell" data-stagger>
      <a
        ref={ref}
        href="#"
        className="ccl-ind-card"
        onMouseMove={onMove}
        onMouseLeave={onLeave}
      >
        <div className="ccl-ind-card-vis">
          <span className="ccl-ind-card-vnum">{String(idx + 1).padStart(2, '0')}</span>
          <IndVisual kind={ind.vis}/>
        </div>
        <div className="ccl-ind-card-body">
          <h4 className="ccl-ind-card-name">{ind.n}</h4>
          <p className="ccl-ind-card-desc">{ind.desc}</p>
          <div className="ccl-ind-card-frames">
            {ind.f.map(x => <span key={x}>{x}</span>)}
          </div>
          <div className="ccl-ind-card-cta">
            <span>Read industry brief</span>
            <span className="ccl-ind-card-arrow" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M7 17 L17 7 M9 7 H17 V15" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </div>
        </div>
      </a>
    </div>
  );
};

const LIndustries = () => {
  const inds = [
    { n: 'Semiconductor', vis: 'chip', desc: 'Export controls, traceability, supplier audits — pre-mapped for fabless and IDM.', f: ['ITAR', 'EAR', 'ISO 9001', 'RoHS'] },
    { n: 'Hospitality', vis: 'bell', desc: 'Payment security, guest accessibility, food safety, and staff training across properties and brands.', f: ['PCI DSS', 'ADA Title III', 'OSHA', 'HACCP'] },
    { n: 'Hospitals', vis: 'cross', desc: 'PHI handling, emergency-care obligations, and Joint Commission readiness without the binder.', f: ['HIPAA', 'HITECH', 'EMTALA', 'Joint Commission'] },
    { n: 'Industrial', vis: 'gear', desc: 'Site safety, environmental compliance, and contractor onboarding at scale.', f: ['ISO 14001', 'OSHA', 'EPA'] },
    { n: 'Education Institutes', vis: 'cap', desc: 'Student records, online-safety obligations, Title IX response, and campus-safety reporting across districts and campuses.', f: ['FERPA', 'COPPA', 'Title IX', 'Clery Act'] },
    { n: 'Real Estate', vis: 'building', desc: 'Fair housing, vendor licensing, and lease compliance for owners, operators, and brokers.', f: ['Fair Housing', 'RESPA', 'TRID', 'ADA'] },
  ];
  return (
    <section className="ccl-section ccl-section-cream" id="solutions">
      <div className="ccl-wrap">
        <div className="ccl-section-head">
          <div className="ccl-eyebrow"><span className="ccl-eyebrow-num">◆</span>Solutions by industry</div>
          <h2 className="ccl-h2" style={{marginTop:24}}>Built for the <em>regulated.</em></h2>
          <p className="ccl-lede">Frameworks pre-mapped, workflows tuned for each vertical, and vocabulary that matches your auditors — not generic AI with a compliance label. Pick yours.</p>
        </div>
        <LStagger className="ccl-ind-grid" delay={110}>
          {inds.map((ind, i) => <IndCard key={ind.n} ind={ind} idx={i}/>)}
        </LStagger>
      </div>
    </section>
  );
};

const LTrust = () => (
  <section className="ccl-trust" id="security">
    <div className="ccl-wrap">
      <div className="ccl-trust-grid">
        <div>
          <div className="ccl-eyebrow ccl-eyebrow-dark"><span className="ccl-eyebrow-num" style={{borderColor:'rgba(241,237,227,0.2)', background:'transparent', color:'var(--ccl-paper)'}}>◉</span>Security & trust</div>
          <h2 className="ccl-h2" style={{color:'var(--ccl-paper)', marginTop:28, textWrap:'pretty', marginBottom:8}}>
            Your documents <em>never leave</em> your tenant.
          </h2>
          <p className="ccl-lede" style={{color:'rgba(241,237,227,0.72)', marginTop:28}}>
            Encrypted at rest and in transit. Tenant-isolated by default. No prompt or document data is used to train any model — yours, ours, or anyone else's.
          </p>
          <a href="#" className="ccl-btn ccl-btn-ghost" style={{marginTop:36, color:'var(--ccl-paper)', borderColor:'rgba(241,237,227,0.24)'}}>
            Read the security page <LIcon name="arrR" size={13}/>
          </a>
        </div>
        <LStagger className="ccl-cert-grid" delay={110}>
          {[
            {n:'SOC 2', t:'Type II', m:'Audited annually by a Big 4 firm. Latest report available under NDA.', s:'Active'},
            {n:'GDPR', t:'EU & UK', m:'Data residency selectable per tenant. Right-to-erase honored within 30 days.', s:'Active'},
            {n:'ISO 27001', t:'Stage 2', m:'External audit complete. Certificate expected Q3 2026.', s:'In progress'},
            {n:'Tenant', t:'Isolation', m:'Each customer gets a dedicated namespace. Zero cross-tenant data paths.', s:'Active'},
          ].map(c => (
            <div key={c.n} className="ccl-cert" data-stagger>
              <div className="ccl-cert-name">{c.n}</div>
              <div className="ccl-cert-title">{c.t}</div>
              <div className="ccl-cert-meta">{c.m}</div>
              <div className="ccl-cert-status" style={c.s === 'In progress' ? {color:'#a8854a'} : {}}>{c.s}</div>
            </div>
          ))}
        </LStagger>
      </div>
    </div>
  </section>
);

const LFinalCTA = () => (
  <section className="ccl-final">
    <div className="ccl-wrap">
      <div className="ccl-eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>
        <span className="ccl-eyebrow-num">✦</span>
        Twenty minutes · Your data · No slides
      </div>
      <h2 className="ccl-final-h">
        Join the first<br/><em>twelve teams.</em>
      </h2>
      <p className="ccl-lede" style={{margin:'0 auto 48px', textAlign:'center', maxWidth:620}}>
        We are taking design partners through June 30. Bring three documents — we'll index them on a call and you'll see exactly what your portfolio looks like inside ComplyChip.
      </p>
      <div className="ccl-final-actions">
        <LMagnetic strength={0.2}>
          <button className="ccl-btn ccl-btn-primary">Request early access <LIcon name="arrR" size={14}/></button>
        </LMagnetic>
        <LMagnetic strength={0.14}>
          <a href="#product" className="ccl-btn ccl-btn-ghost">See the product first</a>
        </LMagnetic>
      </div>
      <div className="ccl-final-meta">
        <span>Private beta · invite only</span>
        <span>Tenant isolated</span>
        <span>Pricing locked through GA</span>
      </div>
    </div>
  </section>
);

const LFooter = () => (
  <footer className="ccl-foot">
    <div className="ccl-wrap">
      <div className="ccl-foot-top">
        <div>
          <div className="ccl-foot-brand">
            Compliance,<br/><em>made dependable.</em>
          </div>
          <div className="ccl-foot-tag">
            The AI-native intelligence layer between your documents, vendors, and the regulations they answer to.
          </div>
        </div>
        <div className="ccl-foot-cols">
          {[
            ['Product', ['Document intake', 'Vendor risk', 'Compliance Copilot', 'Workflows', 'Knowledge graph']],
            ['Solutions', ['Semiconductor', 'Hospitality', 'Hospitals', 'Industrial', 'Education Institutes']],
            ['Company', ['About', 'Customers', 'Pricing', 'Careers', 'Contact']],
            ['Trust', ['Security', 'SOC 2 report', 'Privacy', 'Terms', 'DPA']],
          ].map(([h, items]) => (
            <div key={h}>
              <h5>{h}</h5>
              <ul>{items.map(x => <li key={x}><a href="#">{x}</a></li>)}</ul>
            </div>
          ))}
        </div>
      </div>
      <div className="ccl-foot-bar">
        <div>© 2026 ComplyChip Inc. All rights reserved.</div>
        <div className="ccl-foot-badges">
          <span>SOC 2 Type II</span>
          <span>GDPR</span>
          <span>ISO 27001 · In progress</span>
        </div>
      </div>
    </div>
  </footer>
);

const HomeLuxury = () => (
  <div className="ccl" data-screen-label="Home · Luxury">
    <LScrollProgress/>
    <LNav/>
    <LHero/>
    <LTrustStrip/>
    <LCapabilities/>
    <LAI/>
    <LNumbers/>
    <LTestimonials/>
    <LHowItWorks/>
    <LIndustries/>
    <LTrust/>
    <LFinalCTA/>
    <LFooter/>
  </div>
);

window.HomeLuxury = HomeLuxury;
