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 { LearningPathway } from "@/components/ui/LearningPathway";

export const metadata: Metadata = {
  title: "Micromelon Robotics Platform",
  description:
    "The Micromelon Platform provides an easy way to get started with programming in blocks, a high ceiling for advanced students, and a simulator for learning anywhere.",
};

export default function PlatformPage() {
  return (
    <>
      {/* Hero / Intro */}
      <section className="bg-white py-16 sm:py-24">
        <Container>
          <div className="mx-auto max-w-3xl text-center">
            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
              Micromelon Robotics Platform
            </h1>
            <p className="mt-6 text-lg text-foreground-light">
              An easy way to get started with programming in blocks, a high
              ceiling for advanced students, and a simulator for learning
              anywhere. All built around the Micromelon Rover.
            </p>
          </div>
        </Container>
      </section>

      {/* Micromelon Rover */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="flex justify-center">
              <Image
                src="/images/products/rover-candid.png"
                alt="Micromelon Rover"
                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">
                Micromelon Rover
              </h2>
              <p className="mt-6 text-foreground-light">
                The Micromelon Rover is much more than a robot, it is an
                expansive STEM resource that empowers students to explore
                what&apos;s possible with programming and engineering. Built by a
                team of Australian engineers and educators, the Micromelon Rover
                has been specifically designed to cater to students from Prep
                all the way through to grade 12 and beyond. Out of the
                box, Micromelon Rovers are full of sensors and tools, and are
                designed to grow with your students at all stages of the learning
                process.
              </p>
              <div className="mt-8">
                <Button href="/rover">Learn more</Button>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Learning Pathway */}
      <LearningPathway className="bg-white" />

      {/* Junior */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="flex justify-center">
              <Image
                src="/images/products/rover-render.jpg"
                alt="Micromelon Junior app"
                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">
                Micromelon Junior
              </h2>
              <p className="mt-6 text-foreground-light">
                A simplified coding app for younger or beginner students.
                Junior focuses on the basics of computational thinking with a
                friendly block-based interface, ideal for students not yet
                confident to navigate the full Code Editor. Available on iPad
                and Android.
              </p>
              <div className="mt-8">
                <Button href="/junior">Learn more</Button>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Code Editor */}
      <section className="bg-white py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="order-2 md:order-1">
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Code Editor
              </h2>
              <p className="mt-6 text-foreground-light">
                The Micromelon Code Editor makes it really easy for students to
                start coding. Students can simply drag-and-drop code blocks to
                start programming their robots. And, with the side-by-side
                editor, students can see the associated Python code. When your
                students are ready to advance, they can unlock the full potential
                of Python.
              </p>
              <div className="mt-8">
                <h3 className="text-lg font-semibold text-foreground">
                  Classroom Management
                </h3>
                <ul className="mt-3 space-y-2 text-foreground-light">
                  <li className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
                    Mute &amp; Disable Student Robots
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
                    Hide Screens
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
                    Send and Recall student work at any time
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
                    Lock students to Block or Python programming
                  </li>
                </ul>
              </div>
              <div className="mt-8">
                <Button href="/code-editor">Learn more</Button>
              </div>
            </div>
            <div className="order-1 flex justify-center md:order-2">
              <Image
                src="/images/hero/code-editor-demo.gif"
                alt="Micromelon Code Editor"
                width={560}
                height={400}
                className="w-full max-w-lg rounded-2xl shadow-lg"
                unoptimized
              />
            </div>
          </div>
        </Container>
      </section>

      {/* Python Library */}
      <section className="border-t border-border bg-muted py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="flex justify-center">
              <Image
                src="/images/content/6d295c-vscode-cover-photo.png"
                alt="Micromelon Python library used in VS Code"
                width={560}
                height={400}
                className="w-full max-w-lg rounded-2xl shadow-lg"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Python Library
              </h2>
              <p className="mt-6 text-foreground-light">
                Advanced students can move beyond the Code Editor and control
                their rover from any Python environment, including VS Code,
                PyCharm, and Jupyter Notebooks. Combine the rover with other
                Python libraries for computer vision, data analysis, and more.
              </p>
              <div className="mt-8">
                <Button href="/python">Learn more</Button>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Robot Simulator */}
      <section className="bg-white py-20">
        <Container>
          <div className="grid items-center gap-12 md:grid-cols-2">
            <div className="order-2 md:order-1">
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Robot Simulator
              </h2>
              <p className="mt-6 text-foreground-light">
                We developed the simulator so that learning can continue outside
                the classroom and without the need for a physical robot. The
                Simulator is ideal for homework and running complex challenges.
                Filled with virtual exercises and challenges allowing students to
                build confidence with programming and to explore all of the
                Rovers&apos; capabilities.
              </p>
              <div className="mt-8">
                <Button href="/robot-simulator">Learn more</Button>
              </div>
            </div>
            <div className="order-1 flex justify-center md:order-2">
              <Image
                src="/images/products/simulator-screenshot.png"
                alt="Micromelon Robot Simulator"
                width={560}
                height={400}
                className="w-full max-w-lg rounded-2xl shadow-lg"
              />
            </div>
          </div>
        </Container>
      </section>
      {/* CTA */}
      <section className="bg-brand py-16">
        <Container>
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground sm:text-4xl">
              Ready to bring robotics to your classroom?
            </h2>
            <p className="mt-4 text-lg text-foreground-light">
              Get in touch for a quote tailored to your school&apos;s needs.
            </p>
            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
              <Button href="/store" className="bg-foreground text-white hover:bg-foreground-light">
                Build Your Kit
              </Button>
              <Button href="/contact" variant="outline">
                Contact Us
              </Button>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}