import type { Metadata } from "next";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Simulators",
  description:
    "Flight simulation and training systems by Oscar One — from pilot training pathways to mission rehearsal for unmanned operations.",
};

const sections = [
  {
    title: "Flight Training Devices",
    paragraphs: [
      "Oscar One supplies and supports flight training devices aligned with the training pathways we run with recognized aviation academies.",
      "Simulators let students fly the same profiles, procedures, and emergency drills they will face in the aircraft — at a fraction of the cost and risk.",
    ],
  },
  {
    title: "UAS Mission Rehearsal",
    paragraphs: [
      "Before a drone flies a real mission, it flies a simulated one. We build mission rehearsal environments for unmanned operations — terrain, weather, payloads, and failure modes included.",
      "Operators arrive on site already trained on the exact profile, reducing flight time on location and de-risking complex deployments.",
    ],
  },
  {
    title: "Training Programs",
    paragraphs: [
      "From ab-initio pilot training entry to type-specific unmanned systems conversion, Oscar One structures the pathway end to end: curriculum, simulator hours, flight hours, and certification support.",
      "Programs are delivered with our partner academies and tailored to regulator requirements.",
    ],
  },
];

export default function SimulatorsPage() {
  return (
    <section
      className="relative scroll-mt-24 py-24 sm:py-28"
      style={{
        backgroundImage:
          "radial-gradient(rgba(11, 31, 69, 0.40) 1.5px, transparent 1.5px)",
        backgroundSize: "28px 28px",
      }}
    >
      {/* Soft glow so content stays readable over the dot grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-0"
        style={{
          background:
            "radial-gradient(ellipse 70% 60% at center, rgba(238, 242, 248, 0.9) 0%, rgba(238, 242, 248, 0.55) 55%, transparent 100%)",
        }}
      />

      <div className="container-x relative z-10">
        {/* Header */}
        <div className="max-w-2xl">
          <h1 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl">
            Train like the mission depends on it.
          </h1>
          <div className="heading-rule" />
          <p className="mt-6 text-lg leading-relaxed text-navy-600">
            Simulation is where competence is built. Oscar One pairs training
            devices and rehearsal environments with structured programs for
            pilots and unmanned systems operators.
          </p>
        </div>

        {/* Text sections */}
        <div className="mt-16 space-y-12">
          {sections.map((section) => (
            <div key={section.title} className="max-w-3xl">
              <h2 className="text-2xl font-bold leading-tight">
                {section.title}
              </h2>
              <div className="heading-rule" />
              {section.paragraphs.map((paragraph, i) => (
                <p
                  key={i}
                  className="mt-5 text-lg leading-relaxed text-navy-600"
                >
                  {paragraph}
                </p>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}