import type { Metadata } from "next";
import Link from "next/link";
import Navbar from "@/components/sections/Navbar";
import Footer from "@/components/sections/Footer";
import PageHero from "@/components/ui/PageHero";
import {
  AnimatedSection,
  AnimatedItem,
} from "@/components/ui/AnimatedSection";
import EyebrowBadge from "@/components/ui/EyebrowBadge";

export const metadata: Metadata = {
  title: "About — CloudHelio",
  description:
    "A solar solutions startup focused on helping customers adopt clean, cost-effective energy — with clear communication, practical design and honest recommendations.",
};

const WHAT_WE_DO = [
  {
    title: "Understanding your electricity usage",
    body: "Every design starts from your actual consumption rather than a standard package.",
  },
  {
    title: "Designing the right system",
    body: "System size and layout are matched to your roof and the way you use power.",
  },
  {
    title: "Installing solar panels and equipment",
    body: "Panels, mounting and electrical equipment fitted by our own team.",
  },
  {
    title: "Assisting with required approvals",
    body: "We help you through the paperwork the process asks for.",
  },
];

const APPROACH = [
  {
    title: "Clear communication",
    body: "You know what is happening at each stage, in plain language.",
  },
  {
    title: "Practical system design",
    body: "Systems sized for how you actually live, not for a brochure figure.",
  },
  {
    title: "Honest recommendations",
    body: "Advice based on your needs — including when a smaller system is the right call.",
  },
];

const WHY_US = [
  "Transparent pricing",
  "Customised solutions — no one-size-fits-all",
  "Focus on quality installation",
  "Customer-first approach",
  "Support after installation",
];

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <main className="flex-1">
        <PageHero
          eyebrow="About us"
          title="Clean energy, made straightforward."
          intro="We are a solar solutions startup focused on helping customers adopt clean and cost-effective energy. Our goal is to make solar installation simple, transparent and accessible."
          image="/images/about/hero.jpg"
          fallbackImage="/images/about/hero.jpg"
          alt="Sunlight through a clear blue sky"
        />

        {/* Who we are */}
        <section className="surface-wash relative z-10 px-6 py-24 md:px-8 md:py-32">
          <AnimatedSection className="mx-auto max-w-[1400px]">
            <div className="grid grid-cols-1 gap-12 md:grid-cols-[1fr_1.1fr] md:gap-16">
              <AnimatedItem>
                <EyebrowBadge className="mb-6">Who we are</EyebrowBadge>
                <h2 className="max-w-[18ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
                  A startup built around one simple promise.
                </h2>
              </AnimatedItem>
              <AnimatedItem className="flex flex-col justify-center">
                <p className="text-lg leading-relaxed text-zinc-600 md:text-xl">
                  We are a solar solutions startup focused on helping customers
                  adopt clean and cost-effective energy.
                </p>
                <p className="mt-5 text-base leading-relaxed text-zinc-500">
                  Our goal is to make solar installation simple, transparent and
                  accessible — from the first conversation about your electricity
                  bill through to the day your system starts producing.
                </p>
              </AnimatedItem>
            </div>
          </AnimatedSection>
        </section>

        {/* What we do */}
        <section className="surface-wash relative z-10 px-6 pb-24 md:px-8 md:pb-32">
          <AnimatedSection className="mx-auto max-w-[1400px]">
            <AnimatedItem className="mb-12 flex flex-col items-center text-center">
              <EyebrowBadge className="mb-6">What we do</EyebrowBadge>
              <h2 className="max-w-[20ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
                We handle the complete process.
              </h2>
            </AnimatedItem>

            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {WHAT_WE_DO.map((item, i) => (
                <AnimatedItem
                  key={item.title}
                  className="card-surface flex flex-col p-7 max-md:p-6"
                >
                  <span className="font-mono text-2xl font-semibold text-orange-600">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <h3 className="mt-4 text-base font-semibold tracking-tight text-zinc-900">
                    {item.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-zinc-600">
                    {item.body}
                  </p>
                </AnimatedItem>
              ))}
            </div>
          </AnimatedSection>
        </section>

        {/* Our approach */}
        <section
          data-nav-dark
          className="relative z-10 bg-zinc-950 px-6 py-24 md:px-8 md:py-32"
        >
          <AnimatedSection className="mx-auto max-w-[1400px]">
            <AnimatedItem className="mb-14 flex flex-col items-center text-center">
              <span className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 font-mono text-[10px] font-semibold tracking-[0.2em] text-zinc-300 uppercase">
                <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
                Our approach
              </span>
              <h2 className="max-w-[20ch] text-3xl font-semibold tracking-tighter text-white md:text-5xl">
                We believe in getting the basics right.
              </h2>
            </AnimatedItem>

            <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
              {APPROACH.map((item) => (
                <AnimatedItem
                  key={item.title}
                  className="rounded-[20px] border border-white/10 bg-white/[0.04] p-7 backdrop-blur-sm"
                >
                  <h3 className="text-lg font-semibold tracking-tight text-white">
                    {item.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-zinc-400">
                    {item.body}
                  </p>
                </AnimatedItem>
              ))}
            </div>
          </AnimatedSection>
        </section>

        {/* Why choose us */}
        <section className="surface-wash relative z-10 px-6 py-24 md:px-8 md:py-32">
          <AnimatedSection className="mx-auto max-w-[1400px]">
            <div className="grid grid-cols-1 gap-12 md:grid-cols-[1fr_1.2fr] md:gap-16">
              <AnimatedItem>
                <EyebrowBadge className="mb-6">Why choose us</EyebrowBadge>
                <h2 className="max-w-[16ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
                  What you can expect from us.
                </h2>
                <p className="mt-6 max-w-[46ch] text-base leading-relaxed text-zinc-600">
                  We are early in our journey, and that shapes how we work —
                  every installation matters to us.
                </p>
                <Link
                  href="/#quote"
                  className="mt-9 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-3 text-sm font-semibold text-white shadow-[0_10px_24px_-10px_rgba(234,88,12,0.9)] transition-transform duration-300 hover:-translate-y-0.5"
                >
                  Get an estimate →
                </Link>
              </AnimatedItem>

              <AnimatedItem className="card-surface divide-y divide-zinc-100 p-2">
                {WHY_US.map((point, i) => (
                  <div key={point} className="flex items-center gap-5 px-5 py-5">
                    <span className="font-mono text-xs text-zinc-300 tabular-nums">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="text-base font-medium tracking-tight text-zinc-900">
                      {point}
                    </span>
                  </div>
                ))}
              </AnimatedItem>
            </div>
          </AnimatedSection>
        </section>
      </main>
      <Footer />
    </>
  );
}