import type { Metadata } from 'next';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { InquiryForm } from '@/components/robotics/InquiryForm';
import { pageMetadata } from '@/lib/seo';

export const metadata: Metadata = pageMetadata({
  title: 'Book a Robotics Demo in Dubai',
  description:
    'Book a live robot demo at our Dubai showroom or at your venue. See selected Unitree and Pudu Robotics solutions in action, available in the UAE through YS Lootah Robotics.',
  path: '/book-demo/',
});

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

      <main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
        <div className="container-wide" style={{ display: 'grid', gap: 'clamp(2rem, 5vw, 3rem)', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
            <span className="eyebrow">Book a live demo · Dubai showroom</span>
            <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              <span className="text-gradient" style={{ fontWeight: 500 }}>See the future in person.</span>
            </h1>
            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
              Book a live robot demo at our Dubai showroom or schedule an on-site demo at your venue. Our team will tailor the demo to your use case before you arrive.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
              {[
                'Choose a humanoid, quadruped, or service robot to see live',
                'Designed around your industry restaurant, mall, hotel, security, etc.',
                'Walk through configuration and deployment options',
                'Get UAE-specific pricing and availability',
              ].map((b) => (
                <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#e7e7e7', lineHeight: 1.55 }}>
                  <span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#e7e7e7', flex: 'none' }} />
                  {b}
                </li>
              ))}
            </ul>
          </div>

          <div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2.5rem)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '1.5rem' }}>
              <span className="eyebrow">Demo request</span>
              <h2 style={{ margin: 0, fontSize: '1.4rem', fontWeight: 500 }}>Tell us when and where</h2>
            </div>
            <InquiryForm intent="demo" />
          </div>
        </div>
      </main>

      <FooterAndContact />
    </>
  );
}