yslootahrobotics/src/components/robotics/IndustryUseCases.tsx

'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import Building2 from 'lucide-react/dist/esm/icons/building-2';
import Utensils from 'lucide-react/dist/esm/icons/utensils';
import Hotel from 'lucide-react/dist/esm/icons/hotel';
import ShoppingBag from 'lucide-react/dist/esm/icons/shopping-bag';
import HeartPulse from 'lucide-react/dist/esm/icons/heart-pulse';
import GraduationCap from 'lucide-react/dist/esm/icons/graduation-cap';
import Shield from 'lucide-react/dist/esm/icons/shield';
import Warehouse from 'lucide-react/dist/esm/icons/warehouse';
import Sparkles from 'lucide-react/dist/esm/icons/sparkles';
import Landmark from 'lucide-react/dist/esm/icons/landmark';
import ArrowRight from 'lucide-react/dist/esm/icons/arrow-right';
import type { LucideIcon } from 'lucide-react';
import { INDUSTRIES, type Industry } from '@/data/industries';

const ease = [0.16, 1, 0.3, 1] as const;

const ICON_MAP: Record<Industry['icon'], LucideIcon> = {
  building: Building2,
  utensils: Utensils,
  hotel: Hotel,
  'shopping-bag': ShoppingBag,
  'heart-pulse': HeartPulse,
  'graduation-cap': GraduationCap,
  shield: Shield,
  warehouse: Warehouse,
  sparkles: Sparkles,
  landmark: Landmark,
};

const SHORT_COPY: Record<string, string> = {
  hospitality: 'Service and delivery robots for hotels, lounges, and guest venues.',
  restaurants: 'Delivery robots that support faster table service and reduce staff walking time.',
  hotels: 'Autonomous delivery and concierge-style robotics for premium guest experiences.',
  malls: 'Cleaning, service, and activation robots for high-traffic retail environments.',
  healthcare: 'Autonomous transport robots for supplies, meals, and routine internal deliveries.',
  education: 'Humanoid and quadruped robotics for STEM labs and innovation programs.',
  security: 'Quadruped robots for patrol, inspection, and perimeter monitoring.',
  warehousing: 'Inspection and delivery robots for repetitive facility operations.',
  events: 'Humanoid and service robots that elevate brand activations and live events.',
  government: 'Smart-city robotics for public spaces, civic programs, and innovation hubs.',
};

const STATS = [
  { value: '8+', label: 'Sectors served' },
  { value: '4', label: 'Robot families' },
  { value: 'UAE-wide', label: 'Deployment' },
  { value: 'Dubai', label: 'Local support' },
] as const;

export function IndustryUseCases({ limit }: { limit?: number }) {
  const list = limit ? INDUSTRIES.slice(0, limit) : INDUSTRIES;

  return (
    <section className="iu" aria-label="Industries served">
      {/* STATS — compact dark chips */}
      <motion.ul
        className="iu-stats"
        role="list"
        style={{ listStyle: 'none', margin: 0, padding: 0 }}
        initial={{ opacity: 0, y: 12 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-10%' }}
        transition={{ duration: 0.6, ease }}
      >
        {STATS.map((s) => (
          <li key={s.label} className="iu-stat">
            <span className="iu-stat-value">{s.value}</span>
            <span className="iu-stat-label">{s.label}</span>
          </li>
        ))}
      </motion.ul>

      {/* GRID */}
      <div className="iu-grid">
        {list.map((industry, i) => (
          <IndustryCard key={industry.id} industry={industry} delay={0.04 * i} />
        ))}
      </div>

      <style jsx>{`
        .iu {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: clamp(1.5rem, 3vw, 2.25rem);
        }

        /* STATS — single column on mobile, single row on tablet+ */
        .iu-stats {
          list-style: none;
          margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 0.55rem;
        }
        .iu-stat {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 0.22rem;
          flex: 1 1 0;
          min-width: 0;
          padding: 0.85rem 1rem;
          border-radius: 14px;
          border: 1px solid rgba(120, 140, 255, 0.22);
          background:
            linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
          overflow: hidden;
          transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
        }
        .iu-stat::before {
          content: '';
          position: absolute;
          top: 0;
          right: 10px;
          width: 20px;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
        }
        .iu-stat::after {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(74, 102, 216, 0.10), transparent 60%);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.35s;
        }
        .iu-stat:hover {
          border-color: rgba(120, 140, 255, 0.45);
          transform: translateY(-1px);
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
        }
        .iu-stat:hover::after { opacity: 1; }
        .iu-stat-value {
          font-size: clamp(1rem, 3.4vw, 1.85rem);
          font-weight: 500;
          letter-spacing: -0.025em;
          line-height: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          position: relative;
          z-index: 1;
        }
        .iu-stat-label {
          font-size: clamp(0.52rem, 1.15vw, 0.66rem);
          letter-spacing: clamp(0.06em, 0.4vw, 0.22em);
          text-transform: uppercase;
          font-weight: 700;
          color: #A6B2D8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          z-index: 1;
        }
        @media (min-width: 640px) {
          .iu-stats { flex-direction: row; flex-wrap: nowrap; gap: 0.6rem; }
          .iu-stat { padding: 0.72rem 0.85rem; gap: 0.28rem; border-radius: 16px; }
        }
        @media (min-width: 820px) {
          .iu-stats { gap: 0.7rem; }
          .iu-stat { padding: clamp(0.7rem, 1.4vw, 0.95rem) clamp(0.85rem, 1.6vw, 1.1rem); border-radius: 18px; gap: 0.35rem; }
        }

        /* GRID */
        .iu-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 1rem;
        }

        @media (min-width: 520px) {
          .iu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
        }
        @media (min-width: 1000px) {
          .iu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
        }
        @media (min-width: 1300px) {
          .iu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
      `}</style>
    </section>
  );
}

function IndustryCard({ industry, delay }: { industry: Industry; delay: number }) {
  const Icon = ICON_MAP[industry.icon];
  const blurb = SHORT_COPY[industry.id] ?? industry.solution;

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-8%' }}
      transition={{ duration: 0.55, ease, delay }}
    >
      <Link
        href={`/industries/${industry.slug}/`}
        className="ic"
        style={{ ['--accent' as string]: industry.accent }}
        aria-label={`Learn more about robotics for ${industry.name}`}
      >
        <div className="ic-media">
          <Image
            src={industry.image}
            alt={industry.imageAlt}
            fill
            sizes="(max-width: 520px) 100vw, (max-width: 1000px) 50vw, (max-width: 1300px) 33vw, 25vw"
            className="ic-media-img"
            style={{ objectFit: 'cover', objectPosition: 'center' }}
          />
          <span className="ic-media-overlay" aria-hidden />
          <span className="ic-media-icon" aria-hidden>
            <Icon size={18} strokeWidth={1.6} />
          </span>
        </div>

        <div className="ic-body">
          <h3 className="ic-title">{industry.name}</h3>
          <p className="ic-desc">{blurb}</p>
          <span className="ic-cta">
            <span>Learn more</span>
            <span className="ic-cta-arrow" aria-hidden>
              <ArrowRight size={14} strokeWidth={2} />
            </span>
          </span>
        </div>
      </Link>

      <style jsx>{`
        .ic {
          position: relative;
          display: flex;
          flex-direction: column;
          height: 100%;
          border-radius: 18px;
          overflow: hidden;
          text-decoration: none;
          color: #FFFFFF;
          border: 1px solid rgba(222, 224, 240, 0.10);
          background:
            radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
          box-shadow:
            0 1px 0 rgba(222, 224, 240, 0.04) inset,
            0 14px 28px rgba(0, 0, 0, 0.36);
          transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.4s, border-color 0.4s;
        }
        .ic:hover,
        .ic:focus-visible {
          transform: translateY(-3px);
          border-color: rgba(74, 102, 216, 0.42);
          box-shadow:
            0 1px 0 rgba(222, 224, 240, 0.08) inset,
            0 24px 52px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(74, 102, 216, 0.22),
            0 0 28px rgba(58, 85, 196, 0.22);
        }
        .ic:focus-visible {
          outline: 2px solid rgba(74, 102, 216, 0.75);
          outline-offset: 3px;
        }

        /* MEDIA */
        .ic-media {
          position: relative;
          aspect-ratio: 16 / 10;
          overflow: hidden;
          background: #0a0a0e;
          border-bottom: 1px solid rgba(222, 224, 240, 0.06);
        }
        .ic-media :global(.ic-media-img) {
          transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
          filter: saturate(0.92) brightness(0.85);
        }
        .ic:hover :global(.ic-media-img),
        .ic:focus-visible :global(.ic-media-img) {
          transform: scale(1.06);
          filter: saturate(1) brightness(0.95);
        }
        .ic-media-overlay {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.05) 40%, rgba(10, 10, 14, 0.85) 100%),
            radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
          pointer-events: none;
        }
        .ic-media-icon {
          position: absolute;
          top: 0.7rem;
          left: 0.7rem;
          z-index: 2;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 10px;
          color: color-mix(in srgb, var(--accent) 78%, white);
          background: rgba(10, 10, 14, 0.7);
          border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
          transition: border-color 0.4s, box-shadow 0.4s;
        }
        .ic:hover .ic-media-icon,
        .ic:focus-visible .ic-media-icon {
          border-color: color-mix(in srgb, var(--accent) 65%, transparent);
          box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
        }

        /* BODY */
        .ic-body {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          padding: 1.05rem 1.15rem 1.1rem;
          flex: 1;
        }
        .ic-title {
          margin: 0;
          font-size: 1.05rem;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #FFFFFF;
        }
        .ic-desc {
          margin: 0;
          color: #C9CCDE;
          font-size: 0.88rem;
          line-height: 1.55;
          flex: 1;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .ic-cta {
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          margin-top: 0.35rem;
          font-size: 0.78rem;
          font-weight: 600;
          letter-spacing: 0.02em;
          color: #DEE0F0;
          transition: color 0.3s;
        }
        .ic:hover .ic-cta,
        .ic:focus-visible .ic-cta { color: #FFFFFF; }
        .ic-cta-arrow {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .ic:hover .ic-cta-arrow,
        .ic:focus-visible .ic-cta-arrow {
          transform: translateX(4px);
        }

        @media (prefers-reduced-motion: reduce) {
          .ic, .ic-media-icon, .ic-cta-arrow { transition: none !important; }
          .ic :global(.ic-media-img) { transition: none !important; }
          .ic:hover, .ic:focus-visible { transform: none; }
          .ic:hover :global(.ic-media-img), .ic:focus-visible :global(.ic-media-img) { transform: none; }
        }
      `}</style>
    </motion.div>
  );
}