import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
import styles from "./WingsInfrastructure.module.css";

const CARDS = [
  {
    title: "Airport Cargo Hubs",
    desc: "Near-airport clearance hubs instead of standalone warehouses — closer to the tarmac, faster to the aircraft.",
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
      </svg>
    ),
  },
  {
    title: "Cross-Docking",
    desc: "Screening, grouping, and consolidation happen in one motion, minimizing dwell time between arrival and departure.",
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 7h7l2 3h9M3 7v10h18V10" />
      </svg>
    ),
  },
  {
    title: "Asset-Light Network",
    desc: "Leased terminal space that flexes with demand, keeping the network nimble as new routes come online.",
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="7" height="7" rx="1" />
        <rect x="14" y="3" width="7" height="7" rx="1" />
        <rect x="3" y="14" width="7" height="7" rx="1" />
        <rect x="14" y="14" width="7" height="7" rx="1" />
      </svg>
    ),
  },
  {
    title: "Scalable Operations",
    desc: "Modular ground infrastructure built to expand city by city without slowing down day-to-day operations.",
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 21V9l6-4 6 4v12M9 21V13h6v8" />
      </svg>
    ),
  },
];

export default function WingsInfrastructure() {
  return (
    <section className={styles.section} id="wings-infrastructure">
      <div className={styles.sectionShell}>
        <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.header}>
          <div className={styles.eyebrow}>/ Infrastructure /</div>
          <h2 className={styles.title}>A network built to move, not to sit idle</h2>
        </ScrollReveal>

        <StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className={styles.grid}>
          {CARDS.map((c) => (
            <div key={c.title} className={styles.card}>
              <div className={styles.icon} aria-hidden="true">{c.icon}</div>
              <h3 className={styles.cardTitle}>{c.title}</h3>
              <p className={styles.cardDesc}>{c.desc}</p>
            </div>
          ))}
        </StaggerChildren>
      </div>
    </section>
  );
}