import { useEffect, useMemo, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { AnimatePresence, motion, useReducedMotion, useScroll, useSpring, useTransform } from "framer-motion";
import { ArrowUpRight, ArrowRight, Server, Layers, GitMerge, ShieldCheck, Compass, RefreshCw, Target, Clock3, ChevronDown, Download, BadgeCheck } from "lucide-react";
import SEO from "../lib/seo";
import { ORG_JSONLD, WHY_AVIOKAN, INDUSTRIES, APPROACH, CERTIFICATIONS, STATS } from "../data/site";
import SolutionFinder from "../components/SolutionFinder";
import { SOLUTIONS } from "../data/solutions";
import { fetchBlog, fetchPartners } from "../lib/api";
import Reveal from "../components/Reveal";
import Marquee from "../components/Marquee";
import BlogCard from "../components/BlogCard";
import { PrimaryButton, GhostButton } from "../components/CTASection";
import OpsConsole from "../components/OpsConsole";
import LogoMarquee from "../components/LogoMarquee";
import CapabilityIndex from "../components/CapabilityIndex";
import PlatformShowcase from "../components/PlatformShowcase";
import CircuitCanvas from "../components/CircuitCanvas";
import CharHeadline from "../components/CharHeadline";
import RotatingBadge from "../components/RotatingBadge";
import TiltCard from "../components/TiltCard";
import ScrollWords from "../components/ScrollWords";
import AnimatedCounter from "../components/AnimatedCounter";
import OemLogo from "../components/OemLogo";
import type { BlogPost, Partner } from "../types";

const WHY_ICONS = { layers: Layers, "git-merge": GitMerge, shield: ShieldCheck, compass: Compass, "refresh-cw": RefreshCw, target: Target };
const HERO_IMG = "/images/home/hero-operations.jpg";
const DE_IMG = "/images/home/digital-engineering.jpg";
const RACKS_IMG = "/images/home/datacentre-racks.jpg";
const TEAM_IMG = "/images/home/team-collab.jpg";

const scrollToPillars = (e) => {
  e.preventDefault();
  document.getElementById("pillars")?.scrollIntoView({ behavior: "smooth" });
};

// Major OEMs featured first in the marquee, in showcase order; remaining partners fill after.
const MAJOR_OEM_NAMES = ["hp", "hpe", "dell", "lenovo", "ibm", "cisco", "aruba", "arista", "ruckus", "fortinet", "palo alto", "paloalto", "sophos", "trellix", "forcepoint", "kaspersky", "seqrite", "aws", "amazon web services", "microsoft", "google", "veeam"];

const SECTOR_ICON = (name: string) =>
  `/images/icons/sectors/${name === "Banking & Financial Services" ? "bfsi" : name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.svg`;

function useCuratedPartners(partners: Partner[]): Partner[] {
  return useMemo(() => {
    const seen = new Set<Partner>();
    const featured: Partner[] = [];
    for (const n of MAJOR_OEM_NAMES) {
      const hit = partners.find((p) => !seen.has(p) && p.name.toLowerCase().includes(n));
      if (hit) {
        seen.add(hit);
        featured.push(hit);
      }
    }
    const rest = partners.filter((p) => !seen.has(p));
    return [...featured, ...rest.slice(0, Math.max(0, 26 - featured.length))];
  }, [partners]);
}

export default function Home() {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const [partners, setPartners] = useState<Partner[]>([]);
  const curatedPartners = useCuratedPartners(partners);
  const [ecoCat, setEcoCat] = useState("All");
  const reduce = useReducedMotion();

  useEffect(() => {
    fetchBlog({ limit: 3 }).then((d) => setPosts(d.posts || [])).catch(() => {});
    fetchPartners({ limit: 200, sort: "az" }).then((d) => setPartners(d.partners || [])).catch(() => {});
  }, []);

  /* Scroll-linked gestures: hero parallax, who-we-are image drift, approach spine draw. */
  const heroRef = useRef<HTMLElement>(null);
  const { scrollYProgress: heroProg } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(heroProg, [0, 1], ["0%", "22%"]);

  const whoRef = useRef<HTMLElement>(null);
  const { scrollYProgress: whoProg } = useScroll({ target: whoRef, offset: ["start end", "end start"] });
  const whoY = useTransform(whoProg, [0, 1], ["-7%", "7%"]);

  const apprRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress: apprProg } = useScroll({ target: apprRef, offset: ["start 0.85", "end 0.55"] });
  const apprFill = useSpring(apprProg, { stiffness: 90, damping: 26 });
  const apprHead = useTransform(apprFill, [0, 1], ["0%", "100%"]);

  /* Ecosystem filter: All + top categories actually present in the curated set (max 7 chips). */
  const ecoCats = useMemo(() => {
    const counts = new Map<string, number>();
    for (const p of curatedPartners) counts.set(p.category || "Other", (counts.get(p.category || "Other") || 0) + 1);
    const top = [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6).map(([c]) => c);
    return ["All", ...top];
  }, [curatedPartners]);
  const ecoTiles = useMemo(
    () => (ecoCat === "All" ? curatedPartners.slice(0, 16) : curatedPartners.filter((p) => (p.category || "Other") === ecoCat)),
    [curatedPartners, ecoCat]
  );

  return (
    <div data-testid="home-page" className="bg-white">
      <SEO title="" description="Aviokan Technologies designs, integrates and manages enterprise technology across infrastructure, networking, cybersecurity, cloud, collaboration, IoT and digital engineering. IT system integrator in Noida, India." path="/" jsonLd={ORG_JSONLD} />

      {/* ============ DARK OVERTURE — hero ============ */}

      {/* HERO — cinematic server-hall plate with parallax + kinetic type + live NOC console */}
      <section ref={heroRef} className="relative min-h-screen bg-[#14151A] flex items-center overflow-hidden pt-28 pb-20" data-testid="hero-section">
        <motion.div className="absolute inset-0" style={{ y: reduce ? 0 : heroY }} aria-hidden="true">
          <motion.img
            src={RACKS_IMG}
            alt=""
            initial={reduce ? false : { scale: 1.12 }}
            animate={{ scale: 1 }}
            transition={{ duration: 2.4, ease: [0.22, 1, 0.36, 1] }}
            className="h-full w-full object-cover opacity-[0.34]"
          />
        </motion.div>
        <div className="absolute inset-0 bg-gradient-to-b from-[#14151A]/88 via-[#14151A]/72 to-[#14151A]" />
        <CircuitCanvas className="absolute inset-0 h-full w-full opacity-80" />
        <div className="absolute inset-0 bg-grid-dark opacity-60 pointer-events-none" />
        <div className="aurora" aria-hidden="true"><span /><span /><span /></div>
        <div className="grain" aria-hidden="true" />
        <div className="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
          <div className="hero-orbit left-[-18%] top-[16%] w-[72vw] h-[26vw] rotate-[-16deg]" />
          <div className="hero-orbit right-[-22%] bottom-[4%] w-[78vw] h-[30vw] rotate-[-10deg]" style={{ borderColor: "rgba(255,91,31,0.14)" }} />
        </div>
        <div className="absolute top-1/4 -left-40 h-[480px] w-[480px] rounded-full bg-cy/15 blur-[140px] pointer-events-none" />
        <div className="absolute bottom-0 right-0 h-96 w-96 rounded-full bg-ember/15 blur-[140px] pointer-events-none" />

        <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative grid lg:grid-cols-[1.05fr_0.95fr] gap-14 lg:gap-10 items-center w-full">
          <div>
            <p className="text-xs font-tech tracking-[0.4em] text-cy mb-8 flex items-center gap-3" data-testid="hero-eyebrow">
              <span className="h-2 w-2 rounded-full bg-ember animate-pulse inline-block" />
              ENTERPRISE TECHNOLOGY & SYSTEM INTEGRATION
            </p>
            <CharHeadline
              lines={[
                { text: "Integrate.", cls: "text-white" },
                { text: "Innovate.", cls: "text-cy" },
                { text: "Transform.", cls: "text-ember" },
              ]}
              className="font-display font-semibold leading-[0.94] tracking-[-0.02em] text-[clamp(3.2rem,8.6vw,7.6rem)]"
              delay={0.15}
            />
            <p className="mt-8 text-lg md:text-xl font-bold text-white max-w-xl" data-testid="hero-subheadline">
              Integrated technology solutions for secure, connected and future-ready enterprises.
            </p>
            <p className="mt-4 text-base text-white/65 leading-relaxed max-w-xl" data-testid="hero-paragraph">
              Aviokan Technologies designs, integrates and manages enterprise technology across infrastructure, networking, cybersecurity, cloud, collaboration, IoT and digital engineering.
            </p>
            <div className="mt-10 flex flex-wrap gap-4">
              <PrimaryButton to="/contact" testId="hero-talk-to-expert-cta">Talk to an Expert <ArrowUpRight size={16} /></PrimaryButton>
              <GhostButton href="#pillars" testId="hero-explore-solutions-cta" className="!border-cy/50 !text-cy hover:!bg-cy/10">Explore Solutions</GhostButton>
              <GhostButton href="/brand/aviokan-company-profile.pdf" testId="hero-download-profile" className="!border-white/25 !text-white/80 hover:!bg-white/10">
                <Download size={16} /> Company Profile
              </GhostButton>
            </div>
          </div>
          <div className="relative w-full max-w-[560px] lg:max-w-none mx-auto lg:mx-0 mt-14 lg:mt-0">
            <TiltCard>
              <OpsConsole />
            </TiltCard>
          </div>
        </div>

        {/* Edge details — coordinates + orbital badge */}
        <p className="hidden lg:block absolute left-10 bottom-10 font-tech text-[10px] tracking-[0.24em] text-white/30" aria-hidden="true">
          28.6139° N — 77.2090° E // NOIDA · INDIA
        </p>
        <RotatingBadge className="hidden md:block absolute right-[5%] top-[15%] z-10" />

        <a href="#pillars" onClick={scrollToPillars} className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/40 hover:text-cy transition-colors md:left-[42%]" aria-label="Scroll to solution pillars" data-testid="hero-scroll-hint">
          <ChevronDown size={22} className="animate-bounce" />
        </a>
      </section>

      {/* ============ LIGHT BODY — proof, story & method ============ */}

      {/* OEM LOGO BAND (light) */}
      <LogoMarquee partners={curatedPartners} />

      {/* OFFICIAL STATS — brand-tinted band: gradient rule, glow fields, count-up + underline draw */}
      <section className="relative bg-gradient-to-b from-[#F6F8FA] to-white border-b border-[#E2E7EF] overflow-hidden" data-testid="stats-band">
        <div className="h-[3px] w-full bg-gradient-to-r from-ember via-cy to-cydeep opacity-80" aria-hidden="true" />
        <div className="absolute -top-20 left-[12%] h-56 w-56 rounded-full bg-cy/20 blur-[100px] pointer-events-none" aria-hidden="true" />
        <div className="absolute -bottom-24 right-[6%] h-56 w-56 rounded-full bg-ember/10 blur-[100px] pointer-events-none" aria-hidden="true" />
        <div className="relative mx-auto max-w-[1320px] px-5 md:px-10 py-16 md:py-20">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-[#E2E7EF]">
            {STATS.map((s, i) => {
              const slug = s.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
              return (
                <Reveal key={s.label} delay={i * 0.08}>
                  <div className="group relative flex flex-col items-center justify-center px-6 py-10 text-center" data-testid={`stat-${slug}`}>
                    <span className="flex items-baseline justify-center gap-1 mb-4">
                      <AnimatedCounter
                        to={parseInt(s.value, 10)}
                        suffix={s.value.includes("+") ? "+" : ""}
                        suffixClassName="text-[44px] lg:text-[60px] font-bold text-ember leading-none"
                        className="font-display text-[56px] lg:text-[72px] font-bold text-[#14151A] tracking-tighter leading-none motion-safe:transition-colors duration-300 group-hover:text-cydeep"
                        testId={`counter-${slug}`}
                      />
                    </span>
                    <motion.span
                      {...(reduce ? {} : { initial: { scaleX: 0 }, whileInView: { scaleX: 1 }, viewport: { once: true }, transition: { duration: 0.7, delay: 0.35 + i * 0.08, ease: [0.22, 1, 0.36, 1] } })}
                      className="h-[2px] w-12 origin-center bg-gradient-to-r from-cydeep to-cy"
                      aria-hidden="true"
                    />
                    <p className="mt-4 text-[13px] font-tech tracking-[0.12em] text-mist uppercase font-medium max-w-[220px]">{s.label}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* WHO WE ARE — light, drifting image */}
      <section ref={whoRef} className="relative bg-[#F6F8FA] py-24 md:py-32 overflow-hidden" data-testid="who-we-are">
        <div className="absolute top-0 right-0 h-[420px] w-[420px] rounded-full bg-cy/15 blur-[140px] pointer-events-none" aria-hidden="true" />
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative grid lg:grid-cols-2 gap-14 lg:gap-20 items-center">
          <Reveal>
            <p className="text-xs font-tech tracking-[0.35em] text-cydeep mb-6 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />WHO WE ARE</p>
            <ScrollWords
              text="We bring order to complex technology — integrated, secured and built to scale."
              accentWords={["order"]}
              className="font-display font-semibold text-4xl md:text-5xl text-[#14151A] leading-[1.08] tracking-tight"
            />
            <p className="mt-7 text-base md:text-lg text-mist/75 leading-relaxed">
              Aviokan Technologies Private Limited is an IT system integrator, technology solutions provider and digital engineering company. We operate across IT infrastructure, networking, cybersecurity, cloud, digital workplace, collaboration, software, data, AI/automation and managed services — bringing multiple technology domains together into integrated, business-ready solutions.
            </p>
            <p className="mt-5 text-base text-mist/60 leading-relaxed">
              We are a technology partner, not a product reseller: we understand your requirement, design the architecture, integrate the right technologies, deploy, secure, manage and continuously optimize your environment.
            </p>
            <div className="mt-9">
              <PrimaryButton to="/about" testId="discover-aviokan-cta">Discover Aviokan <ArrowRight size={15} /></PrimaryButton>
            </div>
          </Reveal>
          <Reveal delay={0.15} className="relative">
            <div className="border border-[#E2E7EF] bg-white p-2.5 shadow-[0_30px_70px_-35px_rgba(10,31,68,0.3)]">
              <div className="overflow-hidden">
                <motion.img
                  src={HERO_IMG}
                  alt="Enterprise technology engineers working in a modern operations environment"
                  loading="lazy"
                  style={{ y: reduce ? 0 : whoY }}
                  className="w-full aspect-[4/3] object-cover scale-[1.16]"
                />
              </div>
            </div>
            <div className="absolute -bottom-6 -left-6 hidden md:flex items-center gap-4 bg-[#0A1F44] border border-cy/40 px-6 py-5 shadow-[0_18px_50px_-12px_rgba(10,31,68,0.45)]">
              <Server size={26} className="text-cy" strokeWidth={1.5} />
              <div>
                <p className="font-display font-black text-white text-sm">System Integration</p>
                <p className="text-[11px] font-tech tracking-[0.2em] text-white/45 mt-0.5">AT THE CORE</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CAPABILITY INDEX (01–07, hover-reveal) + TABBED PLATFORM SHOWCASE */}
      <CapabilityIndex />
      <PlatformShowcase />

      {/* DIGITAL ENGINEERING TEASER */}
      <section className="relative bg-white py-24 md:py-32 overflow-hidden" data-testid="digital-engineering-teaser">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative grid lg:grid-cols-2 gap-14 items-center">
          <Reveal>
            <p className="text-xs font-tech tracking-[0.35em] text-cydeep mb-6">DIGITAL ENGINEERING</p>
            <h2 className="font-display font-black text-4xl md:text-6xl text-[#14151A] leading-[1.0] tracking-tight">
              Build. Integrate.<br />Automate. Scale.
            </h2>
            <p className="mt-6 text-base text-mist/70 leading-relaxed max-w-lg">
              A dedicated engineering practice: custom software, web and mobile platforms, SaaS, APIs, DevOps and DevSecOps, AI/ML, RPA, data engineering and analytics — delivered with enterprise discipline.
            </p>
            <div className="mt-8 flex flex-wrap gap-2">
              {["Software Development", "SaaS", "API & Integration", "DevSecOps", "AI/ML", "Data Engineering", "Analytics & BI"].map((t) => (
                <span key={t} className="text-[11px] font-tech border border-cydeep/30 text-cydeep px-3 py-1.5 bg-white">{t}</span>
              ))}
            </div>
            <div className="mt-10"><PrimaryButton to="/digital-engineering" testId="digital-engineering-cta">Explore Digital Engineering <ArrowRight size={15} /></PrimaryButton></div>
          </Reveal>
          <Reveal delay={0.15} className="relative">
            <div className="border border-[#E2E7EF] bg-white p-2.5 shadow-[0_30px_70px_-35px_rgba(10,31,68,0.3)]">
              <img src={DE_IMG} alt="Engineer configuring enterprise data centre infrastructure" loading="lazy" className="w-full aspect-[4/3] object-cover" />
            </div>
            <div className="absolute top-6 -right-4 hidden md:block bg-[#0A1F44] border border-ember/40 px-5 py-4 shadow-[0_18px_50px_-12px_rgba(10,31,68,0.45)]">
              <p className="text-[10px] font-tech tracking-[0.25em] text-ember">ENGINEERING FIRST</p>
              <p className="text-sm text-white font-bold mt-1">Secure by design</p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* WHY AVIOKAN — sticky intro + dense bento grid */}
      <section className="bg-[#F6F8FA] py-24 md:py-32 border-y border-[#E2E7EF]" data-testid="why-aviokan">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 grid lg:grid-cols-[0.85fr_1.15fr] gap-14">
          <Reveal className="lg:sticky lg:top-32 self-start">
            <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-6 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />WHY AVIOKAN</p>
            <ScrollWords
              text="We integrate technology around business outcomes."
              accentWords={["outcomes."]}
              className="font-display font-semibold text-4xl md:text-5xl text-[#14151A] leading-[1.08] tracking-tight"
            />
            <p className="mt-6 text-base text-mist/70 leading-relaxed max-w-md">
              Aviokan is not simply selling products. We help customers understand, architect, integrate, deploy, secure, operate and transform their technology environment.
            </p>
            <div className="mt-9"><GhostButton to="/about/mission-vision">Our Mission & Vision</GhostButton></div>
          </Reveal>
          <div className="grid sm:grid-cols-2 gap-3.5">
            {WHY_AVIOKAN.map((w, i) => {
              const Icon = WHY_ICONS[w.icon];
              const wide = i === 0 || i === WHY_AVIOKAN.length - 1;
              return (
                <Reveal key={w.title} delay={i * 0.05} className={wide ? "sm:col-span-2" : ""}>
                  <div
                    className={`h-full border border-[#E2E7EF] bg-white group hover:border-cy/50 hover:shadow-[0_18px_44px_-18px_rgba(10,31,68,0.18)] transition-all duration-300 ${wide ? "p-7" : "p-6"}`}
                    data-testid={`why-aviokan-${i}`}
                  >
                    {i === 0 ? (
                      <div className="md:flex items-stretch gap-7">
                        <div className="flex-1 min-w-0">
                          <CardHead Icon={Icon} index={i} />
                          <h3 className="font-display font-bold text-[#101828] mt-5 text-xl md:text-2xl">{w.title}</h3>
                          <p className="text-sm text-mist/65 leading-relaxed mt-2.5">{w.desc}</p>
                        </div>
                        <div className="hidden md:block w-52 shrink-0 self-stretch border border-[#E2E7EF] overflow-hidden">
                          <img src={TEAM_IMG} alt="Aviokan engineering team collaborating on an integration project" loading="lazy" className="h-full w-full object-cover" />
                        </div>
                      </div>
                    ) : (
                      <>
                        <CardHead Icon={Icon} index={i} />
                        <h3 className={`font-display font-bold text-[#101828] mt-5 ${wide ? "text-xl md:text-2xl" : "text-lg"}`}>{w.title}</h3>
                        <p className="text-sm text-mist/65 leading-relaxed mt-2.5">{w.desc}</p>
                      </>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* INDUSTRIES — structured sector grid with real icons */}
      <section className="bg-white py-24 md:py-32" data-testid="industries-section">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10">
          <Reveal>
            <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
              <div>
                <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-5 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />INDUSTRIES</p>
                <h2 className="font-display font-black text-4xl md:text-5xl text-[#101828] leading-tight tracking-tight max-w-xl">
                  Solutions shaped around your industry.
                </h2>
              </div>
              <GhostButton to="/clients">All Industries</GhostButton>
            </div>
          </Reveal>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" data-testid="industries-table">
            {INDUSTRIES.map((ind, i) => (
              <Reveal key={ind.name} delay={Math.min(i * 0.04, 0.3)}>
                <Link
                  to="/clients"
                  className="group relative h-full flex flex-col justify-between gap-6 border border-[#E2E7EF] bg-white p-5 hover:border-cydeep/60 hover:shadow-[0_18px_44px_-18px_rgba(10,31,68,0.18)] hover:-translate-y-0.5 transition-all duration-300"
                  data-testid={`industry-row-${i}`}
                >
                  <span className="absolute left-0 top-0 bottom-0 w-[2px] bg-cydeep/0 group-hover:bg-cydeep transition-colors duration-300" aria-hidden="true" />
                  <div className="flex items-start justify-between">
                    <span className="h-11 w-11 grid place-items-center border border-[#E2E7EF] bg-[#F6F8FA]">
                      <img src={SECTOR_ICON(ind.name)} alt="" aria-hidden="true" loading="lazy" className="h-6 w-6 object-contain" />
                    </span>
                    <span className="font-tech text-[10px] text-mist/40">{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <div>
                    <p className="font-display font-bold text-[15px] text-[#101828] leading-snug">{ind.name}</p>
                    <p className="text-[10px] font-tech tracking-[0.18em] text-mist/45 mt-2 flex items-center gap-1.5 uppercase">
                      {ind.pillars.length} PRACTICES
                      <ArrowUpRight size={12} className="text-mist/30 group-hover:text-ember group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300" />
                    </p>
                  </div>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CERTIFICATIONS & REGISTRATIONS — credential ledger */}
      <section className="bg-[#F6F8FA] py-24 md:py-32 border-y border-[#E2E7EF]" data-testid="certifications-section">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 grid lg:grid-cols-[0.85fr_1.15fr] gap-14 items-start">
          <Reveal className="lg:sticky lg:top-32 self-start">
            <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-6 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />CERTIFICATIONS & REGISTRATIONS</p>
            <h2 className="font-display font-black text-4xl md:text-5xl text-[#101828] leading-[1.08] tracking-tight">
              Registered, recognized — and transparent about status.
            </h2>
            <div className="mt-8 flex items-center gap-5">
              <p className="font-tech text-6xl leading-none text-[#101828]">9</p>
              <p className="text-[11px] font-tech tracking-[0.2em] text-mist/55 uppercase leading-relaxed">Credentials on record<br />verified on request</p>
            </div>
            <div className="mt-7 flex items-start gap-3 border border-ember/35 bg-white p-5">
              <Clock3 size={17} className="text-ember shrink-0 mt-0.5" aria-hidden="true" />
              <p className="text-[13px] text-mist/70 leading-relaxed">
                <span className="font-bold text-[#101828]">ISO 9001 & ISO 27001 are on our compliance roadmap</span> — planned, in progress, not yet certified. We label them honestly.
              </p>
            </div>
          </Reveal>
          <div className="border-t border-[#E2E7EF]">
            {CERTIFICATIONS.map((c, i) => (
              <Reveal key={c.name} delay={Math.min(i * 0.03, 0.24)}>
                <div
                  className={`relative flex items-center gap-4 md:gap-5 border-b border-[#E2E7EF] py-4 pr-4 md:pr-6 group hover:bg-white transition-colors duration-300 ${c.status !== "registered" ? "bg-white/70" : ""}`}
                  data-testid={`cert-card-${c.name.toLowerCase().replace(/\s+/g, "-")}`}
                >
                  <span className={`absolute left-0 top-0 bottom-0 w-[2px] ${c.status === "registered" ? "bg-cydeep/50" : "bg-ember"}`} aria-hidden="true" />
                  <span className="pl-5 md:pl-6 font-tech text-[11px] text-mist/40 w-7 shrink-0">{String(i + 1).padStart(2, "0")}</span>
                  <span className="h-11 w-11 shrink-0 grid place-items-center border border-[#E2E7EF] bg-white" aria-hidden="true">
                    <img src={c.logo} alt="" className="h-7 w-7 object-contain" loading="lazy" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="flex items-center gap-2.5 flex-wrap">
                      <span className="font-display font-bold text-[15px] md:text-base text-[#101828]">{c.name}</span>
                      {c.status === "registered" ? (
                        <span className="text-[9px] font-tech tracking-[0.16em] px-2 py-0.5 border text-[#0089A1] border-cydeep/30 bg-white">{c.type.toUpperCase()}</span>
                      ) : (
                        <span className="text-[9px] font-tech tracking-[0.16em] px-2 py-0.5 border text-ember border-ember/40 bg-white">COMPLIANCE ROADMAP</span>
                      )}
                    </span>
                    <span className="block text-xs text-mist/55 mt-1 leading-relaxed">{c.desc}</span>
                  </span>
                  <BadgeCheck size={16} className={`shrink-0 mr-2 ${c.status === "registered" ? "text-cydeep/60" : "text-ember/60"}`} aria-hidden="true" />
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* OUR APPROACH — vertical delivery timeline, spine draws as you scroll */}
      <section className="bg-white pb-24 md:pb-32" data-testid="approach-section">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 grid lg:grid-cols-[0.85fr_1.15fr] gap-14 items-start">
          <Reveal>
            <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-6 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />OUR APPROACH</p>
            <h2 className="font-display font-black text-4xl md:text-5xl text-[#101828] leading-[1.08] tracking-tight">
              From first audit to continuous advantage.
            </h2>
            <p className="mt-6 text-base text-mist/70 leading-relaxed max-w-md">
              One accountable method carries every engagement — evidence first, architecture before procurement, and optimization long after go-live.
            </p>
            <div className="mt-9"><GhostButton to="/about/approach">The Full Methodology</GhostButton></div>
          </Reveal>
          <div ref={apprRef} className="relative" data-testid="approach-timeline">
            {/* spine track + scroll-drawn fill + glowing head */}
            <span className="absolute left-[7px] top-2 bottom-2 w-px bg-[#E2E7EF]" aria-hidden="true" />
            <motion.span
              className="absolute left-[7px] top-2 bottom-2 w-px origin-top bg-gradient-to-b from-cydeep via-cydeep to-ember"
              style={{ scaleY: reduce ? 1 : apprFill }}
              aria-hidden="true"
            />
            <motion.span
              className="absolute left-[4.5px] h-2 w-2 rounded-full bg-cydeep shadow-[0_0_12px_2px_rgba(0,194,209,0.6)]"
              style={{ top: apprHead }}
              aria-hidden="true"
            />
            {APPROACH.map((a, i) => (
              <Reveal key={a.step} delay={Math.min(i * 0.05, 0.3)}>
                <div className="relative pl-10 md:pl-12 pb-8 last:pb-0" data-testid={`approach-step-${a.step.toLowerCase()}`}>
                  <span
                    className={`absolute left-0 top-1.5 h-3.5 w-3.5 rotate-45 border bg-white ${i === APPROACH.length - 1 ? "border-ember bg-ember" : "border-[#0089A1]"}`}
                    aria-hidden="true"
                  />
                  <div className="flex items-baseline gap-4">
                    <span className="font-tech text-xs text-ember">{String(i + 1).padStart(2, "0")}</span>
                    <h3 className="font-display font-bold text-xl text-[#101828]">{a.step}</h3>
                  </div>
                  <p className="text-sm text-mist/60 leading-relaxed mt-2 max-w-lg">{a.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TECHNOLOGY ECOSYSTEM — filterable OEM grid (light) */}
      <section className="bg-[#F6F8FA] py-24 md:py-32 border-y border-[#E2E7EF]" data-testid="technology-ecosystem">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10">
          <Reveal>
            <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-8">
              <div>
                <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-5 flex items-center gap-3"><span className="h-px w-10 bg-cydeep/50 inline-block" />TECHNOLOGY ECOSYSTEM</p>
                <h2 className="font-display font-black text-4xl md:text-5xl text-[#101828] leading-tight tracking-tight max-w-lg">
                  Technology we work with.
                </h2>
                <p className="text-sm text-mist/60 mt-2">140+ global OEMs across 12 categories — the ecosystem behind every Aviokan integration.</p>
              </div>
              <GhostButton to="/partners">Explore Technology Partners</GhostButton>
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <div className="flex flex-wrap gap-2 border-t border-[#E2E7EF] pt-6" role="tablist" aria-label="Filter OEMs by category" data-testid="eco-filters">
              {ecoCats.map((cat) => (
                <button
                  key={cat}
                  role="tab"
                  aria-selected={ecoCat === cat}
                  onClick={() => setEcoCat(cat)}
                  className={`text-[11px] font-tech tracking-[0.14em] uppercase px-4 py-2 border transition-colors duration-200 ${
                    ecoCat === cat ? "bg-[#0A1F44] text-white border-[#0A1F44]" : "border-[#E2E7EF] bg-white text-mist/60 hover:text-[#101828] hover:border-mist/60"
                  }`}
                  data-testid={`eco-filter-${cat.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
                >
                  {cat}
                </button>
              ))}
            </div>
          </Reveal>
          <Reveal delay={0.12}>
            <motion.div layout className="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3.5" data-testid="eco-grid">
              <AnimatePresence mode="popLayout">
                {ecoTiles.map((p) => (
                  <motion.div
                    key={p.slug}
                    layout
                    initial={{ opacity: 0, scale: 0.96 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.96 }}
                    transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
                  >
                    <Link
                      to={`/partners/${p.slug}`}
                      className="group relative h-[76px] flex items-center gap-3.5 border border-[#E2E7EF] bg-white px-4 overflow-hidden hover:border-cydeep/60 hover:-translate-y-0.5 hover:shadow-[0_18px_44px_-18px_rgba(10,31,68,0.2)] transition-all duration-300"
                      data-testid={`ecosystem-tile-${p.slug}`}
                    >
                      <span className="absolute left-0 top-0 bottom-0 w-[2px] bg-cydeep/40 group-hover:bg-ember group-hover:w-[3px] transition-all duration-300" aria-hidden="true" />
                      <span className="h-10 w-10 shrink-0 grid place-items-center bg-white border border-[#E2E7EF]" aria-hidden="true">
                        <OemLogo domain={p.domain} name={p.name} slug={p.slug} className="h-6 w-6" tileCls="h-6 w-6 text-[10px] font-tech text-[#14151A]" />
                      </span>
                      <span className="min-w-0 text-left">
                        <span className="block text-sm font-bold text-[#101828] truncate leading-tight">{p.name}</span>
                        <span className="block text-[9px] font-tech tracking-[0.16em] text-mist/50 mt-0.5">{(p.technologies || []).slice(0, 2).join(" · ").toUpperCase() || (p.category || "").toUpperCase()}</span>
                      </span>
                    </Link>
                  </motion.div>
                ))}
              </AnimatePresence>
            </motion.div>
            <p className="mt-6 text-xs text-mist/55 flex items-center gap-2">
              <BadgeCheck size={14} className="text-cydeep" /> Shown as "Technology Ecosystem". Partnership status is labeled only when verified.
            </p>
          </Reveal>
        </div>
      </section>

      <Marquee items={["Integrate. Innovate. Transform.", "Enterprise Technology", "System Integration", "Cybersecurity", "Cloud", "Digital Engineering"]} />

      {/* INSIGHTS — light, tracing-beam cards */}
      {posts.length > 0 && (
        <section className="bg-white py-24 md:py-32" data-testid="insights-section">
          <div className="mx-auto max-w-[1320px] px-5 md:px-10">
            <Reveal>
              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
                <div>
                  <p className="text-xs font-tech tracking-[0.35em] text-[#0089A1] mb-5">INSIGHTS</p>
                  <h2 className="font-display font-black text-4xl md:text-5xl text-[#101828] leading-tight tracking-tight">Technology insights.</h2>
                </div>
                <GhostButton to="/about/blog">All Articles</GhostButton>
              </div>
            </Reveal>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {posts.map((p, i) => <BlogCard key={p.slug} post={p} index={i} />)}
            </div>
          </div>
        </section>
      )}

      {/* ============ DARK FINALE — terminal + footer ============ */}

      {/* SOLUTION FINDER — interactive discovery (dark terminal accent) */}
      <SolutionFinder />
    </div>
  );
}

function CardHead({ Icon, index }: { Icon: typeof Layers; index: number }) {
  return (
    <div className="flex items-center justify-between gap-4">
      <span className="h-10 w-10 shrink-0 grid place-items-center border border-cydeep/30 text-[#0089A1] group-hover:border-ember group-hover:text-ember transition-colors duration-300">
        <Icon size={17} strokeWidth={1.6} />
      </span>
      <span className="font-tech text-sm text-ember">{String(index + 1).padStart(2, "0")}</span>
    </div>
  );
}