import type { Metadata } from 'next';
import Link from 'next/link';
import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { AccessoriesShowcase } from '@/components/robotics/AccessoriesShowcase';
import { ACCESSORIES } from '@/data/accessories';

export const metadata: Metadata = {
  title: 'Robotics Accessories · Dexterous Hands, Arms, Sensors, IoT | YS Lootah Robotics',
  description:
    'Browse Unitree dexterous hands, robotic arms, perception sensors, and Pudu dispatch, docking, modular attachments, and building IoT modules — available in the UAE through YS Lootah Robotics.',
  alternates: { canonical: '/accessories/' },
};

export default function AccessoriesIndexPage() {
  return (
    <>
      <Navbar />

      <main style={{ paddingTop: 'clamp(5rem, 9vw, 7rem)', paddingBottom: 'clamp(3rem, 6vw, 5rem)' }}>
        <div
          className="container-wide"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 'clamp(2rem, 4vw, 3rem)',
          }}
        >
          <nav aria-label="Breadcrumb" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center', fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: '#a8a8a8' }}>
            <Link href="/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Home</Link>
            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
            <Link href="/robots/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Robots</Link>
            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
            <span aria-current="page" style={{ color: '#FFFFFF' }}>Accessories</span>
          </nav>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
            <span className="eyebrow">Add-ons · Accessories</span>
            <h1 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4vw, 2.6rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
              <span className="text-gradient" style={{ fontWeight: 500 }}>
                {ACCESSORIES.length} accessories — dexterous hands, arms, sensors, IoT modules.
              </span>
            </h1>
            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.65 }}>
              Robot platforms get their full capability from accessories. Browse Unitree dexterous hands and arms, perception sensors, and Pudu dispatch, docking, modular attachments, and building IoT modules — all available in the UAE through YS Lootah Robotics.
            </p>
          </div>

          <AccessoriesShowcase />
        </div>
      </main>

      <FooterAndContact />
    </>
  );
}