/**
 * HookSlide.tsx
 * Slide 1: Identity Hook.
 * Strong positioning headline, subheading, and subtle role context.
 * Designed for 1080x1080 square format (LinkedIn carousel safe).
 */

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

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

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

  return (
    <div
      style={{
        width: '1080px',
        height: '1080px',
        background: bgColor,
        fontFamily,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        padding: '96px 88px',
        boxSizing: 'border-box',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Top accent bar */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '8px',
          background: accentColor,
        }}
      />

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

      {/* Tag/label above headline */}
      <div
        style={{
          fontSize: '18px',
          fontWeight: 600,
          color: accentColor,
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          marginBottom: '28px',
        }}
      >
        Career Carousel
      </div>

      {/* Main headline — the positioning angle */}
      <h1
        style={{
          fontSize: '68px',
          fontWeight: 800,
          lineHeight: 1.1,
          color: textColor,
          margin: '0 0 36px 0',
          maxWidth: '860px',
          letterSpacing: '-0.02em',
        }}
      >
        {slide.title}
      </h1>

      {/* Subheading */}
      {slide.subtitle && (
        <p
          style={{
            fontSize: '28px',
            fontWeight: 400,
            lineHeight: 1.5,
            color: subtextColor,
            margin: '0 0 48px 0',
            maxWidth: '780px',
          }}
        >
          {slide.subtitle}
        </p>
      )}

      {/* Context line (role target) */}
      {slide.body && (
        <div
          style={{
            display: 'inline-block',
            background: accentColor,
            color: '#fff',
            padding: '12px 24px',
            borderRadius: '6px',
            fontSize: '20px',
            fontWeight: 600,
          }}
        >
          {slide.body}
        </div>
      )}

      {/* Bottom decorative element */}
      <div
        style={{
          position: 'absolute',
          bottom: '48px',
          left: '88px',
          right: '88px',
          height: '1px',
          background: borderColor,
        }}
      />
      <div
        style={{
          position: 'absolute',
          bottom: '24px',
          left: '88px',
          fontSize: '16px',
          color: subtextColor,
          letterSpacing: '0.05em',
        }}
      >
        Swipe to see why →
      </div>
    </div>
  );
}

export default HookSlide;