/* ────────────────────────────────────────────────────────────
   HOME EXTRA — sections from Klebson Queiroz framework v1.1
   PainSection, PillarsSection, FoundersSection, BenefitsList,
   GuaranteeSection, ObjectionsSection, UrgencySection, PSSection
   ──────────────────────────────────────────────────────────── */

function PainSection({ setPage }) {
  const pains = [
  "Sua administradora some quando você mais precisa — e demora dias para responder uma mensagem.",
  "A ata da última assembleia chegou dias depois. E ainda tinha erro.",
  "Você tentou falar com a administradora e esperou horas — ou dias — por retorno.",
  "Tem inadimplentes há meses e nada foi resolvido juridicamente.",
  "Os condôminos reclamam, o conselho cobra, e você fica no meio sem suporte real.",
  "Laudos técnicos, NRs e inspeções viram um pesadelo de fornecedores sem controle.",
  "Você mora longe do condomínio e depende de alguém de confiança para representar seu imóvel."];


  return (
    <section className="pain-section">
      <div className="container">
        <div className="pain-grid">
          <div className="lhs">
            <div className="h-eyebrow">Identifique-se</div>
            <h2 className="h-display">
              Você reconhece alguma <em>dessas situações?</em>
            </h2>
            <p>
              Administrar um condomínio virou sinônimo de dor de cabeça. Mas não precisa
              ser assim. Marque mentalmente quantas dessas situações descrevem a realidade
              do seu condomínio hoje.
            </p>
            <blockquote>
              <div className="conclusion">
                Quanto <em>mais marcações</em>, maior a urgência de profissionalizar a gestão.
              </div>
              <div className="conclusion-sub">
                E é exatamente isso que a Condominize faz — sem que o síndico precise se preocupar com a transição.
              </div>
            </blockquote>
          </div>

          <div className="pain-list">
            {pains.map((p, i) =>
            <div key={i} className="pain-item">
                <span className="x"><Icon name="x" size={14} strokeWidth={2.5} color="#fff" /></span>
                <p>{p}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function PillarsSection() {
  const pillars = [
  {
    tag: "01 · FINANCEIRO",
    title: <>Automação financeira <em>total.</em></>,
    desc: "Boletos emitidos automaticamente, conciliação bancária sem intervenção manual, balancetes publicados até o 10º dia útil e régua de cobrança de inadimplentes no piloto automático."
  },
  {
    tag: "02 · ATA",
    title: <>Ata <em>em velocidade recorde.</em></>,
    desc: "A ata é gerada pela nossa equipe, assinada digitalmente pelo síndico e pelo secretário, em seguida publicada no portal. Pioneiro no Brasil."
  },
  {
    tag: "03 · PRESENÇA",
    title: <>Síndico presencial <em>garantido.</em></>,
    desc: "A cada dois meses, a Condominize vai pessoalmente ao seu condomínio conduzir a assembleia. Sem custo adicional. Sem improvisar."
  },
  {
    tag: "04 · JURÍDICO",
    title: <>Jurídico <em>integrado.</em></>,
    desc: "Notificações extrajudiciais, cobrança de inadimplentes, análise de convenção e regimento — tudo sob orientação jurídica especializada, sem terceirização."
  },
  {
    tag: "05 · TÉCNICO / ESG",
    title: <>Gestão técnica e <em>conformidade.</em></>,
    desc: "Laudos técnicos, inspeções, NRs e gestão de fornecedores conduzidos por engenheira especialista com 15+ anos de experiência. Conformidade que protege o patrimônio."
  }];


  return (
    <section id="solucao" className="section svc-section">
      <div className="container">
        <div className="sec-head">
          <div className="lhs">
            <div className="h-eyebrow on-dark">Apresentação da solução</div>
            <h2 className="h-display">
              Cinco coisas que <em>nenhuma administradora tradicional</em><br />
              consegue entregar — ao mesmo tempo.
            </h2>
            <p>Tecnologia que facilita. Presença humana que transmite confiança. Jurídico que protege. Engenharia que valoriza.</p>
          </div>
        </div>

        <div className="pillars">
          {pillars.map((p, i) =>
          <article className="pillar" key={i}>
              <div className="pillar-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="pillar-head">
                <div className="pillar-meta">{p.tag}</div>
                <h3 style={{ marginTop: 18, color: "var(--cream-50)" }}>{p.title}</h3>
              </div>
              <div className="pillar-body">
                <p>{p.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function FoundersSection() {
  return (
    <section className="founders-section">
      <div className="container">
        <div className="sec-head">
          <div className="lhs">
            <div className="h-eyebrow">Quem está por trás</div>
            <h2 className="h-display">
              Profissionais que entendem, <em>na prática</em>, do que fazem.
            </h2>
            <p>
              A Condominize foi fundada por dois profissionais com formações complementares e
              raras no mercado condominial. Cada cliente é atendido por gente que entende de verdade do assunto.
            </p>
          </div>
        </div>

        <div className="founders-grid">
          <FounderCard
            name="Vinícius Climaco"
            role="Advogado · Arquiteto de Soluções"
            badge="Co-fundador"
            creds={[
            {
              icon: "gavel",
              title: "OAB/RJ",
              desc: "Direito Condominial e Trabalhista"
            },
            {
              icon: "code",
              title: "20+ anos em tecnologia",
              desc: "Arquitetura de software e desenvolvimento de sistemas"
            },
            {
              icon: "building",
              title: "10+ anos como síndico profissional",
              desc: "Experiência prática em condomínios da Região dos Lagos"
            },
            {
              icon: "briefcase",
              title: "Responsabilidade",
              desc: "Gestão jurídica, digital e operacional"
            }]
            } />
          

          <FounderCard
            className="erica"
            name="Erica Duarte"
            role="Engenheira · Perita"
            badge="Co-fundadora"
            creds={[
            {
              icon: "cap",
              title: "Formação UFRJ + UFRRJ",
              desc: "Engenharia · graduação e pós em universidades públicas"
            },
            {
              icon: "flask",
              title: "Especializações técnicas",
              desc: "Segurança do Trabalho, Química e Gestão Ambiental"
            },
            {
              icon: "clipboard",
              title: "15+ anos de experiência",
              desc: "Laudos técnicos, conformidade, NRs e inspeções"
            },
            {
              icon: "leaf",
              title: "Responsabilidade",
              desc: "Gestão técnica, ESG e valorização patrimonial"
            }]
            } />
          
        </div>

        <div className="founders-note">
          <p>
            A combinação <strong>advogado + engenheira + tecnologia</strong> não existe em nenhum
            concorrente. É o que garante que cada condomínio sob nossa gestão tenha respaldo
            jurídico de verdade, conformidade técnica que valoriza o patrimônio e tecnologia
            que organiza o dia a dia.
          </p>
        </div>
      </div>
    </section>);

}

function FounderCard({ name, role, creds, badge, className = "" }) {
  return (
    <article className={`founder-card no-photo ${className}`}>
      <div className="founder-body">
        {badge && <div className="founder-badge">{badge}</div>}
        <h3 className="founder-name">{name}</h3>
        <div className="founder-role">{role}</div>
        <ul className="founder-creds">
          {creds.map((c, i) =>
          <li key={i}>
              <span className="cred-ico"><Icon name={c.icon} size={16} /></span>
              <div>
                <b>{c.title}</b>
                <span>{c.desc}</span>
              </div>
            </li>
          )}
        </ul>
      </div>
    </article>);

}

function BenefitsList() {
  const benefits = [
  {
    t: "Você para de perder dinheiro",
    d: "Nosso ticket médio é até 60% menor que o das administradoras tradicionais da região."
  },
  {
    t: "Transparência de verdade",
    d: "Balancetes, atas e documentos disponíveis no app a qualquer hora, pelo celular."
  },
  {
    t: "Nunca mais fica sem representação",
    d: "O síndico vai à reunião, mesmo que você não possa estar presente. Presença garantida."
  },
  {
    t: "Dorme tranquilo com os inadimplentes",
    d: "Cobrança organizada funciona sozinha — o jurídico age quando precisa, sem atrito."
  },
  {
    t: "Respaldo legal antes do problema virar processo",
    d: "Assessoria preventiva inclusa nos planos Profissional e Completo."
  },
  {
    t: "Acaba com a papelada",
    d: "Contratos, atas e procurações assinados digitalmente, sem impressora, sem cartório."
  },
  {
    t: "Protege e valoriza seu patrimônio",
    d: "Gestão técnica com engenheira na equipe, laudos, NRs e conformidade ambiental inclusa."
  },
  {
    t: "Profissionaliza o condomínio",
    d: "Padrão corporativo, transparência total e prestação de contas que os condôminos entendem."
  }];


  return (
    <section className="benefits-list-section">
      <div className="container">
        <div className="benefits-list-grid">
          <div>
            <div className="h-eyebrow">Benefícios concretos</div>
            <h2 className="h-display">
              O que muda na <em>rotina</em> do seu condomínio.
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, color: "var(--text-soft)", lineHeight: 1.6, maxWidth: 440 }}>
              Não é discurso de venda. São oito ganhos concretos que você sente a partir
              do primeiro mês de operação com a Condominize.
            </p>
            <a className="btn btn-dark" style={{ marginTop: 36 }}
            href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
              <Icon name="whatsapp" size={16} />
              Quero o Diagnóstico Gratuito
            </a>
          </div>
          <div className="benefits-list">
            {benefits.map((b, i) =>
            <div key={i} className="benefit-line">
                <span className="check"><Icon name="check" size={16} strokeWidth={2.5} /></span>
                <div>
                  <h4>{b.t}</h4>
                  <p>{b.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function GuaranteeSection() {
  return (
    <section className="guarantee-section">
      <div className="container">
        <div className="guarantee-card">
          <div className="guarantee-seal">
            <svg viewBox="0 0 200 200">
              <defs>
                <path id="circlePath" d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
              </defs>
              {/* outer ring */}
              <circle cx="100" cy="100" r="90" fill="var(--accent)" />
              <circle cx="100" cy="100" r="72" fill="var(--cream-50)" />
              <circle cx="100" cy="100" r="64" fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 4" />
              {/* center text */}
              <text x="100" y="88" textAnchor="middle" fontFamily="var(--font-display)" fontSize="14" fill="var(--accent-deep)" letterSpacing="0.18em" fontWeight="600">
                GARANTIA
              </text>
              <text x="100" y="120" textAnchor="middle" fontFamily="var(--font-display)" fontSize="44" fill="var(--navy-900)" fontWeight="400" letterSpacing="-0.02em" fontStyle="italic">
                90
              </text>
              <text x="100" y="138" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--text-soft)" letterSpacing="0.2em">
                DIAS
              </text>
              {/* ring text */}
              <text fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.25em" fill="var(--navy-900)">
                <textPath href="#circlePath" startOffset="0">
                  · CONDOMINIZE · TRANQUILIDADE TOTAL · CONDOMINIZE · TRANQUILIDADE TOTAL ·
                </textPath>
              </text>
            </svg>
          </div>
          <div className="guarantee-content">
            <div className="eyebrow">Garantia incondicional</div>
            <h2>
              <em>90 dias</em> ou devolvemos tudo.
            </h2>
            <p>
              Se nos primeiros 90 dias você sentir que a Condominize não entregou o que prometeu,
              devolvemos integralmente os valores pagos — sem burocracia, sem discussão.
              Assumimos o risco porque temos certeza do que entregamos.
            </p>
            <div className="small">
              <Icon name="lock" size={14} />
              Sem letras miúdas · Sem "mas" · Sem cláusulas escondidas
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ObjectionsSection() {
  const objections = [
  {
    n: "01",
    q: "Não entendo muito de tecnologia. Vou conseguir usar?",
    a: <>O app foi pensado para ser <strong>simples</strong> — não para impressionar. Boletos, balancetes e atas em um lugar só, com visual limpo. Se tiver dúvida, tem suporte real para te ajudar. Você não precisa virar especialista em tecnologia para ter um condomínio bem gerido.</>
  },
  {
    n: "02",
    q: "Nunca ouvi falar da Condominize. Como sei que é confiável?",
    a: <>A Condominize foi fundada por um <strong>advogado inscrito na OAB/RJ</strong> com 20+ anos em tecnologia e uma <strong>engenheira UFRJ</strong> com 15+ anos em conformidade técnica. Você pode verificar a inscrição na OAB, visitar nosso site e conversar com a equipe antes de assinar qualquer contrato. Confiança se constrói na transparência.</>
  },
  {
    n: "03",
    q: "Já estou com minha administradora há anos. Trocar dá muito trabalho.",
    a: <>Entendemos. Por isso o processo de migração é <strong>conduzido integralmente pela Condominize</strong> — documentação, histórico financeiro, contratos de funcionários, tudo. Você não precisa fazer nada sozinho. Transição planejada passo a passo, sem impacto na rotina.</>
  }];


  return (
    <section className="objections-section">
      <div className="container">
        <div className="sec-head center">
          <div className="lhs">
            <div className="h-eyebrow">As três dúvidas mais comuns</div>
            <h2 className="h-display">
              Antes de você perguntar, <em>já respondemos.</em>
            </h2>
          </div>
        </div>
        <div className="objections-grid">
          {objections.map((o, i) =>
          <div key={i} className="objection-card">
              <div className="objection-q">
                <span className="badge-q">{o.n}</span>
                <div className="text">"{o.q}"</div>
              </div>
              <p className="objection-a">{o.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function UrgencySection({ setPage }) {
  const cities = [
  { n: "Saquarema · sede", v: "ÚLTIMAS VAGAS", full: true },
  { n: "Cabo Frio", v: "VAGAS ABERTAS" },
  { n: "Maricá", v: "VAGAS ABERTAS" },
  { n: "Búzios", v: "VAGAS ABERTAS" },
  { n: "Arraial do Cabo", v: "VAGAS ABERTAS" },
  { n: "Araruama", v: "ÚLTIMAS VAGAS", full: true },
  { n: "São Pedro da Aldeia", v: "VAGAS ABERTAS" },
  { n: "Iguaba Grande", v: "VAGAS ABERTAS" }];


  return (
    <section className="urgency-section">
      <div className="container">
        <div className="urgency-grid">
          <div>
            <div className="h-eyebrow on-dark">Condição especial · expansão regional</div>
            <h2 className="h-display">
              Os primeiros contratos<br />
              têm <em>condição de lançamento.</em>
            </h2>
            <p>
              A Condominize está em fase de expansão na Região dos Lagos. Os primeiros condomínios
              da carteira regional entram com <strong style={{ color: "var(--gold-500)" }}>taxa zero de setup</strong> e
              com o primeiro mês de diagnóstico acompanhado <strong style={{ color: "var(--gold-500)" }}>sem custo
              adicional</strong>.
            </p>
            <p>
              Essa condição vale para os primeiros contratos fechados. Depois disso, o processo volta ao padrão.
            </p>
            <a className="btn btn-primary"
            href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
              Garantir vaga com condição especial
              <Icon name="arrow" size={16} />
            </a>
          </div>

          <div className="urgency-cities">
            <div className="eyebrow">↳ Status por município</div>
            {cities.map((c, i) =>
            <div key={i} className={`urgency-city-line ${c.full ? "full" : ""}`}>
                <span className="n">{c.n}</span>
                <span className="v">{c.v}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function PSSection({ setPage }) {
  return (
    <section className="ps-section">
      <div className="container">
        <div className="ps-card">
          <div className="ps-mark">P.S.</div>
          <h2>
            Se você chegou até aqui, é porque a gestão do seu condomínio <em style={{ color: "var(--gold-500)", fontStyle: "italic" }}>importa pra você</em>.
          </h2>
          <p>
            Seja como síndico, como conselheiro ou como proprietário — você sabe que dá pra fazer melhor.
            A Condominize foi criada exatamente para isso. Por um <strong>advogado</strong> que entende de
            direito condominial e tecnologia, e por uma <strong>engenheira</strong> que garante conformidade
            técnica e valorização do patrimônio.
          </p>
          <p>As vagas com condição especial de lançamento são limitadas. 

          </p>
          <a className="btn btn-primary"
          href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
            Garantir minha vaga agora
            <Icon name="arrow" size={16} />
          </a>
          <div className="ps-sig">
            Não deixa pra depois.
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  PainSection, PillarsSection, FoundersSection, FounderCard,
  BenefitsList, GuaranteeSection, ObjectionsSection,
  UrgencySection, PSSection
});