"use client";

import { motion } from "framer-motion";
import CountUp from "react-countup";
import { useInView } from "react-intersection-observer";
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * "Why Cerkel" home section — achievements & scale. Editorial header, an
 * annual-report style stats band with scroll-triggered animated counters,
 * and four differentiators. Brand-strict: Google Sans everywhere,
 * orange/gold tokens.
 */
// Image-backed stat cards. Swap the images in /public/images anytime.
const STATS = [
  {
    value: 150,
    suffix: "+",
    label: ["Projects", "delivered"],
    sub: "shipped across game, data & AI, web and media work",
    image: "/images/opt/HeroBanner1.webp",
  },
  {
    value: 98,
    suffix: "%",
    label: ["Client", "retention"],
    sub: "partners who come back to build the next thing with us",
    image: "/images/opt/HeroBanner2.webp",
  },
  {
    value: 40,
    suffix: "+",
    label: ["Technology", "specialists"],
    sub: "senior engineers and designers, no hand-offs to juniors",
    image: "/images/opt/HeroBanner3.png",
  },
  {
    value: 12,
    suffix: "+",
    label: ["Industries", "served"],
    sub: "from gaming and media to retail, education and startups",
    image: "/images/opt/Pillar1.webp",
  },
];

const HEAD_WORDS = ["Built", "to", "deliver."];

/* What sets us apart — the four pillars behind the work. */
const DIFFERENTIATORS = [
  { no: "01", title: "Innovation", desc: "We bring the latest in AI, engineering and design to every build — tech that moves your metrics, not buzzwords." },
  { no: "02", title: "Creativity", desc: "Strategy meets craft. From games to brand campaigns, we make work that stands out and gets remembered." },
  { no: "03", title: "Data-Driven", desc: "Every decision is grounded in data and measured against outcomes, so you always know what's working." },
  { no: "04", title: "Partnership", desc: "We work as an embedded team that owns outcomes with you — senior, transparent and invested for the long run." },
];

const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };

const word = {
  hidden: { yPercent: 120 },
  show: { yPercent: 0, transition: { duration: 0.7, ease: [0.21, 0.47, 0.32, 0.98] } },
};

const rise = {
  hidden: { opacity: 0, y: 40 },
  show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: [0.21, 0.47, 0.32, 0.98] } },
};

export default function WhyCerkel() {
  // Start the counters once the stats band scrolls into view.
  const { ref: statsRef, inView: statsInView } = useInView({
    triggerOnce: true,
    threshold: 0.35,
  });

  return (
    <section className="relative overflow-hidden bg-background py-14 text-foreground md:py-16">
      {/* ambient glow + grid texture */}
      <div className="pointer-events-none absolute -right-40 top-1/3 h-[30rem] w-[30rem] rounded-full bg-primary/10 blur-[150px]" />
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgb(var(--foreground)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--foreground)) 1px, transparent 1px)",
          backgroundSize: "48px 48px",
          maskImage: "radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 100%)",
        }}
      />

      <div className="container relative">
        {/* Editorial header */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          className="grid gap-6 lg:grid-cols-[3fr_2fr] lg:items-end lg:gap-12"
        >
          <div>
            <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" />
              Why Cerkel
            </motion.span>

            <h2 className="mt-5 font-heading text-3xl font-bold leading-[1.12] tracking-tight sm:text-4xl md:text-5xl">
              {HEAD_WORDS.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"
                >
                  Trusted to scale.
                </motion.span>
              </span>
            </h2>
          </div>

          <motion.div variants={rise} className="lg:pb-1.5">
            <p className="max-w-md text-base leading-relaxed text-muted-foreground">
              The numbers behind the work — and the way of working that earns them,
              project after project.
            </p>
            <div className="mt-6">
              <AnimatedButton href="/about" size="sm">
                More about us
              </AnimatedButton>
            </div>
          </motion.div>
        </motion.div>

        {/* Stats — image-backed stat cards */}
        <motion.div
          ref={statsRef}
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"
        >
          {STATS.map(({ value, suffix, label, sub, image }) => (
            <motion.div
              key={label[0]}
              variants={rise}
              className="group relative flex flex-col overflow-hidden rounded-3xl border border-border bg-surface/70 transition-all duration-300 hover:-translate-y-1.5 hover:border-primary/40 hover:shadow-2xl hover:shadow-primary/10"
            >
              {/* top accent line */}
              <span className="pointer-events-none absolute inset-x-0 top-0 z-10 h-px bg-gradient-to-r from-transparent via-primary/70 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

              {/* Number + label + copy */}
              <div className="p-8 pb-7 sm:p-9 sm:pb-7">
                <div className="flex items-start gap-4">
                  <p className="font-heading text-6xl font-bold leading-none tracking-tight xl:text-7xl">
                    {statsInView ? <CountUp end={value} duration={2.2} /> : <span>0</span>}
                    <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
                      {suffix}
                    </span>
                  </p>
                  <p className="pt-1.5 font-heading text-sm font-semibold uppercase leading-snug tracking-wider text-foreground">
                    {label[0]}
                    <br />
                    {label[1]}
                  </p>
                </div>
                <p className="mt-4 max-w-md text-base leading-relaxed text-muted-foreground">{sub}</p>
              </div>

              {/* Image — fills the lower half */}
              <div className="relative mt-auto h-64 overflow-hidden sm:h-80">
                <span
                  className="absolute inset-0 bg-cover bg-center transition-transform duration-700 ease-out group-hover:scale-110"
                  style={{ backgroundImage: `url(${image})` }}
                />
                {/* blend into the card */}
                <span className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-surface to-transparent" />
                <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/30 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
              </div>
            </motion.div>
          ))}
        </motion.div>

        {/* What sets us apart — four pillars */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          className="mt-16"
        >
          <motion.h3 variants={rise} className="font-heading text-2xl font-bold tracking-tight sm:text-3xl">
            What sets us apart.
          </motion.h3>
          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {DIFFERENTIATORS.map(({ no, title, desc }) => (
              <motion.div
                key={title}
                variants={rise}
                className="group rounded-2xl border border-border bg-surface/60 p-6 transition-colors duration-300 hover:border-primary/40"
              >
                <span className="font-heading text-sm font-semibold text-primary">{no}</span>
                <h4 className="mt-2 font-heading text-lg font-semibold">{title}</h4>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{desc}</p>
              </motion.div>
            ))}
          </div>
        </motion.div>

      </div>
    </section>
  );
}