// Services.jsx: Orbital Aerial Solutions
const OASServices = () => {
  const services = [
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
        </svg>
      ),
      tag: 'Volumetric Hub',
      title: 'Measure stockpile volumes with industry leading accuracy.',
      body: 'Minimize inventory variance with survey grade volumetric reports processed through AI pipelines. Get audit ready tonnage metrics that your operations and finance teams can confidently act on.',
      deliverables: ['AI assisted volume and tonnage reports with custom density profiles', 'High resolution georeferenced orthomosaics', 'Phased cut and fill historical comparisons', 'Standard CAD and GIS exports (LAS, TIFF, CSV)'],
      stat: 'Subcentimeter',
      statLabel: 'Geospatial mapping precision',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /><path d="M15 21V9" />
        </svg>
      ),
      tag: 'Secure Audits',
      title: 'Inspect critical assets with total security.',
      body: 'Digitize CAPEX assessments across industrial facilities. Utilizing NDAA compliant data pipelines and hardware, we supply defensible documentation that simplifies regulatory compliance.',
      deliverables: ['High fidelity visual envelope mapping', 'Comprehensive structural anomaly tracking', 'BIM and CAD compatible asset records', 'Defensible structural health scoring', 'Hardened data hosting meeting federal security standards'],
      stat: 'Federal Grade',
      statLabel: 'Compliance architectures',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" /><line x1="9" y1="21" x2="9" y2="9" />
        </svg>
      ),
      tag: 'Digital Twin',
      title: 'Capture your site in immersive 3D.',
      body: 'Provide stakeholders with a single cloud hosted map of active project zones. Chronological reality captures build an immutable timeline of site progress, keeping teams in the office and the field aligned.',
      deliverables: ['Interactive web based 3D site models', 'High density georeferenced point clouds', 'Historical site state timeline playback', 'Secure cloud portal access for remote stakeholders'],
      stat: 'AI Driven',
      statLabel: '3D processing pipeline',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z" />
        </svg>
      ),
      tag: 'Thermal Diagnostics · Coming Soon',
      title: 'Detect anomalies before disruption.',
      body: 'Identify subsurface anomalies, thermal leaks, and early structural degradation across energy infrastructure and industrial facilities. Advanced thermography capability currently accepting inquiries for Q4 availability.',
      deliverables: ['Radiometric diagnostic thermal maps', 'Automated substation and solar array scanning', 'Co registered visual and thermal overlays', 'Detailed hot spot and anomaly documentation'],
      stat: 'Expanding',
      statLabel: 'Advanced capability in deployment',
      comingSoon: true,
    },
  ];

  const featuredService = {
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
      </svg>
    ),
    tag: 'Builder Services',
    title: 'Land & Development Intelligence',
    body: 'Aerial intelligence for homebuilders and land developers at every stage of the acquisition and development cycle. From pre purchase site reconnaissance to construction progress documentation delivered as georeferenced data your team can actually use.',
    deliverables: [
      'Pre acquisition parcel aerials and site context',
      'Georeferenced orthomosaics for feasibility review',
      'Topographic surface models for drainage and grade analysis',
      'Construction progress documentation (phased milestones)',
      'Community, amenity, and lot inventory aerials',
      'Marketing and sales content for listings and collateral'
    ],
    stat: 'Survey Grade',
    statLabel: 'Precision mapping on every deployment',
  };

  const [hovered, setHovered] = React.useState(null);
  const [featuredHovered, setFeaturedHovered] = React.useState(false);

  return (
    <section id="services" style={{ padding: '96px 32px', background: 'var(--bg-page)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 56 }}>
          <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>
            Services
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,4vw,42px)', letterSpacing: '-0.025em', color: 'var(--fg-1)', maxWidth: 500, lineHeight: 1.1 }}>
            The data your operation depends on.
          </h2>
        </div>

        <div className="services-grid scroll-reveal reveal-services" style={{ display: 'grid', gap: 20, marginBottom: 20 }}>
          {services.map((s, i) => {
            const isComingSoon = s.comingSoon;
            const borderStyle = isComingSoon
              ? (hovered === i ? '1px solid var(--cyan)' : '1px dashed var(--border)')
              : (hovered === i ? '1px solid var(--cyan)' : '1px solid var(--border)');
            const opacityStyle = isComingSoon
              ? (hovered === i ? 1.0 : 0.7)
              : 1.0;

            return (
              <div key={i}
                className="service-card"
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  background: hovered === i ? 'var(--bg-elevated)' : 'var(--bg-surface)',
                  border: borderStyle,
                  opacity: opacityStyle,
                  borderRadius: 6, padding: '28px 26px',
                  boxShadow: hovered === i ? '0 0 24px rgba(0,184,230,0.12)' : 'none',
                  cursor: 'default',
                  transition: 'all 250ms var(--ease)',
                }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
                  <div style={{ width: 44, height: 44, background: 'rgba(0,184,230,0.08)', border: '1px solid rgba(0,184,230,0.2)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {s.icon}
                  </div>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)', background: 'var(--bg-elevated)', padding: '3px 8px', borderRadius: 2 }}>{s.tag}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--fg-1)', marginBottom: 12, lineHeight: 1.2 }}>{s.title}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65, marginBottom: 20 }}>{s.body}</p>

                <div style={{ borderTop: '1px solid var(--border)', paddingTop: 18, marginBottom: 18 }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 10 }}>Deliverables</div>
                  <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {s.deliverables.map((d, j) => (
                      <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg-2)' }}>
                        <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--cyan)', flexShrink: 0, opacity: 0.7 }}></span>
                        {d}
                      </li>
                    ))}
                  </ul>
                </div>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: 'var(--amber)' }}>{s.stat}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)' }}>{s.statLabel}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Featured Card: Land & Development Intelligence */}
        <div 
          className="service-card featured-service-card"
          onMouseEnter={() => setFeaturedHovered(true)}
          onMouseLeave={() => setFeaturedHovered(false)}
          style={{
            background: 'var(--bg-elevated)',
            border: featuredHovered ? '1px solid var(--cyan)' : '1px solid var(--border)',
            borderRadius: 6,
            padding: '32px 30px',
            boxShadow: featuredHovered ? '0 0 24px rgba(0,184,230,0.12)' : 'none',
            cursor: 'default',
            transition: 'all 250ms var(--ease)',
            marginTop: 20,
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
            <div style={{ width: 44, height: 44, background: 'rgba(0,184,230,0.08)', border: '1px solid rgba(0,184,230,0.2)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {featuredService.icon}
            </div>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--cyan)', background: 'rgba(0,184,230,0.08)', border: '1px solid rgba(0,184,230,0.15)', padding: '4px 10px', borderRadius: 2 }}>{featuredService.tag}</span>
          </div>
          
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--fg-1)', marginBottom: 12 }}>{featuredService.title}</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65, marginBottom: 24, maxWidth: 850 }}>{featuredService.body}</p>

          <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20, marginBottom: 24 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 14 }}>Deliverables</div>
            <ul style={{ 
              listStyle: 'none', 
              display: 'grid', 
              gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', 
              gap: '10px 24px' 
            }}>
              {featuredService.deliverables.map((d, j) => (
                <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg-2)' }}>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--cyan)', flexShrink: 0, opacity: 0.7 }}></span>
                  {d}
                </li>
              ))}
            </ul>
          </div>

          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: 'var(--amber)' }}>{featuredService.stat}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)' }}>{featuredService.statLabel}</span>
          </div>
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { OASServices });
