"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { valueProps } from "@/lib/content";
import { SectionHeading, Reveal, CountUp } from "@/components/ui-stratops/reveal";

export function WhyStratopsSection() {
  return (
    <section
      id="why"
      className="relative overflow-hidden border-t border-border/60 py-20 sm:py-28 lg:py-32"
    >
      {/* Soft accent backdrop */}
      <div
        className="pointer-events-none absolute inset-0 opacity-50"
        style={{
          background:
            "radial-gradient(50% 40% at 80% 30%, oklch(0.30 0.10 55 / 0.18) 0%, transparent 70%)",
        }}
      />
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Why StratOps"
          title={
            <>
              The partner behind{" "}
              <span className="text-brand italic">
                decisive organisations.
              </span>
            </>
          }
          description="Large firms sell you a brand and hand you a graduate. Boutiques over-promise and under-resource. StratOps was built to close that gap — founder-led, compliance-strong, and obsessively practical."
          className="mb-14"
        />

        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {valueProps.map((vp, i) => (
            <Reveal key={vp.title} delay={i * 0.08}>
              <div className="group relative h-full overflow-hidden rounded-2xl border border-border/60 bg-card p-6 transition-colors hover:border-brand/40">
                <span className="font-mono-num text-[10px] uppercase tracking-[0.24em] text-muted-foreground">
                  0{i + 1}
                </span>
                <h3 className="mt-3 font-display text-xl font-semibold text-foreground">
                  {vp.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {vp.description}
                </p>
                <span
                  className="pointer-events-none absolute bottom-0 left-0 h-0.5 w-0 bg-brand transition-all duration-500 group-hover:w-full"
                />
              </div>
            </Reveal>
          ))}
        </div>

        {/* Live engagement stats — counters */}
        <Reveal delay={0.1}>
          <div className="mt-16 grid grid-cols-2 gap-6 rounded-2xl border border-border/60 bg-gradient-to-br from-card/80 to-background/40 p-8 sm:p-12 lg:grid-cols-4">
            {[
              { value: 6, suffix: "", label: "Integrated service lines", color: "text-gold", glow: "oklch(0.82 0.08 70 / 0.28)" },
              { value: 10, suffix: "", label: "Sectors served", color: "text-iris", glow: "oklch(0.65 0.18 285 / 0.28)" },
              { value: 2, suffix: "", label: "Founders leading every engagement", color: "text-gold", glow: "oklch(0.82 0.08 70 / 0.28)" },
              { value: 100, suffix: "%", label: "Founder-owned, family-trust held", color: "text-iris", glow: "oklch(0.65 0.18 285 / 0.28)" },
            ].map((stat, i) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-50px" }}
                transition={{ duration: 0.6, delay: i * 0.08, ease: [0.16, 1, 0.3, 1] }}
                className="flex flex-col gap-1"
              >
                <span
                  className={`font-display text-[clamp(2.2rem,3.6vw,3rem)] font-semibold leading-none ${stat.color}`}
                  style={{
                    textShadow: `0 0 24px ${stat.glow}, 0 0 48px ${stat.glow.replace(/[\d.]+\)$/, "0.10)")}`,
                  }}
                >
                  <CountUp value={stat.value} suffix={stat.suffix} />
                </span>
                <span className="text-xs leading-relaxed text-muted-foreground sm:text-sm">
                  {stat.label}
                </span>
              </motion.div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}