import type { Metadata } from 'next';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { CatalogClient } from './CatalogClient';
import { RoboticsSplineShowcase } from '@/components/sections/robotics-spline-showcase';
import { ROBOTS } from '@/data/robots';

export const metadata: Metadata = {
  title: 'Robots Catalog YS Lootah Robotics Dubai',
  description:
    'Explore selected humanoid, quadruped, service, delivery, hospitality, and cleaning robots from Unitree and Pudu available in the UAE through YS Lootah Robotics.',
};

export default function RobotsPage() {
  return (
    <>
      <Navbar />
      <main>
        <div style={{ paddingTop: 'clamp(5rem, 8vw, 7rem)' }}>
          <RoboticsSplineShowcase />
        </div>

        <div
          className="container-wide"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '2.5rem',
            paddingTop: 'clamp(3rem, 6vw, 5rem)',
            paddingBottom: 'clamp(4rem, 8vw, 6rem)',
          }}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
            <span className="eyebrow">Catalog · Filter & Browse</span>
            <h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.6vw, 2.4rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
              <span className="text-gradient" style={{ fontWeight: 500 }}>
                {ROBOTS.length}+ models across the UAE portfolio.
              </span>
            </h2>
            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
              Filter by brand or category, then request a UAE quotation or book a live demo at our Dubai showroom.
            </p>
          </div>

          <CatalogClient />
        </div>
      </main>
      <FooterAndContact />
    </>
  );
}