yslootahrobotics/src/components/robotics/ExclusiveAccessSection.tsx

'use client';

import Image from 'next/image';
import Link from 'next/link';
import { PremiumButton } from '@/components/ui/PremiumButton';

export function ExclusiveAccessSection() {
  return (
    <div
      style={{
        position: 'relative',
        borderRadius: '2rem',
        padding: 'clamp(1.75rem, 4vw, 3rem)',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(231, 231, 231, 0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(168, 168, 168, 0.22), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(5,5,5,0.97))',
        border: '1px solid rgba(94, 94, 94, 0.32)',
        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
      }}
    >
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
          backgroundSize: '48px 48px',
          maskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
          pointerEvents: 'none',
        }}
      />

      <div
        className="exa-grid"
        style={{ position: 'relative', display: 'grid', gap: 'clamp(1.5rem, 3.5vw, 2.5rem)', alignItems: 'stretch' }}
      >
        {/* Left copy */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
          <span
            style={{
              alignSelf: 'flex-start',
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.6rem',
              padding: '0.5rem 0.9rem',
              borderRadius: 999,
              border: '1px solid rgba(94, 94, 94, 0.45)',
              background: 'rgba(94, 94, 94, 0.10)',
              color: '#e7e7e7',
              fontSize: '0.7rem',
              letterSpacing: '0.24em',
              textTransform: 'uppercase',
              fontWeight: 700,
            }}
          >
            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 10px rgba(231, 231, 231, 0.8)' }} />
            UAE Robotics Access
          </span>

          <h2 style={{ margin: 0, fontSize: 'clamp(1.7rem, 4vw, 2.6rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
            <span className="text-gradient" style={{ fontWeight: 500 }}>
              The UAE&apos;s dedicated destination for Unitree and Pudu Robotics.
            </span>
          </h2>

          <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
            Selected solutions delivered to UAE businesses, venues, and innovators from inquiry to live deployment, fully supported in Dubai.
          </p>

          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            {[
              'UAE sales territory.',
              'Local Dubai sales, demo, and deployment team.',
              'Humanoid, quadruped, service, delivery, cleaning robots.',
              'End-to-end procurement, training, and ongoing support.',
            ].map((b) => (
              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#fcfcfc', fontSize: '0.92rem', lineHeight: 1.5 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                  <path d="M20 6 9 17l-5-5" />
                </svg>
                {b}
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
            <PremiumButton href="/robots/">Explore robots</PremiumButton>
            <PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton>
          </div>
        </div>

        {/* Right premium showroom grid */}
        <div
          className="exa-tiles"
          style={{
            display: 'grid',
            gap: '0.875rem',
            minWidth: 0,
          }}
        >
          <BrandShowcaseTile
            href="/brands/#unitree"
            brand="Unitree"
            tag="Quadruped · Humanoid"
            accent="#e7e7e7"
            primary={{ src: '/images/robots/unitree-g1.webp', alt: 'Unitree G1 humanoid robot' }}
            secondary={{ src: '/images/robots/unitree-go2.webp', alt: 'Unitree Go2 quadruped robot' }}
          />
          <BrandShowcaseTile
            href="/brands/#pudu"
            brand="Pudu Robotics"
            tag="Service · Delivery · Cleaning"
            accent="#a8a8a8"
            primary={{ src: '/images/robots/pudu-bellabot.webp', alt: 'Pudu BellaBot multi-tray delivery robot' }}
            secondary={{ src: '/images/robots/pudu-kettybot.webp', alt: 'Pudu KettyBot Pro service robot with built-in advertising display' }}
          />
          <TerritoryTile />
          <ShowroomTile />
        </div>
      </div>

      <style jsx>{`
        .exa-grid {
          grid-template-columns: 1fr;
        }
        .exa-tiles {
          grid-template-columns: minmax(0, 1fr);
        }
        @media (min-width: 640px) {
          .exa-tiles {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @media (min-width: 1024px) {
          .exa-grid {
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
          }
        }
      `}</style>
    </div>
  );
}

function BrandShowcaseTile({
  href,
  brand,
  tag,
  accent,
  primary,
  secondary,
}: {
  href: string;
  brand: string;
  tag: string;
  accent: string;
  primary: { src: string; alt: string };
  secondary: { src: string; alt: string };
}) {
  return (
    <Link
      href={href}
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        padding: '1rem',
        borderRadius: 18,
        background:
          `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))`,
        border: `1px solid ${accent}44`,
        color: '#fcfcfc',
        textDecoration: 'none',
        overflow: 'hidden',
        minHeight: 220,
        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
      }}
    >
      {/* product visual area */}
      <div
        style={{
          position: 'relative',
          flex: 1,
          minHeight: 130,
          borderRadius: 12,
          background:
            `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95))`,
          overflow: 'hidden',
          border: '1px solid rgba(231, 231, 231, 0.08)',
        }}
      >
        <div
          aria-hidden
          style={{
            position: 'absolute',
            inset: 0,
            backgroundImage:
              'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
            backgroundSize: '24px 24px',
            maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
            WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
            pointerEvents: 'none',
          }}
        />
        <div
          aria-hidden
          style={{
            position: 'absolute',
            top: '8%',
            left: '50%',
            transform: 'translateX(-50%)',
            width: '70%',
            height: '70%',
            background:
              'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(127, 127, 127, 0.35) 0%, transparent 65%)',
            filter: 'blur(8px)',
            pointerEvents: 'none',
          }}
        />

        {/* secondary robot back-left */}
        <div
          style={{
            position: 'absolute',
            left: '6%',
            bottom: '8%',
            width: '46%',
            height: '78%',
            opacity: 0.7,
            filter: 'drop-shadow(0 12px 20px rgba(0,0,0,0.6))',
            transform: 'scale(0.88)',
            transformOrigin: 'bottom left',
          }}
        >
          <Image
            src={secondary.src}
            alt={secondary.alt}
            fill
            sizes="220px"
            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
          />
        </div>

        {/* primary robot front-right, slightly larger */}
        <div
          style={{
            position: 'absolute',
            right: '4%',
            bottom: '6%',
            width: '62%',
            height: '90%',
            filter:
              'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(127, 127, 127, 0.4))',
          }}
        >
          <Image
            src={primary.src}
            alt={primary.alt}
            fill
            sizes="280px"
            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
          />
        </div>

        <span
          style={{
            position: 'absolute',
            top: '0.5rem',
            right: '0.5rem',
            padding: '0.25rem 0.55rem',
            borderRadius: 999,
            background: 'rgba(16, 16, 16, 0.7)',
            border: `1px solid ${accent}55`,
            color: accent,
            fontSize: '0.55rem',
            fontWeight: 700,
            letterSpacing: '0.22em',
            textTransform: 'uppercase',
            backdropFilter: 'blur(6px)',
          }}
        >
          UAE
        </span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0.25rem 0.25rem 0' }}>
        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
          {tag}
        </span>
        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
          <span style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{brand}</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <line x1="5" y1="12" x2="19" y2="12" />
            <polyline points="12 5 19 12 12 19" />
          </svg>
        </span>
      </div>
    </Link>
  );
}

function TerritoryTile() {
  return (
    <div
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: '1rem',
        borderRadius: 18,
        background:
          'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(127, 127, 127, 0.30), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
        border: '1px solid rgba(127, 127, 127, 0.45)',
        color: '#fcfcfc',
        overflow: 'hidden',
        minHeight: 170,
        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
      }}
    >
      {/* abstract UAE "territory" graphic ring map style */}
      <svg
        aria-hidden
        viewBox="0 0 220 140"
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          opacity: 0.4,
        }}
      >
        <defs>
          <radialGradient id="terr-glow" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="155" cy="55" r="42" fill="url(#terr-glow)" />
        <circle cx="155" cy="55" r="32" fill="none" stroke="#e7e7e7" strokeOpacity="0.45" strokeDasharray="2 4" />
        <circle cx="155" cy="55" r="22" fill="none" stroke="#e7e7e7" strokeOpacity="0.65" />
        <circle cx="155" cy="55" r="3.5" fill="#e7e7e7" />
        <text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#e1e1e1" textAnchor="start">DXB</text>
      </svg>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
          Sales Territory
        </span>
        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.6rem, 2.8vw, 2rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
          UAE
        </span>
      </div>
      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
        UAE sales rights · Unitree & Pudu solutions.
      </span>
    </div>
  );
}

function ShowroomTile() {
  return (
    <div
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: '1rem',
        borderRadius: 18,
        background:
          'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(231, 231, 231, 0.18), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
        border: '1px solid rgba(231, 231, 231, 0.22)',
        color: '#fcfcfc',
        overflow: 'hidden',
        minHeight: 170,
        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
      }}
    >
      <svg
        aria-hidden
        viewBox="0 0 220 140"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.38 }}
      >
        <defs>
          <linearGradient id="show-floor" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* perspective floor */}
        {[0, 1, 2, 3, 4].map((i) => (
          <line
            key={i}
            x1={20 - i * 5}
            x2={200 + i * 5}
            y1={70 + i * 14}
            y2={70 + i * 14}
            stroke="#e7e7e7"
            strokeOpacity={0.35 - i * 0.06}
          />
        ))}
        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
          <line
            key={`v-${i}`}
            x1={30 + i * 27}
            y1={70}
            x2={30 + i * 36 - 30}
            y2={140}
            stroke="#e7e7e7"
            strokeOpacity={0.2}
          />
        ))}
        <rect x="60" y="40" width="100" height="55" fill="url(#show-floor)" />
        <rect x="60" y="40" width="100" height="55" fill="none" stroke="#e7e7e7" strokeOpacity="0.4" />
        <circle cx="110" cy="68" r="6" fill="#e7e7e7" />
      </svg>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
          Showroom & Demo
        </span>
        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
          Dubai
        </span>
      </div>
      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
        Live demos · City Bay Business Center.
      </span>
    </div>
  );
}