yslootahrobotics/src/components/robotics/CompanyStory.tsx

'use client';

import Brain from 'lucide-react/dist/esm/icons/brain';
import Bot from 'lucide-react/dist/esm/icons/bot';
import Workflow from 'lucide-react/dist/esm/icons/workflow';
import GraduationCap from 'lucide-react/dist/esm/icons/graduation-cap';
import Building2 from 'lucide-react/dist/esm/icons/building-2';
import BadgeCheck from 'lucide-react/dist/esm/icons/badge-check';
import type { LucideIcon } from 'lucide-react';

type Pillar = {
  num: string;
  title: string;
  body: string;
  Icon: LucideIcon;
  accent: string;
};

const PILLARS: Pillar[] = [
  {
    num: '01',
    title: 'Artificial Intelligence',
    body: 'AI applications tailored for UAE government and private sector.',
    Icon: Brain,
    accent: '#e7e7e7',
  },
  {
    num: '02',
    title: 'Robotics Deployment',
    body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
    Icon: Bot,
    accent: '#7f7f7f',
  },
  {
    num: '03',
    title: 'Digital Transformation',
    body: 'Automation systems and smart projects that modernize operations.',
    Icon: Workflow,
    accent: '#e1e1e1',
  },
  {
    num: '04',
    title: 'Training & Enablement',
    body: 'Coding and robotics programs preparing the next generation of UAE talent.',
    Icon: GraduationCap,
    accent: '#a8a8a8',
  },
];

export function CompanyStory() {
  return (
    <div
      style={{
        position: 'relative',
        borderRadius: '2rem',
        padding: 'clamp(1.75rem, 4vw, 3rem)',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(127, 127, 127, 0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(231, 231, 231, 0.10), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.94), rgba(5,5,5,0.98))',
        border: '1px solid rgba(231, 231, 231, 0.12)',
        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
      }}
    >
      {/* blueprint grid background */}
      <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: '36px 36px',
          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
          pointerEvents: 'none',
        }}
      />

      {/* subtle YS watermark */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          top: '8%',
          right: '6%',
          fontSize: 'clamp(8rem, 18vw, 14rem)',
          fontWeight: 800,
          color: 'transparent',
          WebkitTextStroke: '1px rgba(231, 231, 231, 0.06)',
          letterSpacing: '-0.06em',
          lineHeight: 1,
          pointerEvents: 'none',
          userSelect: 'none',
        }}
      >
        YS
      </div>

      <div
        className="cs-grid"
        style={{
          position: 'relative',
          display: 'grid',
          gap: 'clamp(1.5rem, 3.5vw, 2.5rem)',
          alignItems: 'stretch',
        }}
      >
        {/* Left narrative */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
          <span className="eyebrow">About YS Lootah Robotics</span>

          <h2
            style={{
              margin: 0,
              fontSize: 'clamp(1.7rem, 4vw, 2.6rem)',
              fontWeight: 300,
              lineHeight: 1.1,
              letterSpacing: '-0.03em',
            }}
          >
            <span className="text-gradient" style={{ fontWeight: 500 }}>
              A trusted UAE technology and robotics partner.
            </span>
          </h2>

          <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
            YS Lootah Robotics is part of the{' '}
            <span style={{ color: '#fcfcfc', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
            We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
          </p>

          {/* Group credibility row */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.25rem' }}>
            <CredibilityBadge Icon={Building2} text="Yousuf Saeed Lootah Investment Group" />
            <CredibilityBadge Icon={BadgeCheck} text="Trusted UAE Partner" />
          </div>

          {/* Pull-quote card */}
          <div
            style={{
              marginTop: '0.5rem',
              padding: '1.25rem 1.25rem 1.25rem 1.5rem',
              borderRadius: 18,
              background:
                'linear-gradient(135deg, rgba(94, 94, 94, 0.18) 0%, rgba(30, 30, 30, 0.7) 60%)',
              border: '1px solid rgba(231, 231, 231, 0.16)',
              position: 'relative',
              overflow: 'hidden',
            }}
          >
            <span
              aria-hidden
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                bottom: 0,
                width: 3,
                background: 'linear-gradient(180deg, #e7e7e7, #7f7f7f)',
                boxShadow: '0 0 16px rgba(127, 127, 127, 0.7)',
              }}
            />
            <p
              style={{
                margin: 0,
                fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
                fontStyle: 'italic',
                lineHeight: 1.5,
                color: '#fcfcfc',
                fontWeight: 300,
              }}
            >
              In Tech We Innovate.
              <br />
              <span className="text-gradient-accent" style={{ fontWeight: 600, fontStyle: 'normal' }}>
                In Trust We Lead.
              </span>
            </p>
            <p
              style={{
                margin: '0.6rem 0 0',
                fontSize: '0.65rem',
                letterSpacing: '0.28em',
                textTransform: 'uppercase',
                color: '#a8a8a8',
                fontWeight: 700,
              }}
            >
              YS Lootah Robotics · Dubai · UAE
            </p>
          </div>
        </div>

        {/* Right capability modules */}
        <div
          className="cs-pillars"
          style={{
            position: 'relative',
            display: 'grid',
            gap: '0.875rem',
            minWidth: 0,
          }}
        >
          {/* connector lines */}
          <div
            aria-hidden
            style={{
              position: 'absolute',
              top: '50%',
              left: '8%',
              right: '8%',
              height: 1,
              background:
                'linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.45), rgba(231, 231, 231, 0.45), transparent)',
              filter: 'blur(0.3px)',
              pointerEvents: 'none',
            }}
          />
          <div
            aria-hidden
            style={{
              position: 'absolute',
              left: '50%',
              top: '8%',
              bottom: '8%',
              width: 1,
              background:
                'linear-gradient(180deg, transparent, rgba(231, 231, 231, 0.4), rgba(127, 127, 127, 0.5), transparent)',
              filter: 'blur(0.3px)',
              pointerEvents: 'none',
            }}
          />

          {PILLARS.map((p, i) => (
            <CapabilityTile key={p.num} pillar={p} offset={i % 2 === 1 ? 'down' : 'up'} />
          ))}
        </div>
      </div>

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

function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'down' }) {
  const { num, title, body, Icon, accent } = pillar;
  return (
    <article
      className="cap-tile"
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        gap: '0.75rem',
        padding: '1.25rem',
        borderRadius: 18,
        background:
          'linear-gradient(135deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.94))',
        border: '1px solid rgba(231, 231, 231, 0.10)',
        color: '#fcfcfc',
        overflow: 'hidden',
        minHeight: 200,
        boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
        transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
        transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
      }}
    >
      {/* gradient border ring */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          borderRadius: 18,
          padding: 1,
          background: `linear-gradient(135deg, ${accent}55, transparent 50%, ${accent}33)`,
          WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
          WebkitMaskComposite: 'xor',
          maskComposite: 'exclude',
          pointerEvents: 'none',
        }}
      />
      {/* hover glow */}
      <span
        className="cap-tile-glow"
        aria-hidden
        style={{
          position: 'absolute',
          inset: '-20%',
          background: `radial-gradient(circle at 50% 0%, ${accent}33, transparent 60%)`,
          opacity: 0,
          transition: 'opacity 0.4s ease',
          pointerEvents: 'none',
        }}
      />

      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span
          style={{
            width: 42,
            height: 42,
            borderRadius: 12,
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: `${accent}1A`,
            border: `1px solid ${accent}55`,
            boxShadow: `0 0 18px ${accent}33`,
          }}
        >
          <Icon size={20} style={{ color: accent }} />
        </span>
        <span
          style={{
            fontSize: '0.7rem',
            fontWeight: 800,
            letterSpacing: '0.18em',
            color: '#a8a8a8',
            padding: '0.25rem 0.55rem',
            borderRadius: 999,
            border: '1px solid rgba(168, 168, 168, 0.3)',
            background: 'rgba(16, 16, 16, 0.6)',
          }}
        >
          {num}
        </span>
      </div>

      <h3
        style={{
          margin: 0,
          fontSize: 'clamp(1.05rem, 1.8vw, 1.2rem)',
          fontWeight: 600,
          letterSpacing: '-0.01em',
          lineHeight: 1.2,
          position: 'relative',
        }}
      >
        {title}
      </h3>

      <p
        style={{
          margin: 0,
          fontSize: '0.88rem',
          lineHeight: 1.55,
          color: '#e1e1e1',
          position: 'relative',
        }}
      >
        {body}
      </p>

      <style jsx>{`
        .cap-tile:hover {
          transform: translateY(${offset === 'down' ? '2px' : '-6px'});
          border-color: ${accent}66;
          box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7), 0 0 30px ${accent}33;
        }
        .cap-tile:hover .cap-tile-glow {
          opacity: 1;
        }
      `}</style>
    </article>
  );
}

function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '0.5rem',
        padding: '0.45rem 0.8rem',
        borderRadius: 999,
        background: 'rgba(16, 16, 16, 0.7)',
        border: '1px solid rgba(231, 231, 231, 0.18)',
        color: '#e7e7e7',
        fontSize: '0.7rem',
        fontWeight: 700,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
      }}
    >
      <Icon size={13} style={{ color: '#e7e7e7' }} />
      {text}
    </span>
  );
}