// About.jsx — Verigo Global · About Us (redesigned: why we exist · what distinguishes us · leadership)
const { V: VA, MAXW: MWA, FONT: FTA } = window;

const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });

const DIFFERENTIATORS = [
  ['layers', 'Full lifecycle, one roof', 'Readiness through formal audit under a single accountable team — no stitching together three vendors who don\'t talk to each other.'],
  ['network', 'Multi-framework by default', 'Need ISO 27001 and CMMC and NIST? One partner, one methodology, and cross-framework mapping that reuses your evidence.'],
  ['award', 'Enterprise expertise, boutique cost', 'The 20+ year practitioners you\'d find at a Big Four firm — at fees a mid-market IT contractor can actually justify.'],
  ['globe', 'Global, but local', 'Practitioners on the ground in the US, UK, India, and Singapore, all working to one consistent quality standard.'],
  ['compass', 'Compliance by Design', 'We embed frameworks into how you operate, so certification is sustainable — not a point-in-time scramble that decays the day after.'],
  ['handshake', 'A partner, not a vendor', 'Independent and honest, even when it\'s uncomfortable — and in it for the multi-year relationship, not the one-time invoice.'],
];

const VALUES = [
  ['award', 'Expertise First', 'Practitioners with 20+ years of experience — not junior consultants with templates.'],
  ['scale', 'Integrity', 'Independent, honest assessments, even when the findings are uncomfortable.'],
  ['cpu', 'Practicality', 'Frameworks implemented in ways that fit how real organizations actually operate.'],
  ['refresh', 'Continuity', 'Compliance maintained between audits — not rebuilt in a panic before them.'],
  ['handshake', 'Partnership', 'Multi-year relationships, not one-time transactional engagements.'],
];

// NOTE: placeholder leadership — replace names, titles, bios and drop in real headshots.
const LEADERS = [
  { slot: 'leader1', name: 'Priya Nair', title: 'Founder & Managing Partner', bio: 'Two decades across Big Four advisory and enterprise CISO roles — building security programs designed to pass audits and survive them.', creds: ['CISSP', 'ISO 27001 LA'] },
  { slot: 'leader2', name: 'Daniel Okafor', title: 'Head of Audit & Assurance', bio: 'A career spanning government security agencies and independent audit, now a credentialed assessor leading our formal-audit practice.', creds: ['CMMC CCA', 'CISA'] },
  { slot: 'leader3', name: 'Mei Lin Tan', title: 'Head of Advisory & Implementation', bio: 'Built and appraised process-maturity programs across APAC IT services — turning frameworks into operations teams actually run.', creds: ['CMMI Lead Appraiser', 'HITRUST CCSFP'] },
];

const CREDENTIALS = ['CISSP', 'CISM', 'ISO 27001 Lead Auditor', 'CMMC Certified Assessor (CCA)', 'HITRUST CCSFP', 'CMMI Lead Appraiser', 'CISA'];

/* ── HERO ─────────────────────────────────────────────────── */
const AboutHero = ({ onNav }) => (
  <section style={{ background: VA.purple, padding: '92px 0 84px', position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="orbit" color="#ffffff" opacity={0.16} style={{ top: -50, right: -40, width: 540, height: 480 }} />
    <div style={{ maxWidth: MWA, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 760 }}>
        <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: VA.orangeLight, marginBottom: 20 }}>About Verigo Global</div>
        <h1 className="vg-hero-title" style={{ fontSize: 62, fontWeight: 800, letterSpacing: '-0.035em', color: '#fff', margin: '0 0 22px', lineHeight: 1.02, fontFamily: FTA }}>
          We make world-class<br />compliance achievable.
        </h1>
        <p style={{ fontSize: 20, color: 'rgba(255,255,255,0.8)', maxWidth: 640, lineHeight: 1.6, margin: '0 0 36px' }}>
          Verigo Global is a specialist information security compliance consultancy. We partner with IT contractors and managed service providers to embed recognized frameworks into how they operate — turning a costly annual scramble into a durable competitive advantage.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
          <window.Btn kind="accent" onClick={() => onNav('contact')}>Work with us <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
          <window.Btn kind="ghostLight" onClick={() => scrollTo('leadership')}>Meet the team</window.Btn>
        </div>
        <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap' }}>
          {[['20+ yrs', 'Avg. per practitioner'], ['7', 'Frameworks'], ['4', 'Global markets'], ['100%', 'Senior-led delivery']].map(([v, l], i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontSize: 28, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', fontFamily: FTA }}>{v}</span>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── WHY WE EXIST ─────────────────────────────────────────── */
const WhyWeExist = () => (
  <window.Section bg="#fff" pad="92px 0">
    <div style={{ maxWidth: 860, marginBottom: 56 }}>
      <window.Overline style={{ marginBottom: 16 }}>Why we exist</window.Overline>
      <h2 className="vg-section-title" style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em', color: VA.black, margin: '0 0 24px', lineHeight: 1.08, fontFamily: FTA }}>
        To make compliance a natural outcome of how great companies work.
      </h2>
      <p style={{ fontSize: 18.5, color: VA.g600, lineHeight: 1.7, margin: 0 }}>
        Most IT contractors fail audits — or pass them expensively — because they treat compliance as an event rather than a state. We believe the companies building the digital backbone of government and enterprise deserve better than an annual fire drill. So we exist to embed best-practice security into daily operations, where it protects the business and wins the contract at the same time.
      </p>
    </div>
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
      <div style={{ background: VA.purpleSubtle, border: `1px solid ${VA.purpleSubtle}`, padding: '40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <window.Icon name="flag" size={22} color={VA.purple} />
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VA.purple }}>Our mission</div>
        </div>
        <p style={{ fontSize: 19, fontWeight: 500, color: VA.black, lineHeight: 1.55, margin: 0 }}>
          To enable IT organizations to achieve and sustain compliance with globally recognized frameworks by embedding best-practice processes from the ground up — making compliance a natural outcome of how they work, rather than an annual obligation.
        </p>
      </div>
      <div style={{ background: VA.purpleDark, padding: '40px', position: 'relative', overflow: 'hidden' }}>
        <window.HeroWatermark variant="orbit" color="#ffffff" opacity={0.1} style={{ bottom: -40, right: -30, width: 280, height: 260 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18, position: 'relative', zIndex: 1 }}>
          <window.Icon name="compass" size={22} color="#fff" />
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#C9CBFF' }}>Our vision</div>
        </div>
        <p style={{ fontSize: 19, fontWeight: 500, color: '#fff', lineHeight: 1.55, margin: 0, position: 'relative', zIndex: 1 }}>
          To be the most trusted compliance partner for mid-market IT contractors across the United States, United Kingdom, India, and Singapore — recognized for turning complex regulatory requirements into clear operational advantage.
        </p>
      </div>
    </div>
  </window.Section>
);

/* ── WHAT DISTINGUISHES US ────────────────────────────────── */
const WhatDistinguishes = () => (
  <window.Section bg={VA.g50} pad="92px 0">
    <window.SectionHeader overline="What distinguishes us"
      title="Most firms make you choose. We refuse to."
      sub="Big Four expertise is priced out of reach. Regional auditors cover one framework. SaaS tools can't implement or audit. Solo consultants vanish after the project. Verigo was built to be the option that doesn't make you compromise." maxSub={680} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {DIFFERENTIATORS.map(([icon, t, d], i) => (
        <DiffCard key={i} icon={icon} t={t} d={d} n={i + 1} />
      ))}
    </div>
  </window.Section>
);

const DiffCard = ({ icon, t, d, n }) => {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: '#fff', border: `1px solid ${h ? VA.purple : VA.g200}`, padding: '30px 28px', transition: 'all 180ms ease-out', transform: h ? 'translateY(-3px)' : 'none', boxShadow: h ? '0 12px 32px rgba(91,46,145,0.12)' : 'none', position: 'relative' }}>
      <span style={{ position: 'absolute', top: 24, right: 28, fontSize: 14, fontWeight: 700, color: VA.g200, fontFamily: "'JetBrains Mono', monospace" }}>0{n}</span>
      <div style={{ width: 50, height: 50, borderRadius: 11, background: VA.purpleSubtle, color: VA.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
        <window.Icon name={icon} size={25} />
      </div>
      <h3 style={{ fontSize: 19, fontWeight: 700, color: VA.black, margin: '0 0 10px', fontFamily: FTA, letterSpacing: '-0.01em' }}>{t}</h3>
      <p style={{ fontSize: 14.5, color: VA.g500, lineHeight: 1.65, margin: 0 }}>{d}</p>
    </div>
  );
};

/* ── COMPLIANCE BY DESIGN ─────────────────────────────────── */
const Philosophy = ({ onNav }) => (
  <window.Section bg="#fff" pad="92px 0">
    <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '440px 1fr', gap: 64, alignItems: 'start' }}>
      <div style={{ position: 'sticky', top: 24 }}>
        <window.Overline style={{ marginBottom: 16 }}>Our philosophy</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', color: VA.black, margin: '0 0 20px', lineHeight: 1.06, fontFamily: FTA }}>Compliance<br />by Design</h2>
        <p style={{ fontSize: 16.5, color: VA.g600, lineHeight: 1.7, margin: '0 0 20px' }}>
          The organizing principle of everything we do. Rather than documenting existing processes to fit a framework, we redesign processes so framework requirements are met as a natural outcome of daily operations.
        </p>
        <p style={{ fontSize: 16.5, color: VA.g600, lineHeight: 1.7, margin: 0 }}>
          The result is compliance that's cheaper to maintain, stronger in practice, and always ready for the next audit.
        </p>
        <div style={{ marginTop: 28 }}>
          <window.Btn kind="ghostBrand" onClick={() => onNav('toolkits')}>See the methodology <window.Icon name="arrow" size={16} color={VA.purple} /></window.Btn>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {[
          ['gauge', 'Controls that are operational, not performative', 'Evidence exists because the process generates it — not because it was collected for the auditor.'],
          ['refresh', 'Audit readiness at all times', 'Not just in the months preceding a certification review. The program is always live.'],
          ['trending', 'Lower total cost of compliance over time', 'The maintenance burden decreases when compliance is embedded rather than bolted on.'],
          ['shield', 'A stronger security posture', 'Designed-in controls are applied more consistently than policy-only measures.'],
        ].map(([icon, t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 18, alignItems: 'flex-start', background: VA.g50, border: `1px solid ${VA.g200}`, padding: '26px 28px' }}>
            <div style={{ width: 48, height: 48, borderRadius: 10, background: '#fff', border: `1px solid ${VA.g200}`, color: VA.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={icon} size={24} />
            </div>
            <div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: VA.black, margin: '0 0 6px', fontFamily: FTA, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 14.5, color: VA.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── CORE VALUES ──────────────────────────────────────────── */
const CoreValues = () => (
  <window.Section bg={VA.g50} pad="88px 0">
    <window.SectionHeader overline="Core values"
      title="What we stand for"
      sub="Five principles that shape every engagement, every assessment, and every relationship." maxSub={560} />
    <div className="vg-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
      {VALUES.map(([icon, t, d], i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${VA.g200}`, padding: '26px 22px' }}>
          <div style={{ width: 44, height: 44, borderRadius: 9, background: VA.purpleSubtle, color: VA.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
            <window.Icon name={icon} size={22} />
          </div>
          <h3 style={{ fontSize: 16.5, fontWeight: 700, color: VA.black, margin: '0 0 8px', fontFamily: FTA, letterSpacing: '-0.01em' }}>{t}</h3>
          <p style={{ fontSize: 13.5, color: VA.g500, lineHeight: 1.55, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── OUR STORY + LEADERSHIP ───────────────────────────────── */
const StoryAndLeadership = () => (
  <window.Section bg="#fff" pad="92px 0">
    <div id="leadership" style={{ scrollMarginTop: 24 }} />
    {/* Founding narrative */}
    <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 64, alignItems: 'center', marginBottom: 64 }}>
      <div>
        <window.Overline style={{ marginBottom: 16 }}>Our story</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: VA.black, margin: '0 0 22px', lineHeight: 1.1, fontFamily: FTA }}>
          Founded by practitioners who'd seen the gap from the inside.
        </h2>
        <p style={{ fontSize: 16.5, color: VA.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          Our leadership spent careers inside Big Four advisory, government security agencies, and enterprise CISO offices. From those seats, they watched the same story repeat: the IT contractors competing for serious government and enterprise work were being underserved — priced out by the global firms, boxed in by single-framework auditors, and sold tools that could monitor a control but never implement or certify one.
        </p>
        <p style={{ fontSize: 16.5, color: VA.g600, lineHeight: 1.7, margin: 0 }}>
          So they built the firm they wished those companies could hire: enterprise-grade expertise, delivered at a boutique scale, across the full compliance lifecycle and every framework that matters. That conviction — that mid-market builders deserve a true partner — is still why we get up in the morning.
        </p>
      </div>
      <div style={{ background: VA.purple, padding: '40px 36px', position: 'relative', overflow: 'hidden' }}>
        <window.HeroWatermark variant="nodes" color="#ffffff" opacity={0.12} style={{ bottom: -30, right: -20, width: 260, height: 240 }} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ fontSize: 54, fontWeight: 800, color: '#fff', lineHeight: 0.9, fontFamily: FTA, marginBottom: 12 }}>“</div>
          <p style={{ fontSize: 20, fontWeight: 600, color: '#fff', lineHeight: 1.45, margin: '0 0 16px' }}>
            We don't just audit — we partner with your organization to build resilient, certifiable security programs from the ground up.
          </p>
          <div style={{ fontSize: 13, color: '#C9CBFF', fontWeight: 600, letterSpacing: '0.02em' }}>The Verigo promise</div>
        </div>
      </div>
    </div>

  </window.Section>
);

/* ── TEAM CREDENTIALS BAND ────────────────────────────────── */
const TeamBand = () => (
  <section style={{ background: VA.charcoal, padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="grid" color="#ffffff" opacity={0.08} style={{ bottom: -40, left: -30, width: 420, height: 380 }} />
    <div style={{ maxWidth: MWA, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: VA.orangeLight, marginBottom: 16 }}>Depth on the bench</div>
          <h2 className="vg-section-title" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 20px', lineHeight: 1.1, fontFamily: FTA }}>Senior practitioners. Every engagement.</h2>
          <p style={{ fontSize: 16.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, margin: '0 0 28px' }}>
            Every Verigo engagement is delivered by senior practitioners with an average of 20+ years of applied experience — trained and qualified to coach, consult, and formally audit across the full lifecycle, with a peer-review quality gate on every deliverable.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Backgrounds spanning Big Four advisory, government security agencies, and enterprise CISO roles',
              'Qualified across the full lifecycle — coach, consult, and formally audit',
              'A knowledge base continuously updated with regulatory change and audit-authority guidance',
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55 }}>
                <window.Icon name="check" size={20} color={VA.purpleLight} />{t}
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', padding: '36px' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 18 }}>Certifications held across the team</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {CREDENTIALS.map(c => (
              <span key={c} style={{ fontSize: 13, fontWeight: 600, padding: '9px 16px', borderRadius: 9999, background: 'rgba(129,89,181,0.3)', color: '#D9CCEC', border: '1px solid rgba(129,89,181,0.5)', fontFamily: "'JetBrains Mono', monospace" }}>{c}</span>
            ))}
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', marginTop: 28, paddingTop: 24, display: 'flex', gap: 40 }}>
            <div>
              <div style={{ fontSize: 34, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', fontFamily: FTA }}>20+</div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>Years avg. experience</div>
            </div>
            <div>
              <div style={{ fontSize: 34, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', fontFamily: FTA }}>100%</div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>Senior-led delivery</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── CLOSING CTA ──────────────────────────────────────────── */
const ClosingCTA = ({ onNav }) => (
  <section style={{ background: VA.purple, padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="orbit" color="#ffffff" opacity={0.14} style={{ top: -40, right: -30, width: 420, height: 380 }} />
    <window.HeroWatermark variant="rings" color="#ffffff" opacity={0.1} style={{ bottom: -50, left: -40, width: 360, height: 340 }} />
    <div style={{ maxWidth: 820, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1, textAlign: 'center' }}>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: VA.orangeLight, marginBottom: 16 }}>Let's build something certifiable</div>
      <h2 className="vg-section-title" style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 18px', lineHeight: 1.08, fontFamily: FTA }}>
        Your next contract is waiting on a credential. Let's go earn it.
      </h2>
      <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, margin: '0 auto 34px', maxWidth: 600 }}>
        Tell us where you are — a target framework, a contract deadline, or just a goal. We'll bring 20+ years of expertise and a clear path to certification.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <window.Btn kind="accent" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
        <window.Btn kind="ghostLight" onClick={() => onNav('services')}>Explore our services</window.Btn>
      </div>
    </div>
  </section>
);

/* ── PAGE ─────────────────────────────────────────────────── */
const AboutPage = ({ onNav }) => (
  <div>
    <AboutHero onNav={onNav} />
    <WhyWeExist />
    <WhatDistinguishes />
    <Philosophy onNav={onNav} />
    <CoreValues />
    <StoryAndLeadership />
    <TeamBand />
    <ClosingCTA onNav={onNav} />
  </div>
);

Object.assign(window, { AboutPage });