"use client";

import { useState } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { ArrowRight, Refresh, Code, Sparkles, Cloud } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * Home capabilities section — expanding horizontal accordion (desktop).
 * Four tall panels sit side by side; the active one grows wide and reveals
 * its content while the rest collapse into slim rails with vertical titles.
 * Hover (or focus) a panel to expand it. On mobile it falls back to a
 * simple stacked list. Brand-strict: Google Sans everywhere, orange/gold
 * tokens.
 */
// Panel background images live in /public/images. Pillar3/Pillar4 are
// referenced already — they'll show up automatically once uploaded.
const PILLARS = [
  {
    no: "01",
    Icon: Refresh,
    title: "Technology Consulting",
    desc: "We review where you are, plan where you're headed, and help your team make technology calls that actually pay off.",
    href: "/services/it-consulting",
    image: "/images/opt/Pillar1.webp",
  },
  {
    no: "02",
    Icon: Code,
    title: "Product Engineering",
    desc: "From first prototype to production — dependable web, mobile and platform software your users enjoy.",
    href: "/services/software-development",
    image: "/images/opt/Pillar2.webp",
  },
  {
    no: "03",
    Icon: Sparkles,
    title: "AI & Data Intelligence",
    desc: "AI, machine learning and analytics that automate the routine and surface insight you can act on.",
    href: "/services/ai-development",
    image: "/images/Pillar3.png",
  },
  {
    no: "04",
    Icon: Cloud,
    title: "Cloud & Cybersecurity",
    desc: "Secure, cloud-native foundations and automated delivery that keep you fast, available and protected.",
    href: "/services/cybersecurity",
    image: "/images/Pillar4.png",
  },
];

const HEAD_WORDS = ["We", "help", "you", "build,", "launch", "and"];

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: 44 },
  show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: [0.21, 0.47, 0.32, 0.98] } },
};

export default function ServicePillars() {
  const [active, setActive] = useState(1);

  return (
    <section className="relative overflow-hidden bg-background pb-12 pt-12 text-foreground md:pb-14 md:pt-16">
      {/* ambient brand glow */}
      <div className="pointer-events-none absolute left-1/2 top-0 h-[28rem] w-[44rem] -translate-x-1/2 rounded-full bg-primary/10 blur-[150px]" />

      <div className="container relative">
        {/* Header */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          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" />
            What we do
          </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"
              >
                scale with confidence.
              </motion.span>
            </span>
          </h2>
        </motion.div>

        {/* Desktop — expanding accordion */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.25 }}
          className="mt-14 hidden h-[26rem] gap-4 md:flex"
        >
          {PILLARS.map(({ no, Icon, title, desc, href, image }, i) => {
            const isActive = i === active;
            return (
              <Link
                key={no}
                href={href}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                style={{
                  flexGrow: isActive ? 2.8 : 1,
                  transition: "flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
                }}
                className={
                  "group relative flex min-w-0 basis-0 flex-col justify-end overflow-hidden rounded-2xl border bg-surface p-7 " +
                  (isActive
                    ? "border-primary/50 shadow-2xl shadow-primary/10"
                    : "border-border hover:border-primary/30")
                }
              >
                {/* background image + legibility overlay */}
                <span aria-hidden="true" className="absolute inset-0">
                  <span
                    className={
                      "absolute inset-0 bg-cover bg-center transition-all duration-700 " +
                      (isActive ? "scale-100 opacity-100" : "scale-110 opacity-20")
                    }
                    style={{ backgroundImage: `url(${image})` }}
                  />
                  <span
                    className={
                      "absolute inset-0 transition-opacity duration-500 " +
                      (isActive
                        ? "bg-gradient-to-r from-background/95 via-background/60 to-background/20"
                        : "bg-background/60")
                    }
                  />
                </span>

                {/* index watermark */}
                <span
                  className={
                    "pointer-events-none absolute right-5 top-4 font-heading text-6xl font-bold transition-colors duration-500 " +
                    (isActive ? "text-primary/15" : "text-foreground/[0.05]")
                  }
                >
                  {no}
                </span>

                {/* icon — pinned top-left */}
                <span
                  className={
                    "absolute left-7 top-7 flex h-[52px] w-[52px] items-center justify-center rounded-xl border transition-all duration-500 " +
                    (isActive
                      ? "border-primary/40 bg-primary text-primary-foreground shadow-lg shadow-primary/40"
                      : "border-primary/25 bg-primary/10 text-primary")
                  }
                >
                  <Icon className="h-6 w-6" />
                </span>

                {/* collapsed — vertical title */}
                <span
                  className={
                    "absolute bottom-7 left-1/2 -translate-x-1/2 whitespace-nowrap font-heading text-lg font-semibold text-muted-foreground transition-opacity duration-300 " +
                    (isActive ? "opacity-0" : "opacity-100 delay-200")
                  }
                  style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
                >
                  {title}
                </span>

                {/* expanded content */}
                <div
                  className={
                    "relative w-[26rem] max-w-full transition-opacity duration-300 " +
                    (isActive ? "opacity-100 delay-300" : "opacity-0")
                  }
                >
                  <span className="font-heading text-xs font-semibold tracking-wider text-primary">
                    {no}
                  </span>
                  <h3 className="mt-1.5 font-heading text-2xl font-semibold leading-snug">
                    {title}
                  </h3>
                  <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{desc}</p>
                  <span className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                    Learn more
                    <span className="flex h-8 w-8 items-center justify-center rounded-full border border-primary/40 transition-transform duration-300 group-hover:-rotate-45">
                      <ArrowRight className="h-3.5 w-3.5" />
                    </span>
                  </span>
                </div>
              </Link>
            );
          })}
        </motion.div>

        {/* Mobile — stacked cards */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          className="mt-12 space-y-4 md:hidden"
        >
          {PILLARS.map(({ no, Icon, title, desc, href }) => (
            <motion.div key={no} variants={rise}>
              <Link
                href={href}
                className="group flex gap-5 rounded-2xl border border-border bg-surface/70 p-6"
              >
                <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-primary/25 bg-primary/10 text-primary">
                  <Icon className="h-5 w-5" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="font-heading text-xs font-semibold tracking-wider text-primary">
                    {no}
                  </span>
                  <h3 className="mt-1 font-heading text-lg font-semibold leading-snug">{title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{desc}</p>
                </span>
              </Link>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true }}
          className="mt-12 flex justify-center"
        >
          <AnimatedButton href="/services" size="sm">
            Explore all services
          </AnimatedButton>
        </motion.div>
      </div>
    </section>
  );
}