// sobre-parts-2.jsx — Virada (statement) + Princípios

/* =============================================================
   03 — A VIRADA / Statement central
   ============================================================= */
function Virada() {
  return (
    <section className="section canvas virada-section">
      <div className="container">
        <div className="virada reveal">
          <div className="virada-num">02 · A virada</div>
          <p className="virada-statement">
            Um imóvel em flip não é só um ativo.<br/>
            <em>É uma operação.</em>
          </p>
          <p className="virada-sub">
            Por trás de cada imóvel existem decisões, prazos, custos, pessoas e
            desdobramentos que se conectam. Quando isso fica espalhado, a
            operação depende mais da memória do que da gestão.
          </p>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   04 — NO QUE ACREDITAMOS / Princípios
   ============================================================= */
const PRINCIPIOS = [
  {
    t: 'Operação real, não slide.',
    d: 'Construímos a partir do que acontece em campo. Se não resolve no caos do dia, não entra na plataforma.',
  },
  {
    t: 'O imóvel é a memória.',
    d: 'Toda decisão deixa rastro no imóvel certo. Histórico não é nice-to-have — é a base da gestão.',
  },
  {
    t: 'Margem visível, sempre.',
    d: 'A pergunta certa não é "quanto comprou". É "quanto sobrou — e por quê". Em cada operação, em cada etapa.',
  },
  {
    t: 'Método antes de ferramenta.',
    d: 'Tecnologia organiza método. Nunca substitui. A clareza do que precisa acontecer vem primeiro.',
  },
  {
    t: 'Brasileiro, não traduzido.',
    d: 'Edital, ITBI, matrícula, condomínio em atraso, ocupação, comissão. A plataforma fala a língua de quem opera no Brasil.',
  },
];

function Principios() {
  return (
    <section className="section surface">
      <div className="container">
        <div className="pr-head reveal">
          <div className="eyebrow muted">03 · No que acreditamos</div>
          <h2>Cinco crenças que guiam<br/>tudo o que construímos</h2>
        </div>

        <ol className="pr-list reveal">
          {PRINCIPIOS.map((p, i) => (
            <li key={i}>
              <span className="n">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* =============================================================
   FRENTES (produto) — placeholder com 3 variantes
   ============================================================= */
const FRENTES = [
  { k: 'garimpo',     t: 'Garimpo',      d: 'Oportunidades de leilão, mercado, indicações e portais — em um só lugar.' },
  { k: 'analise',     t: 'Análise',      d: 'Comparáveis, liquidez e contexto pra decidir com mais informação.' },
  { k: 'juridico',    t: 'Jurídico',     d: 'Edital, matrícula, ônus e prazos. O risco fica visível.' },
  { k: 'aquisicao',   t: 'Aquisição',    d: 'ITBI, escritura, registro, desocupação. Cada passo registrado.' },
  { k: 'financeiro',  t: 'Financeiro',   d: 'Custos, aportes, repasses e margem real — por imóvel.' },
  { k: 'reforma',     t: 'Reforma',      d: 'Escopo, orçamento, prestadores e impacto na margem.' },
  { k: 'comercial',   t: 'Comercial',    d: 'Leads, propostas, corretores e canais de saída.' },
  { k: 'fechamento',  t: 'Fechamento',   d: 'Documentação final, baixa de pendências e resultado conferido.' },
];

function Frentes({ variant = 'tabs' }) {
  const [active, setActive] = React.useState(0);

  if (variant === 'list') {
    return (
      <section className="section surface">
        <div className="container">
          <div className="pr-head reveal">
            <div className="eyebrow muted">04 · Frentes</div>
            <h2>Tudo que importa,<br/>conectado ao imóvel certo</h2>
          </div>
          <ol className="pr-list reveal">
            {FRENTES.map((f, i) => (
              <li key={f.k}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h3>{f.t}</h3>
                  <p>{f.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>
    );
  }

  if (variant === 'carousel') {
    return (
      <section className="section canvas">
        <div className="container">
          <div className="pr-head reveal">
            <div className="eyebrow muted">04 · Frentes</div>
            <h2>Oito frentes,<br/>uma só operação</h2>
          </div>
          <div className="reveal" style={{
            display: 'flex', gap: 16, overflowX: 'auto',
            paddingBottom: 12, scrollSnapType: 'x mandatory',
          }}>
            {FRENTES.map((f, i) => (
              <div key={f.k} style={{
                flex: '0 0 280px', scrollSnapAlign: 'start',
                padding: '24px 22px',
                border: '1px solid var(--line, rgba(0,0,0,.08))',
                borderRadius: 14, background: 'var(--bg-elev, #fff)',
              }}>
                <div style={{ fontSize: 12, opacity: .55, marginBottom: 10 }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <h3 style={{ margin: '0 0 8px', fontSize: 20 }}>{f.t}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, opacity: .75 }}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // default: tabs
  const cur = FRENTES[active] || FRENTES[0];
  return (
    <section className="section surface">
      <div className="container">
        <div className="pr-head reveal">
          <div className="eyebrow muted">04 · Frentes</div>
          <h2>Tudo que importa,<br/>conectado ao imóvel certo</h2>
        </div>

        <div className="reveal" style={{
          display: 'grid', gridTemplateColumns: 'minmax(220px, 280px) 1fr',
          gap: 32, marginTop: 28, alignItems: 'start',
        }}>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {FRENTES.map((f, i) => (
              <li key={f.k}>
                <button
                  type="button"
                  onClick={() => setActive(i)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 12, width: '100%',
                    padding: '12px 14px', border: 0, borderRadius: 10,
                    background: i === active ? 'var(--brand-50, rgba(58,130,246,.08))' : 'transparent',
                    color: i === active ? 'var(--brand-700, #1e54c4)' : 'inherit',
                    fontWeight: i === active ? 600 : 500,
                    fontSize: 15, textAlign: 'left', cursor: 'pointer',
                    transition: 'background .18s ease, color .18s ease',
                  }}
                >
                  <span style={{ fontVariantNumeric: 'tabular-nums', fontSize: 12, opacity: .6, minWidth: 22 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  {f.t}
                </button>
              </li>
            ))}
          </ul>

          <div style={{
            padding: '32px 30px',
            border: '1px solid var(--line, rgba(0,0,0,.08))',
            borderRadius: 16,
            background: 'var(--bg-elev, #fff)',
            minHeight: 240,
          }}>
            <div style={{ fontSize: 12, opacity: .55, marginBottom: 14, letterSpacing: '.04em', textTransform: 'uppercase' }}>
              Frente {String(active + 1).padStart(2, '0')}
            </div>
            <h3 style={{ margin: '0 0 14px', fontSize: 28, lineHeight: 1.2 }}>{cur.t}</h3>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, opacity: .8, maxWidth: 520 }}>{cur.d}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SobreParts2 = { Virada, Principios, Frentes };