function Home({ setPage, tweaks }) {
  const featured = tweaks.featuredPlan || "completo";
  const heroLayout = tweaks.heroLayout || "split";

  const scrollToSolution = () => {
    const el = document.getElementById("solucao");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <main data-screen-label="Home">
      {/* ───────── HERO ───────── */}
      <section className="hero" data-layout={heroLayout}>
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="h-eyebrow on-dark hero-eyebrow">
                Gestão condominial · Região dos Lagos
              </div>
              <h1 className="h-display">
                Seu condomínio gerido <em>profissionalmente.</em>
              </h1>
              <p className="hero-sub">
                Síndico profissional, administradora, financeiro e jurídico — tudo com uma única
                equipe Condominize, em toda a Região dos Lagos.
              </p>
              <div className="hero-cta">
                <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">
                  Quero um Diagnóstico Gratuito
                  <Icon name="arrow" size={16} />
                </a>
                <button className="btn btn-ghost-light" onClick={scrollToSolution}>
                  Ver nossa solução
                </button>
              </div>

              <div className="hero-meta">
                <div className="hero-meta-item">
                  <Icon name="check" size={18} strokeWidth={2.2} />
                  <span>Sem compromisso</span>
                </div>
                <div className="hero-meta-item">
                  <Icon name="check" size={18} strokeWidth={2.2} />
                  <span>Respondemos em até 24h</span>
                </div>
                <div className="hero-meta-item">
                  <Icon name="check" size={18} strokeWidth={2.2} />
                  <span>Garantia de 90 dias</span>
                </div>
              </div>
            </div>

            <div className="hero-art">
              <span className="corner tl"></span>
              <span className="corner br"></span>
              <div className="hero-art-inner">
                <PhotoCarousel photos={PHOTOS.beaches} interval={5500} />
              </div>
              <div className="hero-badge">
                <div className="b-ico"><Icon name="shield-check" size={22} /></div>
                <div>
                  <div className="b-t">Gestão completa</div>
                  <div className="b-s">Tranquilidade total.
Resultados reais.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ───────── HERO SERVICES STRIP ───────── */}
      <HeroServicesStrip onLearnMore={scrollToSolution} />

      {/* ───────── OPENING BLOCK ───────── */}
      <PainSection setPage={setPage} />

      {/* ───────── BENEFITS STRIP ───────── */}
      <section className="benefits">
        <div className="container">
          <div className="benefits-head">
            <div className="h-eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
              É assim que deveria funcionar
            </div>
            <h2 className="h-display">
              Sem <em>conflitos.</em> <br /> Sem <em>surpresas.</em> <br />
              Sem <em>demoras.</em> <br /> Sem <em>prejuízos.</em>
            </h2>
          </div>

          <div className="benefits-grid">
            <div className="benefit-item">
              <div className="num">01</div>
              <h3>Sem <em>conflitos.</em></h3>
              <p>Gestão neutra, técnica e respaldada juridicamente. Decisões claras, sem brigas de vizinhança.</p>
            </div>
            <div className="benefit-item">
              <div className="num">02</div>
              <h3>Sem <em>surpresas.</em></h3>
              <p>Prestação de contas transparente. Você sabe para onde cada centavo está indo, a qualquer momento.</p>
            </div>
            <div className="benefit-item">
              <div className="num">03</div>
              <h3>Sem <em>demoras.</em></h3>
              <p>Atendimento próximo e ágil. Sua mensagem é respondida por uma pessoa, no mesmo dia.</p>
            </div>
            <div className="benefit-item">
              <div className="num">04</div>
              <h3>Sem <em>prejuízos.</em></h3>
              <p>Inadimplência sob controle. Cobrança organizada, respeitosa e firme — sem constrangimento.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ───────── 5 PILLARS ───────── */}
      <PillarsSection />

      {/* ───────── PHOTO STRIP ───────── */}
      <section className="container">
        <div className="photo-strip four">
          <div className="photo-cell">
            <PhotoCarousel photos={PHOTOS.assembleia} interval={6000} compact />
          </div>
          <div className="photo-cell">
            <PhotoCarousel photos={PHOTOS.fachada} interval={6500} compact />
          </div>
          <div className="photo-cell">
            <PhotoCarousel photos={PHOTOS.comum} interval={5500} compact />
          </div>
          <div className="photo-cell">
            <PhotoCarousel photos={PHOTOS.portaria} interval={7000} compact />
          </div>
        </div>
      </section>

      {/* ───────── FOUNDERS — Vinícius + Erica ───────── */}
      <FoundersSection />

      {/* ───────── APP MOCKUP ───────── */}
      {tweaks.showAppMockup !== false && <section className="section app-section">
          <div className="container">
            <div className="app-grid">
              <div>
                <div className="h-eyebrow">Aplicativo Condominize</div>
                <h2 className="h-display" style={{ fontSize: "clamp(36px, 4.5vw, 60px)", marginTop: 22, marginBottom: 22 }}>
                  Seu condomínio na <em>palma da mão.</em>
                </h2>
                <p style={{ fontSize: 17, color: "var(--text-soft)", maxWidth: 480, lineHeight: 1.55 }}>
                  Boletos, comunicados, atas e prestação de contas no celular. Simples e direto —
                  para síndico, conselho e todos os condôminos. Quem prefere papel, continua recebendo papel.
                </p>
                <div className="app-features">
                  <Feature icon="wallet" t="Boletos sempre à mão"
                d="A 2ª via fica disponível 24h por dia. Sem precisar ligar para a portaria ou esperar e-mail." />
                  <Feature icon="doc" t="Ata e prestação de contas no portal"
                d="Tudo organizado e acessível. Você consulta quando quiser, de onde estiver." />
                  <Feature icon="users" t="Comunicação direta com a administração"
                d="Mensagem direta para a equipe, com resposta no mesmo dia. Por telefone, WhatsApp ou e-mail." />
                  <Feature icon="bell" t="Avisos importantes na hora certa"
                d="Próxima assembleia, manutenção do elevador, mudança de horário — você fica sabendo antes." />
                </div>
              </div>
              <AppMockup />
            </div>
          </div>
        </section>
      }

      {/* ───────── BENEFITS LIST (8 itens) ───────── */}
      <BenefitsList />

      {/* ───────── PLANS ───────── */}
      <section className="section plans-section">
        <div className="container">
          <div className="sec-head center">
            <div className="lhs">
              <div className="h-eyebrow">Apresentação da oferta</div>
              <h2 className="h-display">Escolha o plano <em>ideal</em> para o seu condomínio.</h2>
              <p>Você contrata o pacote completo, ou apenas o módulo que faz sentido agora. Sem letras miúdas, sem surpresa na fatura.</p>
            </div>
          </div>
          <div className="plans-grid">
            <Plan name="Essencial"
            tagline="Para começar a profissionalizar"
            desc="Para condomínios pequenos que querem organizar a parte financeira e administrativa."
            featured={featured === "essencial"}
            items={[
            "Emissão automática de boletos",
            "Conciliação bancária automatizada",
            "Balancetes mensais até o 10º dia útil",
            "Régua de cobrança de inadimplentes",
            "Departamento pessoal (folha, FGTS, eSocial)",
            "Portal digital + App do condômino"]
            } />
            <Plan name="Profissional"
            tagline="O carro-chefe"
            desc="Tudo do Essencial + síndico profissional dedicado e presença garantida nas reuniões."
            featured={featured === "profissional"}
            badge={featured === "profissional" ? "Mais escolhido" : null}
            items={[
            "Tudo do Essencial, mais:",
            "Síndico profissional com representação legal",
            "Presença bimestral garantida (incluso)",
            "Ata sistêmica gerada em tempo real",
            "Transmissão ao vivo com votação remota"]
            } />
            <Plan name="Completo"
            tagline="Respaldo total"
            desc="Quando o condomínio quer respaldo jurídico, técnico e ESG por completo."
            featured={featured === "completo"}
            badge={featured === "completo" ? "Mais contratado" : null}
            items={[
            "Tudo do Profissional, mais:",
            "Notificações extrajudiciais",
            "Cobrança de inadimplentes com suporte jurídico",
            "Revisão de convenção e regimento",
            "Assessoria jurídica preventiva em assembleias",
            "Gestão técnica: laudos, NRs e inspeções",
            "Orientação ESG e gestão ambiental"]
            } />
          </div>

          <div style={{
            marginTop: 56,
            padding: "44px 56px",
            background: "var(--cream-100)",
            borderRadius: 24,
            border: "1px dashed var(--border-gold)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 32,
            flexWrap: "wrap"
          }}>
            <div style={{ flex: "1 1 360px" }}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 26, fontStyle: "italic",
                color: "var(--navy-900)", marginBottom: 8, letterSpacing: "-0.01em"
              }}>
                Não sabe qual plano escolher?
              </div>
              <div style={{ fontSize: 15, color: "var(--text-soft)", lineHeight: 1.5, maxWidth: 520 }}>Em 30 minutos, analisamos seu condomínio e indicamos o caminho certo. Sem pressão, sem compromisso.

              </div>
            </div>
            <a className="btn btn-dark" href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
              Diagnóstico Gratuito
              <Icon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* ───────── GUARANTEE ───────── */}
      {tweaks.showGuarantee !== false && <GuaranteeSection />}

      {/* ───────── OBJECTIONS ───────── */}
      <ObjectionsSection />

      {/* ───────── TESTIMONIALS ───────── */}
      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <div className="h-eyebrow">Prova social</div>
              <h2 className="h-display">A diferença que se sente <em>na primeira reunião.</em></h2>
            </div>
          </div>
          <div className="testi-grid">
            <Testi
              q="Reduzimos o custo do condomínio em 38% no primeiro mês e os condôminos finalmente entendem a prestação de contas. Não tem mais discussão na assembleia sobre planilhas."
              n="Alexandre Siqueira" r="Síndico profissional · Cabo Frio" a="—" />
            <Testi
              q="Moro no Rio, meu apartamento é em Cabo Frio. Finalmente tenho alguém de confiança cuidando do meu patrimônio. Recebo tudo no celular e voto de onde estiver."
              n="Paulo Roberto" r="Proprietário veranista · Maricá" a="—" />
            <Testi
              q="Não entendo muito de tecnologia, mas o app é simples. E a ata de reunião, 100% pronta, impressionou todo o conselho. Mudou o jeito como a gente se reúne."
              n="Rosangela Viegas" r="Síndica orgânica · Saquarema" a="—" />
          </div>
        </div>
      </section>

      {/* ───────── URGENCY ───────── */}
      {tweaks.showUrgency !== false && <UrgencySection setPage={setPage} />}

      {/* ───────── FINAL CTA ───────── */}
      <section className="final-cta">
        <div className="container">
          <div className="h-eyebrow on-dark" style={{ justifyContent: "center", display: "inline-flex", marginBottom: 28 }}>
            Sua decisão começa aqui
          </div>
          <h2 className="h-display">
            Seu condomínio merece <em>gestão profissional.</em>
          </h2>
          <p>Não a gestão cara, lenta e analógica das administradoras tradicionais. Gestão com tecnologia real, presença humana garantida, respaldo jurídico e conformidade técnica — por um preço que cabe no orçamento do condomínio.</p>
          <div className="hero-cta">
            <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">
              Quero o Diagnóstico Gratuito
              <Icon name="arrow" size={16} />
            </a>
            <button className="btn btn-ghost-light" onClick={() => setPage("contact")}>
              Falar conosco
            </button>
          </div>
          <div style={{
            position: "relative", zIndex: 1,
            marginTop: 32,
            fontSize: 13, color: "rgba(251,249,243,0.55)",
            fontFamily: "var(--font-mono)", letterSpacing: "0.08em"
          }}>
            GRATUITO · SEM COMPROMISSO · RESPOSTA EM ATÉ 24H
          </div>
        </div>
      </section>

      {/* ───────── PS BLOCK ───────── */}
      <PSSection setPage={setPage} />
    </main>);

}

/* ───────── shared sub-components ───────── */

function Feature({ icon, t, d }) {
  return (
    <div className="app-feat">
      <div className="icon"><Icon name={icon} size={22} /></div>
      <div>
        <h4>{t}</h4>
        <p>{d}</p>
      </div>
    </div>);

}

function Plan({ name, tagline, desc, items, featured, badge }) {
  return (
    <div className={`plan ${featured ? "featured" : ""}`}>
      {badge && <div className="badge">{badge}</div>}
      <div className="name">Plano</div>
      <h3>{name}</h3>
      {tagline &&
      <div style={{
        fontFamily: "var(--font-display)", fontStyle: "italic",
        fontSize: 20, color: featured ? "var(--gold-500)" : "var(--accent-deep)",
        marginTop: 8, marginBottom: 22, letterSpacing: "-0.005em"
      }}>{tagline}</div>
      }
      <p className="desc">{desc}</p>
      <ul>
        {items.map((it, i) =>
        <li key={i}><Icon name="check" size={16} /><span>{it}</span></li>
        )}
      </ul>
      <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">
        Quero o {name}
      </a>
    </div>);

}

function HeroServicesStrip({ onLearnMore }) {
  const services = [
  {
    icon: "users", n: "01",
    title: "Síndico Profissional",
    desc: "Representação legal e técnica do condomínio, com gestão neutra e dedicada."
  },
  {
    icon: "building", n: "02",
    title: "Administradora Completa",
    desc: "Tudo organizado: do boleto à folha de pagamento, sem planilha solta."
  },
  {
    icon: "chart", n: "03",
    title: "Gestão Financeira",
    desc: "Transparência total, cobrança organizada e inadimplência sob controle."
  },
  {
    icon: "scale", n: "04",
    title: "Assessoria Jurídica",
    desc: "Advogado condominialista interno, da convenção à cobrança judicial."
  }];


  return (
    <section className="hero-services-strip">
      <div className="container">
        <div className="hss-grid">
          {services.map((s, i) =>
          <button key={i} className="hss-card" onClick={onLearnMore}>
              <span className="hss-n">{s.n}</span>
              <div className="hss-ico"><Icon name={s.icon} size={28} /></div>
              <div className="hss-body">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <span className="hss-more">
                  Saiba mais
                  <Icon name="arrow" size={14} strokeWidth={2.2} />
                </span>
              </div>
            </button>
          )}
        </div>
      </div>
    </section>);

}

function Testi({ q, n, r, a }) {
  return (
    <div className="testi">
      <div className="testi-quote-mark">"</div>
      <div className="testi-quote">{q}</div>
      <div className="testi-person">
        <div className="testi-avatar">{a}</div>
        <div>
          <div className="n">{n}</div>
          <div className="r">{r}</div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { Home, Plan, Feature, Testi, HeroServicesStrip });