import EVSection, { type EVFeature, type EVStat } from "./EVSection";

// Placeholder banner — plain dark gradient, no photography (no ATR72/Q400
// or airport-hub imagery exists in the repo yet). Swap `bannerImage` for a
// sourced photo later; this keeps the section shippable in the meantime.
// EVSection embeds this value in an UNQUOTED CSS url(...).

const METRICS: EVStat[] = [
  { value: 8.2, decimals: 1, suffix: "t", label: "ATR72 Payload" },
  { value: 1600, suffix: "km", label: "ATR72 Range" },
  { value: 8.6, decimals: 1, suffix: "t", label: "Q400 Payload" },
  { value: 667, suffix: "km/h", label: "Q400 Speed" },
];

const FEATURES: EVFeature[] = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
      </svg>
    ),
    title: "Dedicated Freighter Capacity",
    desc: "Purpose-built cargo lift, not passenger-belly space competing with baggage.",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="6" cy="6" r="2.5" />
        <circle cx="18" cy="6" r="2.5" />
        <circle cx="12" cy="18" r="2.5" />
        <path d="M8.2 7.2 10 16M15.8 7.2 14 16M8.5 6h7" />
      </svg>
    ),
    title: "Regional Route Design",
    desc: "Turboprop range and speed matched to India's major regional-capital corridors.",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 3v18h18" />
        <path d="M7 14l4-4 3 3 6-7" />
      </svg>
    ),
    title: "Scaling to 25 Aircraft",
    desc: "Phase 2 vision: pan-India connectivity hubs and international regional routes.",
  },
];

export default function WingsFleetStrategy() {
  return (
    <div id="wings-fleet">
      {/* EVSection is shared across other pages (Workflow1/Workflow2 etc.),
          so its own .evnd-gap-bottom rule isn't touched — this override is
          scoped to #wings-fleet only, and reduces just the blank margin
          immediately before Infrastructure by ~42% (24px -> 14px) on
          mobile, matching the site's tighter mobile rhythm elsewhere. */}
      <style
        dangerouslySetInnerHTML={{
          __html: `
        @media (max-width: 767px) {
          #wings-fleet .evnd-gap-bottom { margin-bottom: 14px !important; }
        }
      `,
        }}
      />
      <EVSection
        bannerImage="/images/pahse1.png"
        cardNumber="Phase 1"
        cardTitle="Initial Fleet"
        cardSubtitle="2x ATR72 + 1x Q400 Freighters"
        eyebrow="/ Fleet Strategy /"
        titleLead="Purpose-Built for "
        titleAccent="Regional Speed"
        features={FEATURES}
        metrics={METRICS}
        cardsHeading="FLEET SPECIFICATIONS"
        cardsTheme={{ accent: "#c8102e", accent2: "#ff6a3d", glow: "rgba(200,16,46,0.22)" }}
        gapTop
        gapBottom
        badges={[
          { value: "3", label: "Phase 1 Aircraft" },
          { value: "25", label: "Phase 2 Vision" },
        ]}
        mediaSlot={
          <video
            autoPlay
            loop
            muted
            playsInline
            style={{
              width: "100%",
              height: "100%",
              minHeight: 420,
              objectFit: "cover",
              display: "block",
              background: "#17171b"
            }}
          >
            <source src="/videos/fleet.mp4" type="video/mp4" />
          </video>
        }
        ariaLabel="Doormile Wings fleet strategy"
      />
    </div>
  );
}