/* global React, Reveal, Icon, CountUp */
const { useState: useCases } = React;

// ════════════════════════════════════════════════════════════
//  CASES DE SUCESSO  (conteúdo placeholder — trocar pelos reais)
// ════════════════════════════════════════════════════════════
const FEATURED = {
  seg: 'Software house & agência',
  initial: 'm', accent: 'var(--peach)',
  metric: 92, suffix: '%', metricLabel: 'das entregas no prazo',
  sub: 'antes era no improviso',
  quote: 'Parei de cobrar todo mundo no grupo de WhatsApp. O sistema avisa quem é o próximo e eu finalmente enxergo a margem real de cada projeto.',
  name: 'Marina R.', role: 'Sócia · Agência Norte',
  chips: [['Ferramentas', '4 → 1'], ['Retrabalho', '−18%']],
};

const CASES = [
  {
    seg: 'Restaurante & bar',
    initial: 'j',
    metric: 31, suffix: '%', metricLabel: 'mais margem no mês',
    quote: 'Comercial, caixa e equipe no mesmo lugar. Fechar o caixa virou questão de minutos.',
    name: 'João P.', role: 'Dono · Bar do Porto',
  },
  {
    seg: 'Representante comercial',
    initial: 'c',
    metric: 27, suffix: '%', metricLabel: 'mais follow-ups em dia',
    quote: 'Minha carteira parou de viver em planilha. Não perco mais nenhum retorno.',
    name: 'Carla S.', role: 'Representante',
  },
];

function Cases() {
  return (
    <section id="cases" className="section section-ink">
      <div className="wrap">
        <div className="sec-head">
          <Reveal as="div" className="eyebrow" style={{ color: 'var(--peach)' }}>Cases de sucesso</Reveal>
          <Reveal as="h2" delay={60} className="sec-title" style={{ color: 'var(--paper)' }}>
            Quem trabalha de verdade,<br />já <em className="it" style={{ color: 'var(--peach)' }}>vive com a Convive</em>.
          </Reveal>
          <Reveal as="p" delay={120} className="sec-lead">
            Operações reais que saíram da bagunça e passaram a crescer com clareza. Resultado que aparece no prazo, na margem e na cabeça de quem toca o negócio.
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 22, marginTop: 50 }} className="cases-grid">
          {/* featured */}
          <Reveal>
            <FeaturedCase c={FEATURED} />
          </Reveal>

          {/* secondary stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {CASES.map((c, i) => (
              <Reveal key={c.name} delay={100 + i * 90} style={{ flex: 1 }}>
                <SmallCase c={c} />
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:820px){.cases-grid{grid-template-columns:1fr !important;}}`}</style>

        <Reveal delay={140} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14.5, color: 'rgba(250,244,234,0.7)' }}>O próximo case pode ser o seu.</span>
          <a href="#conviver" className="btn btn-primary">Vem conviver <Icon name="arrow" size={18} /></a>
        </Reveal>
      </div>
    </section>
  );
}

function Avatar({ initial, size = 48 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: '50%', background: 'var(--terra)', color: 'var(--paper)', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: size * 0.42, flexShrink: 0, border: '2px solid rgba(250,244,234,0.18)' }}>{initial}</span>
  );
}

function Stars() {
  return (
    <div style={{ display: 'inline-flex', gap: 3 }}>
      {[0, 1, 2, 3, 4].map(i => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="var(--peach)" aria-hidden="true">
          <path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z" />
        </svg>
      ))}
    </div>
  );
}

function FeaturedCase({ c }) {
  return (
    <div style={{ height: '100%', background: 'rgba(250,244,234,0.05)', border: '1px solid rgba(250,244,234,0.14)', borderRadius: 'var(--radius-lg)', padding: 'clamp(24px,3.4vw,40px)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--peach)', background: 'rgba(231,193,164,0.12)', borderRadius: 999, padding: '6px 13px' }}>{c.seg}</span>
        <Stars />
      </div>

      {/* big metric */}
      <div style={{ marginTop: 26, display: 'flex', alignItems: 'flex-end', gap: 16, flexWrap: 'wrap' }}>
        <div className="serif-display" style={{ fontSize: 'clamp(64px, 9vw, 104px)', color: 'var(--peach)', lineHeight: 0.86 }}>
          <CountUp to={c.metric} suffix={c.suffix} duration={1400} />
        </div>
        <div style={{ paddingBottom: 10 }}>
          <div style={{ fontSize: 16, color: 'var(--paper)', fontWeight: 600, maxWidth: 200, lineHeight: 1.3 }}>{c.metricLabel}</div>
          <div style={{ fontSize: 13, color: 'rgba(250,244,234,0.55)' }}>{c.sub}</div>
        </div>
      </div>

      {/* chips */}
      <div style={{ display: 'flex', gap: 10, marginTop: 22, flexWrap: 'wrap' }}>
        {c.chips.map(([l, v]) => (
          <div key={l} style={{ display: 'flex', alignItems: 'baseline', gap: 8, background: 'rgba(250,244,234,0.06)', borderRadius: 12, padding: '10px 14px' }}>
            <span style={{ fontSize: 12, color: 'rgba(250,244,234,0.6)', textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 600 }}>{l}</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 15, color: 'var(--paper)', fontWeight: 600 }}>{v}</span>
          </div>
        ))}
      </div>

      <p className="serif-display" style={{ fontSize: 'clamp(19px,2vw,24px)', color: 'var(--paper)', lineHeight: 1.4, marginTop: 26, fontWeight: 400 }}>
        “{c.quote}”
      </p>

      <div style={{ marginTop: 'auto', paddingTop: 26, display: 'flex', alignItems: 'center', gap: 14 }}>
        <Avatar initial={c.initial} size={52} />
        <div>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--paper)' }}>{c.name}</div>
          <div style={{ fontSize: 13.5, color: 'rgba(250,244,234,0.6)' }}>{c.role}</div>
        </div>
      </div>
    </div>
  );
}

function SmallCase({ c }) {
  return (
    <div style={{ height: '100%', background: 'rgba(250,244,234,0.05)', border: '1px solid rgba(250,244,234,0.14)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px,2.4vw,28px)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--peach)' }}>{c.seg}</span>
        <Stars />
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 14 }}>
        <div className="serif-display" style={{ fontSize: 'clamp(40px,5vw,56px)', color: 'var(--peach)', lineHeight: 0.9 }}>
          <CountUp to={c.metric} suffix={c.suffix} duration={1200} />
        </div>
        <div style={{ fontSize: 14, color: 'var(--paper)', fontWeight: 600, maxWidth: 160, lineHeight: 1.25 }}>{c.metricLabel}</div>
      </div>
      <p style={{ fontSize: 15, color: 'rgba(250,244,234,0.85)', lineHeight: 1.5, marginTop: 16 }}>“{c.quote}”</p>
      <div style={{ marginTop: 'auto', paddingTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
        <Avatar initial={c.initial} size={42} />
        <div>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--paper)' }}>{c.name}</div>
          <div style={{ fontSize: 12.5, color: 'rgba(250,244,234,0.6)' }}>{c.role}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Cases });