import type { Metadata } from "next";
import Image from "next/image";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Card } from "@/components/ui/Card";
import { RelatedResources } from "@/components/ui/RelatedResources";
import { getAllResources } from "@/lib/resources";

export const metadata: Metadata = {
  title: "The Micromelon Rover",
  description:
    "Long battery life, tough, and packed with sensors to make a great classroom tool. Connect and run code in seconds.",
};

const activities = [
  {
    title: "Maze Solving",
    description:
      "Program the rover to solve the maze. Use your ultrasonic and IR sensors to detect the walls and find the path to success.",
    icon: (
      <svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
      </svg>
    ),
  },
  {
    title: "Balance Challenges",
    description:
      "The accelerometer and gyroscope are how the rover senses movement. Use these sensors with maths and physics concepts to teach the rover to balance.",
    icon: (
      <svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
      </svg>
    ),
  },
  {
    title: "Driving Practice",
    description:
      "Design and code an algorithm that uses all of the sensors to drive a course while watching for road markings, turning signs, and other robot drivers.",
    icon: (
      <svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
      </svg>
    ),
  },
  {
    title: "Sumo",
    description:
      "Use a combination of sensors to create a program to push opponents out of the arena. Raise the stakes with 3D printed attachments.",
    icon: (
      <svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
      </svg>
    ),
  },
  {
    title: "Line Following",
    description:
      "Learn the basics of branching and loops by coding the rover to use its colour sensors to detect and follow the line.",
    icon: (
      <svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
      </svg>
    ),
  },
];

const teachableConcepts = [
  "Accelerometer",
  "Algorithm Design",
  "Branching",
  "Colour Sensors",
  "Functions",
  "Gyroscope",
  "IR Distance Sensor",
  "Loops",
  "Maths",
  "Ultrasonic",
  "Variables",
];

const techSpecs = [
  "Ultrasonic Distance Sensor",
  "3x Colour Sensors",
  "3 Axis Accelerometer",
  "2x IR Distance Sensors",
  "3 Axis Gyroscope",
  "2x Motorised Tracks",
  "2x Servo Motor Connectors",
  "Universal Expansion Header",
  "Battery voltage & current sensor",
  "Rechargeable Battery",
];

export default function RoverPage() {
  const resources = getAllResources();
  const relatedResources = resources
    .filter((r) =>
      r.categories.includes("Getting Started") ||
      r.categories.includes("Activities")
    )
    .slice(0, 3);

  return (
    <>
      {/* Hero */}
      <section className="bg-white py-16 sm:py-24">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div>
              <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
                The Micromelon Rover
              </h1>
              <p className="mt-6 text-lg text-foreground-light">
                Long battery life, tough, and packed with sensors to make a
                great classroom tool. Connect and run code in seconds.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <Button href="/store" variant="primary">
                  Build Your Kit
                </Button>
                <Button href="/download" variant="outline">
                  Download Code Editor
                </Button>
              </div>
            </div>
            <div>
              <Image
                src="/images/hero/rover-hero.jpg"
                alt="Micromelon Rover"
                width={700}
                height={467}
                className="w-full rounded-2xl shadow-lg"
                priority
              />
            </div>
          </div>
        </Container>
      </section>

      {/* Activities */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <SectionHeading
            title="Activities"
            subtitle="Explore the wide range of activities students can complete with the Micromelon Rover."
          />
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {activities.map((activity) => (
              <Card key={activity.title}>
                <div className="mb-4">{activity.icon}</div>
                <h3 className="text-lg font-semibold text-foreground">
                  {activity.title}
                </h3>
                <p className="mt-2 text-sm text-foreground-light">
                  {activity.description}
                </p>
              </Card>
            ))}
          </div>
        </Container>
      </section>

      {/* Teachable Concepts */}
      <section className="bg-white py-20">
        <Container>
          <SectionHeading
            title="Teachable Concepts"
            subtitle="The Micromelon Rover covers a wide range of digital technologies and STEM concepts."
          />
          <div className="flex flex-wrap justify-center gap-3">
            {teachableConcepts.map((concept) => (
              <span
                key={concept}
                className="rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium text-foreground"
              >
                {concept}
              </span>
            ))}
          </div>
        </Container>
      </section>

      {/* 3D Printing */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Use 3D Printing to go further!
            </h2>
            <p className="mt-6 text-foreground-light">
              Out of the box Micromelon Rovers are full of sensors and tools
              catering for all skill levels. For more advanced exercises,
              students can design and 3D print their own clip on extensions for
              the rover.
            </p>
            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
              <Button href="/rover-expansion-3d-printing">
                Expansion &amp; 3D Printing
              </Button>
              <Button href="/store" variant="outline">
                Build Your Kit
              </Button>
            </div>
          </div>
        </Container>
      </section>

      {/* Easy to Manage */}
      <section className="bg-white py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="flex justify-center">
              <Image
                src="/images/products/case.png"
                alt="Rover class set carry case with charging dock"
                width={560}
                height={400}
                className="w-full max-w-lg rounded-2xl"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Easy to Manage
              </h2>
              <p className="mt-6 text-foreground-light">
                Rover class sets come in a hard carry case with included
                charging dock. All ten robots can be charged at once from a
                single outlet.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* Add Your Own Electronics */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Add Your Own Electronics
            </h2>
            <p className="mt-6 text-foreground-light">
              Rovers have built-in expansion headers compatible with a range of
              3rd party electronics including Raspberry Pi, Arduino and other
              sensors.
            </p>
          </div>
        </Container>
      </section>

      {/* Tech Specs */}
      <section className="bg-white py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div>
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Tech Specs
              </h2>
              <ul className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2">
                {techSpecs.map((spec) => (
                  <li
                    key={spec}
                    className="flex items-start gap-2 text-foreground-light"
                  >
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
                    {spec}
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/products/rover-specs.png"
                alt="Micromelon Rover technical specifications"
                width={560}
                height={400}
                className="w-full max-w-lg rounded-2xl"
              />
            </div>
          </div>
        </Container>
      </section>

      {/* Related Resources */}
      <RelatedResources
        resources={relatedResources}
        seeAllHref="/resources"
        seeAllLabel="See all resources"
      />

      {/* Code Editor CTA */}
      <section className="bg-brand py-16">
        <Container>
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground sm:text-4xl">
              Curious How To Program The Rover?
            </h2>
            <p className="mt-4 text-lg text-foreground-light">
              The best thing about the Rover is how easy it is to program. Use
              blocks and text at the same time with our Code Editor.
            </p>
            <div className="mt-8">
              <Button
                href="/code-editor"
                className="bg-foreground text-white hover:bg-foreground-light"
              >
                EXPLORE THE CODE EDITOR
              </Button>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}