function About({ setPage }) {
  return (
    <main data-screen-label="Sobre">
      <section className="section" style={{ paddingBottom: 60 }}>
        <div className="container">
          <div className="about-hero">
            <div>
              <div className="h-eyebrow">
                Sobre a Condominize
              </div>
              <h1 className="h-display" style={{ marginTop: 24 }}>
                Cuidar do seu condomínio é <em>nossa especialidade.</em>
              </h1>
              <p style={{ marginTop: 28 }}>
                A Condominize nasceu para fazer diferente. Reunimos em uma única empresa o que normalmente
                está espalhado entre síndico voluntário, administradora terceirizada e advogado externo —
                e entregamos isso com gente próxima, presente nas reuniões e com tecnologia que ajuda no dia a dia.
              </p>
              <p>
                Atendemos toda a Região dos Lagos. Síndicos, conselheiros e condôminos encontram aqui
                um único parceiro responsável por tudo o que envolve a gestão do condomínio.
              </p>
            </div>
            <VirtualOffice
              src="assets/fotos/escritorio/escritorio.jpg"
              localPath="assets/fotos/escritorio/escritorio.jpg"
              tag="Saquarema · RJ"
              hidePlaque
              softFilter
            />
          </div>
        </div>
      </section>

      {/* Mission / Manifesto */}
      <section className="section" style={{ background: "var(--navy-900)", color: "var(--cream-50)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(at 80% 50%, rgba(212, 162, 76, 0.18), transparent 60%)" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1fr", gap: 80, alignItems: "center" }} className="manifesto-grid">
            <div>
              <div className="h-eyebrow on-dark">Nosso propósito</div>
              <h2 className="h-display" style={{ fontSize: "clamp(38px, 4.5vw, 60px)", marginTop: 24, color: "var(--cream-50)" }}>
                Mais <em>tranquilidade</em> para quem cuida do condomínio.
              </h2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <p style={{ fontSize: 19, color: "rgba(251,249,243,0.88)", lineHeight: 1.55 }}>
                Acreditamos que condomínio bem cuidado é resultado de três coisas: <strong style={{ color: "var(--gold-500)", fontWeight: 600 }}>profissionais
                preparados</strong>, <strong style={{ color: "var(--gold-500)", fontWeight: 600 }}>processos claros</strong> e <strong style={{ color: "var(--gold-500)", fontWeight: 600 }}>gente presente</strong> de
                verdade nas reuniões.
              </p>
              <p style={{ fontSize: 16, color: "rgba(251,249,243,0.72)", lineHeight: 1.65 }}>
                Cada cliente recebe a atenção que recebia das administradoras antigas — sem a burocracia,
                sem a demora e sem a fatura cheia de surpresas. E ganha de bônus o que essas administradoras
                nunca conseguiram entregar: respaldo jurídico de verdade, transparência total e proximidade.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <div className="h-eyebrow">Princípios de operação</div>
              <h2 className="h-display">Quatro decisões que mudam o jogo.</h2>
              <p>Não são valores de parede — são as escolhas que fazemos todos os dias e que diferenciam nosso trabalho de qualquer administradora tradicional.</p>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--border-gold)" }}>
            <Value n="01" t="Transparência sem desculpa" d="Toda movimentação, contrato e prestação de contas pública e disponível em tempo real. Síndico, conselho e condôminos enxergam exatamente o mesmo dado." />
            <Value n="02" t="Presença real nas reuniões" d="Equipe Condominize presente fisicamente nas assembleias e reuniões do conselho. Gente do nosso time, treinada pelo nosso padrão. Sem terceirizado anônimo." />
            <Value n="03" t="Jurídico de verdade, integrado" d="Advogado especializado em condomínios na operação, não como serviço extra cobrado fora. Nenhum problema legal vira surpresa cara." />
            <Value n="04" t="Atendimento humano sempre" d="Você nunca conversa com robô. Cada mensagem recebida em horário comercial responde em até 4 horas — sempre por uma pessoa, pelo canal que você preferir." />
          </div>
        </div>
      </section>

      {/* Coverage */}
      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div className="coverage" style={{ background: "var(--surface)" }}>
            <div>
              <div className="h-eyebrow">Onde atuamos</div>
              <h3 style={{ marginTop: 22 }}>Toda a Região dos Lagos.</h3>
              <p>Atuação presencial nos seis municípios principais, com equipe própria do nosso time e atendimento próximo.</p>
              <div className="cities">
                <div className="city"><div className="n">Saquarema</div><div className="pop">Sede · 90 mil hab.</div></div>
                <div className="city"><div className="n">Cabo Frio</div><div className="pop">222 mil habitantes</div></div>
                <div className="city"><div className="n">Maricá</div><div className="pop">197 mil habitantes</div></div>
                <div className="city"><div className="n">Búzios</div><div className="pop">Turístico · veraneio</div></div>
                <div className="city"><div className="n">Araruama</div><div className="pop">130 mil habitantes</div></div>
                <div className="city"><div className="n">Arraial do Cabo</div><div className="pop">28 mil habitantes</div></div>
                <div className="city"><div className="n">S. Pedro da Aldeia</div><div className="pop">104 mil habitantes</div></div>
                <div className="city"><div className="n">Iguaba Grande</div><div className="pop">28 mil habitantes</div></div>
              </div>
            </div>
            <div className="map-svg">
              <RegionMap />
            </div>
          </div>
        </div>
      </section>

      {/* Founder / Team */}
      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <div className="h-eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Quem está por trás</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 24 }}>
              Uma equipe formada para <em>resolver</em>,<br/>não para empurrar.
            </h2>
            <p style={{ fontSize: 18, color: "var(--text-soft)", marginTop: 28, lineHeight: 1.65 }}>
              Por trás da Condominize está uma equipe que combina <strong>experiência prática</strong> em
              gestão de condomínios, <strong>formação jurídica</strong> com atuação em direito condominial
              e <strong>bagagem em tecnologia</strong> aplicada a serviços. Conhecemos as dores do mercado
              por dentro — porque já passamos por elas.
            </p>
            <p style={{ fontSize: 17, color: "var(--text-soft)", marginTop: 18, lineHeight: 1.65 }}>
              Cada cliente é atendido por gente que entende de verdade do assunto: do contrato com o
              porteiro à ação de cobrança no fórum, do balancete ao plano de obras. Sem terceirizar, sem
              empurrar para terceiros.
            </p>
          </div>

          <div style={{
            marginTop: 72,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            border: "1px dashed var(--border-gold)",
            borderRadius: 22,
            overflow: "hidden",
            background: "var(--surface)"
          }} className="about-stats-grid">
            <BigStat n="20+" l="Anos de experiência somada em tecnologia, jurídico e gestão" />
            <BigStat n="OAB/RJ" l="Advogado condominialista inscrito" />
            <BigStat n="UFRJ" l="Engenheira com especializações em Segurança do Trabalho, Química e Ambiental" />
            <BigStat n="100%" l="Atendimento humano em todos os pontos de contato" />
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="final-cta">
        <div className="container">
          <div className="h-eyebrow on-dark" style={{ justifyContent: "center", display: "inline-flex", marginBottom: 28 }}>
            Conheça nosso trabalho
          </div>
          <h2 className="h-display">
            Quer ver como a Condominize <em>funciona</em> no seu condomínio?
          </h2>
          <p>Uma conversa inicial sem compromisso. A gente vai até você, entende o cenário e mostra o que pode mudar.</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">
              <Icon name="whatsapp" size={16} />
              Falar com a Condominize
            </a>
            <button className="btn btn-ghost-light" onClick={() => setPage("contact")}>
              Pedir uma proposta
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function Value({ n, t, d }) {
  return (
    <div className="value-item" style={{ background: "var(--cream-50)" }}>
      <div className="value-num" style={{ color: "var(--accent-deep)" }}>{n}</div>
      <h3 style={{ color: "var(--navy-900)" }}>{t}</h3>
      <p style={{ color: "var(--text-soft)" }}>{d}</p>
    </div>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 400, letterSpacing: "-0.025em", color: "var(--navy-900)" }}>{n}</div>
      <div style={{ fontSize: 13, color: "var(--text-soft)", marginTop: 4 }}>{l}</div>
    </div>
  );
}

function BigStat({ n, l }) {
  return (
    <div style={{
      padding: "44px 32px",
      borderRight: "1px dashed var(--border-gold)",
      textAlign: "left"
    }} className="about-bigstat">
      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: 56,
        fontWeight: 350,
        letterSpacing: "-0.035em",
        color: "var(--accent-deep)",
        lineHeight: 1,
        fontStyle: "italic"
      }}>{n}</div>
      <div style={{
        fontSize: 14,
        color: "var(--text-soft)",
        marginTop: 14,
        lineHeight: 1.5
      }}>{l}</div>
    </div>
  );
}

function RegionMap() {
  return (
    <svg viewBox="0 0 320 260" style={{ width: "100%", height: "auto" }}>
      <rect width="320" height="260" fill="var(--cream-100)"/>
      <path d="M0 110 C20 100 40 105 60 95 C80 88 100 92 115 80 C130 70 145 75 165 65 C188 55 210 65 230 55 C250 48 270 55 290 50 L320 45 L320 260 L0 260 Z"
        fill="var(--cream-200)" stroke="var(--accent)" strokeOpacity="0.4" strokeWidth="1"/>
      <ellipse cx="100" cy="180" rx="28" ry="14" fill="var(--cream-100)" stroke="var(--accent)" strokeOpacity="0.35"/>
      <ellipse cx="180" cy="200" rx="40" ry="16" fill="var(--cream-100)" stroke="var(--accent)" strokeOpacity="0.35"/>
      <ellipse cx="240" cy="180" rx="22" ry="11" fill="var(--cream-100)" stroke="var(--accent)" strokeOpacity="0.35"/>

      {[
        { x: 60, y: 130, n: "Maricá", o: -8 },
        { x: 100, y: 200, n: "Saquarema", o: -8 },
        { x: 165, y: 215, n: "Araruama", o: 12 },
        { x: 230, y: 200, n: "S.P. Aldeia", o: 12 },
        { x: 270, y: 175, n: "Iguaba", o: 12 },
        { x: 295, y: 145, n: "Cabo Frio", o: -16 },
        { x: 305, y: 110, n: "Búzios", o: -14 },
        { x: 282, y: 165, n: "Arraial", o: -14 }
      ].map((c, i) => (
        <g key={i}>
          <circle cx={c.x} cy={c.y} r="6" fill="var(--accent)"/>
          <circle cx={c.x} cy={c.y} r="14" fill="var(--accent)" opacity="0.18"/>
          <text x={c.x} y={c.y + c.o} fontFamily="var(--font-mono)" fontSize="9"
            textAnchor="middle" fill="var(--navy-900)" fontWeight="600">{c.n}</text>
        </g>
      ))}
      <text x="40" y="40" fontFamily="var(--font-mono)" fontSize="9" fill="var(--accent-deep)" letterSpacing="0.18em">
        REGIÃO DOS LAGOS · RJ
      </text>
    </svg>
  );
}

Object.assign(window, { About, Value, Stat, BigStat, RegionMap, VirtualOffice });

/* VirtualOffice — placa de vidro com a logo da Condominize sobre uma foto
   de fundo (escritório/sala). Para usar uma foto real:
   1) Salve a foto em `assets/fotos/escritorio/escritorio.jpg`
      (ou outro nome — só mantenha consistente abaixo)
   2) Edite a linha onde o componente é chamado, em `components/about.jsx`,
      e troque o valor de `src` para o caminho local. Ex.:
          src="https://picsum.photos/seed/.../1200/1400"
        vira:
          src="assets/fotos/escritorio/escritorio.jpg"
   3) Salve.
   Tamanho recomendado da foto: 1200×1400px (formato retrato suave). */
function VirtualOffice({ src, localPath, tag, aspectRatio, hidePlaque = false, softFilter = false }) {
  return (
    <div className={`virtual-office${softFilter ? " soft" : ""}`} style={aspectRatio ? { aspectRatio } : null}>
      <div
        className="vo-photo"
        style={{ backgroundImage: `url(${src})` }}
      ></div>
      {!softFilter && <div className="vo-color"></div>}
      {!softFilter && <div className="vo-warm"></div>}
      <div className="vo-vignette"></div>
      <div className="vo-grain"></div>

      <span className="vo-corner tl"></span>
      <span className="vo-corner tr"></span>
      <span className="vo-corner bl"></span>
      <span className="vo-corner br"></span>

      {!hidePlaque && (
        <>
          <div className="vo-shadow"></div>
          <div className="vo-plaque">
            <img src="assets/logo-condominize-tight.png" alt="Condominize" />
          </div>
        </>
      )}

      {tag && <span className="vo-tag">{tag}</span>}
    </div>
  );
}
