"use client";

import { Star, Quotes } from "@phosphor-icons/react";
import {
  AnimatedSection,
  AnimatedItem,
} from "@/components/ui/AnimatedSection";
import EyebrowBadge from "@/components/ui/EyebrowBadge";

const FEATURED = {
  quote:
    "We'd had three quotes that were really just three different ways of saying 'trust us'. CloudHelio turned up with a shading model, showed us the two months of the year our chimney costs us output, and priced the array around it. First full year came in 4% above what they projected.",
  name: "Marianne Whitlock",
  role: "Homeowner · 8.1 kW array",
  location: "Ashford Hill",
  metric: "+4%",
  metricLabel: "above projection",
};

const TESTIMONIALS = [
  {
    quote:
      "The install crew were on the roof for a day and a half and left it cleaner than they found it. Two years on, not a single leak or callback.",
    name: "Dev Ramanathan",
    role: "Homeowner · 5.4 kW",
    stars: 5,
  },
  {
    quote:
      "Monitoring flagged a failing optimiser in month seven. They'd booked the replacement before I noticed anything on my bill.",
    name: "Priya Nandakumar",
    role: "Homeowner · 11.2 kW + battery",
    stars: 5,
  },
  {
    quote:
      "I run a workshop, so the load profile is odd. They sized around my daytime draw instead of selling me the biggest system that fits.",
    name: "Tom Alderidge",
    role: "Small business · 14.8 kW",
    stars: 5,
  },
  {
    quote:
      "Permit paperwork was the part I dreaded. I signed twice and heard nothing more about it until the meter was swapped.",
    name: "Sofia Berenguer",
    role: "Homeowner · 6.6 kW",
    stars: 5,
  },
];

function Stars({ count = 5 }: { count?: number }) {
  return (
    <div className="flex gap-0.5" aria-label={`${count} out of 5 stars`}>
      {Array.from({ length: count }).map((_, i) => (
        <Star key={i} size={14} weight="fill" color="#fbbf24" />
      ))}
    </div>
  );
}

export default function Testimonials() {
  return (
    <section
      id="testimonials"
      className="relative z-10 bg-[#f5f5f5] 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">
          <EyebrowBadge className="mb-6">4.9 average · 512 installs</EyebrowBadge>
          <h2 className="max-w-[20ch] text-3xl font-semibold tracking-tighter text-zinc-950 md:text-5xl">
            The roofs are the portfolio.
          </h2>
          <p className="mt-5 max-w-[55ch] text-base leading-relaxed text-zinc-600 md:text-lg">
            Every system we commission stays on monitoring, so these numbers
            aren&apos;t recollections — they&apos;re meter readings.
          </p>
        </AnimatedItem>

        <div className="grid grid-cols-1 gap-5 lg:grid-cols-[3fr_2fr]">
          {/* Featured */}
          <AnimatedItem className="card-surface relative flex flex-col justify-between overflow-hidden p-9 max-md:p-6">
            <div
              className="pointer-events-none absolute -top-20 -left-20 h-56 w-56 rounded-full opacity-50 blur-3xl"
              style={{
                background:
                  "radial-gradient(circle, rgba(245,158,11,0.3), transparent 70%)",
              }}
            />
            <div className="relative">
              <Quotes size={34} weight="fill" color="#f59e0b" />
              <blockquote className="mt-6 text-xl leading-relaxed font-medium tracking-tight text-zinc-800 md:text-2xl">
                {FEATURED.quote}
              </blockquote>
            </div>
            <div className="relative mt-9 flex flex-wrap items-end justify-between gap-6">
              <div>
                <Stars />
                <div className="mt-3 font-semibold tracking-tight text-zinc-900">
                  {FEATURED.name}
                </div>
                <div className="text-sm text-zinc-500">
                  {FEATURED.role} · {FEATURED.location}
                </div>
              </div>
              <div className="card-surface-nested px-5 py-3 text-right">
                <div className="font-mono text-2xl font-semibold text-orange-600">
                  {FEATURED.metric}
                </div>
                <div className="text-[10px] tracking-wider text-zinc-500 uppercase">
                  {FEATURED.metricLabel}
                </div>
              </div>
            </div>
          </AnimatedItem>

          {/* Grid */}
          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-1">
            {TESTIMONIALS.slice(0, 2).map((t) => (
              <AnimatedItem
                key={t.name}
                className="card-surface flex flex-col justify-between p-7 max-md:p-5"
              >
                <p className="text-[15px] leading-relaxed text-zinc-700">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <div className="mt-6">
                  <Stars count={t.stars} />
                  <div className="mt-2.5 text-sm font-semibold tracking-tight text-zinc-900">
                    {t.name}
                  </div>
                  <div className="text-xs text-zinc-500">{t.role}</div>
                </div>
              </AnimatedItem>
            ))}
          </div>
        </div>

        <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2">
          {TESTIMONIALS.slice(2).map((t) => (
            <AnimatedItem
              key={t.name}
              className="card-surface flex flex-col justify-between p-7 max-md:p-5"
            >
              <p className="text-[15px] leading-relaxed text-zinc-700">
                &ldquo;{t.quote}&rdquo;
              </p>
              <div className="mt-6">
                <Stars count={t.stars} />
                <div className="mt-2.5 text-sm font-semibold tracking-tight text-zinc-900">
                  {t.name}
                </div>
                <div className="text-xs text-zinc-500">{t.role}</div>
              </div>
            </AnimatedItem>
          ))}
        </div>
      </AnimatedSection>
    </section>
  );
}