// ============================================================
// PROOF: Cases + Reviews + Selos
// ============================================================

// CASES — copy humanizada, fotos quando disponíveis
const CASES = [
  {
    size: 'medium',
    photo: 'assets/case-moreira.jpg',
    clientLogo: 'assets/client-moreira.jpg',
    logoWide: true,
    setor: 'Caminhões · Ribeirão Preto',
    name: 'Moreira Caminhões',
    sistema: 'Catálogo grande, operação organizada',
    desc: 'Mais de 200 veículos no pátio. A gente conectou o AutoGerência ao site, ligou Google Ads e Meta Ads por modelo e botou o Kommo CRM pra acompanhar cada lead até o test-drive. O vendedor vê no celular quem chegou, de onde, e o que respondeu.',
    entregas: ['Google Ads', 'Meta Ads', 'Kommo CRM', 'Catálogo sincronizado', 'WhatsApp organizado'],
    quote: 'O cliente chega sabendo do caminhão, e o vendedor já sabe quem está falando. Mudou.',
    person: 'Equipe comercial · Moreira Caminhões',
  },
  {
    size: 'big',
    photo: 'assets/case-quintal-jardins.jpg',
    clientLogo: 'assets/client-quintal.png',
    setor: 'Jardinagem · Ribeirão Preto',
    name: 'Quintal Jardins',
    sistema: 'Loja física que aprendeu a vender online',
    desc: 'A loja já existia, mas vendia só na rua. A gente abriu o e-commerce, conectou o estoque pra não vender o que não tinha, segmentou os anúncios por tipo de planta e organizou o acompanhamento de cada pedido até a entrega.',
    entregas: ['Loja online', 'Anúncios segmentados', 'Estoque sincronizado', 'Acompanhamento de pedido'],
    quote: 'Tinha loja parada online. Hoje o e-commerce já é um canal de venda forte.',
    person: 'Proprietário · Quintal Jardins',
  },
  {
    size: 'small',
    clientLogo: 'assets/client-fabricio.png',
    logoWide: true,
    setor: 'Saúde · compliance médico',
    name: 'Dr. Fabrício Freitas',
    sistema: 'Anúncio médico dentro das normas',
    desc: 'Conta Google Ads e Meta Ads aprovadas nas políticas de saúde, criativo revisado conforme CFM, e CRM organizando paciente do primeiro contato à consulta. Tudo verificado, sem risco de suspensão.',
    entregas: ['Google Ads saúde', 'Meta Ads saúde', 'CRM', 'Compliance CFM'],
    quote: 'Anunciar medicina exige cuidado. Aqui funciona dentro das regras.',
    person: 'Dr. Fabrício Freitas · CRM/SP 122138',
  },
];

function Cases() {
  return (
    <section className="section" id="cases" data-screen-label="06 Cases">
      <div className="container">

        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow">06 · cases</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              Cada cliente tem<br />um <em>sistema próprio.</em>
            </h2>
            <p className="lead" style={{ marginTop: 22 }}>
              Não vendemos pacote padronizado. Construímos a operação que cabe no negócio — e ela continua rodando depois.
            </p>
          </div>
          <a className="btn btn-outline" href="cases.html">
            Ver todos os cases <Icon.arrow />
          </a>
        </div>

        <div className="cases-grid">
          {CASES.map((c) => (
            <article className={`case-card ${c.size} ${c.photo ? 'has-photo' : ''} reveal`} key={c.name}>
              {c.photo && (
                <div className="case-photo">
                  <img src={R(c.photo)} alt={c.name} loading="lazy" decoding="async" />
                  <span className="case-photo-tag">{c.setor}</span>
                </div>
              )}

              <div className="case-body">
                {!c.photo && <span className="c-tag">{c.setor}</span>}
                {c.logoWide ? (
                  <div className="c-logo-wide">
                    <img src={R(c.clientLogo)} alt={c.name} loading="lazy" decoding="async" />
                  </div>
                ) : (
                  <div className="c-name-row">
                    {c.clientLogo && (
                      <span className="c-name-logo"><img src={R(c.clientLogo)} alt="" loading="lazy" decoding="async" /></span>
                    )}
                    <h3 className="c-name">{c.name}</h3>
                  </div>
                )}

                <div className="case-system">
                  <span className="cs-label">o sistema</span>
                  <p className="cs-title">{c.sistema}</p>
                </div>

                <p className="c-desc">{c.desc}</p>

                <div className="case-stack">
                  {c.entregas.map(s => (
                    <span className="case-stack-chip" key={s}>{s}</span>
                  ))}
                </div>

                <div className="case-quote">
                  <span className="cq-mark">“</span>
                  <p>{c.quote}</p>
                  <span className="cq-person">— {c.person}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

      </div>
    </section>
  );
}

// REVIEWS (Google — editáveis manualmente conforme briefing)
const REVIEWS = [
  {
    n: 'Tiago Almeida',
    avatar: 'T',
    when: 'há 2 semanas',
    stars: 5,
    body: 'A equipe da Apta está comigo há mais de um ano. Tráfego do Google funciona, e o melhor: tem alguém que atende quando o anúncio para, quando o site cai, quando aparece coisa nova. Recomendo demais.'
  },
  {
    n: 'Sérgio (Mopa)',
    avatar: 'S',
    when: 'há 1 mês',
    stars: 5,
    body: 'Eu tinha loja física e queria vender online. A Apta cuidou de tudo — site, integração com Bling, anúncio no Google, Instagram. Hoje a loja online já virou um canal de venda forte. Atendimento muito próximo.'
  },
  {
    n: 'Felipe (Seu Gás)',
    avatar: 'F',
    when: 'há 2 meses',
    stars: 5,
    body: 'Trabalho com revenda em Araras e Limeira, e a Apta separou as campanhas por cidade. Consigo ver exatamente de onde vem cada pedido. Vale muito mais do que paguei.'
  },
  {
    n: 'Camila (Planalto)',
    avatar: 'C',
    when: 'há 3 meses',
    stars: 5,
    body: 'Profissionais éticos e dedicados. A equipe é objetiva, explica o que tá fazendo e os relatórios chegam direitinho toda semana. Já indiquei pra outros revendedores.'
  },
  {
    n: 'Marco e Eliane',
    avatar: 'M',
    when: 'há 4 meses',
    stars: 5,
    body: 'Pessoal sério, trabalho bem feito. Recomendo pra quem quer estar no Google e não sabe por onde começar — eles cuidam de tudo.'
  },
  {
    n: 'Wesley (Vip Gás)',
    avatar: 'W',
    when: 'há 5 meses',
    stars: 5,
    body: 'Anúncio rodando direto, sem dor de cabeça. Quando preciso falar, respondem no mesmo dia. Time de confiança.'
  },
];

function Reviews() {
  return (
    <section className="section" id="reviews" data-screen-label="07 Reviews">
      <div className="container">

        <div className="reviews-header reveal">
          <div style={{ maxWidth: 600 }}>
            <span className="eyebrow">07 · depoimentos</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              Avaliações reais<br />do <em>Google.</em>
            </h2>
          </div>

          <a className="reviews-score" href="https://www.google.com/maps/place/Apta+Marketing+Digital/@-21.1050963,-47.7893278,17z/data=!4m8!3m7!1s0x600ca6b3788fa2b5:0xedff8e28b62aa3d3!9m1!1b1" target="_blank" rel="noreferrer">
            <div className="g"><img src={R('assets/logo-gmn-store.png')} alt="Google Meu Negócio" loading="lazy" decoding="async" /></div>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1, letterSpacing: '-0.02em' }}>5.0</span>
                <StarRow n={5} size={16} />
              </div>
              <div className="meta">Baseado em 24 avaliações · ver no Google ↗</div>
            </div>
          </a>
        </div>

        <div className="reviews-grid">
          {REVIEWS.map((r, i) => (
            <div className="review-card reveal" key={i}>
              <div className="r-head">
                <div className="r-avatar" style={{
                  background: ['var(--olive-soft)', 'var(--gold)', 'var(--lavender)', 'var(--sage)', 'var(--coral)', 'var(--olive)'][i % 6],
                  color: 'var(--bg)'
                }}>
                  {r.avatar}
                </div>
                <div style={{ flex: 1 }}>
                  <div className="r-name">{r.n}</div>
                  <div className="r-meta">{r.when}</div>
                </div>
                <StarRow n={r.stars} />
              </div>
              <p className="r-body">{r.body}</p>
              <div className="r-foot">via Google</div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 36 }} className="reveal">
          <a className="btn btn-outline" href="https://www.google.com/search?q=apta+marketing+digital+ribeirao+preto" target="_blank" rel="noreferrer">
            Ver todas no Google <Icon.arrow />
          </a>
        </div>

      </div>
    </section>
  );
}

function Selos() {
  return (
    <section className="selos" data-screen-label="08 Selos">
      <div className="container selos-inner">

        <div className="selo">
          <img src={R('assets/google-partner-v2.png')} alt="Google Partner" loading="lazy" decoding="async" style={{ height: 72 }} />
          <div className="selo-text">
            <span className="a">Google Partner</span>
            <span className="b">Aprovado · Basic Access</span>
          </div>
        </div>

        <div className="selo-divider"></div>

        <div className="selo">
          <img src={R('assets/logo-kommo.png')} alt="Kommo CRM" loading="lazy" decoding="async" style={{ height: 38 }} />
          <div className="selo-text">
            <span className="a">Kommo CRM</span>
            <span className="b">Parceiro Oficial · Brasil</span>
          </div>
        </div>

        <div className="selo-divider"></div>

        <div className="selo">
          <img src={R('assets/logo-n8n.png')} alt="n8n" loading="lazy" decoding="async" style={{ height: 44, mixBlendMode: 'multiply' }} />
          <div className="selo-text">
            <span className="a">Automação + IA</span>
            <span className="b">Implantação · n8n · API oficial</span>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Cases, Reviews, Selos });