// Credentials.jsx: Orbital Aerial Solutions
const OASCredentials = () => {
  const creds = [
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
      label: 'Federal Compliance',
      value: 'NDAA Compliant Workflows',
      detail: 'Full federal compliance utilizing NDAA compliant hardware, with on demand provisioning of compliant airframes for explicit federal asset requirements.',
    },
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#E8A020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>,
      label: 'Specialized Coverage',
      value: '$10M Liability',
      detail: 'Premium specialized aviation liability coverage suited for hyperscale and critical environments.',
    },
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/></svg>,
      label: 'Enterprise Fleet',
      value: 'Precision Sensors',
      detail: 'Advanced airframes equipped for subcentimeter mapping and high resolution imaging.',
    },
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
      label: 'Deployments',
      value: 'Nationwide',
      detail: 'Scale operations dynamically across critical infrastructure, defense, land development, and hyperscale computing sectors.',
    },
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
      label: 'Data Processing',
      value: 'Proprietary AI',
      detail: 'Hardened cloud infrastructure processing raw captures into actionable 3D models, orthomosaics, and survey grade volumetric outputs.',
    },
    {
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>,
      label: 'Audit Standard',
      value: 'Defensible Data',
      detail: 'Survey grade accuracy and strict metadata standard compliance that stakeholders can stand behind.',
    },
  ];

  return (
    <section id="credentials" style={{ padding:'96px 32px', background:'var(--bg-page)' }}>
      <div style={{ maxWidth:1100, margin:'0 auto' }}>
        <div style={{ marginBottom:56, display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:16 }}>
          <div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--cyan)', marginBottom:14, display:'flex', alignItems:'center', gap:8 }}>
              <span style={{ display:'inline-block', width:20, height:1, background:'var(--cyan)', opacity:0.6 }}></span>
              Credentials
            </div>
            <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:'clamp(26px,3.5vw,40px)', letterSpacing:'-0.025em', color:'var(--fg-1)', lineHeight:1.1 }}>
              Certified. Insured. Proven.
            </h2>
          </div>
          <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fg-2)', maxWidth:380, lineHeight:1.6 }}>
            Every engagement is backed by commercial certification, active insurance coverage, and a fleet built for enterprise grade survey work.
          </p>
        </div>

        <div className="credentials-grid scroll-reveal reveal-credentials">
          {creds.map((c, i) => (
            <div key={i} className="credential-card-wrapper" style={{ background:'var(--bg-surface)', border:'1px solid var(--border)', borderRadius:6, padding:'22px 22px', display:'flex', gap:16, alignItems:'flex-start' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor='var(--border-hover)'; e.currentTarget.style.background='var(--bg-elevated)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor='var(--border)'; e.currentTarget.style.background='var(--bg-surface)'; }}>
              <div style={{ width:52, height:52, background:'rgba(0,184,230,0.06)', border:'1px solid rgba(0,184,230,0.12)', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                {c.icon}
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, letterSpacing:'0.10em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:4 }}>{c.label}</div>
                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18, color:'var(--fg-1)', marginBottom:4, letterSpacing:'-0.01em' }}>{c.value}</h3>
                <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--fg-3)', lineHeight:1.5 }}>{c.detail}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { OASCredentials });