/**
 * ProofSlide.tsx
 * Slides 3 & 4: Achievement Proof.
 * Hero metric (large and prominent), story detail, source context.
 * Used for both Proof 1 and Proof 2 slides.
 */

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

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

export function ProofSlide({ slide, theme }: ProofSlideProps): React.ReactElement {
  const { bgColor, accentColor, textColor, subtextColor, fontFamily, cardBg, borderColor, metricColor } = theme;

  const slideLabel = slide.slideNumber === 3 ? 'Signature Achievement' : 'Supporting Achievement';

  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',
      }}
    >
      {/* Top accent bar */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '6px',
          background: accentColor,
        }}
      />

      {/* Slide number */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '64px',
          fontSize: '22px',
          color: subtextColor,
          fontWeight: 500,
        }}
      >
        {String(slide.slideNumber).padStart(2, '0')}
      </div>

      {/* Label */}
      <div
        style={{
          fontSize: '16px',
          fontWeight: 600,
          color: accentColor,
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          marginBottom: '32px',
        }}
      >
        {slideLabel}
      </div>

      {/* Hero metric — large and dominant */}
      {slide.metric && (
        <div
          style={{
            fontSize: '120px',
            fontWeight: 900,
            lineHeight: 1,
            color: metricColor,
            letterSpacing: '-0.04em',
            marginBottom: '16px',
          }}
        >
          {slide.metric}
        </div>
      )}

      {/* Title — achievement summary */}
      <h2
        style={{
          fontSize: slide.metric ? '42px' : '56px',
          fontWeight: 800,
          lineHeight: 1.15,
          color: textColor,
          margin: '0 0 24px 0',
          maxWidth: '860px',
          letterSpacing: '-0.02em',
        }}
      >
        {slide.title}
      </h2>

      {/* Body — detail/context */}
      {slide.body && (
        <p
          style={{
            fontSize: '26px',
            fontWeight: 400,
            lineHeight: 1.55,
            color: subtextColor,
            margin: '0 0 40px 0',
            maxWidth: '820px',
          }}
        >
          {slide.body}
        </p>
      )}

      {/* Source context pill */}
      {slide.subtitle && (
        <div
          style={{
            display: 'inline-block',
            border: `1.5px solid ${borderColor}`,
            borderRadius: '100px',
            padding: '10px 24px',
            fontSize: '18px',
            color: subtextColor,
            fontWeight: 500,
          }}
        >
          {slide.subtitle}
        </div>
      )}

      {/* Bottom rule */}
      <div
        style={{
          position: 'absolute',
          bottom: '48px',
          left: '88px',
          right: '88px',
          height: '1px',
          background: borderColor,
        }}
      />
    </div>
  );
}

export default ProofSlide;