// Home.jsx — Verigo Global homepage
const { V: VC, MAXW: MW, FONT: FT } = window;

const HERO_FRAMEWORKS = ['ISO 27001', 'ISO 42001', 'SOC 2', 'CMMC 2.0', 'HITRUST', 'CMMI', 'NIST'];

const SERVICE_LINES = [
{ icon: 'search', overline: 'Assess', title: 'Readiness Assessments', desc: 'Gap analysis against your chosen framework, risk scoring, and a prioritized remediation roadmap — delivered as an independent report.', dest: 'services' },
{ icon: 'layers', overline: 'Implement', title: 'Implementation Toolkits', desc: 'A practitioner-led program to close the gaps: policy development, control implementation, awareness programs, and evidence procedures.', dest: 'toolkits' },
{ icon: 'clipboard', overline: 'Prepare', title: 'Pre-Audit Preparation', desc: 'Mock internal audits, evidence collection support, and auditor-readiness coaching that lift first-time certification pass rates.', dest: 'services' },
{ icon: 'shield', overline: 'Certify', title: 'Formal Audits', desc: 'Independent certification and attestation audits conducted by Verigo Global credentialed auditors, with findings management.', dest: 'services' }];


const HomeHero = ({ onNav }) =>
<section style={{ background: '#fff', borderBottom: `1px solid ${VC.g100}`, padding: '88px 0 80px', position: 'relative', overflow: 'hidden' }}>
    <ArchBackdrop />
    <div className="vg-container" style={{ maxWidth: MW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 680 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: VC.purpleSubtle, color: VC.purpleDark, fontSize: 12.5, fontWeight: 600, padding: '6px 14px', marginBottom: 24, borderRadius: 0 }}>
          <span style={{ width: 7, height: 7, background: VC.orange }}></span>
          Information Security Compliance Consulting
        </div>
        <h1 className="vg-display-title" style={{ fontSize: 76, fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.035em', color: VC.black, margin: '0 0 24px', fontFamily: FT }}>
          Compliance<br />by <span style={{ color: VC.purple }}>Design.</span>
        </h1>
        <p style={{ fontSize: 19, color: VC.g600, lineHeight: 1.6, margin: '0 0 32px', maxWidth: 540 }}>
          We don't just audit. We partner with IT contractors to embed recognized security frameworks into daily operations — replacing reactive, audit-driven compliance with continuous, designed-in assurance.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 36 }}>
          <window.Btn kind="primary" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
          <window.Btn kind="ghost" onClick={() => onNav('services')}>Explore Services</window.Btn>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: VC.g400, letterSpacing: '0.04em' }}>FRAMEWORKS WE COVER</span>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {HERO_FRAMEWORKS.map((s) =>
          <span key={s} style={{ fontSize: 12, fontWeight: 600, padding: '5px 12px', borderRadius: 9999, background: VC.g50, color: VC.g600, border: `1px solid ${VC.g200}` }}>{s}</span>
          )}
          </div>
        </div>
      </div>
    </div>
  </section>;


const ArchBackdrop = () =>
<svg viewBox="0 0 600 460" fill="none" stroke={VC.purpleDark} strokeWidth="1.4" preserveAspectRatio="xMidYMid slice" aria-hidden="true" className="vg-watermark"
style={{ position: 'absolute', top: 0, right: '-4%', width: '52%', height: '100%', opacity: 0.22, pointerEvents: 'none', zIndex: 0 }}>
    {[0, 1, 2, 3, 4, 5, 6].map((i) => <line key={'v' + i} x1={i * 100} y1="0" x2={i * 100} y2="460" opacity="0.18" />)}
    {[0, 1, 2, 3, 4].map((i) => <line key={'h' + i} x1="0" y1={i * 100} x2="600" y2={i * 100} opacity="0.18" />)}
    <g transform="translate(360 230)">{[170, 122, 74].map((s, i) => <rect key={i} x={-s / 2} y={-s / 2} width={s} height={s} transform="rotate(45)" opacity={0.85 - i * 0.18} />)}</g>
    <circle cx="360" cy="230" r="148" opacity="0.5" />
    <path d="M120 70 L250 150 L120 250 Z" strokeWidth="1.6" opacity="0.7" />
    <path d="M250 150 L380 70 L380 200 Z" opacity="0.45" />
    <path d="M480 300 L600 230 L600 400 Z" opacity="0.55" />
    <line x1="40" y1="420" x2="360" y2="230" opacity="0.4" /><line x1="600" y1="60" x2="360" y2="230" opacity="0.4" />
    <circle cx="360" cy="230" r="5" fill={VC.orange} stroke="none" />
  </svg>;


const HomeStats = () =>
<section style={{ background: VC.g50, borderBottom: `1px solid ${VC.g100}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: MW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
    ['20+', 'Years average experience', 'Senior practitioners, not juniors'],
    ['7', 'Frameworks supported', 'ISO 27001 to ISO 42001'],
    ['4', 'Global markets', 'US · UK · India · Singapore'],
    ['25–1,000', 'Target client headcount', 'Mid-market IT contractors']].
    map(([v, l, s], i) =>
    <div key={i} style={{ flex: 1, padding: '40px 28px', borderLeft: i ? `1px solid ${VC.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 42, fontWeight: 800, color: VC.black, letterSpacing: '-0.03em', lineHeight: 1, fontFamily: FT }}>{v}</span>
          <span style={{ fontSize: 14, fontWeight: 600, color: VC.black }}>{l}</span>
          <span style={{ fontSize: 13, color: VC.g500 }}>{s}</span>
        </div>
    )}
    </div>
  </section>;


// Compliance-by-design philosophy strip
const PhilosophyStrip = ({ onNav }) =>
<window.Section bg="#fff" pad="88px 0">
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
      <div>
        <window.Overline style={{ marginBottom: 16 }}>The governing idea</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', color: VC.black, margin: '0 0 20px', lineHeight: 1.08, fontFamily: FT }}>Most IT contractors treat compliance as an event. We make it a state.</h2>
        <p style={{ fontSize: 17, color: VC.g600, lineHeight: 1.7, margin: '0 0 28px' }}>
          Rather than documenting existing processes to fit a framework, we work with your leadership to redesign processes so that framework requirements are met as a natural outcome of daily operations. Evidence exists because the process generates it — not because it was collected for the auditor.
        </p>
        <window.Btn kind="ghostBrand" onClick={() => onNav('about')}>How Compliance by Design works <window.Icon name="arrow" size={16} color={VC.purple} /></window.Btn>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
      ['gauge', 'Controls that are operational, not performative', 'Evidence is a by-product of how you work.'],
      ['refresh', 'Audit-ready at all times', 'Not just in the months before a review.'],
      ['trending', 'Lower total cost of compliance', 'Maintenance burden falls when controls are embedded.'],
      ['lock', 'A stronger security posture', 'Designed-in controls are applied more consistently.']].
      map(([icon, t, d], i) =>
      <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', background: VC.g50, border: `1px solid ${VC.g200}`, borderRadius: 12, padding: '20px 22px' }}>
            <div style={{ width: 42, height: 42, borderRadius: 9, background: '#fff', border: `1px solid ${VC.g200}`, color: VC.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={icon} size={22} />
            </div>
            <div>
              <div style={{ fontSize: 15.5, fontWeight: 700, color: VC.black, marginBottom: 3, fontFamily: FT, letterSpacing: '-0.01em' }}>{t}</div>
              <div style={{ fontSize: 13.5, color: VC.g500, lineHeight: 1.5 }}>{d}</div>
            </div>
          </div>
      )}
      </div>
    </div>
  </window.Section>;


const HomeServices = ({ onNav }) =>
<window.Section bg={VC.g50} pad="88px 0">
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 44, gap: 24, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 620 }}>
        <window.Overline style={{ marginBottom: 14 }}>The compliance lifecycle</window.Overline>
        <h2 style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: VC.black, margin: 0, lineHeight: 1.1, fontFamily: FT }}>Four interconnected services, one path to certification.</h2>
      </div>
      <window.Btn kind="ghost" onClick={() => onNav('services')}>View all services <window.Icon name="arrow" size={16} color={VC.black} /></window.Btn>
    </div>
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      {SERVICE_LINES.map((s, i) => <SvcCard key={i} s={s} step={i + 1} onNav={onNav} />)}
    </div>
  </window.Section>;


const SvcCard = ({ s, step, onNav }) => {
  const [h, setH] = React.useState(false);
  return (
    <div onClick={() => onNav(s.dest)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ background: '#fff', border: `1px solid ${h ? VC.g300 : VC.g200}`, borderRadius: 12, padding: '26px 24px',
      cursor: 'pointer', transition: 'all 180ms ease-out', boxShadow: h ? '0 8px 32px rgba(0,0,0,0.10)' : 'none',
      transform: h ? 'translateY(-2px)' : 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ width: 46, height: 46, borderRadius: 10, background: VC.purpleSubtle, color: VC.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <window.Icon name={s.icon} size={23} />
        </div>
        <span style={{ fontSize: 13, fontWeight: 700, color: VC.g300, fontFamily: "'JetBrains Mono', monospace" }}>0{step}</span>
      </div>
      <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VC.orange }}>{s.overline}</div>
      <h3 style={{ fontSize: 18, fontWeight: 700, color: VC.black, margin: 0, fontFamily: FT, letterSpacing: '-0.01em' }}>{s.title}</h3>
      <p style={{ fontSize: 13.5, color: VC.g500, lineHeight: 1.6, margin: 0, flex: 1 }}>{s.desc}</p>
    </div>);

};

// Reuses STANDARDS data from Standards.jsx
const HomeStandards = ({ onNav }) =>
<window.Section bg="#fff" pad="88px 0">
    <window.SectionHeader align="center" overline="Framework coverage"
  title={<>Every major standard.<br />One trusted partner.</>}
  sub="From a single ISO 27001 certification to a full multi-framework program — supported by cross-framework control mapping that lets you share evidence and reduce duplicated effort." />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {window.STANDARDS.map((s) =>
    <div key={s.id} onClick={() => onNav('standard:' + s.id)}
    style={{ background: '#fff', border: `1px solid ${VC.g200}`, borderRadius: 12, padding: '22px 22px', cursor: 'pointer', transition: 'all 150ms', display: 'flex', alignItems: 'center', gap: 16 }}
    onMouseEnter={(e) => {e.currentTarget.style.borderColor = s.color;e.currentTarget.style.background = VC.g50;}}
    onMouseLeave={(e) => {e.currentTarget.style.borderColor = VC.g200;e.currentTarget.style.background = '#fff';}}>
          <div style={{ width: 46, height: 46, borderRadius: 10, background: s.bg, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={s.icon} size={23} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 800, color: VC.black, letterSpacing: '-0.01em', fontFamily: FT }}>{s.name}</div>
            <div style={{ fontSize: 13, color: VC.g500 }}>{s.tag}</div>
          </div>
          <window.Icon name="arrow" size={18} color={VC.g300} />
        </div>
    )}
    </div>
  </window.Section>;


// Purple full-bleed market opportunity
const MarketBand = () =>
<section style={{ background: VC.purple, padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
    <window.GeoWatermark color="#ffffff" style={{ top: -40, left: -30, width: 380, height: 360, opacity: 0.1 }} />
    <window.GeoWatermark color="#ffffff" style={{ bottom: -40, right: -30, width: 360, height: 340, opacity: 0.1, transform: 'scaleX(-1)' }} />
    <div className="vg-container" style={{ maxWidth: MW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#C9CBFF', marginBottom: 14 }}>A durable demand environment</div>
        <h2 className="vg-section-title" style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 auto', lineHeight: 1.1, maxWidth: 720, fontFamily: FT }}>Compliance has become non-negotiable — and demand outstrips supply.</h2>
      </div>
      <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {[
      ['$15.5B', 'Compliance consulting market', '2025'],
      ['14.5%', 'CAGR through 2033', 'Sustained growth'],
      ['$213B', 'Global InfoSec spend', '2025, Gartner'],
      ['300K+', 'US defense contractors', 'Requiring CMMC']].
      map(([v, l, s], i) =>
      <div key={i} style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 14, padding: '32px 26px' }}>
            <div style={{ fontSize: 48, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 12, fontFamily: FT }}>{v}</div>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#fff', marginBottom: 4 }}>{l}</div>
            <div style={{ fontSize: 13, color: '#C9CBFF' }}>{s}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


// Differentiation
const WhyVerigo = ({ onNav }) =>
<window.Section bg="#fff" pad="88px 0 0">
    <window.SectionHeader overline="Why Verigo"
  title="Boutique cost. Enterprise expertise. Full lifecycle."
  sub="We are one of very few firms offering readiness through formal audit under one roof — delivered by senior practitioners, at fees accessible to mid-market IT contractors." maxSub={620} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {[
    ['layers', 'Full lifecycle coverage', 'Readiness through formal audit under one roof — no coordination overhead of juggling multiple providers.'],
    ['network', 'Multi-framework expertise', 'Need ISO 27001 and CMMC and NIST? Work with a single partner instead of managing three separate firms.'],
    ['award', '20+ years per practitioner', 'Engagements delivered by senior practitioners certified as CISSP, CISM, ISO 27001 Lead Auditor, CMMC CCA, and more.'],
    ['globe', 'Global-local model', 'Local practitioners in each of four markets, working to one consistent methodology and quality standard.'],
    ['compass', 'Compliance by Design', 'We embed frameworks into operations, creating sustainable compliance rather than point-in-time certification.'],
    ['handshake', 'Partnership over transaction', 'Multi-year relationships built on independent, honest assessment — not one-time engagements.']].
    map(([icon, t, d], i) =>
    <div key={i} style={{ border: `1px solid ${VC.g200}`, borderRadius: 12, padding: '26px 24px', background: '#fff' }}>
          <div style={{ width: 44, height: 44, borderRadius: 9, background: VC.purpleSubtle, color: VC.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
            <window.Icon name={icon} size={22} />
          </div>
          <h3 style={{ fontSize: 17.5, fontWeight: 700, color: VC.black, margin: '0 0 8px', fontFamily: FT, letterSpacing: '-0.01em' }}>{t}</h3>
          <p style={{ fontSize: 14, color: VC.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
        </div>
    )}
    </div>
    <div style={{ marginTop: 56 }}>
      <window.CTABand
      title="Let's scope your path to certification."
      body="Tell us your target framework and timeline. We'll come back with a clear roadmap, fixed scope, and the fastest route to a credential that wins you contracts."
      onNav={onNav} />
    </div>
  </window.Section>;


const HomePage = ({ onNav }) =>
<div>
    <HomeHero onNav={onNav} />
    <HomeStats />
    <PhilosophyStrip onNav={onNav} />
    <HomeServices onNav={onNav} />
    <HomeStandards onNav={onNav} />
    <MarketBand />
    <WhyVerigo onNav={onNav} />
  </div>;


Object.assign(window, { HomePage, SERVICE_LINES });