// Personas — 3 personas with pain → result structure + hover lift
const { useState: usePersonaState } = React;

function PersonaCard({ num, name, pain, result }) {
  const [hover, setHover] = usePersonaState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--surface-hover)' : 'var(--surface)',
        border: '1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'),
        borderRadius: '12px',
        padding: '32px',
        display: 'flex', flexDirection: 'column', gap: '20px',
        minHeight: '320px', height: '100%', boxSizing: 'border-box',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 16px 32px -16px rgba(0,0,0,0.7)' : 'none',
        transition: 'background 400ms cubic-bezier(0.65, 0, 0.35, 1), border-color 400ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1)',
      }}
    >
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: '12px',
        color: 'var(--accent)', letterSpacing: '0.12em',
      }}>{num} —</span>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 700,
        fontSize: '28px', letterSpacing: '-0.02em',
        color: 'var(--text-primary)', margin: 0,
        lineHeight: 1.1,
      }}>{name}</h3>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '4px', flex: 1 }}>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: '15px',
          color: 'var(--text-primary)', lineHeight: 1.6,
          margin: 0, fontWeight: 500, flex: 1,
        }}>{result}</p>

        <div style={{ height: '1px', background: 'var(--border-subtle)', width: '100%' }} />

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: '13px',
          color: 'var(--text-tertiary)', lineHeight: 1.55,
          margin: 0,
        }}>{pain}</p>
      </div>
    </div>
  );
}

function Personas() {
  const items = [
    {
      num: '01',
      name: 'E-shopy nabízející zákazníkům fyzické produkty',
      pain: 'Pálíš rozpočet na kreativy, co nefungují. Produkční den stojí 80k a vrátí 4 videa.',
      result: 'Projdeme účty, najdeme co u tebe táhne, vyrobíme přesně to. Desítky variant měsíčně.',
    },
    {
      num: '02',
      name: 'Značky využívající reklamní prostor sítě Meta',
      pain: 'Klient chce 50 bannerů do pondělí, in-house tým má frontu. Hledáš whitelabel partnera.',
      result: 'Whitelabel produkce. Tvůj klient o nás neví, výstup chodí pod tvojí značkou.',
    },
    {
      num: '03',
      name: 'Firmy ladící výkonnost v systému Meta Andromeda',
      pain: 'Brand guidelines musí sedět, ale potřebujete rychle scale. In-house tým je v jiném prioritním cyklu.',
      result: 'Brand book je vstup, ne příloha. AI s mantinely. Lokalizace do více trhů za den.',
    },
  ];

  return (
    <section data-screen-label="07 Pro koho" style={{
      maxWidth: '1440px', margin: '0 auto',
      padding: '65px 32px',
    }}>
      <NumberedHeader
        num="05"
        title="Pro koho to děláme."
        sub="Tři typy klientů. Tři bolesti. Tři způsoby, jak zapadnout."
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '24px',
      }}>
        {items.map((it, i) => (
          <Reveal key={it.num} delay={i * 120} y={28} style={{ height: '100%' }}>
            <PersonaCard {...it} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Personas = Personas;