"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import AnimatedButton from "@/components/ui/AnimatedButton";
import { ChevronDown } from "@/components/ui/icons";
import { Aurora, DotWave } from "./fx";

/**
 * Services page hero — centered statement over an animated dot-wave backdrop
 * (canvas) + drifting aurora glow. A scroll button jumps to the catalog.
 * Brand-strict: dark tokens, Google Sans, orange→gold shimmer, scroll-reveal.
 */
const EASE = [0.21, 0.47, 0.32, 0.98];

const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };
const word = {
  hidden: { yPercent: 120 },
  show: { yPercent: 0, transition: { duration: 0.7, ease: EASE } },
};
const rise = {
  hidden: { opacity: 0, y: 28 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
};

const LEAD = ["From", "idea", "to"];

const STATS = [
  { value: "5", label: "Capability areas" },
  { value: "25+", label: "Specialized services" },
  { value: "10+", label: "Years delivering" },
  { value: "100%", label: "Senior engineers" },
];

/** Smooth, header-offset-aware jump to the catalog (Lenis if present). */
function scrollToCatalog(e) {
  e.preventDefault();
  const el = document.getElementById("catalog");
  if (!el) return;
  if (window.lenis) window.lenis.scrollTo(el, { offset: -104 });
  else el.scrollIntoView({ behavior: "smooth" });
}

export default function ServicesHero() {
  return (
    <section className="relative isolate overflow-hidden bg-background pb-12 pt-20 text-foreground md:pb-16 md:pt-28">
      {/* ── Background image + animated backdrop ───────────────────────── */}
      <Image src="/images/opt/Pillar2.webp" alt="" fill priority sizes="100vw" className="-z-20 object-cover opacity-45" />
      <span className="absolute inset-0 -z-10 bg-gradient-to-b from-background/40 via-background/70 to-background" />
      <Aurora className="opacity-50" />
      <DotWave />
      {/* soft top light beams */}
      <div className="pointer-events-none absolute -top-40 left-[28%] h-96 w-40 -rotate-[18deg] rounded-[50%] bg-foreground/[0.06] blur-3xl" />
      <div className="pointer-events-none absolute -top-40 right-[30%] h-96 w-32 rotate-[18deg] rounded-[50%] bg-foreground/[0.05] blur-3xl" />

      <div className="container relative">
        {/* Content */}
        <motion.div
          variants={container}
          initial="hidden"
          animate="show"
          className="mx-auto max-w-3xl text-center"
        >
          <motion.span
            variants={rise}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur"
          >
            <span className="h-1.5 w-1.5 rounded-full bg-primary" />
            Our services
          </motion.span>

          <h1 className="mt-6 font-heading text-5xl font-bold leading-[1.05] tracking-tight sm:text-6xl md:text-7xl">
            {LEAD.map((w, i) => (
              <span key={i} className="inline-block overflow-hidden pb-[0.08em] align-bottom">
                <motion.span variants={word} className="inline-block">
                  {w}
                </motion.span>
                <span>&nbsp;</span>
              </span>
            ))}
            <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
              <motion.span
                variants={word}
                className="animate-text-shimmer inline-block bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
              >
                scale.
              </motion.span>
            </span>
          </h1>

          <motion.p
            variants={rise}
            className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg"
          >
            Strategy, design, engineering, AI and cloud — the complete capability
            stack to build, launch and grow software that performs. One partner for
            every stage of your product.
          </motion.p>

          <motion.div variants={rise} className="mt-9 flex flex-wrap items-center justify-center gap-4">
            <AnimatedButton href="/contact">Start a project</AnimatedButton>

            <button
              onClick={scrollToCatalog}
              className="group inline-flex items-center gap-3 rounded-full border border-border bg-surface/50 py-1.5 pl-2 pr-5 text-sm font-semibold text-foreground backdrop-blur transition-colors duration-300 hover:border-primary/50"
            >
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground">
                <ChevronDown className="h-4 w-4 animate-bounce" />
              </span>
              Explore success stories
            </button>
          </motion.div>
        </motion.div>

        {/* Stats strip */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.4 }}
          className="mx-auto mt-16 grid max-w-5xl grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-4"
        >
          {STATS.map((s) => (
            <motion.div key={s.label} variants={rise} className="bg-surface/60 px-6 py-6 text-center backdrop-blur">
              <div className="font-heading text-3xl font-bold text-primary sm:text-4xl">{s.value}</div>
              <div className="mt-1 text-xs uppercase tracking-wider text-muted-foreground">{s.label}</div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}