// Partners.jsx — Verigo Global partner program (combined)
// Reoriented for two audiences: software/tool companies + independent lead auditors.
const { V: VP, MAXW: MWP, FONT: FTP } = window;

/* ── What Verigo brings (shared strengths) ───────────────── */
const STRENGTHS = [
  ['layers', '6+ frameworks under one roof', 'ISO 27001, SOC 2, CMMC 2.0, HITRUST, NIST, and CMMI — one team, the full compliance roadmap.'],
  ['globe', 'Four global-local markets', 'Practitioners on the ground in the US, UK, India, and Singapore, all working to one methodology.'],
  ['users', '100% senior-led delivery', 'Credentialed practitioners on every engagement — never handed down to juniors.'],
  ['scale', 'Independent and audit-ready', 'We hold the line on findings. That independence is exactly what makes the partnership trustworthy.'],
];

/* ── For software & tool companies ───────────────────────── */
const SOFTWARE = [
  { icon: 'layers', title: 'Turn automation into outcomes', desc: 'We take the evidence and monitoring your platform produces and turn it into implemented controls and a passed audit — the result your customers actually want.' },
  { icon: 'shield', title: 'The implementation & audit layer', desc: 'Senior practitioners handle the work software cannot: control design, process change, and formal assessment. Your tool stays the system of record.' },
  { icon: 'globe', title: 'Every framework your customers face', desc: 'One partner covers ISO 27001, SOC 2, CMMC 2.0, HITRUST, NIST, and CMMI — so you can say yes to the whole roadmap your customers ask about.' },
  { icon: 'bolt', title: 'Joint go-to-market', desc: 'Co-branded content, joint webinars, and shared pipeline that helps your platform land new logos and expand inside existing ones.' },
  { icon: 'trending', title: 'Referral & revenue share', desc: 'Earn on every engagement your platform sends our way, with commercial terms structured around your sales motion.' },
  { icon: 'network', title: 'One integration, four markets', desc: 'Plug in once and reach clients across the United States, United Kingdom, India, and Singapore through a single relationship.' },
];

/* ── For independent lead auditors ───────────────────────── */
const AUDITORS = [
  { icon: 'clipboard', title: 'A steady pipeline of work', desc: 'Scoped, qualified engagements routed to you — no business development, proposals, or chasing required.' },
  { icon: 'layers', title: 'Multi-framework engagements', desc: 'Audit across ISO 27001, SOC 2, CMMC, HITRUST, NIST, and CMMI — or specialize in the area where you are strongest.' },
  { icon: 'gauge', title: 'Fixed fees, clear scope', desc: 'Every engagement is scoped and priced up front. You know exactly what the work is and what it pays before you start.' },
  { icon: 'compass', title: 'Methodology provided', desc: 'Our Compliance by Design playbooks, templates, and tooling do the heavy lifting — so you spend your time on judgment, not paperwork.' },
  { icon: 'mapPin', title: 'Your market, your load', desc: 'Choose your frameworks, your regions, and whether you work with us full-time or alongside your own practice.' },
  { icon: 'scale', title: 'Your independence, respected', desc: 'We never pressure findings. Your sign-off carries weight precisely because it is genuinely, independently yours.' },
];

/* ── Auditor types who can join the network ──────────────── */
const AUDITOR_TYPES = [
  { cred: 'ISO 27001 LA', title: 'ISO 27001 Lead Auditors', desc: 'Certified ISMS lead auditors for initial certification, surveillance, and recertification audits.' },
  { cred: 'CPA / SOC 2', title: 'SOC 2 Assessors', desc: 'Licensed CPAs and SOC 2 practitioners delivering Type I and Type II attestation engagements.' },
  { cred: 'CCA / CCP', title: 'CMMC Certified Assessors', desc: 'Certified CMMC assessors and professionals supporting CMMC 2.0 across the defense supply chain.' },
  { cred: 'CCSFP / CHQP', title: 'HITRUST Assessors', desc: 'Certified HITRUST CSF practitioners for healthcare and other high-assurance environments.' },
  { cred: 'NIST 800-53/171', title: 'NIST & Federal Assessors', desc: 'Practitioners experienced in NIST 800-53 and 800-171 control assessments and federal authorization.' },
  { cred: 'CMMI Appraiser', title: 'CMMI Lead Appraisers', desc: 'Certified lead appraisers for CMMI benchmark and sustainment appraisals across maturity levels.' },
];

/* ── Global-local markets ────────────────────────────────── */
const MARKETS = [
  ['United States', 'CMMC 2.0 enforcement and SOC 2 demand'],
  ['United Kingdom', 'Cyber Essentials Plus and ISO 27001'],
  ['India', 'High-volume IT services and ISO 27001'],
  ['Singapore', 'MAS-driven ISO 27001 and digital gov'],
];

/* ── Current partners ────────────────────────────────────── */
const PARTNERS = [
  {
    id: 'logo-ecfirst', name: 'ecfirst', site: 'ecfirst.com', href: 'https://ecfirst.com/',
    category: 'Assessment Partner · C3PAO', locale: 'United States · Founded 1999',
    blurb: 'A leading provider of cyber defense and compliance services and home of the HIPAA Academy®. As a HITRUST Authorized External Assessor and CMMC Authorized C3PAO, ecfirst extends our reach into healthcare compliance and formal assessment across the United States.',
  },
  {
    id: 'logo-gmsqr', name: 'GMSQR', site: 'gmsqr.com', href: 'https://gmsqr.com/',
    category: 'Certification Body', locale: 'Bangalore, India · Founded 2013',
    blurb: 'An independent, accredited certification and training body delivering ISO 9001, 14001, 45001, 22000, and 27001 certifications worldwide. GMSQR gives our clients a direct path from readiness to formal ISO certification across the India and APAC markets.',
  },
];

const PartnersPage = ({ onNav }) => {
  const [audience, setAudience] = React.useState('software');
  const [form, setForm] = React.useState({ name: '', email: '', company: '', website: '', platform: 'GRC platform', certs: '', framework: 'ISO 27001', region: 'United States', message: '' });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [err, setErr] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setErr(false);
    const { error } = await window.submitInquiry({
      form_type: audience === 'software' ? 'partner-platform' : 'partner-auditor',
      name: form.name, email: form.email, company: form.company,
      framework: audience === 'auditor' ? form.framework : null,
      message: form.message,
      metadata: { audience, website: form.website, platform: form.platform, certs: form.certs, region: form.region },
    });
    setSubmitting(false);
    if (error) { setErr(true); return; }
    setSent(true);
    const el = document.getElementById('partner-inquiry'); if (el) el.scrollIntoView({ block: 'start' });
  };
  const go = (id, aud) => { if (aud) setAudience(aud); const el = document.getElementById(id); if (el) el.scrollIntoView({ block: 'start' }); };

  const input = { fontFamily: FTP, fontSize: 14, color: VP.black, background: '#fff', border: `1.5px solid ${VP.g200}`, borderRadius: 8, padding: '11px 14px', outline: 'none', width: '100%', transition: 'border-color 150ms' };
  const label = { fontSize: 12.5, fontWeight: 600, color: VP.black, display: 'block', marginBottom: 7 };
  const selectStyle = { ...input, appearance: 'none', backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AAA' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', paddingRight: 32, cursor: 'pointer' };

  return (
    <div>
      <window.PageHero overline="Partner Program" variant="nodes"
        title={<>Where platforms and<br />auditors plug in.</>}
        sub="We partner with software and tool companies who want a senior, practitioner-led delivery layer behind their platform — and with independent lead auditors who want a steady pipeline of scoped, multi-framework engagements.">
        <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
          <window.Btn kind="primary" onClick={() => go('for-software', 'software')}>For software &amp; tools <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
          <window.Btn kind="ghost" onClick={() => go('for-auditors', 'auditor')}>For lead auditors</window.Btn>
        </div>
      </window.PageHero>

      {/* Two-path split */}
      <window.Section bg="#fff" pad="64px 0 24px">
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[
            { accent: VP.purple, icon: 'cpu', tag: 'Software & Tools', title: 'Add the layer automation can\u2019t',
              body: 'Your platform automates evidence and monitoring. We bring the senior practitioners who implement controls, redesign process, and run formal audits \u2014 turning your tool into a program your customers actually certify against.',
              points: ['Practitioner-led implementation & audit', 'Coverage across every major framework', 'Joint go-to-market and referral revenue'],
              cta: 'Partner your platform', target: 'for-software', aud: 'software' },
            { accent: VP.orange, icon: 'award', tag: 'Lead Auditors', title: 'Pick up your next audit',
              body: 'Join our network of independent lead auditors. We bring the clients, the scoping, and the methodology \u2014 you bring the credentials and the rigor. Choose your frameworks, your markets, and your load.',
              points: ['A steady pipeline of scoped work', 'Fixed fees and clear scope', 'Methodology, templates, and tooling provided'],
              cta: 'Join as an auditor', target: 'for-auditors', aud: 'auditor' },
          ].map((c, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 16, borderTop: `4px solid ${c.accent}`, padding: '34px 34px', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 54, height: 54, borderRadius: 12, background: c.accent === VP.orange ? VP.orangeSubtle : VP.purpleSubtle, color: c.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={c.icon} size={27} />
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: c.accent }}>{c.tag}</div>
                  <h3 style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-0.02em', color: VP.black, margin: '2px 0 0', fontFamily: FTP }}>{c.title}</h3>
                </div>
              </div>
              <p style={{ fontSize: 15, color: VP.g600, lineHeight: 1.65, margin: 0 }}>{c.body}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {c.points.map((p, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: VP.g700, fontWeight: 500 }}>
                    <window.Icon name="check" size={17} color={c.accent} />{p}
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 6 }}>
                <window.Btn kind={c.accent === VP.orange ? 'accent' : 'primary'} onClick={() => go(c.target, c.aud)}>{c.cta} <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
              </div>
            </div>
          ))}
        </div>
      </window.Section>

      {/* Shared strengths stat band */}
      <window.Section bg="#fff" pad="40px 0 64px">
        <div style={{ borderTop: `1px solid ${VP.g200}`, paddingTop: 44, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
          {STRENGTHS.map(([icon, t, d], i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <window.Icon name={icon} size={28} color={VP.purple} />
              <h3 style={{ fontSize: 16.5, fontWeight: 700, color: VP.black, margin: 0, fontFamily: FTP, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 13.5, color: VP.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </window.Section>

      {/* For software & tool companies */}
      <section id="for-software" style={{ background: VP.g50, padding: '80px 0', scrollMarginTop: 68 }}>
        <div style={{ maxWidth: MWP, margin: '0 auto', padding: '0 32px' }}>
          <window.SectionHeader overline="For software & tool companies"
            title="Your platform, made certifiable"
            sub="GRC platforms, security tools, and cloud services are powerful — but they cannot implement controls or sign an audit. We are the practitioner layer that turns your automation into outcomes your customers can certify against." maxSub={700} />
          <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {SOFTWARE.map((s, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 14, padding: '28px', display: 'flex', flexDirection: 'column', gap: 13 }}>
                <div style={{ width: 48, height: 48, borderRadius: 11, background: VP.purpleSubtle, color: VP.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.Icon name={s.icon} size={24} />
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em', color: VP.black, margin: 0, fontFamily: FTP }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: VP.g600, lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, textAlign: 'center' }}>
            <window.Btn kind="primary" onClick={() => go('partner-inquiry', 'software')}>Partner your platform <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
          </div>
        </div>
      </section>

      {/* For lead auditors */}
      <section id="for-auditors" style={{ background: VP.charcoal, padding: '80px 0', scrollMarginTop: 68 }}>
        <div style={{ maxWidth: MWP, margin: '0 auto', padding: '0 32px' }}>
          <window.SectionHeader dark overline="For independent lead auditors"
            title="Bring your credentials. We'll bring the work."
            sub="If you hold lead-auditor credentials and want to spend your time auditing rather than selling, sign up with our network. We route scoped, qualified engagements to you and handle everything around them." maxSub={700} />
          <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {AUDITORS.map((a, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 14, padding: '26px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                <window.Icon name={a.icon} size={26} color={VP.orangeLight} />
                <h3 style={{ fontSize: 16.5, fontWeight: 700, color: '#fff', margin: 0, fontFamily: FTP, letterSpacing: '-0.01em' }}>{a.title}</h3>
                <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.58)', lineHeight: 1.6, margin: 0 }}>{a.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, textAlign: 'center' }}>
            <window.Btn kind="accent" onClick={() => go('partner-inquiry', 'auditor')}>Join as a lead auditor <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
          </div>
        </div>
      </section>

      {/* Auditor types — who can join the network */}
      <window.Section bg="#fff" pad="72px 0">
        <window.SectionHeader overline="Who can join the network"
          title="The auditors we partner with"
          sub="If you hold lead-auditor or assessor credentials in any of the frameworks we deliver, there's a place for you in the network — full-time or alongside your own practice." maxSub={680} />
        <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {AUDITOR_TYPES.map((a, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 14, padding: '26px 26px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: VP.purpleSubtle, color: VP.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name="award" size={22} />
                </div>
                <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', color: VP.g600, background: VP.g50, border: `1px solid ${VP.g200}`, padding: '4px 10px', borderRadius: 6, fontFamily: "'JetBrains Mono', monospace" }}>{a.cred}</span>
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em', color: VP.black, margin: 0, fontFamily: FTP }}>{a.title}</h3>
              <p style={{ fontSize: 14, color: VP.g600, lineHeight: 1.6, margin: 0 }}>{a.desc}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: 'center' }}>
          <window.Btn kind="accent" onClick={() => go('partner-inquiry', 'auditor')}>Apply to the auditor network <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
        </div>
      </window.Section>

      {/* Global-local reach strip */}
      <window.Section bg="#fff" pad="72px 0">
        <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <window.Overline style={{ marginBottom: 14 }}>Global-local model</window.Overline>
            <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.03em', color: VP.black, margin: '0 0 14px', lineHeight: 1.12, fontFamily: FTP }}>Four markets, one standard.</h2>
            <p style={{ fontSize: 15.5, color: VP.g600, lineHeight: 1.65, margin: 0 }}>Whether you integrate a platform or join as an auditor, you reach clients in four markets — all served to one consistent methodology and quality bar.</p>
          </div>
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {MARKETS.map(([m, d], i) => (
              <div key={i} style={{ background: VP.g50, border: `1px solid ${VP.g200}`, borderRadius: 12, padding: '20px 22px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 7 }}>
                  <window.Icon name="mapPin" size={18} color={VP.purple} />
                  <span style={{ fontSize: 16, fontWeight: 700, color: VP.black, fontFamily: FTP, letterSpacing: '-0.01em' }}>{m}</span>
                </div>
                <p style={{ fontSize: 13, color: VP.g500, lineHeight: 1.5, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </window.Section>

      {/* Current partners */}
      <window.Section bg={VP.g50} pad="80px 0">
        <window.SectionHeader overline="Current partners"
          title="The network we're building on"
          sub="We partner with assessors and certification bodies who let our clients move from readiness to formal certification without leaving the relationship." maxSub={640} />
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {PARTNERS.map((p, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 16, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ background: VP.g50, borderBottom: `1px solid ${VP.g200}`, padding: '28px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                <image-slot id={p.id} fit="contain" shape="rect" placeholder={`Drop ${p.name} logo`} style={{ width: '180px', height: '60px' }}></image-slot>
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: VP.purple, background: VP.purpleSubtle, padding: '6px 13px', borderRadius: 9999, whiteSpace: 'nowrap' }}>{p.category}</span>
              </div>
              <div style={{ padding: '28px 32px 32px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                <div>
                  <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: VP.black, margin: '0 0 4px', fontFamily: FTP }}>{p.name}</h3>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: VP.g500 }}>
                    <window.Icon name="mapPin" size={15} color={VP.orange} />{p.locale}
                  </div>
                </div>
                <p style={{ fontSize: 14.5, color: VP.g600, lineHeight: 1.65, margin: 0, flex: 1 }}>{p.blurb}</p>
                <a href={p.href} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 700, color: VP.purple, marginTop: 4 }}>
                  Visit {p.site} <window.Icon name="arrow" size={16} color={VP.purple} />
                </a>
              </div>
            </div>
          ))}
        </div>
      </window.Section>

      {/* Inquiry form with audience switcher */}
      <section id="partner-inquiry" style={{ background: '#fff', padding: '80px 0', scrollMarginTop: 68, position: 'relative', overflow: 'hidden' }}>
        <window.HeroWatermark variant="grid" opacity={0.1} style={{ top: -20, right: -10, width: 440, height: 360 }} />
        <div style={{ maxWidth: MWP, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
          <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 520px', gap: 80, alignItems: 'start' }}>
            <div>
              <window.Overline style={{ marginBottom: 14 }}>Partnership inquiry</window.Overline>
              <h2 className="vg-section-title" style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: VP.black, margin: '0 0 18px', lineHeight: 1.08, fontFamily: FTP }}>Let's build something together.</h2>
              <p style={{ fontSize: 17.5, color: VP.g500, lineHeight: 1.6, margin: '0 0 40px', maxWidth: 440 }}>Tell us whether you're bringing a platform or your auditor credentials, and a little about you. Our partnerships lead will reach out within two business days.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                {(audience === 'software'
                  ? [
                    ['compass', 'Discovery', 'A short call to understand your platform, your customers, and where we fit.'],
                    ['file', 'Partnership agreement', 'We agree on referral or revenue-share terms and how we co-deliver and co-market.'],
                    ['bolt', 'Integrate & launch', 'Onboarding, co-branded materials, and a dedicated partner lead — then we go to market.'],
                  ]
                  : [
                    ['compass', 'Credential review', 'A short call to confirm your certifications, frameworks, and the markets you want.'],
                    ['file', 'Onboarding', 'We set you up with our methodology, templates, and tooling, and agree on fees and load.'],
                    ['bolt', 'First engagement', 'We route a scoped engagement to you and support you through delivery and sign-off.'],
                  ]
                ).map(([icon, t, d]) => (
                  <div key={t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                    <div style={{ width: 44, height: 44, borderRadius: 9, background: VP.purpleSubtle, color: VP.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <window.Icon name={icon} size={22} />
                    </div>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 4, color: VP.black }}>{t}</div>
                      <div style={{ fontSize: 14, color: VP.g500, lineHeight: 1.55 }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {sent ? (
              <div style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 16, padding: '48px 36px', boxShadow: '0 4px 24px rgba(0,0,0,0.05)', textAlign: 'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: VP.purpleSubtle, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px' }}>
                  <window.Icon name="check" size={32} color={VP.purple} />
                </div>
                <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', margin: '0 0 12px', color: VP.black, fontFamily: FTP }}>Thanks — we're on it.</h3>
                <p style={{ color: VP.g500, lineHeight: 1.65, fontSize: 15.5, margin: '0 0 26px' }}>Our partnerships lead will be in touch within two business days to explore how we can work together.</p>
                <window.Btn kind="ghost" onClick={() => setSent(false)}>Submit another inquiry</window.Btn>
              </div>
            ) : (
              <form onSubmit={submit} style={{ background: '#fff', border: `1px solid ${VP.g200}`, borderRadius: 16, padding: '32px 36px 36px', display: 'flex', flexDirection: 'column', gap: 18, boxShadow: '0 4px 24px rgba(0,0,0,0.05)' }}>
                {/* audience toggle */}
                <div>
                  <label style={label}>I'm reaching out as a…</label>
                  <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, background: VP.g50, border: `1px solid ${VP.g200}`, borderRadius: 10, padding: 4 }}>
                    {[['software', 'Software / Tool Company'], ['auditor', 'Lead Auditor']].map(([val, lab]) => (
                      <button type="button" key={val} onClick={() => setAudience(val)}
                        style={{ fontFamily: FTP, fontSize: 13, fontWeight: 700, padding: '10px 12px', borderRadius: 7, cursor: 'pointer', border: 'none', transition: 'all 150ms', background: audience === val ? VP.purple : 'transparent', color: audience === val ? '#fff' : VP.g600 }}>{lab}</button>
                    ))}
                  </div>
                </div>

                <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div><label style={label}>Full name</label><input style={input} required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="Jane Smith" /></div>
                  <div><label style={label}>Work email</label><input style={input} type="email" required value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} placeholder="jane@company.com" /></div>
                </div>

                {audience === 'software' ? (
                  <React.Fragment>
                    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                      <div><label style={label}>Company</label><input style={input} required value={form.company} onChange={e => setForm(f => ({ ...f, company: e.target.value }))} placeholder="Acme Security" /></div>
                      <div><label style={label}>Company website</label><input style={input} value={form.website} onChange={e => setForm(f => ({ ...f, website: e.target.value }))} placeholder="acme.com" /></div>
                    </div>
                    <div>
                      <label style={label}>Platform category</label>
                      <select style={selectStyle} value={form.platform} onChange={e => setForm(f => ({ ...f, platform: e.target.value }))}>
                        {['GRC platform', 'Security tool', 'Cloud & infrastructure', 'Identity & access', 'Other'].map(o => <option key={o}>{o}</option>)}
                      </select>
                    </div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <div><label style={label}>Your certifications</label><input style={input} value={form.certs} onChange={e => setForm(f => ({ ...f, certs: e.target.value }))} placeholder="e.g. CISSP, ISO 27001 Lead Auditor, CMMC CCA" /></div>
                    <div>
                      <label style={label}>Primary framework</label>
                      <select style={selectStyle} value={form.framework} onChange={e => setForm(f => ({ ...f, framework: e.target.value }))}>
                        {['ISO 27001', 'ISO 42001', 'SOC 2', 'CMMC 2.0', 'HITRUST', 'NIST', 'CMMI', 'Multiple frameworks'].map(o => <option key={o}>{o}</option>)}
                      </select>
                    </div>
                  </React.Fragment>
                )}

                <div>
                  <label style={label}>Primary region</label>
                  <select style={selectStyle} value={form.region} onChange={e => setForm(f => ({ ...f, region: e.target.value }))}>
                    {['United States', 'United Kingdom', 'India', 'Singapore', 'Other'].map(o => <option key={o}>{o}</option>)}
                  </select>
                </div>
                <div><label style={label}>Anything else?</label><textarea style={{ ...input, resize: 'none' }} rows={3} value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} placeholder={audience === 'software' ? 'Tell us about your platform, your customers, and how you imagine we\u2019d work together.' : 'Tell us about your experience, the frameworks you\u2019re strongest in, and your availability.'} /></div>
                {err && <p style={{ fontSize: 13, color: '#D93B3B', background: '#FDEAEA', border: '1px solid #F5C2C2', borderRadius: 8, padding: '10px 14px', margin: 0 }}>Something went wrong sending your inquiry. Please try again, or email us directly.</p>}
                <window.Btn kind="primary" style={{ width: '100%', justifyContent: 'center', opacity: submitting ? 0.7 : 1, cursor: submitting ? 'default' : 'pointer' }}>{submitting ? 'Sending\u2026' : <>{audience === 'software' ? 'Submit Platform Inquiry' : 'Apply to the Auditor Network'} <window.Icon name="arrow" size={17} color="#fff" /></>}</window.Btn>
                <p style={{ fontSize: 12, color: VP.g400, textAlign: 'center', margin: 0 }}>We typically respond within two business days.</p>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { PartnersPage });
