function Tese() {
  return (
    <section className="tight">
      <div className="container">
        <div className="tese-grid">
          <Reveal>
            <div>
              <span className="eyebrow">O cenário mudou</span>
              <h2 className="h2">O paciente deixou de ser apenas um <em>consumidor</em> e passou a se comportar como um <em>potencial litigante</em>.</h2>
              <ul className="tese-points">
                <li><span className="num">01</span><span><strong>Expectativas Irreais:</strong> Promessas estéticas de redes sociais fazem o paciente exigir milagres biológicos que a anatomia humana não permite.</span></li>
                <li><span className="num">02</span><span><strong>A Era da Judicialização:</strong> Frustrações subjetivas ou puramente financeiras do paciente hoje são convertidas em ações judiciais com extrema facilidade.</span></li>
                <li><span className="num">03</span><span><strong>Alinhamento de Riscos:</strong> Sua segurança jurídica começa antes do primeiro atendimento, blindando a relação clínica contra o imediatismo da internet.</span></li>
              </ul>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <GapChart />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function GapChart() {
  // Bar chart: processos judiciais contra dentistas no Brasil (estimativa CNJ + literatura odontolegal)
  const data = [
    { y: "2014", v: 4.2 },
    { y: "2015", v: 7.5 },
    { y: "2016", v: 11.0 },
    { y: "2017", v: 16.0 },
    { y: "2018", v: 21.5 },
    { y: "2019", v: 27.0 },
    { y: "2020", v: 31.5 },
    { y: "2021", v: 38.0 },
    { y: "2022", v: 44.0 },
    { y: "2023", v: 49.0 },
  ];
  const W = 560, H = 320, P_L = 50, P_R = 24, P_T = 40, P_B = 56;
  const innerW = W - P_L - P_R;
  const innerH = H - P_T - P_B;
  const max = 55;
  const barW = innerW / data.length * 0.62;
  const step = innerW / data.length;
  return (
    <div className="gap-chart">
      <div className="head">
        <span>// processos judiciais contra dentistas · brasil</span>
        <span className="tag">+1.067% em 10 anos</span>
      </div>
      <svg className="gap-svg" viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Crescimento de processos judiciais contra dentistas no Brasil entre 2014 e 2023">
        <defs>
          <linearGradient id="barG" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#C9A84C" stopOpacity="1"/>
            <stop offset="100%" stopColor="#a98826" stopOpacity="0.55"/>
          </linearGradient>
          <linearGradient id="barLast" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#1B3A6B" stopOpacity="1"/>
            <stop offset="100%" stopColor="#0f1d33" stopOpacity="0.75"/>
          </linearGradient>
        </defs>
        {/* y-axis grid + labels */}
        {[0, 10, 20, 30, 40, 50].map(v => {
          const y = P_T + innerH - (v/max) * innerH;
          return (
            <g key={v}>
              <line x1={P_L} x2={W-P_R} y1={y} y2={y} stroke="rgba(15,29,51,.08)" strokeDasharray="2 4"/>
              <text x={P_L-10} y={y+4} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="#7a8190">{v}k</text>
            </g>
          );
        })}
        {/* bars */}
        {data.map((d, i) => {
          const cx = P_L + i*step + step/2;
          const h = (d.v/max) * innerH;
          const y = P_T + innerH - h;
          const last = i === data.length - 1;
          return (
            <g key={d.y}>
              <rect x={cx - barW/2} y={y} width={barW} height={h} rx="2" fill={last ? "url(#barLast)" : "url(#barG)"}/>
              <text x={cx} y={y - 6} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9.5" fill={last ? "#a98826" : "#3a4760"}>{d.v.toFixed(1)}</text>
              <text x={cx} y={H - P_B + 18} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#7a8190">{d.y}</text>
            </g>
          );
        })}
        {/* x-axis */}
        <line x1={P_L} x2={W-P_R} y1={P_T+innerH} y2={P_T+innerH} stroke="rgba(15,29,51,.18)"/>
        {/* y-axis title */}
        <text x={16} y={P_T+innerH/2} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#7a8190" letterSpacing="1.5" transform={`rotate(-90 16 ${P_T+innerH/2})`}>PROCESSOS / ANO</text>
        {/* title */}
        <text x={P_L} y={24} fontFamily="JetBrains Mono" fontSize="10" fill="#a98826" letterSpacing="2">CRESCIMENTO ANUAL</text>
      </svg>
      <div className="gap-legend">
        <span><span className="dot" style={{background:"#C9A84C"}}></span>Processos por ano</span>
        <span><span className="dot" style={{background:"#1B3A6B"}}></span>2023 · recorde</span>
        <span style={{opacity:.7}}>Fonte: CNJ · estimativas odontolegais</span>
      </div>
    </div>
  );
}

const COMPARE_ROWS = [
  {
    exp_h: "Prontuário Comercial",
    exp_b: "Registra apenas a evolução clínica básica, para fins de cobrança.",
    blin_h: "Prontuário Odonto-legal",
    blin_b: "Documenta consentimentos, recusas e riscos biológicos de forma inquestionável.",
  },
  {
    exp_h: "Contrato Genérico",
    exp_b: "Termo padrão que foca no serviço, mas deixa o ônus da prova contra você.",
    blin_h: "Contrato de Especialidade",
    blin_b: "Regras claras de meio e resultado, desenhadas sob a ótica do CDC.",
  },
  {
    exp_h: "Sem apoio Técnico",
    exp_b: "Enfrenta o processo judicial sem direcionamento.",
    blin_h: "Parceria Técnica",
    blin_b: "Um perito assistente conduzindo a linguagem científica lado a lado com a defesa.",
  },
  {
    exp_h: "Presença Digital Descuidada",
    exp_b: "Publicidade sem critério e antes/depois sem autorização viram prova no CRO.",
    blin_h: "Conformidade Contínua",
    blin_b: "Presença digital monitorada e alinhada às resoluções do CFO.",
  },
];

function Argumentos() {
  return (
    <section id="diferenciais" className="centered-sec">
      <div className="container">
        <Reveal>
          <span className="eyebrow">Duas formas de encarar a odontologia</span>
          <h2 className="h2" style={{maxWidth:"24ch", marginTop:10, color:"#FFFFFF"}}>Qual Dentista você quer ser?</h2>
        </Reveal>

        <div className="vs-grid" style={{marginTop:44}}>
          <Reveal>
            <article className="vs-panel exposed">
              <header className="vs-head">
                <span className="vs-badge exp">Exposto</span>
                <h3>Dentista Exposto</h3>
                <p>Confia no talento técnico e deixa a segurança jurídica para depois.</p>
              </header>
              <ul className="vs-list">
                {COMPARE_ROWS.map((r, i) => (
                  <li key={i}>
                    <span className="vs-x" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                    </span>
                    <span><strong>{r.exp_h}.</strong> {r.exp_b}</span>
                  </li>
                ))}
              </ul>
            </article>
          </Reveal>

          <Reveal delay={120}>
            <article className="vs-panel shielded">
              <div className="vs-glow" aria-hidden="true"></div>
              <div className="vs-inner">
                <header className="vs-head">
                  <span className="vs-badge blin">Blindado</span>
                  <h3>Dentista Seguro</h3>
                  <p>Constrói a proteção jurídica antes de qualquer atendimento.</p>
                </header>
                <ul className="vs-list">
                  {COMPARE_ROWS.map((r, i) => (
                    <li key={i}>
                      <span className="vs-check" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                      </span>
                      <span><strong>{r.blin_h}.</strong> {r.blin_b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PullBand() {
  return (
    <section className="pull-band tight">
      <div className="container">
        <div className="row">
          <span className="mark serif-it">“</span>
          <div className="text">
            A pergunta não é <em>se</em> você vai ser processado. É se você estará <em>protegido</em> quando isso acontecer."
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Tese, GapChart, Argumentos, PullBand });