/**
 * CtaSlide.tsx
 * Slide 7: Call to Action.
 * Open to opportunities, connect request, contact info.
 */

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

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

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

  return (
    <div
      style={{
        width: '1080px',
        height: '1080px',
        background: accentColor,  // Full accent color background for the CTA
        fontFamily,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '88px 96px',
        boxSizing: 'border-box',
        position: 'relative',
        textAlign: 'center',
      }}
    >
      {/* Decorative rings */}
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '900px',
          height: '900px',
          borderRadius: '50%',
          border: '1px solid rgba(255,255,255,0.1)',
        }}
      />
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '700px',
          height: '700px',
          borderRadius: '50%',
          border: '1px solid rgba(255,255,255,0.1)',
        }}
      />

      {/* Slide number */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '64px',
          fontSize: '22px',
          color: 'rgba(255,255,255,0.6)',
          fontWeight: 500,
        }}
      >
        07
      </div>

      {/* Top label */}
      <div
        style={{
          fontSize: '16px',
          fontWeight: 600,
          color: 'rgba(255,255,255,0.8)',
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          marginBottom: '32px',
        }}
      >
        Let's Connect
      </div>

      {/* Main CTA headline */}
      <h2
        style={{
          fontSize: '56px',
          fontWeight: 800,
          lineHeight: 1.15,
          color: '#FFFFFF',
          margin: '0 0 24px 0',
          maxWidth: '840px',
          letterSpacing: '-0.02em',
        }}
      >
        {slide.title}
      </h2>

      {/* Body */}
      {slide.body && (
        <p
          style={{
            fontSize: '26px',
            fontWeight: 400,
            lineHeight: 1.55,
            color: 'rgba(255,255,255,0.85)',
            margin: '0 0 48px 0',
            maxWidth: '760px',
          }}
        >
          {slide.body}
        </p>
      )}

      {/* CTA action pill */}
      {slide.cta && (
        <div
          style={{
            background: '#FFFFFF',
            color: accentColor,
            padding: '18px 40px',
            borderRadius: '100px',
            fontSize: '22px',
            fontWeight: 700,
            display: 'inline-block',
            marginBottom: '24px',
          }}
        >
          {slide.cta}
        </div>
      )}

      {/* Subtitle */}
      {slide.subtitle && (
        <p
          style={{
            fontSize: '20px',
            color: 'rgba(255,255,255,0.7)',
            margin: 0,
          }}
        >
          {slide.subtitle}
        </p>
      )}
    </div>
  );
}

export default CtaSlide;