/**
 * FitSlide.tsx
 * Slide 2: Why I Fit This Role.
 * 3-card layout showing alignment areas.
 */

import React from 'react';
import type { SlideContent } from '../../schema/carouselSchema';
import type { Theme } from '../themes';

interface FitSlideProps {
  slide: SlideContent;
  theme: Theme;
}

export function FitSlide({ slide, theme }: FitSlideProps): React.ReactElement {
  const { bgColor, accentColor, textColor, subtextColor, fontFamily, cardBg, borderColor } = theme;
  const bullets = slide.bullets ?? [];

  return (
    <div
      style={{
        width: '1080px',
        height: '1080px',
        background: bgColor,
        fontFamily,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        padding: '80px 88px',
        boxSizing: 'border-box',
        position: 'relative',
      }}
    >
      {/* Slide number */}
      <div style={{ position: 'absolute', top: '40px', right: '64px', fontSize: '22px', color: subtextColor, fontWeight: 500 }}>
        02
      </div>

      {/* Accent bar left */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '8px',
          height: '100%',
          background: accentColor,
        }}
      />

      {/* Header section */}
      <div style={{ marginLeft: '0px', marginBottom: '56px' }}>
        <div
          style={{
            fontSize: '16px',
            fontWeight: 600,
            color: accentColor,
            letterSpacing: '0.15em',
            textTransform: 'uppercase',
            marginBottom: '16px',
          }}
        >
          Role Fit
        </div>
        <h2
          style={{
            fontSize: '52px',
            fontWeight: 800,
            lineHeight: 1.15,
            color: textColor,
            margin: '0 0 16px 0',
            letterSpacing: '-0.02em',
            maxWidth: '820px',
          }}
        >
          {slide.title}
        </h2>
        {slide.subtitle && (
          <p style={{ fontSize: '24px', color: subtextColor, margin: 0, fontWeight: 400 }}>
            {slide.subtitle}
          </p>
        )}
      </div>

      {/* 3-card grid */}
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '24px',
          width: '100%',
        }}
      >
        {bullets.slice(0, 3).map((bullet, index) => {
          // Split "Area: Evidence" format if present
          const colonIdx = bullet.indexOf(':');
          const area = colonIdx > -1 ? bullet.substring(0, colonIdx).trim() : `Strength ${index + 1}`;
          const evidence = colonIdx > -1 ? bullet.substring(colonIdx + 1).trim() : bullet;

          return (
            <div
              key={index}
              style={{
                background: cardBg,
                border: `1px solid ${borderColor}`,
                borderLeft: `4px solid ${accentColor}`,
                borderRadius: '8px',
                padding: '28px 32px',
                display: 'flex',
                alignItems: 'flex-start',
                gap: '20px',
              }}
            >
              {/* Number badge */}
              <div
                style={{
                  minWidth: '44px',
                  height: '44px',
                  background: accentColor,
                  color: '#fff',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '20px',
                  fontWeight: 700,
                  marginTop: '4px',
                }}
              >
                {index + 1}
              </div>
              <div>
                <div style={{ fontSize: '24px', fontWeight: 700, color: textColor, marginBottom: '8px' }}>
                  {area}
                </div>
                <div style={{ fontSize: '20px', color: subtextColor, lineHeight: 1.5 }}>
                  {evidence}
                </div>
              </div>
            </div>
          );
        })}

        {/* Fallback if no bullets */}
        {bullets.length === 0 && (
          <div style={{ color: subtextColor, fontSize: '22px' }}>
            Strong fit across key role requirements.
          </div>
        )}
      </div>
    </div>
  );
}

export default FitSlide;