import type { Metadata } from 'next';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { BRANDS, ROBOTS, type RobotBrand } from '@/data/robots';
import { RobotProductCard } from '@/components/robotics/RobotProductCard';
import { MotionSection } from '@/components/ui/MotionSection';
import { DemoCTA } from '@/components/robotics/DemoCTA';

export const metadata: Metadata = {
  title: 'Robotics Brands Unitree & Pudu | UAE Access via YS Lootah Robotics',
  description:
    'Selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics. Humanoid, quadruped, service, delivery, and cleaning robots.',
};

const ORDER: RobotBrand[] = ['unitree', 'pudu'];

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

      <main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
        <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(3rem, 5vw, 5rem)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
            <span className="eyebrow">UAE Access · Dubai</span>
            <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              <span className="text-gradient" style={{ fontWeight: 500 }}>
                Selected Unitree and Pudu solutions in the UAE.
              </span>
            </h1>
            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
              YS Lootah Robotics holds UAE sales rights for selected Unitree and Pudu Robotics solutions with on-the-ground sales, demo, and deployment support across Dubai and the UAE.
            </p>
            <p style={{ margin: 0, color: '#6a73a5', fontSize: '0.82rem', lineHeight: 1.6 }}>
              Brand names and product trademarks are property of their respective owners. Available in the UAE through YS Lootah Robotics.
            </p>
          </div>

          {ORDER.map((id) => {
            const brand = BRANDS[id];
            const robots = ROBOTS.filter((r) => r.brand === id);
            return (
              <MotionSection key={id} id={id}>
                <div
                  className="card"
                  style={{
                    padding: 'clamp(1.5rem, 4vw, 2.5rem)',
                    background:
                      `radial-gradient(ellipse 80% 60% at 0% 0%, ${brand.accent}1A, transparent 60%), linear-gradient(180deg, rgba(15, 12, 8,0.65), rgba(5, 5, 5,0.95))`,
                  }}
                >
                  <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: '1rem', marginBottom: '1.5rem' }}>
                    <h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.4vw, 2.4rem)', fontWeight: 600, letterSpacing: '-0.02em' }}>
                      {brand.name.split(' ')[0]} <span style={{ color: brand.accent }}>{brand.name.split(' ').slice(1).join(' ')}</span>
                    </h2>
                    <span style={{ fontSize: '0.72rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: brand.accent }}>
                      {robots.length} model{robots.length === 1 ? '' : 's'}
                    </span>
                  </div>
                  <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, maxWidth: 800, marginBottom: '1.5rem' }}>
                    {brand.description}
                  </p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginBottom: '2rem' }}>
                    <a className="btn btn-primary" href={`/robots/?brand=${id}`}>See all {brand.name.split(' ')[0]} robots</a>
                    <a className="btn btn-ghost" href={brand.url} target="_blank" rel="noopener noreferrer">
                      Visit brand site
                    </a>
                  </div>
                  <div
                    style={{
                      display: 'grid',
                      gap: '1.25rem',
                      gridTemplateColumns: 'repeat(auto-fit, minmax(min(260px, 100%), 1fr))',
                    }}
                  >
                    {robots.map((r) => (
                      <RobotProductCard key={r.id} robot={r} />
                    ))}
                  </div>
                </div>
              </MotionSection>
            );
          })}

          <DemoCTA
            title="Not sure which brand fits?"
            description="Tell us about your venue, timeline, and use case. We will recommend a brand and model and book a live demo at our Dubai showroom."
          />
        </div>
      </main>

      <FooterAndContact />
    </>
  );
}