import Link from "next/link";
import Image from "next/image";
import { Container } from "@/components/container";
import { Sparkles, Zap, Cpu, Globe2, Lock, Users } from "lucide-react";
import { ScrollReveal, StaggerContainer, StaggerItem } from "@/components/motion";
import { ThreeUITopoField } from "@/components/threeui/dynamic-effects";
import { LazyEffect } from "@/components/threeui/lazy-effect";

const TRACTION_METRICS = [
  { value: "24/7", label: "Always-On Coverage", detail: "Inbound & outbound calls" },
  { value: "4", label: "Channels", detail: "Voice, WhatsApp, chat & web" },
  { value: "Multilingual", label: "Indic + English", detail: "Real-time code-switching" },
  { value: "Done-for-you", label: "Managed Service", detail: "We build, run & optimise" },
];

const ENGINEERING_PILLARS = [
  {
    icon: Cpu,
    title: "Carrier-Grade Telephony Stack",
    description:
      "Most voice AI wrappers rely on public browser WebRTC with erratic jitter. Quto terminates directly on telecom carrier SIP trunks, using dedicated, low-jitter PSTN/PRI links for predictable, low-latency turn-taking.",
  },
  {
    icon: Globe2,
    title: "Acoustic Indic Intelligence",
    description:
      "Western foundation models collapse when users rapidly blend Hindi, English, and regional colloquialisms. Our acoustic models are tuned for real-world two-wheeler traffic, ambient market noise, and regional Indian phonetics.",
  },
  {
    icon: Lock,
    title: "Zero-Retention Enterprise Governance",
    description:
      "We believe enterprise call audio belongs exclusively to the enterprise. With cryptographically isolated tenant pods and Zero Data Retention (ZDR), customer PII is never repurposed for generic model training.",
  },
];

const TEAM_MEMBERS: {
  name: string;
  role: string;
  image: string;
  slug: string;
  linkedin: string;
}[] = [
  {
    name: "Shubham Jadhav",
    role: "Technology & AI Contributor",
    image: "/images/authors/shubham.webp",
    slug: "shubham-jadhav",
    linkedin: "https://www.linkedin.com/in/shubhamjadhav17/",
  },
  {
    name: "Suryabhan Singh",
    role: "AI & Technology Contributor",
    image: "/images/authors/suryabhan.webp",
    slug: "suryabhan-singh",
    linkedin: "https://www.linkedin.com/in/suryabhan-singh-287814235",
  },
  {
    name: "Lily Singhal",
    role: "Editorial Contributor",
    image: "/images/authors/lily-singhal.webp",
    slug: "lily-singhal",
    linkedin: "https://www.linkedin.com/in/lily-singhal-837955252/",
  },
  {
    name: "Mohit Mittal",
    role: "Technology & AI Contributor",
    image: "/images/authors/mohit-mittal.webp",
    slug: "mohit-mittal",
    linkedin: "https://www.linkedin.com/in/mohitmittal23/",
  },
];

export function AboutView() {
  return (
    <div className="relative overflow-hidden pb-24 pt-20 sm:pt-24 md:pb-32">
      {/* Ambient background glow for hero — starts at top: 0 behind fixed header */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-96 w-full max-w-6xl bg-gradient-to-r from-[#4FDAF1]/20 via-[#F79C09]/15 to-[#E26B0B]/20 blur-3xl"
      />

      <Container className="mx-auto w-full max-w-6xl px-5 md:px-8">
        {/* Breadcrumb Navigation */}
        <div className="mb-8 mt-4 flex items-center gap-2 text-xs font-medium text-muted-foreground">
          <Link href="/" className="transition hover:text-foreground">
            Home
          </Link>
          <span>/</span>
          <span className="text-foreground">About</span>
        </div>

        {/* Hero Section: 2-Column Desktop Layout */}
        <div className="mb-16 grid grid-cols-1 items-center gap-10 lg:grid-cols-12 sm:mb-20">
          {/* Left Column: Eyebrow, Heading, Description, Buttons & 2x2 Metric Boxes */}
          <div className="flex flex-col lg:col-span-7">
            <div className="mb-3 inline-flex w-fit items-center gap-2 rounded-full border border-[var(--accent-cyan-text)]/40 bg-[var(--accent-cyan-text)]/10 px-3 py-1 text-xs font-semibold text-[var(--accent-cyan-text)]">
              <Sparkles className="h-3.5 w-3.5" />
              About the Company
            </div>
            <h1 className="font-heading text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
              About <span className="text-gradient-brand">Quto AI</span>
            </h1>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
              Build multilingual AI agents for inbound and outbound calls, chat, WhatsApp, and
              web. Test, deploy, and monitor agents in minutes.
            </p>

            {/* Action buttons */}
            <div className="mt-6 flex flex-wrap items-center gap-3">
              <Link
                href="/contact"
                className="inline-flex items-center justify-center rounded-full bg-gradient-brand px-6 py-2.5 text-sm font-bold text-white shadow-sm glow-brand transition-all hover:scale-[1.02] active:scale-[0.98]"
              >
                Book a Demo
              </Link>
              <Link
                href="/#solutions"
                className="inline-flex items-center justify-center rounded-full border border-border bg-background px-6 py-2.5 text-sm font-semibold text-foreground transition-all hover:bg-muted"
              >
                Explore Solutions
              </Link>
            </div>

            {/* 4 Stat/Info Boxes: Arranged in a 2x2 Grid */}
            <div className="mt-8 grid grid-cols-2 gap-3 sm:gap-4">
              {TRACTION_METRICS.map((metric, i) => {
                const valueColor =
                  i === 0
                    ? "text-gradient-cool"
                    : i === 1
                    ? "text-[#67B7E7]"
                    : i === 2
                    ? "text-[#F79C09]"
                    : "text-[#E26B0B]";
                return (
                  <div
                    key={i}
                    className="group relative overflow-hidden rounded-2xl border border-border/70 bg-card/60 p-4 sm:p-5 backdrop-blur-sm transition-all hover:border-[#4FDAF1]/40 hover:shadow-md"
                  >
                    <div className={`text-xl sm:text-2xl lg:text-3xl font-black tracking-tight ${valueColor}`}>
                      {metric.value}
                    </div>
                    <div className="mt-1 text-xs sm:text-sm font-semibold text-foreground">
                      {metric.label}
                    </div>
                    <div className="mt-0.5 text-[11px] sm:text-xs text-muted-foreground">
                      {metric.detail}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Right Column: Primary About Hero Image */}
          <div className="flex items-center justify-center lg:col-span-5">
            <Image
              src="/images/about-us-hero-image.webp"
              alt="Quto AI conversational bot assistant on smartphone"
              width={486}
              height={583}
              priority
              sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, 460px"
              className="h-auto w-full max-w-[380px] sm:max-w-[460px] object-contain transition-transform duration-500 hover:scale-[1.02]"
            />
          </div>
        </div>

        {/* Engineering Philosophy: Why We Build Voice AI Differently (DARK SECTION with Topo Field) */}
        <div className="dark relative isolate mb-20 overflow-hidden rounded-3xl border border-neutral-800 bg-[#020202] p-8 text-foreground shadow-2xl sm:p-12 lg:p-16">
          {/* ThreeUI Topo Field running behind technical principles */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 -z-10 opacity-30 select-none overflow-hidden"
          >
            <LazyEffect className="absolute inset-0 size-full">
              <ThreeUITopoField />
            </LazyEffect>
          </div>

          <div className="relative z-10">
            <div className="mb-10 text-center">
              <div className="inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-900/80 px-3 py-1 text-xs font-semibold text-neutral-300">
                <Zap className="h-3.5 w-3.5 text-[#E26B0B]" />
                Our Technology Principles
              </div>
              <h2 className="mt-3 font-display text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                Architected for environments where every syllable counts.
              </h2>
              <p className="mx-auto mt-3 max-w-2xl text-sm text-neutral-400 sm:text-base">
                Voice is the most exacting modality in software. Consumers tolerate a 2-second
                chatbot delay, but a 400ms pause on a phone call breaks conversational immersion.
              </p>
            </div>

            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              {ENGINEERING_PILLARS.map((pillar, idx) => {
                const Icon = pillar.icon;
                const iconColor =
                  idx === 0
                    ? "bg-[#4FDAF1]/15 text-[#4FDAF1] group-hover:shadow-[0_0_15px_rgba(79,218,241,0.4)]"
                    : idx === 1
                    ? "bg-[#67B7E7]/15 text-[#67B7E7] group-hover:shadow-[0_0_15px_rgba(103,183,231,0.4)]"
                    : "bg-[#F79C09]/15 text-[#F79C09] group-hover:shadow-[0_0_15px_rgba(247,156,9,0.4)]";
                return (
                  <div
                    key={idx}
                    className="group relative rounded-2xl border border-neutral-800 bg-neutral-900/70 p-7 backdrop-blur-sm transition-all hover:border-[#4FDAF1]/50 hover:shadow-lg"
                  >
                    <div className={`flex h-12 w-12 items-center justify-center rounded-xl transition-all duration-300 group-hover:scale-110 ${iconColor}`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <h3 className="mt-5 text-lg font-bold text-white">
                      {pillar.title}
                    </h3>
                    <p className="mt-3 text-sm leading-relaxed text-neutral-300">
                      {pillar.description}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Meet the Team — 4 members in a single row on desktop (LIGHT SECTION) */}
        <div className="mb-20">
          <ScrollReveal className="mb-10 text-center">
            <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/60 px-3 py-1 text-xs font-semibold text-muted-foreground">
              <Users className="h-3.5 w-3.5 text-foreground" />
              Leadership &amp; Team
            </div>
            <h2 className="mt-3 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
              Meet the <span className="text-gradient-brand">Team</span>
            </h2>
            <p className="mx-auto mt-3 max-w-2xl text-sm text-muted-foreground sm:text-base">
              The founding leadership and product engineering team behind Quto AI.
            </p>
          </ScrollReveal>

          <StaggerContainer className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {TEAM_MEMBERS.map((member) => (
              <StaggerItem key={member.name} className="h-full">
                <div className="group relative h-full overflow-hidden rounded-2xl border border-border/80 bg-card shadow-xs transition-all hover:border-[#4FDAF1]/40 hover:shadow-lg">
                  {/* Clickable card navigating to author profile */}
                  <Link
                    href={`/author/${member.slug}`}
                    className="absolute inset-0 z-0"
                    aria-label={`View ${member.name}'s author profile`}
                  />

                  <div className="relative aspect-[4/5] w-full overflow-hidden bg-secondary">
                    <Image
                      src={member.image}
                      alt={`${member.name}, ${member.role}`}
                      fill
                      sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 260px"
                      className="object-cover object-top transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>

                  <div className="relative z-10 flex items-center justify-between p-4 sm:p-5 pointer-events-none">
                    <div>
                      <h3 className="text-base sm:text-lg font-bold text-foreground transition-colors group-hover:text-primary">
                        {member.name}
                      </h3>
                      <p className="mt-0.5 text-xs sm:text-sm font-semibold text-muted-foreground">
                        {member.role}
                      </p>
                    </div>

                    {/* LinkedIn icon separately clickable in new tab */}
                    <a
                      href={member.linkedin}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={`${member.name} LinkedIn Profile`}
                      className="pointer-events-auto flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground transition hover:border-[#0A66C2] hover:bg-[#0A66C2]/10 hover:text-[#0A66C2]"
                    >
                      <svg className="size-4 fill-current" viewBox="0 0 24 24">
                        <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
                      </svg>
                    </a>
                  </div>
                </div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>

        {/* Ready to collaborate CTA card (DARK SECTION with ambient glows & brand gradient CTA) */}
        <div className="dark relative isolate overflow-hidden rounded-3xl border border-neutral-800 bg-[#020202] p-8 text-foreground shadow-2xl sm:p-12 lg:p-14">
          {/* Ambient colored corner glows */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -right-24 -top-24 -z-10 h-72 w-72 rounded-full bg-[#4FDAF1]/15 blur-3xl"
          />
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -bottom-24 -left-24 -z-10 h-72 w-72 rounded-full bg-[#E26B0B]/15 blur-3xl"
          />

          <div className="relative z-10 grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
            <div className="flex flex-col justify-center py-2 sm:py-4 lg:col-span-7">
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black leading-tight text-white">
                Ready to deploy carrier-grade <span className="text-gradient-brand">voice agents</span>?
              </h2>
              <p className="mt-4 text-base text-neutral-300 sm:text-lg leading-relaxed max-w-xl">
                Explore our open engineering positions, schedule a live latency benchmark, or
                speak directly with our founding engineering team.
              </p>
              <div className="mt-8 flex flex-col gap-3.5 sm:flex-row sm:flex-wrap">
                <Link
                  href="/contact"
                  className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-brand px-6 py-3.5 text-sm font-bold text-white shadow-md glow-brand transition hover:scale-105 sm:w-auto"
                >
                  Book a Demo
                </Link>
                <Link
                  href="/contact"
                  className="inline-flex w-full items-center justify-center rounded-xl border border-neutral-700 bg-neutral-900/60 px-6 py-3.5 text-sm font-bold text-white transition hover:bg-neutral-800 sm:w-auto"
                >
                  Join the Team
                </Link>
              </div>
            </div>

            <div className="flex items-center justify-center lg:col-span-5 lg:justify-end">
              <Image
                src="/images/about-us-cta-1-image.webp"
                alt="Carrier-grade telephony and automated workflow integrations"
                width={305}
                height={271}
                loading="lazy"
                sizes="(max-width: 640px) 85vw, (max-width: 1024px) 50vw, 420px"
                className="h-auto w-full max-w-[320px] sm:max-w-[380px] lg:max-w-[420px] object-contain transition-transform duration-500 hover:scale-[1.02]"
              />
            </div>
          </div>
        </div>
      </Container>
    </div>
  );
}