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

export const metadata: Metadata = {
  title: 'Contact YS Lootah Robotics Dubai Robotics Sales & Demo Inquiries',
  description:
    'Dubai robotics sales, support, and demo inquiries. Contact YS Lootah Robotics, the UAE destination for selected Unitree and Pudu Robotics solutions, by phone, email, or WhatsApp.',
};

export default function ContactPage() {
  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">Contact · Dubai · UAE</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 }}>Talk to our Dubai robotics team.</span>
            </h1>
            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
              Tell us about your venue, timeline, and use case. We will recommend a robot, share availability, and book a live demo at our Dubai showroom.
            </p>

            <div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2rem)', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              <ContactRow label="Phone" value="+971 55 948 2728" href="tel:+971559482728" />
              <ContactRow label="Office" value="+971 4 349 9319" href="tel:+97143499319" />
              <ContactRow label="Email" value="info@yslootahrobotics.com" href="mailto:info@yslootahrobotics.com" />
              <ContactRow label="WhatsApp" value="+971 55 948 2728" href="https://wa.me/971559482728" external />
              <ContactRow label="Address" value="Office 408, City Bay Business Center, Dubai, UAE" href="https://maps.google.com/?q=Office+408+City+Bay+Business+Center+Dubai" external />
            </div>
          </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">Inquiry form</span>
              <h2 style={{ margin: 0, fontSize: '1.4rem', fontWeight: 500 }}>Send us a message</h2>
            </div>
            <InquiryForm intent="inquiry" />
          </div>
        </div>
      </main>

      <FooterAndContact />
    </>
  );
}

function ContactRow({ label, value, href, external = false }: { label: string; value: string; href: string; external?: boolean }) {
  return (
    <a
      href={href}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: '1rem',
        padding: '0.75rem 0',
        borderBottom: '1px solid rgba(39, 63, 148,0.1)',
        textDecoration: 'none',
        color: '#FBFBFD',
      }}
    >
      <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7' }}>{label}</span>
      <span style={{ fontSize: '0.95rem', color: '#FBFBFD', textAlign: 'right' }}>{value}</span>
    </a>
  );
}