/**
 * ProductCard Component
 *
 * Product display card with image, details, and highlight reveals.
 */

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { darkPalette } from '../lib/colors';

type ProductCardProps = {
  name: string;
  tagline: string;
  price: string;
  imageUrl: string;
  highlights: string[];
  revealProgress?: number;
};

export const ProductCard: React.FC<ProductCardProps> = ({
  name,
  tagline,
  price,
  imageUrl,
  highlights,
  revealProgress = 1,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Card slide-up animation
  const slideProgress = spring({
    frame,
    fps,
    config: { damping: 20, stiffness: 100 },
  });

  const translateY = interpolate(slideProgress, [0, 1], [60, 0]);
  const opacity = interpolate(slideProgress, [0, 1], [0, 1]);

  // Highlights reveal after main card
  const highlightsOpacity = interpolate(revealProgress, [0, 1], [0, 1]);

  return (
    <div
      style={{
        transform: `translateY(${translateY}px)`,
        opacity,
        backgroundColor: darkPalette.surfaceElevated,
        borderRadius: 28,
        overflow: 'hidden',
        border: `2px solid ${darkPalette.border}`,
      }}
    >
      {/* Product image */}
      <div
        style={{
          aspectRatio: '16/9',
          backgroundColor: darkPalette.surface,
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {imageUrl.startsWith('#') ? (
          // Gradient placeholder
          <div
            style={{
              width: '100%',
              height: '100%',
              background: `linear-gradient(135deg, ${imageUrl} 0%, ${darkPalette.surface} 100%)`,
            }}
          />
        ) : (
          <img
            src={imageUrl}
            alt={name}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        )}

        {/* Price badge */}
        <div
          style={{
            position: 'absolute',
            bottom: 24,
            right: 24,
            backgroundColor: 'rgba(0, 0, 0, 0.85)',
            padding: '12px 24px',
            borderRadius: 9999,
          }}
        >
          <span style={{ color: 'white', fontWeight: 700, fontSize: 32 }}>
            {price}
          </span>
        </div>
      </div>

      {/* Product info */}
      <div style={{ padding: 32 }}>
        <h3
          style={{
            color: 'white',
            fontSize: 40,
            fontWeight: 600,
            marginBottom: 8,
          }}
        >
          {name}
        </h3>
        <p
          style={{
            color: darkPalette.textSecondary,
            fontSize: 28,
            marginBottom: 24,
          }}
        >
          {tagline}
        </p>

        {/* Highlights */}
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 16,
            opacity: highlightsOpacity,
          }}
        >
          {highlights.map((h, i) => (
            <span
              key={i}
              style={{
                backgroundColor: darkPalette.surface,
                color: darkPalette.textMuted,
                fontSize: 22,
                padding: '8px 16px',
                borderRadius: 8,
              }}
            >
              {h}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};
