import type { Metadata } from 'next';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { Hero3DRobotics } from '@/components/robotics/Hero3DRobotics';
import { BrandShowcase } from '@/components/robotics/BrandShowcase';
import { CategoryShowcaseScroll } from '@/components/robotics/CategoryShowcaseScroll';
import { FeaturedRobotsShowcase } from '@/components/robotics/FeaturedRobotsShowcase';
import { IndustryUseCases } from '@/components/robotics/IndustryUseCases';
import { DemoCTA } from '@/components/robotics/DemoCTA';
import { ConfigureCTA } from '@/components/robotics/ConfigureCTA';
import { ExclusiveAccessSection } from '@/components/robotics/ExclusiveAccessSection';
import { MarqueeStrip } from '@/components/robotics/MarqueeStrip';
import { BentoGrid } from '@/components/robotics/BentoGrid';
import { CompanyStory } from '@/components/robotics/CompanyStory';
import { FounderSection } from '@/components/robotics/FounderSection';
import { BuSunaidahSection } from '@/components/robotics/BuSunaidahSection';
import { MotionSection } from '@/components/ui/MotionSection';
import { FEATURED_ROBOTS } from '@/data/robots';

export const metadata: Metadata = {
  title: 'YS Lootah Robotics UAE Destination for Unitree & Pudu Robotics',
  description:
    'YS Lootah Robotics is the UAE sales destination for selected Unitree and Pudu Robotics solutions. Explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.',
  keywords: [
    'YS Lootah Robotics',
    'robotics Dubai',
    'robotics UAE',
    'robotics UAE destination',
    'Unitree robots UAE',
    'Pudu Robotics UAE',
    'humanoid robots Dubai',
    'quadruped robots UAE',
    'service robots UAE',
    'robotics showroom Dubai',
    'robotics configuration UAE',
    'robot sales and demo UAE',
  ],
  alternates: { canonical: '/' },
};

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

      <main>
        <Hero3DRobotics />

        <MarqueeStrip />

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="exclusive">
          <div className="container-wide">
            <ExclusiveAccessSection />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="about">
          <div className="container-wide">
            <CompanyStory />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="brands">
          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            <SectionHeading
              eyebrow="Featured robotics brands"
              title="Unitree & Pudu available in the UAE."
              description="We hold UAE sales rights for selected Unitree and Pudu Robotics solutions curated for proven performance in the field and full local support across Dubai."
            />
            <BrandShowcase />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem)' }} id="why">
          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            <SectionHeading
              eyebrow="Why YS Lootah Robotics"
              title="A premium robotics partner not a marketplace."
              description="From inquiry to live deployment, we manage your robotics program end to end with a UAE-based team and direct access to Unitree and Pudu portfolios."
            />
            <BentoGrid />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="categories">
          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            <SectionHeading
              eyebrow="Robot categories"
              title="From quadruped patrol to humanoid concierge."
              description="Find the right robot for your business — humanoid platforms for events and education, quadrupeds for inspection and security, and service robots for hospitality, delivery, and cleaning."
            />
            <CategoryShowcaseScroll />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="featured">
          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            <SectionHeading
              eyebrow="Dubai showroom"
              title="Robots you can see, test, and deploy now."
              description="Four exhibits on our Dubai showroom floor — step in, request a live demo, or ask for a price."
            />
            <FeaturedRobotsShowcase robots={FEATURED_ROBOTS} />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(2rem, 5vw, 3.5rem) 0' }}>
          <div className="container-wide">
            <ConfigureCTA />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="leadership">
          <div className="container-wide">
            <FounderSection />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="bu-sunaidah">
          <div className="container-wide">
            <BuSunaidahSection />
          </div>
        </MotionSection>

        <MotionSection
          style={{ padding: 'clamp(3rem, 6vw, 5rem) 0', scrollMarginTop: 'clamp(80px, 12vh, 120px)' }}
          id="industries"
        >
          <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            <SectionHeading
              eyebrow="Industries served"
              title="Robotics solutions for UAE businesses."
              description="From restaurants to security operators to government innovation programs we deliver robotics fits for the venue."
            />
            <IndustryUseCases limit={8} />
          </div>
        </MotionSection>

        <MotionSection style={{ padding: 'clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem)' }}>
          <div className="container-wide">
            <DemoCTA
              title="Talk to our robotics team."
              description="See the robots in action at our Dubai showroom or request a UAE-ready quotation. Our team responds within one business day."
              primaryLabel="Book a Live Demo"
              secondaryLabel="Talk to Our Team"
            />
          </div>
        </MotionSection>
      </main>

      <FooterAndContact />
    </>
  );
}

function SectionHeading({ eyebrow, title, description }: { eyebrow: string; title: string; description?: string }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
      <span className="eyebrow">{eyebrow}</span>
      <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.5vw, 3rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
        <span className="text-gradient" style={{ fontWeight: 500 }}>{title}</span>
      </h2>
      {description && (
        <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
          {description}
        </p>
      )}
    </div>
  );
}