import { ArrowRight } from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

// (pilotCards removed — unused sample data)

const introTopics = [
  {
    title: "How drones fly",
    detail:
      "Understand lift, stabilization, and controller logic before comparing models.",
  },
  {
    title: "What sensors collect",
    detail:
      "See how RGB, thermal, and mapping sensors support different real-world jobs.",
  },
  {
    title: "How to compare platforms",
    detail:
      "Use speed, endurance, camera system, and range to evaluate fit for each task.",
  },
];

const droneSpecs = [
  {
    name: "DJI Mavic Air 2",
    speed: "68 kph",
    battery: "34 min",
    camera: "4K/60fps, 48MP",
    range: "10 km",
  },
  {
    name: "DJI Air 2S",
    speed: "68 kph",
    battery: "31 min",
    camera: "1-inch sensor, 20MP, 5.4K",
    range: "10 km",
  },
  {
    name: "Autel EVO II Pro",
    speed: "72 kph",
    battery: "40-42 min",
    camera: "48MP, 6K/8K options",
    range: "13 km",
  },
];

const featurePoints = [
  "Gimbals keep the horizon level even in strong wind.",
  "Thermal sensors expose heat patterns that normal cameras cannot see.",
  "Flight software helps with return-to-home, orbit shots, and waypoint paths.",
];

const droneCards = [
  {
    name: "DJI Mavic Air 2",
    company: "DJI",
    role: "Photography",
    tone: "Versatile imaging, smooth 4K video, and exceptional portability.",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/b/b0/DJIMavicAir.jpg?utm_source=www.wikidata.org&utm_campaign=imageinfo&utm_content=original",
  },
  {
    name: "DJI Air 2S",
    company: "DJI",
    role: "Professional",
    tone: "Premium 1-inch sensor, exceptional low-light performance.",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/6/62/DJI_Air_2S_in_flight_%28cropped%29.jpg?utm_source=www.wikidata.org&utm_campaign=imageinfo&utm_content=original",
  },
  {
    name: "Autel EVO II Pro",
    company: "Autel",
    role: "Inspection",
    tone: "Extended flight time and professional imaging for surveys.",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/7/70/Drone_equiped_with_spectrophotometer.jpg?utm_source=www.wikidata.org&utm_campaign=imageinfo&utm_content=original",
  },
];

export default function App() {
  return (
    <main className="min-h-screen bg-[#f6f7fb] text-slate-950">
      <div className="pointer-events-none absolute inset-x-0 top-0 h-80 bg-sky-100/70" />

      <div className="relative mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
        <section className="grid gap-6 rounded-[1.5rem] bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-start lg:p-10">
          <div className="space-y-4">
            <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
              Drone Hub
            </h1>
            <p className="max-w-2xl text-slate-600">
              The Drone Hub introduces how drones work, where they are useful,
              and what technical details matter when comparing aircraft.
            </p>
            <p className="max-w-2xl text-slate-600">
              Start with core concepts, then move through platform snapshots and
              side-by-side specs to build a grounded understanding.
            </p>
          </div>

          <div className="grid gap-3 rounded-2xl border border-slate-200 bg-slate-50/80 p-4 sm:p-5">
            {introTopics.map((topic) => (
              <div
                key={topic.title}
                className="rounded-xl border border-slate-200 bg-white p-4"
              >
                <p className="flex items-center gap-2 text-sm font-semibold text-slate-900">
                  <ArrowRight className="h-4 w-4 text-sky-700" />
                  {topic.title}
                </p>
                <p className="mt-2 text-sm leading-6 text-slate-600">
                  {topic.detail}
                </p>
              </div>
            ))}
          </div>
        </section>

        <section
          id="drone-section"
          className="grid gap-6 rounded-[1.5rem] bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8 lg:grid-cols-[0.78fr_1.22fr] lg:items-center lg:p-10"
        >
          <div className="flex justify-center lg:justify-start">
            <img
              src="/wireframe.png"
              alt="Drone body close-up"
              className="h-auto w-full max-w-3xl rounded-lg border border-slate-200 object-contain"
            />
          </div>

          <div className="space-y-4">
            <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
              Why drones matter
            </h2>
            <p className="max-w-2xl text-slate-600">
              Aerial systems do much more than capture footage. They rescue
              people, view places that are hard to reach, and gather data that
              would be impossible to collect otherwise.
            </p>
            <ul className="grid gap-3 text-slate-700 sm:grid-cols-3">
              {featurePoints.map((point) => (
                <li
                  key={point}
                  className="flex items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4"
                >
                  <span className="text-sm leading-6">{point}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="space-y-6 rounded-[1.5rem] bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8 lg:p-10">
          <div className="space-y-3">
            <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
              Meet the drones
            </h2>
            <p className="text-slate-600">
              Drones come in all shapes and sizes, but they all have the same
              core components: a frame, motors, propellers, a flight controller,
              and a power source. The best drone for you depends on your needs
              and experience level. Consider what you want to do with it, how
              much time you want to spend learning, and your budget before
              making a decision.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            {droneCards.map((drone) => (
              <Card
                key={drone.name}
                className="rounded-2xl border-slate-300/80 bg-white px-0 py-0 shadow-none"
              >
                <CardHeader className="px-0 pt-10 text-center">
                  <img
                    src={drone.image}
                    alt={drone.name}
                    className="mx-auto h-32 w-32 rounded-2xl border border-slate-200 object-cover bg-slate-50"
                  />
                </CardHeader>
                <CardContent className="space-y-3 px-5 pb-8 text-center">
                  <div>
                    <CardTitle className="text-4xl font-medium">
                      {drone.name}
                    </CardTitle>
                    <CardDescription className="mt-2 text-sm text-slate-500">
                      {drone.company}
                    </CardDescription>
                  </div>
                  <p className="text-sm font-medium uppercase tracking-[0.2em] text-sky-700">
                    {drone.role}
                  </p>
                  <p className="text-sm leading-6 text-slate-600">
                    {drone.tone}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        <section className="grid gap-6 rounded-[1.5rem] bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:grid-cols-[0.9fr_1.1fr] lg:items-start lg:p-10">
          <div className="space-y-4">
            <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
              Drone specs comparison
            </h2>
            <p className="text-slate-600">
              A quick look at three fictional platforms. Speed, battery life,
              camera quality, and range are the fastest way to compare them at a
              glance.
            </p>
          </div>

          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <table className="w-full border-collapse text-left text-sm">
              <thead className="bg-slate-50 text-slate-500">
                <tr>
                  <th className="px-4 py-3 font-medium">Name</th>
                  <th className="px-4 py-3 font-medium">Speed</th>
                  <th className="px-4 py-3 font-medium">Battery</th>
                  <th className="px-4 py-3 font-medium">Camera</th>
                  <th className="px-4 py-3 font-medium">Range</th>
                </tr>
              </thead>
              <tbody>
                {droneSpecs.map((drone, index) => (
                  <tr
                    key={drone.name}
                    className={
                      index !== droneSpecs.length - 1
                        ? "border-b border-slate-200"
                        : ""
                    }
                  >
                    <td className="px-4 py-3 font-medium text-slate-900">
                      {drone.name}
                    </td>
                    <td className="px-4 py-3 text-slate-600">{drone.speed}</td>
                    <td className="px-4 py-3 text-slate-600">
                      {drone.battery}
                    </td>
                    <td className="px-4 py-3 text-slate-600">{drone.camera}</td>
                    <td className="px-4 py-3 text-slate-600">{drone.range}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </main>
  );
}
