/**
 * WorkStyleSlide.tsx
 * Slide 5: How They Work / Capability Pattern.
 * Bulleted operating philosophy with accent marks.
 */

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

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

export function WorkStyleSlide({ slide, theme }: WorkStyleSlideProps): 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: '88px 96px',
        boxSizing: 'border-box',
        position: 'relative',
      }}
    >
      {/* Decorative background circle */}
      <div
        style={{
          position: 'absolute',
          top: '-120px',
          right: '-120px',
          width: '480px',
          height: '480px',
          borderRadius: '50%',
          background: accentColor,
          opacity: 0.06,
        }}
      />

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

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

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

      {slide.subtitle && (
        <p
          style={{
            fontSize: '22px',
            color: subtextColor,
            margin: '0 0 56px 0',
            fontWeight: 400,
          }}
        >
          {slide.subtitle}
        </p>
      )}

      {/* Capability bullets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '28px', width: '100%' }}>
        {bullets.slice(0, 3).map((bullet, index) => (
          <div
            key={index}
            style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: '24px',
            }}
          >
            {/* Accent mark */}
            <div
              style={{
                minWidth: '8px',
                height: '8px',
                borderRadius: '50%',
                background: accentColor,
                marginTop: '14px',
              }}
            />
            <div
              style={{
                fontSize: '26px',
                fontWeight: 500,
                color: textColor,
                lineHeight: 1.5,
                borderBottom: `1px solid ${borderColor}`,
                paddingBottom: '24px',
                flex: 1,
              }}
            >
              {bullet}
            </div>
          </div>
        ))}

        {bullets.length === 0 && (
          <div style={{ color: subtextColor, fontSize: '24px' }}>
            Structured, iterative, and impact-driven.
          </div>
        )}
      </div>
    </div>
  );
}

export default WorkStyleSlide;