const OASWhyDirect = () => {
  const points = [
    {
      icon: <svg width="18" height="18" 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>,
      title: 'Your entire site in your pocket',
      body: 'Access high fidelity 3D maps through a secure cloud based workspace. Operations teams, superintendents, and remote engineers can keep tabs on work completed from anywhere without any GIS expertise.',
    },
    {
      icon: <svg width="18" height="18" 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>,
      title: 'Hardware agnostic data engine',
      body: 'Process data from any drone, LiDAR scanner, or GPS rover. We combine all reality capture methods into one unified coordinates matched map, ensuring teams always trust the reference model.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>,
      title: 'Lightweight CAD & design overlays',
      body: 'Overlay PDF design plans, blueprints, or TIN surfaces directly onto reality models. Help clients and partners visualize progress clearly, identify utility clashes, and inspect design conformance.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
      title: 'NDAA compliant workflows',
      body: 'Meeting strict federal regulations with NDAA compliant systems, secure data handling pipelines, and on demand deployment of compliant hardware for high consequence environments.',
    },
  ];

  return (
    <section id="advantage" style={{ padding:'96px 32px', background:'var(--bg-surface)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)' }}>
      <div className="why-grid" style={{ maxWidth:1100, margin:'0 auto', alignItems:'start' }}>
        <div className="scroll-reveal reveal-advantage-left">
          <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>
            The OAS Advantage
          </div>
          <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:'clamp(26px,3.5vw,40px)', letterSpacing:'-0.025em', color:'var(--fg-1)', marginBottom:20, lineHeight:1.1 }}>
            Enterprise Ready.<br />Accuracy Obsessed.
          </h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--fg-2)', lineHeight:1.7, marginBottom:28 }}>
            Orbital Aerial Solutions bridges the gap between field captures and operational insights. We provide the high precision data and rigorous compliance modern industrial teams rely on daily.
          </p>
          
          {/* Performance statement inspired by Propeller Aero style */}
          <div style={{ background:'rgba(0,184,230,0.03)', border:'1px solid rgba(0,184,230,0.12)', borderRadius:6, padding:'24px 22px', display:'flex', flexDirection:'column', gap:8, marginBottom:24 }}>
            <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fg-2)', lineHeight:1.6, margin:0 }}>
              Our RTK workflows consistently deliver outputs validated to within 0.02 ft of ground control, audit ready from day one.
            </p>
          </div>

          {/* Integrations callout inspired by Propeller Aero */}
          <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
            <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Seamless Workflows</h4>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.5, margin: 0 }}>
              Use the tools and hardware you trust. OAS processes and integrates data with Autodesk, Trimble, Leica, Bentley, and all standard industry CAD or GIS formats.
            </p>
          </div>
        </div>

        <div className="scroll-reveal reveal-advantage-right" style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {points.map((p, i) => (
            <div key={i} style={{ display:'flex', gap:16, padding:'18px 20px', background:'var(--bg-page)', border:'1px solid var(--border)', borderRadius:6, transition:'border-color 200ms' }}
              onMouseEnter={e => e.currentTarget.style.borderColor='var(--border-hover)'}
              onMouseLeave={e => e.currentTarget.style.borderColor='var(--border)'}>
              <div style={{ width:36, height:36, background:'rgba(0,184,230,0.08)', border:'1px solid rgba(0,184,230,0.15)', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                {p.icon}
              </div>
              <div>
                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--fg-1)', marginBottom:4 }}>{p.title}</h3>
                <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--fg-2)', lineHeight:1.6 }}>{p.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { OASWhyDirect: OASWhyDirect });