// Trust — 4 differentiator cards: how we do it differently
// Card 03 ("Řízené výkonem") carries the data-driven USP — explicit audit mention.
const { useState: useTrustState } = React;

function TrustCard({ num, label, lead, body, accent }) {
  const [hover, setHover] = useTrustState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        border: '1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'),
        borderRadius: '14px',
        padding: '32px',
        background: hover ? 'var(--surface-hover)' : 'var(--surface)',
        display: 'flex', flexDirection: 'column', gap: '14px',
        position: 'relative',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 16px 40px -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)',
        minHeight: accent ? '320px' : '260px',
      }}
    >
      <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,
      }}>{label}</h3>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: '15px',
        color: 'var(--text-primary)', lineHeight: 1.55,
        margin: 0, fontWeight: 500,
      }}>{lead}</p>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: '14px',
        color: 'var(--text-secondary)', lineHeight: 1.55,
        margin: 0,
      }}>{body}</p>
      {accent && (
        <div style={{
          marginTop: 'auto',
          padding: '12px 14px',
          background: 'rgba(247,19,63,0.08)',
          border: '1px solid rgba(247,19,63,0.22)',
          borderRadius: '8px',
          fontFamily: 'var(--font-mono)', fontSize: '11px',
          color: '#FFB48E', letterSpacing: '0.05em',
          lineHeight: 1.5,
        }}>
          <span style={{ color: 'var(--accent)', fontWeight: 600 }}>● USP </span>
          {accent}
        </div>
      )}
    </div>
  );
}

function Trust() {
  const cards = [
    {
      num: '01',
      label: 'Bez natáčení',
      lead: 'Žádný štáb, žádné lokace, žádné čekání.',
      body: 'Kreativy vznikají digitálně — rychle a bez produkčního chaosu.',
    },
    {
      num: '02',
      label: 'Stačí jeden podklad',
      lead: 'Nemusíš připravovat desítky kreativ.',
      body: 'Z jednoho vstupu vznikne kompletní sada pro kampaně — videa, bannery, motion, avatary.',
    },
    {
      num: '03',
      label: 'Řízené výkonem',
      lead: 'Nevycházíme z pocitu, ale z toho, co funguje.',
      body: 'Projdeme tvoje reklamní účty (Meta, TikTok, Google) nebo si sedneme s tvým marketérem. Vyrobíme přesně to, co u tebe funguje.',
    },
    {
      num: '04',
      label: 'Pod kontrolou brandu',
      lead: 'Každý výstup drží tvůj vizuál i komunikaci.',
      body: 'AI dostává mantinely, ne volnou ruku. Brand book je vstup, ne příloha.',
    },
  ];

  return (
    <section data-screen-label="04 Co děláme jinak" style={{
      maxWidth: '1440px', margin: '0 auto',
      padding: '160px 32px',
    }}>
      <NumberedHeader
        num="02"
        title="Co děláme jinak."
        sub="Nemáme generátor nálepek. Máme produkční linku, která rozumí kampaňové reklamě."
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: '14px',
        marginTop: '24px',
      }}>
        {cards.map((c, i) => (
          <Reveal key={c.num} delay={i * 110} y={28}>
            <TrustCard {...c} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Trust = Trust;