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";
import FloatingQuoteWidget from "@/components/ui/FloatingQuoteWidget";

export const metadata: Metadata = {
  title: "Our work — CloudHelio",
  description:
    "We deliver high quality installations focused on precision engineering and long-term customer trust.",
};

const EXAMPLE_FIELDS = [
  { label: "Location", value: "Bengaluru" },
  { label: "System size", value: "5 kW" },
  { label: "Type", value: "Residential" },
];

export default function ProjectsPage() {
  return (
    <>
      <Navbar />
      <main className="flex-1">
        <PageHero
          eyebrow="Our work"
          title="Building our portfolio, one install at a time."
          intro="We focus on delivering quality installations, transparent engineering, and long-term customer trust."
          image="/images/projects/hero.jpg"
          fallbackImage="/images/projects/hero.jpg"
          alt="Home with a rooftop solar array"
        />

        <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_1fr] md:gap-16">
              <AnimatedItem>
                <EyebrowBadge className="mb-6">Our Commitment</EyebrowBadge>
                <h2 className="max-w-[16ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
                  Real engineering. Authentic customer records.
                </h2>
                <p className="mt-6 max-w-[48ch] text-base leading-relaxed text-zinc-600">
                  Every system we install is commissioned to high quality standards. As rooftop arrays are energized across the region, each completed project will be published here with verified yield metrics.
                </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"
                >
                  Talk to us about your roof →
                </Link>
              </AnimatedItem>

              <AnimatedItem>
                <div className="rounded-[24px] border border-amber-500/20 bg-amber-500/5 p-8 backdrop-blur-md max-md:p-6">
                  <div className="flex items-center justify-between">
                    <span className="font-mono text-xs font-semibold tracking-wider text-amber-600 uppercase">
                      Upcoming Commission · #001
                    </span>
                    <span className="rounded-full bg-amber-100 px-3 py-1 text-[11px] font-bold text-amber-800">
                      In Progress
                    </span>
                  </div>

                  <p className="mt-6 text-sm leading-relaxed text-zinc-700">
                    When the installation completes, this record will hold real yield measurements, rooftop layout photos, and live monitoring metrics.
                  </p>

                  <dl className="mt-8 divide-y divide-zinc-200/80 border-t border-b border-zinc-200/80">
                    {EXAMPLE_FIELDS.map((f) => (
                      <div
                        key={f.label}
                        className="flex items-center justify-between py-3 text-xs"
                      >
                        <dt className="text-zinc-500 font-medium">{f.label}</dt>
                        <dd className="font-mono font-bold text-zinc-900">
                          {f.value}
                        </dd>
                      </div>
                    ))}
                  </dl>
                </div>
              </AnimatedItem>
            </div>
          </AnimatedSection>
        </section>
      </main>
      <Footer />
      <FloatingQuoteWidget />
    </>
  );
}