yslootahrobotics/src/components/robotics/BentoGrid.tsx

'use client';

import Link from 'next/link';
import Image from 'next/image';
import { FEATURED_ROBOTS } from '@/data/robots';

const SOC_PATHS = {
  brain: 'M9 3a4 4 0 0 0-4 4v1a3 3 0 0 0 0 6v3a3 3 0 0 0 4 2 3 3 0 0 0 6 0 3 3 0 0 0 4-2v-3a3 3 0 0 0 0-6V7a4 4 0 0 0-4-4 3 3 0 0 0-6 0Z',
  shield: 'M12 2 4 5v7c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5l-8-3Z',
  bolt: 'M13 2 3 14h7l-1 8 10-12h-7l1-8Z',
  globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2c2.2 0 4 3.6 4 8s-1.8 8-4 8-4-3.6-4-8 1.8-8 4-8ZM2 12c0-1 .5-2 1.5-3h17c1 1 1.5 2 1.5 3s-.5 2-1.5 3h-17c-1-1-1.5-2-1.5-3Z',
};

export function BentoGrid() {
  return (
    <div
      style={{
        display: 'grid',
        gap: '1rem',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gridAutoRows: 'minmax(180px, auto)',
      }}
    >
      <Tile col="span 7" row="span 2" accent="#e0c896">
        <div style={{ position: 'absolute', inset: 0 }}>
          <Image
            src={FEATURED_ROBOTS[0].image}
            alt="Premium robotics in Dubai"
            fill
            sizes="(max-width: 768px) 100vw, 60vw"
            style={{ objectFit: 'contain', objectPosition: 'right center', padding: 'clamp(1.5rem, 4vw, 3rem)', opacity: 0.92 }}
          />
        </div>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '50%' }}>
          <span className="eyebrow">Flagship · Dubai</span>
          <h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            <span className="text-gradient">Unitree G1 humanoid — live in our Dubai showroom.</span>
          </h3>
          <p style={{ margin: 0, color: '#cbc4b3', fontSize: '0.92rem', lineHeight: 1.6 }}>
            Configure persona, attire, and accessories. Then book a live demo.
          </p>
          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.5rem' }}>
            <Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
            <Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
          </div>
        </div>
      </Tile>

      <Tile col="span 5" row="span 1" accent="#c4a265" icon={SOC_PATHS.bolt}>
        <span className="eyebrow">Sales & demos</span>
        <h3 style={{ margin: 0, fontSize: 'clamp(1.2rem, 2vw, 1.5rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
          <span className="text-gradient">Fast quotes for UAE businesses.</span>
        </h3>
        <p style={{ margin: 0, color: '#94908a', fontSize: '0.88rem', lineHeight: 1.55 }}>
          Tell us your use case — we respond within one business day with availability and pricing.
        </p>
      </Tile>

      <Tile col="span 5" row="span 1" accent="#8b6f47" icon={SOC_PATHS.shield}>
        <span className="eyebrow">End-to-end</span>
        <h3 style={{ margin: 0, fontSize: 'clamp(1.2rem, 2vw, 1.5rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
          <span className="text-gradient">Procurement, deployment, support.</span>
        </h3>
        <p style={{ margin: 0, color: '#94908a', fontSize: '0.88rem', lineHeight: 1.55 }}>
          Local team handles import, setup, training, and ongoing service across the UAE.
        </p>
      </Tile>

      <Tile col="span 4" row="span 1" accent="#e0c896" icon={SOC_PATHS.brain}>
        <span className="eyebrow">Exclusive UAE access</span>
        <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          <span className="text-gradient">Unitree · Pudu — one Dubai team.</span>
        </h3>
      </Tile>

      <Tile col="span 4" row="span 1" accent="#c4a265" icon={SOC_PATHS.globe}>
        <span className="eyebrow">10+ industries</span>
        <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          <span className="text-gradient">Hospitality, security, healthcare, retail.</span>
        </h3>
      </Tile>

      <Tile col="span 4" row="span 1" accent="#8b6f47">
        <span className="eyebrow">Configurator</span>
        <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          <span className="text-gradient">3D persona builder for the G1.</span>
        </h3>
        <Link
          href="/configure/"
          style={{
            marginTop: 'auto',
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.4rem',
            color: '#8b6f47',
            fontSize: '0.78rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            fontWeight: 600,
            textDecoration: 'none',
          }}
        >
          Start configuration
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
        </Link>
      </Tile>

      <style jsx global>{`
        @media (max-width: 900px) {
          .bento-tile-7 { grid-column: span 12 !important; }
          .bento-tile-5 { grid-column: span 12 !important; }
          .bento-tile-4 { grid-column: span 6 !important; }
        }
        @media (max-width: 540px) {
          .bento-tile-4 { grid-column: span 12 !important; }
        }
      `}</style>
    </div>
  );
}

function Tile({
  col,
  row,
  accent,
  icon,
  children,
}: {
  col: string;
  row: string;
  accent: string;
  icon?: string;
  children: React.ReactNode;
}) {
  const span = col.includes('7') ? 'bento-tile-7' : col.includes('5') ? 'bento-tile-5' : 'bento-tile-4';
  return (
    <div
      className={`card ${span}`}
      style={{
        gridColumn: col,
        gridRow: row,
        padding: 'clamp(1.25rem, 2.2vw, 1.75rem)',
        position: 'relative',
        overflow: 'hidden',
        background:
          `radial-gradient(ellipse 80% 80% at 0% 100%, ${accent}1A, transparent 60%), linear-gradient(135deg, rgba(15, 12, 8,0.7), rgba(5, 5, 5,0.95))`,
        display: 'flex',
        flexDirection: 'column',
        gap: '0.6rem',
        minHeight: 180,
      }}
    >
      {icon && (
        <div
          style={{
            width: 38,
            height: 38,
            borderRadius: 10,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: `${accent}1A`,
            border: `1px solid ${accent}55`,
            marginBottom: '0.25rem',
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d={icon} />
          </svg>
        </div>
      )}
      {children}
    </div>
  );
}