yslootahrobotics/src/components/robotics/RobotProductCard.tsx

'use client';

import Link from 'next/link';
import Image from 'next/image';
import { Robot, CATEGORY_LABELS } from '@/data/robots';
import { displayName } from '@/lib/seo';

type Props = {
  robot: Robot;
  priority?: boolean;
};

export function RobotProductCard({ robot, priority = false }: Props) {
  const detailHref = `/robots/${robot.slug}/`;

  return (
    <article
      className="card"
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        color: '#fcfcfc',
      }}
    >
      <Link
        href={detailHref}
        aria-label={`View details for ${displayName(robot.brandLabel, robot.name)}`}
        style={{
          position: 'relative',
          display: 'block',
          aspectRatio: '1 / 1',
          background:
            `radial-gradient(ellipse 70% 50% at 50% 60%, ${robot.accent}26 0%, transparent 60%), linear-gradient(180deg, rgba(15, 12, 8,0.7), rgba(5, 5, 5,0.95))`,
          overflow: 'hidden',
          textDecoration: 'none',
        }}
      >
        <div
          aria-hidden
          style={{
            position: 'absolute',
            inset: 0,
            backgroundImage:
              'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
            backgroundSize: '32px 32px',
            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',
          }}
        />
        <Image
          src={robot.image}
          alt={displayName(robot.brandLabel, robot.name)}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          style={{
            objectFit: 'contain',
            padding: '2rem',
            transition: 'transform 0.6s cubic-bezier(0.16,1,0.3,1)',
          }}
          priority={priority}
        />
        <div
          style={{
            position: 'absolute',
            top: '1rem',
            left: '1rem',
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.5rem',
            padding: '0.4rem 0.7rem',
            borderRadius: '999px',
            background: 'rgba(5, 5, 5,0.7)',
            border: `1px solid ${robot.accent}55`,
            fontSize: '0.7rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#e8e0cf',
            backdropFilter: 'blur(8px)',
          }}
        >
          <span style={{ width: 6, height: 6, borderRadius: 999, background: robot.accent }} />
          {robot.brandLabel}
        </div>
        <div
          style={{
            position: 'absolute',
            top: '1rem',
            right: '1rem',
            padding: '0.35rem 0.7rem',
            borderRadius: '999px',
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(94, 94, 94, 0.2)',
            fontSize: '0.66rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#e7e7e7',
            backdropFilter: 'blur(8px)',
          }}
        >
          {CATEGORY_LABELS[robot.category]}
        </div>
      </Link>

      <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: 1 }}>
        <h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600, letterSpacing: '-0.01em' }}>
          <Link href={detailHref} style={{ color: '#fcfcfc', textDecoration: 'none' }}>
            {robot.name}
          </Link>
        </h3>
        <p style={{ margin: 0, color: '#a8a8a8', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
          {robot.shortDescription}
        </p>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }}>
          {robot.useCases.slice(0, 2).map((u) => (
            <li
              key={u}
              style={{
                fontSize: '0.7rem',
                color: '#a8a8a8',
                padding: '0.2rem 0.5rem',
                borderRadius: 999,
                border: '1px solid rgba(94, 94, 94, 0.18)',
                background: 'rgba(15, 12, 8,0.5)',
                letterSpacing: '0.04em',
              }}
            >
              {u}
            </li>
          ))}
        </ul>

        <div
          style={{
            marginTop: 'auto',
            paddingTop: '0.75rem',
            borderTop: '1px solid rgba(94, 94, 94, 0.1)',
            display: 'flex',
            flexWrap: 'wrap',
            gap: '0.4rem',
          }}
        >
          <Link
            href={detailHref}
            className="card-cta card-cta-primary"
            style={{
              flex: '1 1 auto',
              minWidth: 0,
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '0.4rem',
              padding: '0.55rem 0.75rem',
              borderRadius: 10,
              background: 'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
              border: '1px solid rgba(188, 188, 188, 0.55)',
              color: '#FFFFFF',
              fontSize: '0.72rem',
              fontWeight: 700,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              textDecoration: 'none',
              boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(145, 145, 145, 0.22)',
            }}
          >
            View details
          </Link>
          <Link
            href={`${detailHref}#inquire`}
            style={{
              flex: '1 1 auto',
              minWidth: 0,
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '0.55rem 0.75rem',
              borderRadius: 10,
              background: 'rgba(23, 23, 23, 0.6)',
              border: '1px solid rgba(231, 231, 231, 0.14)',
              color: '#e7e7e7',
              fontSize: '0.72rem',
              fontWeight: 600,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              textDecoration: 'none',
            }}
          >
            Request price
          </Link>
          <Link
            href="/book-demo/"
            style={{
              flex: '1 1 auto',
              minWidth: 0,
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '0.55rem 0.75rem',
              borderRadius: 10,
              background: 'rgba(23, 23, 23, 0.6)',
              border: '1px solid rgba(231, 231, 231, 0.14)',
              color: '#e7e7e7',
              fontSize: '0.72rem',
              fontWeight: 600,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              textDecoration: 'none',
            }}
          >
            Book demo
          </Link>
        </div>
      </div>
    </article>
  );
}