// Section 7 — Vitrini vs. Instagram vs. agência. Elegant comparison.
function Compare() {
  const rows = [
    { label: 'Tempo até no ar', insta: 'Já tem, mas não é site', agency: '4–8 semanas', vitrini: '48 horas' },
    { label: 'Domínio próprio', insta: false, agency: true, vitrini: true },
    { label: 'Custo de entrada', insta: 'R$0', agency: 'R$3.000+', vitrini: 'R$97 (Fundador)' },
    { label: 'Mensalidade', insta: 'R$0', agency: 'R$0 (ou caro)', vitrini: 'A partir de R$79' },
    { label: 'Edições incluídas', insta: 'Você mesmo', agency: 'Cobradas à parte', vitrini: 'Todo mês, a gente faz' },
    { label: 'Suporte', insta: false, agency: 'Lento', vitrini: 'Humano, rápido' },
  ];
  const Cell = ({ v, accent }) => {
    if (v === true) return <Icon name="check" size={18} color={accent ? '#fff' : 'var(--brand)'} stroke={2.2} />;
    if (v === false) return <Icon name="x" size={18} color={accent ? 'rgba(255,255,255,.6)' : 'var(--muted)'} />;
    return <span style={{ fontSize: 14, fontWeight: accent ? 600 : 400, color: accent ? '#fff' : 'var(--muted)' }}>{v}</span>;
  };
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <span className="eyebrow">Por que Vitrini</span>
            <h2 className="h-section" style={{ margin: '14px auto 0', maxWidth: '16ch' }}>A escolha fica <span className="em">óbvia.</span></h2>
          </div>
        </Reveal>
        <Reveal>
          <div style={{ overflowX: 'auto' }}>
            <div style={{ minWidth: 680, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.1fr', alignItems: 'stretch', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
              {/* header */}
              <div style={{ padding: '22px 24px' }} />
              <ColHead label="Só Instagram" />
              <ColHead label="Agência" />
              <ColHead label="Vitrini" accent />
              {/* rows */}
              {rows.map((r, i) => (
                <React.Fragment key={r.label}>
                  <div style={{ padding: '18px 24px', borderTop: '1px solid var(--line)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink-2)', display: 'flex', alignItems: 'center' }}>{r.label}</div>
                  <div style={cell()}><Cell v={r.insta} /></div>
                  <div style={cell()}><Cell v={r.agency} /></div>
                  <div style={cell(true)}><Cell v={r.vitrini} accent /></div>
                </React.Fragment>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ColHead({ label, accent }) {
  return (
    <div style={{ padding: '22px 20px', textAlign: 'center', position: 'relative',
      background: accent ? 'var(--grad-brand)' : 'transparent', color: accent ? '#fff' : 'var(--ink-2)' }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, letterSpacing: '-.01em' }}>{label}</span>
      {accent && <div style={{ position: 'absolute', top: 10, right: 12 }}><Star size={14} color="#fff" /></div>}
    </div>
  );
}

function cell(accent) {
  return { padding: '18px 20px', borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
    background: accent ? 'rgba(15,107,92,.96)' : 'transparent', borderLeft: accent ? '0' : '1px solid var(--line)', borderRight: accent ? '0' : '1px solid var(--line)' };
}

window.Compare = Compare;