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 ParallaxImage from "@/components/ui/ParallaxImage";
import ScrollTimeline from "@/components/ui/ScrollTimeline";
import ScrollFrameSection, {
  type FrameCaption,
} from "@/components/ui/ScrollFrameSection";
import { SERVICES_FRAMES } from "@/lib/frameSequence";
import {
  AnimatedSection,
  AnimatedItem,
} from "@/components/ui/AnimatedSection";
import EyebrowBadge from "@/components/ui/EyebrowBadge";

export const metadata: Metadata = {
  title: "Services — CloudHelio",
  description:
    "Residential and commercial solar installation, system design and consultation, plus maintenance and support.",
};

const SERVICES = [
  {
    n: "01",
    title: "Residential Solar Installation",
    body: "We install solar systems for homes based on your energy usage and roof space. Our solutions are designed to help reduce dependence on grid electricity.",
  },
  {
    n: "02",
    title: "Commercial Solar Installation",
    body: "We provide solar solutions for offices, shops and small businesses to help manage electricity costs and improve energy efficiency.",
  },
  {
    n: "03",
    title: "Solar System Design & Consultation",
    body: "Not sure what system you need? We analyse your electricity usage and suggest a suitable solar setup.",
  },
  {
    n: "04",
    title: "Maintenance & Support",
    body: "We offer basic support and maintenance services to ensure your system continues to operate smoothly.",
  },
];

const STEPS = [
  {
    title: "Initial discussion",
    body: "We understand your electricity usage and requirements.",
  },
  {
    title: "Site assessment",
    body: "We evaluate your roof space, structure and installation feasibility.",
  },
  {
    title: "System design & quotation",
    body: "We propose a suitable system along with pricing details.",
  },
  {
    title: "Installation",
    body: "Our team installs the system with required components.",
  },
  {
    title: "Support",
    body: "We guide you on system usage and basic monitoring.",
  },
];

/**
 * Windows follow the footage: the panel sits whole, begins separating, then
 * lies fully apart as its layers and electricals.
 */
const SHOWCASE_CAPTIONS: readonly FrameCaption[] = [
  {
    id: "consultation",
    show: 0.03,
    hide: 0.3,
    kicker: "01 — Consultation",
    title: "We start with your usage",
    body: "Not sure what system you need? We analyse your electricity usage and suggest a suitable setup.",
  },
  {
    id: "design",
    show: 0.36,
    hide: 0.63,
    kicker: "02 — Design",
    title: "Sized for your roof",
    body: "System size and layout matched to your roof space and the way you use power.",
  },
  {
    id: "install",
    show: 0.69,
    hide: 0.96,
    kicker: "03 — Installation & support",
    title: "Fitted, then looked after",
    body: "Panels and equipment installed by our own team, with support once the system is running.",
  },
];

const SAVINGS_FACTORS = [
  "Your electricity usage",
  "System size",
  "Local electricity rates",
];

export default function ServicesPage() {
  return (
    <>
      <Navbar />
      <main className="flex-1">
        <PageHero
          eyebrow="Services"
          title="Everything from first question to first kilowatt."
          intro="Residential and commercial installation, system design and consultation, and support once your system is running."
          image="/images/services/hero.jpg"
          fallbackImage="/images/services/hero.jpg"
          alt="Installer fixing a solar panel to a tiled roof"
        />

        {/* Services */}
        <section className="relative z-10 overflow-hidden bg-[#f5f5f5] px-6 py-24 md:px-8 md:py-32">
          {/* Full-bleed aerial solar farm background */}
          <ParallaxImage
            src="/images/services/services-bg.jpg"
            alt=""
            strength={0.08}
            className="z-0"
          />

          {/* Light scrim: unlike Process, this section's cards are opaque white
              with dark type, so the ground has to stay pale for them and the
              heading to hold together. Solid at the edges so the section meets
              its neighbours without a seam. */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-[#f5f5f5] via-[#f5f5f5]/80 to-[#f5f5f5]"
          />
          <AnimatedSection className="relative z-10 mx-auto max-w-[1400px]">
            <AnimatedItem className="mb-14 flex flex-col items-center text-center">
              <EyebrowBadge className="mb-6">What we offer</EyebrowBadge>
              <h2
                className="max-w-[20ch] text-3xl font-bold tracking-tighter text-zinc-950 md:text-5xl"
                style={{ textShadow: "0 1px 3px rgba(255,255,255,0.65)" }}
              >
                Four services, one point of contact.
              </h2>
            </AnimatedItem>

            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
              {SERVICES.map((s) => (
                <AnimatedItem
                  key={s.title}
                  className="card-surface group flex flex-col p-8 max-md:p-6"
                >
                  <div className="flex items-baseline gap-4">
                    <span className="font-mono text-3xl font-semibold text-orange-600">
                      {s.n}
                    </span>
                    <h3 className="text-xl font-semibold tracking-tight text-zinc-900 md:text-2xl">
                      {s.title}
                    </h3>
                  </div>
                  <p className="mt-4 max-w-[52ch] text-base leading-relaxed text-zinc-600">
                    {s.body}
                  </p>
                </AnimatedItem>
              ))}
            </div>
          </AnimatedSection>
        </section>

        {/* Scroll-scrubbed showcase */}
        <ScrollFrameSection
          id="showcase"
          frames={SERVICES_FRAMES}
          captions={SHOWCASE_CAPTIONS}
          tone="light"
          showLoader={false}
          heightClass="h-[450vh] max-lg:h-[380vh] max-md:h-[320vh]"
        />

        {/* How it works — rail fills as you scroll */}
        <section
          id="how-it-works"
          className="surface-wash relative z-10 px-6 pb-24 md:px-8 md:pb-32"
        >
          <div className="mx-auto max-w-[1400px]">
            <AnimatedSection>
              <AnimatedItem className="mb-14 flex flex-col items-center text-center">
                <EyebrowBadge className="mb-6">How it works</EyebrowBadge>
                <h2 className="max-w-[20ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
                  Five steps, in the same order every time.
                </h2>
              </AnimatedItem>
            </AnimatedSection>

            <div className="card-surface mx-auto max-w-[900px] p-10 max-md:p-7">
              <ScrollTimeline steps={STEPS} />
            </div>
          </div>
        </section>

        {/* Savings */}
        <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]">
            <div className="grid grid-cols-1 gap-12 md:grid-cols-[1.1fr_1fr] md:gap-16">
              <AnimatedItem>
                <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" />
                  Savings
                </span>
                <h2 className="max-w-[24ch] text-3xl font-semibold tracking-tighter text-white md:text-5xl leading-[1.15]">
                  Clean Energy. Professional Installation. Reliable Support. A Commitment That Lasts Beyond Installation.
                </h2>
                <p className="mt-6 max-w-[48ch] text-base leading-relaxed text-zinc-400">
                  How much depends on your situation — there is no single number
                  that is true for everyone. We help you understand what system
                  suits your needs.
                </p>
                <Link
                  href="/#savings"
                  className="mt-9 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur-md transition-colors duration-300 hover:bg-white/20"
                >
                  Try the savings estimator →
                </Link>
              </AnimatedItem>

              <AnimatedItem className="flex flex-col justify-center">
                <span className="font-mono text-[10px] tracking-[0.2em] text-zinc-500 uppercase">
                  Actual savings depend on
                </span>
                <div className="mt-5 space-y-3">
                  {SAVINGS_FACTORS.map((f, i) => (
                    <div
                      key={f}
                      className="flex items-center gap-5 rounded-2xl border border-white/10 bg-white/[0.04] px-6 py-5"
                    >
                      <span className="font-mono text-xs text-zinc-600 tabular-nums">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <span className="text-base font-medium tracking-tight text-white">
                        {f}
                      </span>
                    </div>
                  ))}
                </div>
              </AnimatedItem>
            </div>
          </AnimatedSection>
        </section>
      </main>
      <Footer />
    </>
  );
}