'use client';

import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight, BadgeCheck, Cpu, MapPin, Sparkles, Bot, Truck } from 'lucide-react';
import { ContainerScroll } from '@/components/ui/container-scroll-animation';

const SHOWROOM_ROBOTS = [
  {
    name: 'Unitree G1',
    slug: 'unitree-g1',
    image: '/images/robots/unitree-g1.png',
    category: 'Humanoid',
    accent: '#DEE0F0',
  },
  {
    name: 'Unitree Go2',
    slug: 'unitree-go2',
    image: '/images/robots/unitree-go2.png',
    category: 'Quadruped',
    accent: '#BFC3E2',
  },
  {
    name: 'Pudu BellaBot',
    slug: 'pudu-bellabot',
    image: '/images/robots/pudu-bellabot.svg',
    category: 'Delivery',
    accent: '#8891C7',
  },
];

const TABS = [
  { label: 'All', icon: Sparkles, active: true },
  { label: 'Unitree', icon: Bot },
  { label: 'Pudu', icon: Truck },
  { label: 'Humanoid', icon: BadgeCheck },
  { label: 'Quadruped', icon: Cpu },
];

export function RoboticsScrollShowcase() {
  return (
    <section
      style={{
        position: 'relative',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(39,63,148,0.18), transparent 60%)',
      }}
    >
      <ContainerScroll
        titleComponent={
          <div className="flex flex-col items-center gap-4">
            <span
              className="inline-flex items-center gap-2 rounded-full border border-[#DEE0F0]/30 bg-[#273F94]/15 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.32em] text-[#DEE0F0]"
            >
              <span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" />
              Exclusive UAE Robotics Showroom
            </span>
            <h2 className="text-4xl font-light leading-[1.05] tracking-[-0.035em] text-white sm:text-5xl md:text-6xl lg:text-7xl">
              Advanced robotics.
              <span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#3a55c4] bg-clip-text font-semibold text-transparent">
                Exclusive UAE access.
              </span>
              <span className="mt-3 block text-base font-normal text-[#BFC3E2] sm:text-lg md:text-xl">
                Built for Dubai&apos;s next generation of automation.
              </span>
            </h2>
            <p className="max-w-2xl text-sm leading-relaxed text-[#DEE0F0]/75 sm:text-base">
              Explore selected Unitree and Pudu Robotics solutions through an immersive showroom experience built for UAE businesses, venues, and innovators.
            </p>
          </div>
        }
      >
        <ConsoleInterior />
      </ContainerScroll>
    </section>
  );
}

function ConsoleInterior() {
  return (
    <div className="relative h-full w-full">
      {/* left sidebar category rail */}
      <aside className="hidden h-full w-44 flex-col gap-1.5 border-r border-[#DEE0F0]/10 bg-[#0a0a0c]/60 p-3 md:flex md:absolute md:inset-y-0 md:left-0">
        <div className="px-2 py-2 text-[9px] font-semibold uppercase tracking-[0.28em] text-[#8891C7]">
          Categories
        </div>
        {TABS.map((t) => (
          <button
            key={t.label}
            type="button"
            className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 text-left text-xs font-semibold uppercase tracking-[0.12em] transition ${
              t.active
                ? 'border-[#DEE0F0]/40 bg-[#273F94]/30 text-[#DEE0F0]'
                : 'border-transparent text-[#BFC3E2]/80 hover:bg-white/[0.04]'
            }`}
          >
            <t.icon className="h-3.5 w-3.5" />
            {t.label}
          </button>
        ))}
        <div className="mt-auto rounded-xl border border-[#DEE0F0]/10 bg-[#221F20]/60 p-3 text-[10px] uppercase tracking-[0.18em] text-[#BFC3E2]/70">
          <span className="block text-[#DEE0F0]">YS Lootah Robotics</span>
          In Tech We Innovate
        </div>
      </aside>

      {/* main display */}
      <div className="absolute inset-0 md:left-44">
        {/* top breadcrumb */}
        <div className="flex items-center justify-between border-b border-[#DEE0F0]/10 px-4 py-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:px-6">
          <span>Robots · Exclusive UAE Portfolio</span>
          <span className="hidden sm:inline">11 Models · 2 Brands · Dubai</span>
        </div>

        {/* product grid */}
        <div className="grid grid-cols-3 gap-3 p-4 md:p-6">
          {SHOWROOM_ROBOTS.map((r) => (
            <article
              key={r.slug}
              className="relative flex flex-col gap-2 overflow-hidden rounded-xl border border-[#DEE0F0]/15 bg-[#0a0a0c]/70 p-3 backdrop-blur-xl md:p-4"
            >
              <div
                className="relative aspect-[4/5] overflow-hidden rounded-lg"
                style={{
                  background: `radial-gradient(ellipse 70% 50% at 50% 60%, ${r.accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
                }}
              >
                <Image
                  src={r.image}
                  alt={`${r.name} robot`}
                  fill
                  sizes="(max-width: 768px) 33vw, 240px"
                  className="object-contain p-2 md:p-4"
                />
                <span
                  className="absolute left-1.5 top-1.5 rounded-full border px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-[0.2em] backdrop-blur md:left-2 md:top-2 md:px-2 md:py-0.5 md:text-[9px]"
                  style={{ borderColor: `${r.accent}66`, color: r.accent, background: 'rgba(10,10,12,0.7)' }}
                >
                  {r.category}
                </span>
              </div>
              <div>
                <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-[#8891C7]">
                  Available in UAE
                </div>
                <div className="text-xs font-semibold text-white md:text-sm">{r.name}</div>
              </div>
            </article>
          ))}
        </div>

        {/* CTA strip */}
        <div className="absolute bottom-0 left-0 right-0 flex flex-wrap items-center justify-between gap-2 border-t border-[#DEE0F0]/10 bg-[#0a0a0c]/85 px-4 py-3 backdrop-blur-xl md:px-6">
          <div className="flex flex-wrap items-center gap-2">
            <Link
              href="/book-demo/"
              className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-br from-[#3a55c4] via-[#273F94] to-[#1a2e6e] px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-white shadow-[0_8px_24px_rgba(39,63,148,0.45)] md:text-[11px]"
            >
              Book demo
              <ArrowRight className="h-3 w-3" />
            </Link>
            <Link
              href="/configure/"
              className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 bg-white/5 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#DEE0F0] backdrop-blur md:text-[11px]"
            >
              Configure solution
              <ArrowRight className="h-3 w-3" />
            </Link>
            <Link
              href="/contact/"
              className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#BFC3E2] md:text-[11px]"
            >
              Request UAE quotation
            </Link>
          </div>
          <div className="hidden items-center gap-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:flex">
            <MapPin className="h-3 w-3" /> Dubai · UAE
          </div>
        </div>
      </div>
    </div>
  );
}