// ============================================
// Page sections
// ============================================

const { useState: useStateS, useEffect: useEffectS, useMemo } = React;

// Markdown-lite: **bold**
function mdLite(text) {
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((p, i) => {
    if (p.startsWith("**") && p.endsWith("**")) {
      return <strong key={i}>{p.slice(2, -2)}</strong>;
    }
    return <React.Fragment key={i}>{p}</React.Fragment>;
  });
}

// ---- Hero ----
function Hero({ openModal, headlineVariant = "B" }) {
  const h = window.HEADLINES[headlineVariant] || window.HEADLINES.B;
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true"></div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <Reveal>
              <div className="eyebrow eyebrow-blue">
                Direito bancário · Revisão de contratos
              </div>
            </Reveal>

            <Reveal delay={1}>
              <h1 className="hero-headline">
                {h.pre}{" "}
                <span className="accent">{h.em}</span>
                {h.post}
              </h1>
            </Reveal>

            <Reveal delay={2}>
              <p className="hero-sub">
                Análise gratuita do seu contrato por advogado especialista em
                direito bancário. Sem promessa milagrosa — só a estratégia que
                já fez <strong style={{color: "var(--ink)", fontWeight: 600}}>550 clientes</strong> saírem da dívida.
              </p>
            </Reveal>

            <Reveal delay={3} className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={openModal}>
                Começar agora
                <span className="arrow"></span>
              </button>
              <a className="btn btn-ghost btn-lg" href={window.WA_LINK} target="_blank" rel="noopener noreferrer">
                Falar com advogado
              </a>
            </Reveal>

            <Reveal delay={4} className="hero-microcopy">
              <span>🔒 Atendimento 100% online</span>
              <span>· Resposta em até 24h úteis</span>
              <span>· Sem compromisso</span>
            </Reveal>
          </div>

          <Reveal delay={3} className="hero-side">
            <div className="hero-side-item">
              <div className="eyebrow">Equipe especializada</div>
              <div className="val">Albuini Advogados</div>
              <div className="sub">OAB/SP 504.166 · Responsável técnico</div>
            </div>
            <div className="hero-side-item">
              <div className="eyebrow">Atuação</div>
              <div className="val">7 anos</div>
              <div className="sub">Exclusivamente direito bancário</div>
            </div>
            <div className="hero-side-item">
              <div className="eyebrow">Histórico</div>
              <div className="val">650</div>
              <div className="sub">Acordos fechados · 550 clientes</div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- Opening Proposition ----
function Proposition({ openModal }) {
  return (
    <section className="proposition">
      <div className="container">
        <div className="prop-grid">
          <Reveal className="prop-numbers">
            <div className="row">
              <span className="label-mono">O banco te emprestou</span>
              <span className="value"><strong>R$ 100.000</strong></span>
            </div>
            <div className="row">
              <span className="label-mono">Hoje você deve</span>
              <span className="value"><strong>R$ 238.000</strong></span>
            </div>
            <div className="row">
              <span className="label-mono">Pagando todo mês</span>
              <span className="value grow">↗ a dívida só cresce</span>
            </div>
          </Reveal>

          <Reveal delay={2} className="prop-body">
            <p>
              Isso não é coincidência. É <strong>juros abusivos</strong>,
              tarifas indevidas e capitalização irregular trabalhando contra você
              24 horas por dia.
            </p>
            <p>
              No Albuini Advogados a gente faz uma coisa específica: analisa
              seu contrato, identifica as ilegalidades e usa isso como base
              técnica pra forçar o banco a aceitar um acordo justo — com
              desconto real entre <strong>50% e 92%</strong> do valor cobrado.
            </p>
            <div className="pull">
              Em 7 anos, fechamos 650 acordos. A primeira análise é gratuita.
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- Pain Identification ----
function Pain() {
  return (
    <section className="dark" id="dor">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num" style={{color: "rgba(244,241,234,0.5)"}}>05 · IDENTIFICAÇÃO</span>
          </div>
          <Reveal as="h2">Se você passa por isso, leia com atenção.</Reveal>
        </div>

        <Reveal as="ul" className="pain-list">
          {window.PAIN_POINTS.map((p, i) => (
            <li key={i}>
              <span className="pain-num">{String(i + 1).padStart(2, "0")}</span>
              <span>{p}</span>
            </li>
          ))}
        </Reveal>

        <Reveal delay={2}>
          <p className="pain-close">
            Se você se reconheceu em <strong>duas ou mais</strong> dessas
            situações, provavelmente você está pagando juros ilegais. E
            provavelmente já pagou muito mais do que devia.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Solution / Method ----
function Solution() {
  return (
    <section id="metodo">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">06 · MÉTODO</span>
            <span className="eyebrow eyebrow-blue" style={{ marginTop: 4 }}>O terceiro caminho</span>
          </div>
          <div>
            <Reveal as="h2">Como a gente resolve isso na prática.</Reveal>
            <Reveal delay={1}>
              <p className="solution-intro" style={{ marginTop: 32 }}>
                A maioria acha que só existem dois caminhos: pagar até morrer ou
                virar inadimplente. Existe um terceiro — <em>revisão estratégica
                com acordo dirigido</em>.
              </p>
            </Reveal>
          </div>
        </div>

        <div className="steps">
          {window.STEPS.map((s, i) => (
            <Reveal key={i} className="step">
              <div className="step-num">{s.n}</div>
              <div>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-desc">{s.desc}</p>
              </div>
              <div className="step-meta">
                <strong>{s.meta.label}</strong>
                <div style={{ fontSize: 18, color: "var(--ink)", fontFamily: "var(--serif)", letterSpacing: "-0.01em", marginBottom: 6 }}>
                  {s.meta.value}
                </div>
                <div>{s.meta.extra}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Benefits ----
function Benefits() {
  return (
    <section className="tight" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">07 · BENEFÍCIOS</span>
          </div>
          <Reveal as="h2">O que muda na sua vida quando você nos contrata.</Reveal>
        </div>

        <div className="benefits-grid">
          {window.BENEFITS.map((b, i) => (
            <Reveal key={i} className="benefit">
              <span className="benefit-num">{String(i + 1).padStart(2, "0")}</span>
              <p>{mdLite(b)}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Animated counter ----
function Counter({ to, suffix = "", duration = 1200 }) {
  const [val, setVal] = useStateS(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  useEffectS(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started.current) {
            started.current = true;
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setVal(Math.round(to * eased));
              if (t < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);

  return <span ref={ref}>{val}{suffix}</span>;
}

// ---- Proof / Numbers + Testimonials ----
function StarRow({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} de 5 estrelas`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
          <path
            d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.9L10 14.9 4.8 17.7l1-5.9L1.5 7.7l5.9-.8L10 1.5z"
            fill={i < n ? "#f5b400" : "rgba(244,241,234,0.18)"}
          />
        </svg>
      ))}
    </span>
  );
}

function GoogleBadge({ light = false }) {
  return (
    <span className={`google-badge ${light ? "on-dark" : ""}`}>
      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
      </svg>
      Google
    </span>
  );
}

function Avatar({ initials, bg }) {
  return (
    <span className="avatar" style={{ background: bg }}>
      {initials}
    </span>
  );
}

function TestimonialCard({ t, featured }) {
  return (
    <article className={`testi-card ${featured ? "featured" : ""}`}>
      <div className="testi-head">
        <Avatar initials={t.initials} bg={t.avatarBg} />
        <div className="testi-id">
          <div className="testi-name">{t.name}</div>
          <div className="testi-meta-line">{t.reviews}</div>
        </div>
        <GoogleBadge light />
      </div>
      <div className="testi-stars-row">
        <StarRow n={t.stars} />
        <span className="testi-time">{t.timeAgo}</span>
      </div>
      <p className="testi-quote">{t.quote}</p>
      {featured && (
        <div className="testi-tag-row">
          <span className="testi-tag-pill">{t.tag}</span>
        </div>
      )}
    </article>
  );
}

function Proof() {
  const featured = window.TESTIMONIALS.find((t) => t.featured);
  const rest = window.TESTIMONIALS.filter((t) => !t.featured);

  return (
    <section className="dark" id="resultados">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num" style={{color: "rgba(244,241,234,0.5)"}}>08 · PROVA SOCIAL</span>
          </div>
          <Reveal as="h2">Sete anos, sem distração. Só direito bancário.</Reveal>
        </div>

        <div className="proof-numbers">
          {[
            { big: <Counter to={7} />, label: "Anos no nicho" },
            { big: <Counter to={650} />, label: "Acordos fechados" },
            { big: <Counter to={550} />, label: "Clientes atendidos" },
            { big: <>5,0<span style={{ fontSize: "0.5em", marginLeft: 8, color: "#f5b400" }}>★</span></>, label: "Google Meu Negócio" }
          ].map((n, i) => (
            <Reveal key={i} className="proof-num" delay={i}>
              <div className="big">{n.big}</div>
              <div className="label">{n.label}</div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="reviews-header">
            <div className="reviews-header-left">
              <GoogleBadge light />
              <span className="reviews-header-text">
                Avaliações reais publicadas no Google Meu Negócio
              </span>
            </div>
            <a href="#" target="_blank" rel="noopener noreferrer" className="reviews-header-link">
              Ver todas no Google →
            </a>
          </div>
        </Reveal>

        {featured && (
          <Reveal className="testi-featured-wrap" delay={1}>
            <TestimonialCard t={featured} featured />
          </Reveal>
        )}

        <div className="testi-grid">
          {rest.map((t, i) => (
            <Reveal key={i} delay={(i % 3) + 1}>
              <TestimonialCard t={t} />
            </Reveal>
          ))}
        </div>

        <Reveal className="proof-footer">
          <span style={{ maxWidth: "60ch", fontStyle: "italic", textTransform: "none", letterSpacing: 0, lineHeight: 1.5 }}>
            Depoimentos extraídos do Google Meu Negócio do escritório, exibidos
            conforme política do Google. Percentuais e prazos variam caso a caso
            e dependem de análise técnica individualizada.
          </span>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Simulator ----
function Simulator({ openModal }) {
  const [debt, setDebt] = useStateS(20000);

  const lo = useMemo(() => Math.round(debt * 0.08), [debt]); // 92% off
  const hi = useMemo(() => Math.round(debt * 0.5), [debt]); // 50% off
  const savingLo = debt - hi;
  const savingHi = debt - lo;

  const fmt = (v) => v.toLocaleString("pt-BR");

  return (
    <section className="simulator" id="simulador">
      <div className="container">
        <div className="sim-grid">
          <Reveal>
            <div className="sim-eyebrow">09 · Estimativa preliminar</div>
            <h2 className="sim-title">
              Em <em style={{ color: "var(--blue)", fontStyle: "italic" }}>quanto</em> sua dívida poderia ser quitada?
            </h2>
            <p className="sim-desc">
              Estimativa baseada no histórico real do escritório:
              acordos entre 50% e 92% de desconto sobre o valor cobrado.
              É só uma simulação — o número exato depende da análise técnica
              do seu contrato.
            </p>
            <button className="btn btn-ink btn-lg" onClick={openModal}>
              Quero o número real do meu caso
              <span className="arrow"></span>
            </button>
            <p className="sim-disclaimer">
              Importante: a estimativa não é promessa de resultado. Cada caso é
              individualmente analisado e o desconto efetivo depende da
              documentação do contrato.
            </p>
          </Reveal>

          <Reveal delay={2} className="sim-card">
            <div className="sim-input-wrap">
              <label>Quanto você deve ao banco hoje?</label>
              <div className="sim-input">
                <span className="prefix">R$</span>
                <input
                  type="text"
                  inputMode="numeric"
                  value={fmt(debt)}
                  onChange={(e) => {
                    const v = parseInt(e.target.value.replace(/\D/g, "") || "0", 10);
                    setDebt(Math.min(5000000, Math.max(0, v)));
                  }}
                />
              </div>
              <input
                type="range"
                className="sim-slider"
                min="1000"
                max="5000000"
                step="10000"
                value={Math.min(debt, 5000000)}
                onChange={(e) => setDebt(parseInt(e.target.value, 10))}
              />
              <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--muted)", marginTop: 8 }}>
                <span>R$ 1.000</span>
                <span>R$ 5.000.000</span>
              </div>
            </div>

            <div className="sim-result">
              <div className="sim-result-row">
                <span className="l">Faixa estimada de quitação</span>
                <span className="v">R$ {fmt(lo)} – {fmt(hi)}</span>
              </div>
              <div className="sim-result-row">
                <span className="l">Desconto possível</span>
                <span className="v">50% – 92%</span>
              </div>
              <div className="sim-result-row hero">
                <span className="l" style={{color: "var(--ink)"}}>Economia estimada</span>
                <span className="v">R$ {fmt(savingLo)} – {fmt(savingHi)}</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- Offer ----
function Offer() {
  const items = [
    { t: "Análise gratuita do contrato", d: "Você manda os documentos, devolvemos um diagnóstico técnico em até **5 dias úteis**. Sem custo. Sem compromisso." },
    { t: "Honorários por contrato", d: "Se decidir contratar: entrada + parcelas mensais durante o período de trabalho. **Sem percentual surpresa, sem cobrança escondida**." },
    { t: "Tudo por escrito antes da assinatura", d: "Todos os valores acordados em contrato, com OAB, antes de qualquer assinatura." },
    { t: "Atendimento 100% online", d: "Você é atendido onde estiver, sem precisar ir até o escritório. WhatsApp, e-mail, videoconferência." },
    { t: "Acompanhamento semanal", d: "Andamento documentado por escrito + alertas em tempo real sobre seu CPF/CNPJ." }
  ];

  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">10 · CONTRATAÇÃO</span>
          </div>
          <Reveal as="h2">Como funciona a contratação.</Reveal>
        </div>

        <Reveal as="ul" className="offer-list">
          {items.map((it, i) => (
            <li key={i} className="offer-item">
              <span className="offer-check" aria-hidden="true"></span>
              <p>
                <strong>{it.t}</strong> — {mdLite(it.d)}
              </p>
            </li>
          ))}
        </Reveal>

        <Reveal delay={2}>
          <div className="offer-note">
            💬 Quer saber se seu caso tem espaço para revisão? Manda os
            documentos pela análise gratuita. Se não tiver, a gente fala isso
            na cara.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Objections (accordion) ----
function Objections() {
  return (
    <section className="tight" id="objecoes" style={{ background: "var(--paper-2)" }}>
      <div className="container container-narrow">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">11 · OBJEÇÕES</span>
          </div>
          <Reveal as="h2">Antes de fechar essa página, deixa eu responder.</Reveal>
        </div>

        <Reveal>
          <Accordion items={window.OBJECTIONS} />
        </Reveal>
      </div>
    </section>
  );
}

// ---- Commitments ----
function Commitments() {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">12 · COMPROMISSOS</span>
          </div>
          <div>
            <Reveal as="h2">Nossos compromissos com você.</Reveal>
            <Reveal delay={1}>
              <p className="commit-note" style={{ marginTop: 32 }}>
                Nota técnica: o Provimento 205/2021 da OAB veda "garantia de
                resultado" na advocacia. Em vez de uma garantia estilo
                infoproduto, substituímos por compromissos verificáveis — que é
                o que dá segurança real ao cliente.
              </p>
            </Reveal>
          </div>
        </div>

        <div className="commit-list">
          {window.COMMITMENTS.map((c, i) => (
            <Reveal key={i} className="commit">
              <span className="commit-num">{String(i + 1).padStart(2, "0")}</span>
              <div>
                <h3 className="commit-title">{c.title}</h3>
                <p className="commit-desc">{c.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Urgency ----
function Urgency({ openModal }) {
  return (
    <section className="urgency">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 64 }}>
          <div className="label-col">
            <span className="label-num" style={{color: "rgba(244,241,234,0.5)"}}>13 · CONTEXTO</span>
          </div>
          <div></div>
        </div>

        <div className="urg-grid">
          <Reveal>
            <h2 className="urg-title">
              Cada mês esperando é dinheiro que <em>não volta mais</em>.
            </h2>
          </Reveal>

          <Reveal delay={2} className="urg-body">
            <p>
              Em média, um contrato com juros irregulares custa entre
              <strong> R$ 800 e R$ 4.000 por mês</strong> a mais do que deveria.
            </p>
            <p>
              Em um ano sem agir, isso pode virar mais R$ 48.000 perdidos —
              dinheiro que poderia estar na sua conta ajudando a quitar a dívida
              com desconto, em vez de na conta do banco.
            </p>

            <div className="urg-stat">
              <span className="label">Custo médio mensal de juros irregulares</span>
              <span className="big">R$ 800 – R$ 4.000</span>
              <span className="urg-disclaimer">
                Estimativa baseada em casos analisados pelo escritório. Valor real depende da modalidade do contrato e do banco envolvido.
              </span>
            </div>

            <div style={{ marginTop: 32 }}>
              <button className="btn btn-primary btn-lg" onClick={openModal}>
                Começar agora
                <span className="arrow"></span>
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- FAQ ----
function FAQSection() {
  return (
    <section id="faq">
      <div className="container container-narrow">
        <div className="section-head">
          <div className="label-col">
            <span className="label-num">14 · PERGUNTAS</span>
          </div>
          <Reveal as="h2">Perguntas frequentes.</Reveal>
        </div>

        <Reveal>
          <Accordion items={window.FAQ} />
        </Reveal>
      </div>
    </section>
  );
}

// ---- Final CTA ----
function FinalCTA({ openModal }) {
  return (
    <section className="final-cta">
      <div className="container">
        <Reveal>
          <div className="eyebrow eyebrow-blue" style={{ marginBottom: 24 }}>15 · DECISÃO</div>
          <h2 className="final-headline">
            Você tem <em>duas opções</em> a partir de agora.
          </h2>
        </Reveal>

        <div className="final-options">
          <Reveal className="final-option">
            <div className="tag">Opção 1</div>
            <h3 className="opt-title">Continuar pagando todo mês uma dívida que cresce.</h3>
            <p className="opt-desc">
              Sem mudança. O saldo continua. Os juros continuam. O telefone
              continua tocando. O ciclo continua.
            </p>
          </Reveal>

          <Reveal delay={1} className="final-option is-good">
            <div className="tag">Opção 2 · Recomendada</div>
            <h3 className="opt-title">Saber, de graça e sem compromisso, quanto dela é ilegal.</h3>
            <p className="opt-desc">
              E decidir o que fazer com essa informação. A análise não obriga
              nada — você só decide se contrata depois de ver o diagnóstico.
            </p>
          </Reveal>
        </div>

        <Reveal delay={2}>
          <button className="btn btn-primary btn-lg" onClick={openModal} style={{ padding: "26px 44px", fontSize: 17 }}>
            Começar agora
            <span className="arrow"></span>
          </button>
          <div className="final-microcopy">
            <span>🔒 Resposta em até 24h úteis</span>
            <span>· OAB/SP 504.166</span>
            <span>· Atendimento 100% online</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- PS ----
function PS({ openModal }) {
  return (
    <section className="ps-section">
      <div className="container">
        <div className="ps-content">
          <Reveal>
            <div className="label">PS · Honestidade</div>
          </Reveal>
          <Reveal delay={1}>
            <p>
              A análise gratuita não é estratégia de venda — é a forma honesta
              de você descobrir se tem caso antes de gastar um centavo.
            </p>
          </Reveal>
          <Reveal delay={2}>
            <p>
              Em 7 anos, já analisamos centenas de contratos em que tivemos que
              falar "não dá pra revisar, segue como está". Preferimos perder o
              cliente do que vender serviço que não vai entregar resultado.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <p className="outro">
              Se você quiser saber em qual dos dois grupos o seu contrato cai,
              é só clicar no botão e mandar os documentos. O resto a gente
              conversa.
            </p>
          </Reveal>
          <Reveal delay={4}>
            <div style={{ marginTop: 32, display: "flex", gap: 16, flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={openModal}>
                Mandar documentos pra análise
                <span className="arrow"></span>
              </button>
              <a className="btn btn-ghost-light btn-lg" href={window.WA_LINK} target="_blank" rel="noopener noreferrer">
                Conversar antes
              </a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, Proposition, Pain, Solution, Benefits, Proof, Simulator,
  Offer, Objections, Commitments, Urgency, FAQSection, FinalCTA, PS
});