import type { Metadata } from "next";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Drone & UAS Technology",
  description:
    "Advanced unmanned aerial systems, specialized payload integrations, and high-precision mapping and inspection operations by Oscar One.",
};

const sections = [
  {
    title: "Platforms",
    paragraphs: [
      "Oscar One fields a range of unmanned aerial systems selected and tuned for the missions our operators actually fly. Every platform is over-engineered, redundancy-built, and stress-tested in the conditions the mission demands.",
      "From multirotor inspection platforms to long-endurance fixed-wing survey aircraft, each airframe is paired with the autonomy stack and ground segment that fits the objective — not the other way around.",
    ],
  },
  {
    title: "Payload Integration",
    paragraphs: [
      "Specialized payload integration is a core discipline at Oscar One. We engineer mounts, power, datalinks, and control software around the sensor — high-resolution cameras, LiDAR, multispectral arrays, and thermal imagers.",
      "Every integration is verified end to end before deployment, with documentation your safety and compliance teams can audit.",
    ],
  },
  {
    title: "Operations",
    paragraphs: [
      "We operate where precision matters: warehouse stock counting, plantation spraying and surveying, perimeter surveillance, and infrastructure inspection.",
      "Crews are licensed, operations are insured, and every flight is planned, logged, and debriefed to aviation-grade standards.",
    ],
  },
];

export default function DronePage() {
  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">
            Unmanned systems, engineered around the mission.
          </h1>
          <div className="heading-rule" />
          <p className="mt-6 text-lg leading-relaxed text-navy-600">
            Oscar One delivers drone and UAS capability end to end — platforms,
            payloads, and precision operations for defense, agriculture,
            industry, and enterprise.
          </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>
  );
}