/**
 * ValuePropSlide.tsx
 * Slide 6: Value Proposition.
 * Closing argument for hiring this candidate for this role.
 */

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

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

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

  // Invert colors for a bold "closer" feel — accent bg with light text
  const isCleanTheme = theme.name === 'clean';

  return (
    <div
      style={{
        width: '1080px',
        height: '1080px',
        background: isCleanTheme ? '#F0F4FF' : bgColor,  // Slight tint for clean theme
        fontFamily,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        padding: '88px 96px',
        boxSizing: 'border-box',
        position: 'relative',
      }}
    >
      {/* Large background accent shape */}
      <div
        style={{
          position: 'absolute',
          bottom: '-80px',
          right: '-80px',
          width: '600px',
          height: '600px',
          borderRadius: '50%',
          background: accentColor,
          opacity: 0.08,
        }}
      />

      {/* Slide number */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '64px',
          fontSize: '22px',
          color: subtextColor,
          fontWeight: 500,
        }}
      >
        06
      </div>

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

      {/* Main title */}
      <h2
        style={{
          fontSize: '56px',
          fontWeight: 800,
          lineHeight: 1.15,
          color: textColor,
          margin: '0 0 32px 0',
          maxWidth: '860px',
          letterSpacing: '-0.02em',
        }}
      >
        {slide.title}
      </h2>

      {/* Divider */}
      <div
        style={{
          width: '80px',
          height: '5px',
          background: accentColor,
          borderRadius: '3px',
          marginBottom: '40px',
        }}
      />

      {/* Synthesis body */}
      {slide.body && (
        <p
          style={{
            fontSize: '28px',
            fontWeight: 400,
            lineHeight: 1.6,
            color: textColor,
            margin: '0 0 40px 0',
            maxWidth: '820px',
          }}
        >
          {slide.body}
        </p>
      )}

      {/* Subheading — the positioning angle echo */}
      {slide.subtitle && (
        <div
          style={{
            borderLeft: `4px solid ${accentColor}`,
            paddingLeft: '24px',
            fontSize: '22px',
            fontStyle: 'italic',
            color: subtextColor,
            maxWidth: '760px',
          }}
        >
          "{slide.subtitle}"
        </div>
      )}
    </div>
  );
}

export default ValuePropSlide;