/* global React, CTA */

// ====== BLOCO 7 — O que vem no laudo ======
function LaudoBlock() {
  const items = [
    "Ranking de carreiras com vantagem natural",
    "Diagrama de barras das áreas do conhecimento",
    "Aptidões-chave que mais se destacam no perfil",
    "Análise integrada de perfil comportamental + profissional",
    "Demanda de mercado por área sugerida",
    "Página de resultados online + laudo em PDF",
  ];
  return (
    <section id="b7" className="grain" style={{ background: "var(--ipgs-paper)" }}>
      <style>{`
        .lb-grid { display: grid; gap: 40px; align-items: center; }
        @media (min-width: 900px) { .lb-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
        .lb-mock {
          position: relative;
          aspect-ratio: 3 / 4;
          max-width: 360px;
          width: 100%;
          margin: 0 auto;
          transform: rotate(-3deg);
          transition: transform .5s cubic-bezier(.2,.7,.2,1);
        }
        .lb-mock:hover { transform: rotate(-1deg) translateY(-4px); }
        .lb-mock::before {
          content: "";
          position: absolute; inset: -24px;
          background: radial-gradient(60% 60% at 50% 50%, rgba(198,156,80,.32), transparent 65%);
          z-index: -1;
          filter: blur(18px);
        }
        .lb-paper {
          width: 100%; height: 100%;
          background: white;
          border-radius: 6px;
          box-shadow: var(--shadow-gold);
          border: 1px solid rgba(6,41,71,.08);
          padding: 26px 22px;
          color: var(--ipgs-deep);
          position: relative;
          overflow: hidden;
        }
        .lb-paper-head {
          display: flex; justify-content: space-between;
          padding-bottom: 12px;
          border-bottom: 1px solid rgba(6,41,71,.12);
          font-family: var(--font-mono);
          font-size: 8.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--deep-700);
        }
        .lb-paper h4 {
          font-family: var(--font-display);
          font-style: italic;
          font-size: 22px;
          margin: 14px 0 4px;
          font-weight: 400;
        }
        .lb-paper .sub {
          font-family: var(--font-mono);
          font-size: 8.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--deep-700);
          margin-bottom: 14px;
        }
        .lb-rank {
          display: grid; grid-template-columns: 18px 1fr 28px;
          gap: 8px; margin-bottom: 8px; font-size: 11px;
          align-items: center;
        }
        .lb-rank .rk { font-family: var(--font-display); font-style: italic; color: var(--gold-700); font-size: 13px; }
        .lb-bar { height: 3px; border-radius: 999px; background: var(--paper-200); }
        .lb-bar > span { display: block; height: 100%; background: var(--ipgs-deep); border-radius: 999px; }
        .lb-bar.gold > span { background: var(--ipgs-gold); }
        .lb-bar.mint > span { background: var(--mint-700); }
        .lb-pct { font-family: var(--font-mono); font-size: 9px; text-align: right; color: var(--deep-700); }
        .lb-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
        .lb-tag-row span {
          font-family: var(--font-mono); font-size: 9px;
          padding: 3px 8px; border-radius: 999px;
          background: var(--paper-100);
          border: 1px solid rgba(6,41,71,.10);
          letter-spacing: .08em;
        }
        .lb-foot {
          position: absolute; left: 22px; right: 22px; bottom: 18px;
          padding-top: 10px;
          border-top: 1px solid rgba(6,41,71,.10);
          display: flex; justify-content: space-between;
          font-family: var(--font-mono);
          font-size: 7.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--deep-700);
        }

        .lb-list { list-style: none; padding: 0; margin: 24px 0 0; }
        .lb-list li {
          display: grid; grid-template-columns: 22px 1fr;
          gap: 12px; padding: 12px 0;
          border-bottom: 1px solid rgba(6,41,71,.10);
          font-size: 16px; color: var(--ipgs-deep);
        }
        .lb-list li svg { margin-top: 4px; color: var(--ipgs-gold); }
        .lb-caption {
          margin-top: 18px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--deep-700);
        }
        .lb-caption .dot { color: var(--ipgs-gold); margin: 0 8px; }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">O entregável</span>
        <h2 className="display reveal" style={{ marginTop: 14, marginBottom: 32, maxWidth: "16ch" }}>
          O que seu filho <em>recebe.</em>
        </h2>

        <div className="lb-grid">
          <div className="reveal">
            <div className="lb-mock">
              <div className="lb-paper">
                <div className="lb-paper-head"><span>IPGS · MAP. APTIDÕES</span><span>v. 26.01</span></div>
                <h4>Mariana, 17 anos</h4>
                <div className="sub">laudo · 12 mai 2026 · CRP 12/24994</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 8.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold-700)", marginBottom: 8 }}>
                  Áreas com vantagem natural
                </div>
                {[
                  { n: "01", l: "Saúde · Medicina", v: 0.94, c: "" },
                  { n: "02", l: "Investigação · Pesquisa", v: 0.86, c: "gold" },
                  { n: "03", l: "Educação · Psicologia", v: 0.78, c: "mint" },
                  { n: "04", l: "Comunicação", v: 0.62, c: "" },
                ].map((r) => (
                  <div className="lb-rank" key={r.n}>
                    <span className="rk">{r.n}</span>
                    <span>
                      <div style={{ marginBottom: 3 }}>{r.l}</div>
                      <span className={`lb-bar ${r.c}`}><span style={{ width: `${r.v * 100}%` }}></span></span>
                    </span>
                    <span className="lb-pct">{Math.round(r.v * 100)}%</span>
                  </div>
                ))}
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 8.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold-700)", marginTop: 12, marginBottom: 4 }}>
                  Superpotências
                </div>
                <div className="lb-tag-row">
                  {["Análise crítica", "Empatia", "Persistência"].map((s) => <span key={s}>{s}</span>)}
                </div>
                <div className="lb-foot"><span>página 03 de 18</span><span>IPGS · 2026</span></div>
              </div>
            </div>
            <p style={{
              textAlign: "center", marginTop: 22,
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--deep-700)"
            }}>
              [ TODO-MEDIA: foto/screenshot real do laudo ]
            </p>
          </div>

          <div className="reveal">
            <ul className="lb-list">
              {items.map((t) => (
                <li key={t}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <circle cx="12" cy="12" r="9"/>
                    <path d="M8 12.5l2.8 2.8L16 9.7"/>
                  </svg>
                  <span>{t}</span>
                </li>
              ))}
              <li>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="9"/>
                  <path d="M12 8v4l3 2"/>
                </svg>
                <span>Acesso a sessão extra com orientador <em className="serif" style={{ color: "var(--gold-700)" }}>(opcional · pré-agendamento)</em></span>
              </li>
            </ul>
            <div className="lb-caption">
              documento técnico revisado por psicólogos com CRP ativo <span className="dot">·</span> IPGS
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 8 — Reviews (slots) ======
function Reviews() {
  return (
    <section id="b8" className="grain" style={{ background: "var(--paper-100)" }}>
      <style>{`
        .rv-head { margin-bottom: 32px; }
        .rv-track {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 86%;
          gap: 16px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding-bottom: 14px;
          margin: 0 -20px;
          padding-left: 20px;
          padding-right: 20px;
          scrollbar-width: thin;
        }
        @media (min-width: 720px) {
          .rv-track {
            grid-auto-columns: 1fr;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-flow: initial;
            overflow: visible;
            margin: 0;
            padding: 0;
            gap: 22px;
          }
        }
        .rv-card {
          scroll-snap-align: start;
          background: white;
          border: 1px solid rgba(6,41,71,.08);
          border-radius: var(--r-lg);
          padding: 26px 22px;
          box-shadow: var(--shadow-sm);
          display: flex; flex-direction: column;
          min-height: 260px;
        }
        .rv-card.empty {
          background: transparent;
          border: 1px dashed rgba(6,41,71,.20);
          color: var(--deep-700);
          align-items: center; justify-content: center;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.12em;
          text-align: center;
          text-transform: uppercase;
        }
        .rv-stars { display: inline-flex; gap: 3px; margin-bottom: 14px; }
        .rv-stars svg { color: var(--mint-700); }
        .rv-q {
          font-family: var(--font-display);
          font-style: italic;
          font-size: 17px;
          line-height: 1.5;
          color: var(--ipgs-deep);
          margin: 0 0 18px;
        }
        .rv-foot {
          margin-top: auto;
          padding-top: 16px;
          border-top: 1px solid rgba(6,41,71,.08);
          display: flex; align-items: center; gap: 12px;
        }
        .rv-av {
          width: 40px; height: 40px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--deep-200), var(--deep-700));
          color: var(--ipgs-gold);
          display: grid; place-items: center;
          font-family: var(--font-display); font-style: italic;
          font-size: 18px;
        }
        .rv-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--deep-700); line-height: 1.5; }
        .rv-meta .name { color: var(--ipgs-deep); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
        .rv-tag {
          display: inline-block;
          margin-top: 14px;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          padding: 5px 10px;
          border-radius: 999px;
          background: rgba(198,156,80,.14);
          color: var(--gold-700);
        }
        .rv-count {
          margin-top: 24px;
          text-align: center;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--deep-700);
        }
        .rv-count strong { color: var(--ipgs-deep); }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="rv-head">
          <span className="eyebrow">Quem já fez</span>
          <h2 className="display reveal" style={{ marginTop: 14, maxWidth: "18ch" }}>
            Quem já fez, conta <em>o que mudou.</em>
          </h2>
        </div>
        <div className="rv-track">
          <article className="rv-card reveal">
            <Stars />
            <p className="rv-q">
              "Eu não sabia o que queria. Achava que era arquitetura por causa dos pais. O laudo mostrou que eu tinha perfil empreendedor e investigativo — descobri que era engenharia de produção. Hoje eu sei pra onde estou indo."
            </p>
            <span className="rv-tag">carreira sugerida: Engenharia de Produção</span>
            <div className="rv-foot">
              <span className="rv-av">A</span>
              <div className="rv-meta">
                <div className="name">Amorim · 19 anos</div>
                <div>Florianópolis · SC</div>
              </div>
            </div>
          </article>
          <article className="rv-card empty reveal">
            [ depoimento 02 · slot reservado ·<br/>plugar quando coletar ]
          </article>
          <article className="rv-card empty reveal">
            [ depoimento 03 · slot reservado ·<br/>plugar quando coletar ]
          </article>
        </div>
        <div className="rv-count">
          <strong>+8 mapeamentos realizados</strong> · 100% revisados pela equipe IPGS
        </div>
      </div>
    </section>
  );
}

function Stars() {
  return (
    <span className="rv-stars" aria-label="5 estrelas">
      {[0,1,2,3,4].map((i) => (
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/>
        </svg>
      ))}
    </span>
  );
}

// ====== BLOCO 9 — Comparativo ======
function VsTable() {
  const rows = [
    ["Metodologia", "algoritmo único superficial", "RIASEC + DISC integrados"],
    ["Análise", "gerada por robô", "revisada por psicólogos com CRP ativo"],
    ["Entrega", "resultado genérico em 30s", "laudo personalizado em até 48h"],
    ["Profundidade", "1 dimensão", "6 áreas RIASEC + 4 dimensões DISC"],
    ["Suporte pós", "nenhum", "sessão extra com orientador disponível"],
  ];
  return (
    <section id="b9" className="grain" style={{ background: "var(--ipgs-paper)" }}>
      <style>{`
        .vs-head { margin-bottom: 32px; }
        .vs-table {
          border-top: 1px solid rgba(6,41,71,.16);
        }
        .vs-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          border-bottom: 1px solid rgba(6,41,71,.10);
        }
        @media (min-width: 720px) {
          .vs-row { grid-template-columns: 0.8fr 1fr 1fr; }
        }
        .vs-label {
          display: none;
          padding: 18px 16px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--deep-700);
          align-self: center;
        }
        .vs-mobile-label {
          grid-column: 1 / -1;
          padding: 14px 16px 6px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--deep-700);
          background: var(--paper-100);
          border-bottom: 1px dashed rgba(6,41,71,.10);
        }
        @media (min-width: 720px) {
          .vs-label { display: block; }
          .vs-mobile-label { display: none; }
        }
        .vs-cell {
          padding: 18px 16px;
          font-size: 14.5px;
          line-height: 1.45;
        }
        .vs-cell.quiz { color: var(--deep-700); }
        .vs-cell.quiz::before {
          content: "Quiz online · ";
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--deep-700);
          opacity: 0.7;
        }
        .vs-cell.ipgs {
          color: var(--ipgs-deep);
          font-weight: 600;
          background: linear-gradient(0deg, rgba(198,156,80,.10), rgba(198,156,80,.10));
          border-left: 2px solid var(--ipgs-gold);
        }
        .vs-cell.ipgs::before {
          content: "IPGS · ";
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--gold-700);
        }
        @media (min-width: 720px) {
          .vs-cell.quiz::before, .vs-cell.ipgs::before { content: none; }
        }
        .vs-head-row {
          display: none;
          grid-template-columns: 0.8fr 1fr 1fr;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          padding: 14px 16px;
          color: var(--deep-700);
          background: rgba(6,41,71,.04);
        }
        .vs-head-row .ipgs-h { color: var(--gold-700); }
        @media (min-width: 720px) { .vs-head-row { display: grid; } }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="vs-head">
          <span className="eyebrow">Comparativo</span>
          <h2 className="display reveal" style={{ marginTop: 14, maxWidth: "20ch" }}>
            Por que isso não é um <em>teste grátis da internet.</em>
          </h2>
        </div>
        <div className="vs-table">
          <div className="vs-head-row">
            <span></span>
            <span>Quiz online grátis</span>
            <span className="ipgs-h">Mapeamento IPGS</span>
          </div>
          {rows.map((r, i) => (
            <div className="vs-row" key={i}>
              <div className="vs-mobile-label">{r[0]}</div>
              <span className="vs-label">{r[0]}</span>
              <div className="vs-cell quiz">{r[1]}</div>
              <div className="vs-cell ipgs">{r[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 10 — Equipe ======
function Team() {
  const team = [
    { name: "Natália Nuernberg", crp: "CRP 12/23884", role: "co-fundadora · IPGS", initials: "N" },
    { name: "Karoline Costa", crp: "CRP 12/24994", role: "co-fundadora · IPGS", initials: "K" },
    { name: "Breno Altieres", crp: "CRP 12/25023", role: "co-fundador · IPGS", initials: "B" },
  ];
  return (
    <section id="b10" className="grain" style={{ background: "var(--paper-100)" }}>
      <style>{`
        .tm-head { margin-bottom: 32px; }
        .tm-grid { display: grid; gap: 18px; }
        @media (min-width: 720px) { .tm-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
        .tm-card {
          background: white;
          border: 1px solid rgba(6,41,71,.08);
          border-radius: var(--r-lg);
          padding: 28px 24px;
          text-align: left;
          box-shadow: var(--shadow-sm);
        }
        .tm-photo {
          width: 88px; height: 88px;
          border-radius: 50%;
          background:
            radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.25), transparent 60%),
            linear-gradient(135deg, var(--deep-300), var(--deep-700));
          color: var(--ipgs-gold);
          display: grid; place-items: center;
          font-family: var(--font-display); font-style: italic;
          font-size: 36px;
          margin-bottom: 18px;
          border: 1px solid rgba(198,156,80,.30);
        }
        .tm-name {
          font-family: var(--font-display); font-style: italic;
          font-size: 26px; line-height: 1.0;
          color: var(--ipgs-deep);
          margin: 0 0 6px;
          font-weight: 400;
        }
        .tm-crp {
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.14em;
          color: var(--gold-700);
          text-transform: uppercase;
          font-weight: 500;
        }
        .tm-role {
          font-size: 14px;
          color: var(--deep-700);
          margin-top: 4px;
        }
        .tm-foot {
          margin-top: 28px;
          padding: 18px 0 0;
          border-top: 1px solid rgba(6,41,71,.10);
          font-size: 14.5px;
          color: var(--deep-800);
          line-height: 1.55;
          max-width: 64ch;
        }
        .tm-foot strong { color: var(--ipgs-deep); }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="tm-head">
          <span className="eyebrow">A equipe</span>
          <h2 className="display reveal" style={{ marginTop: 14, maxWidth: "20ch" }}>
            Quem analisa o laudo do <em>seu filho.</em>
          </h2>
        </div>
        <div className="tm-grid">
          {team.map((p) => (
            <article className="tm-card reveal" key={p.crp}>
              <div className="tm-photo">{p.initials}</div>
              <h3 className="tm-name">{p.name}</h3>
              <div className="tm-crp">{p.crp}</div>
              <div className="tm-role">{p.role}</div>
            </article>
          ))}
        </div>
        <p className="tm-foot">
          Fundadores do <strong>Instituto de Psicologia Geny Soares</strong> — centro de atendimento e pesquisa em psicologia · Florianópolis–SC.
        </p>
      </div>
    </section>
  );
}

window.LaudoBlock = LaudoBlock;
window.Reviews = Reviews;
window.VsTable = VsTable;
window.Team = Team;