/* pages-info.jsx — Curadoria, Sobre, Contato */
const { useState: useS2, useEffect: useE2 } = React;

/* CURADORIA */
function CuradoriaPage({ openContact }) {
  const { Reveal, NumLabel, Ph } = window.S;
  const { PageHero, ReservedCTA } = window.Pages;

  const steps = [
    { n: "I.", title: "Leitura do cliente", body: "Antes de qualquer imóvel, escutamos. Entender perfil, momento, tese de patrimônio e expectativa de uso é o que precede toda recomendação." },
    { n: "II.", title: "Leitura do endereço", body: "Curitiba e o litoral catarinense em microleitura: rua, quadra, vizinhança, histórico de valorização, projeção de ciclo e densidade." },
    { n: "III.", title: "Filtro de projeto", body: "Arquitetura, planta, posicionamento solar, marca da construtora, padrão de acabamento, plano original — antes de qualquer visita." },
    { n: "IV.", title: "Acesso reservado", body: "Apresentação de um número limitado de imóveis, sempre com explicação do porquê estão na seleção." },
    { n: "V.", title: "Negociação privada", body: "Conduzimos a negociação em nome do cliente, com sigilo absoluto e leitura de mercado em tempo real." },
    { n: "VI.", title: "Acompanhamento", body: "Do escritório à entrega das chaves: jurídico, financeiro, mudança e — se for o caso — gestão de renda." },
  ];

  return (
    <div className="page" data-screen-label="Curadoria">
      <PageHero
        eyebrow="Curadoria 10HOUSE"
        title="Selecionar com <em>critério</em>.<br/>Atender com discrição."
        subtitle="Imóveis, arquitetura, lifestyle e mobilidade — uma curadoria privada que vai além do imóvel."
        tone="moss"
        num="iv"
      />

      <section style={{ padding: "140px var(--gutter) 100px" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <Reveal><NumLabel n="i.">Manifesto</NumLabel></Reveal>
          <Reveal delay={200}>
            <h2 className="h2" style={{ margin: 0, maxWidth: "20ch" }}>
              Mais do que encontrar imóveis. <em style={{ fontStyle: "italic" }}>Selecionar</em> oportunidades.
            </h2>
            <p className="body" style={{ marginTop: 32, fontSize: 16, lineHeight: 1.75 }}>
              A 10HOUSE não compete por volume. Existimos para um perfil de cliente que prefere uma rota reservada — onde o que chega é resultado de filtro, leitura e discrição. Cada imóvel que se torna parte da seleção responde a critérios que firmamos em estatuto. O que não passa, simplesmente não passa.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Method — vertical timeline */}
      <section style={{ padding: "0 var(--gutter) 140px" }}>
        <div className="wrap">
          <Reveal style={{ marginBottom: 48 }}>
            <h2 className="h2" style={{ margin: 0, maxWidth: "18ch" }}>
              O <em style={{ fontStyle: "italic" }}>método</em> 10HOUSE.
            </h2>
          </Reveal>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 70}>
                <div style={{
                  display: "grid", gridTemplateColumns: "80px 1fr 2fr", gap: 32,
                  padding: "40px 0", borderTop: "1px solid var(--rule)",
                  alignItems: "start",
                }} className="method-row">
                  <div style={{
                    fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 36, color: "var(--gold)",
                    fontWeight: 300,
                  }}>{s.n}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1.15, fontWeight: 400 }}>
                    {s.title}
                  </div>
                  <p className="body" style={{ margin: 0, fontSize: 15, lineHeight: 1.75 }}>{s.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <style>{`@media (max-width: 820px){ .method-row { grid-template-columns: 60px 1fr !important; } .method-row > p { grid-column: 1 / -1; margin-left: 60px !important; } }`}</style>
        </div>
      </section>

      {/* OS QUATRO TERRITÓRIOS */}
      <section style={{ padding: "0 var(--gutter) 140px" }}>
        <div className="wrap">
          <Reveal style={{ marginBottom: 64, maxWidth: 920 }}>
            <NumLabel n="ii.">Territórios da curadoria</NumLabel>
            <h2 className="h2" style={{ margin: "24px 0 0" }}>
              Cinco frentes, <em style={{ fontStyle: "italic" }}>um único critério.</em>
            </h2>
            <p className="body" style={{ marginTop: 28, fontSize: 16, lineHeight: 1.75, maxWidth: 620 }}>
              A 10HOUSE opera como uma rede privada de acesso. O imóvel continua sendo o ponto de partida — mas o relacionamento se estende a arquitetura, lifestyle, mobilidade e crédito, com a mesma exigência de filtro e discrição.
            </p>
          </Reveal>

          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {[
              { n: "01", title: "Imobiliário", body: "Residências de alto padrão em Curitiba, oportunidades fora do mercado aberto e o litoral catarinense em curadoria.", caps: "Curitiba · Litoral · Curadoria privada", tone: "stone" },
              { n: "02", title: "Arquitetura & Interiores", body: "Indicação reservada de arquitetos, escritórios de interiores e fornecedores premium. Para quem prefere chegar ao profissional certo pela rota privada — sem disputa de portfólio.", caps: "Arquitetos · Interiores · Fornecedores", tone: "warm" },
              { n: "03", title: "Lifestyle", body: "Experiências, marcas e parceiros alinhados ao universo do alto padrão — hospitalidade, mesa, viagem e bem-estar. Tudo conectado pelo mesmo critério de seleção.", caps: "Hospitalidade · Mesa · Viagem · Bem-estar", tone: "moss" },
              { n: "04", title: "Mobilidade", body: "Acesso reservado a parceiros premium de mobilidade — automotivos, náuticos (barcos e lanchas) e aviação executiva (aviões e jatos), com oportunidades pontuais e indicações privadas, sempre por rede fechada.", caps: "Automotivo · Náutico · Aviação executiva · Indicações privadas", tone: "night" },
              { n: "05", title: "Crédito", body: "Parceiros de financiamento, consórcio e consórcio contemplado — estruturação de crédito como instrumento de investimento, com a mesma leitura de tese e saída.", caps: "Financiamento · Consórcio · Consórcio contemplado · Investimento", tone: "warm" },
            ].map((t, i) => (
              <Reveal key={t.n} delay={i * 80}>
                <div style={{
                  display: "grid", gridTemplateColumns: "0.6fr 1.2fr 1fr 1fr", gap: 36,
                  padding: "44px 0", borderTop: "1px solid var(--rule)",
                  alignItems: "start",
                }} className="terr-row">
                  <div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--ink-3)" }}>
                      Território {t.n}
                    </div>
                    <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 40, color: "var(--gold)", lineHeight: 1, marginTop: 12, fontWeight: 300 }}>
                      — {t.n}
                    </div>
                  </div>
                  <div>
                    <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 38px)", margin: 0, lineHeight: 1.05, fontWeight: 400, letterSpacing: "-0.005em" }}>
                      {t.title}
                    </h3>
                  </div>
                  <p className="body" style={{ margin: 0, fontSize: 14.5 }}>{t.body}</p>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", lineHeight: 2 }}>
                    {t.caps}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <style>{`@media (max-width: 980px){ .terr-row { grid-template-columns: 1fr !important; gap: 16px !important; } }`}</style>
        </div>
      </section>

      {/* Pull quote */}
      <section className="dark-block" style={{ padding: "140px var(--gutter)" }}>
        <div className="wrap" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 32 }}>
          <Reveal>
            <window.S.OrnRule style={{ width: 200, margin: "0 auto" }} />
          </Reveal>
          <Reveal>
            <div style={{
              fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--gold-soft)",
              fontSize: 64, lineHeight: 0.8, marginBottom: -20,
            }}>“</div>
          </Reveal>
          <Reveal delay={150}>
            <h2 className="h2" style={{ margin: 0, color: "var(--paper)", maxWidth: 22 + "ch", fontSize: "clamp(28px, 3.6vw, 48px)" }}>
              Cada imóvel da seleção responde a uma única pergunta — <em style={{ fontStyle: "italic" }}>vale o critério que coloco no meu próprio patrimônio.</em>
            </h2>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(232,217,179,0.7)", marginTop: 24 }}>
              Equipe de curadoria · 10HOUSE
            </div>
          </Reveal>
        </div>
      </section>

      <ReservedCTA onClick={openContact} kicker="Receba a seleção privada da 10HOUSE." msg="Olá, 10HOUSE. Gostaria de receber a seleção privada da curadoria 10HOUSE." />
    </div>
  );
}

/* SOBRE */
function SobrePage({ openContact }) {
  const { Reveal, NumLabel, Ph } = window.S;
  const { PageHero, ReservedCTA } = window.Pages;

  return (
    <div className="page" data-screen-label="Sobre">
      <PageHero
        eyebrow="A 10HOUSE"
        title="Uma boutique imobiliária<br/>de <em>perfil reservado.</em>"
        subtitle="Construída sobre três princípios: discrição, critério e atendimento."
        tone="moss"
        num="v"
      />

      {/* Two-column statement */}
      <section style={{ padding: "140px var(--gutter)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} className="sobre-grid">
          <Reveal style={{ position: "relative", aspectRatio: "4/5" }}>
            <Ph tag="escritório · curitiba" tone="warm" num="sede" />
          </Reveal>
          <Reveal delay={200}>
            <NumLabel n="i.">Posicionamento</NumLabel>
            <h2 className="h2" style={{ margin: "28px 0 0" }}>
              Existimos para quem procura uma rota <em style={{ fontStyle: "italic" }}>discreta.</em>
            </h2>
            <p className="body" style={{ marginTop: 32, fontSize: 16, lineHeight: 1.75 }}>
              A 10HOUSE foi criada para atender um perfil específico de cliente — pessoas que preferem ser apresentadas a um pequeno número de oportunidades certas, em vez de filtrar centenas. Nosso trabalho não está em mostrar imóveis. Está em selecionar, posicionar e conduzir.
            </p>
            <p className="body" style={{ marginTop: 18, fontSize: 16, lineHeight: 1.75 }}>
              Operamos em Curitiba e no litoral catarinense, com olhar editorial sobre arquitetura, localização e patrimônio. Trabalhamos por indicação e por agendamento — sempre.
            </p>
          </Reveal>
        </div>
        <style>{`@media (max-width: 900px){ .sobre-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
      </section>

      {/* Principles */}
      <section style={{ padding: "0 var(--gutter) 140px" }}>
        <div className="wrap">
          <Reveal style={{ marginBottom: 56 }}>
            <NumLabel n="ii.">Princípios</NumLabel>
            <h2 className="h2" style={{ margin: "24px 0 0", maxWidth: "16ch" }}>
              O que nos <em style={{ fontStyle: "italic" }}>distingue.</em>
            </h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }} className="pri-grid">
            {[
              { n: "01", title: "Discrição", body: "Não publicamos catálogos. Não fazemos anúncios. A maior parte dos nossos imóveis nunca chega ao mercado aberto." },
              { n: "02", title: "Critério", body: "Trabalhamos com uma seleção limitada por estação. O número fechado é parte do método — e o que sustenta a curadoria." },
              { n: "03", title: "Atendimento", body: "Conduzimos toda a jornada do cliente: leitura, visita, negociação, jurídico e — quando faz sentido — gestão." },
            ].map((p, i) => (
              <Reveal key={p.n} delay={i * 120} style={{
                padding: "48px 32px 48px 0",
                borderTop: "1px solid var(--rule)",
                borderRight: i < 2 ? "1px solid var(--rule)" : "none",
              }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.24em", color: "var(--gold)" }}>{p.n}</div>
                <h3 className="h3" style={{ margin: "20px 0 0", fontSize: 28 }}>{p.title}</h3>
                <p className="body" style={{ marginTop: 16, fontSize: 14.5 }}>{p.body}</p>
              </Reveal>
            ))}
          </div>
          <style>{`
            @media (max-width: 900px){ .pri-grid { grid-template-columns: 1fr !important; } .pri-grid > * { border-right: none !important; padding-right: 0 !important; } }
          `}</style>
        </div>
      </section>

      {/* Locations */}
      <section className="dark-block" style={{ padding: "120px var(--gutter)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="loc-grid">
          <Reveal>
            <NumLabel n="iii.">Praças</NumLabel>
            <h2 className="h2" style={{ margin: "24px 0 0", color: "var(--paper)" }}>
              Duas geografias, <em style={{ fontStyle: "italic" }}>um mesmo critério.</em>
            </h2>
            <p className="lede" style={{ marginTop: 24, color: "rgba(250,247,240,0.86)" }}>
              Curitiba — para morar com endereço. Litoral catarinense — para descansar e compor patrimônio.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              {[
                { city: "Curitiba", neighborhoods: "Batel · Bigorrilho · Ecoville · Água Verde" },
                { city: "Balneário Camboriú", neighborhoods: "Centro · Estaleiro · Pioneiros" },
                { city: "Itapema", neighborhoods: "Meia Praia · Morretes" },
                { city: "Itajaí · Porto Belo", neighborhoods: "Cabeçudas · Bombinhas · Bombas" },
              ].map((l) => (
                <div key={l.city} style={{ paddingBottom: 20, borderBottom: "1px solid rgba(232,217,179,0.18)" }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 26, color: "var(--paper)" }}>{l.city}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(232,217,179,0.6)", marginTop: 6 }}>
                    {l.neighborhoods}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 900px){ .loc-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
      </section>

      <ReservedCTA onClick={openContact} msg="Olá, 10HOUSE. Gostaria de falar com a curadoria 10HOUSE." />
    </div>
  );
}

/* CONTATO */
function ContatoPage({ openContact }) {
  const { Reveal, NumLabel, Ph } = window.S;
  const { PageHero } = window.Pages;
  const [form, setForm] = useS2({ name: "", email: "", phone: "", interest: "Morar em Curitiba", message: "" });
  const [sent, setSent] = useS2(false);

  const submit = (e) => {
    e.preventDefault();
    const msg = `Olá, 10HOUSE. Meu nome é ${form.name}.
Interesse: ${form.interest}.
Telefone: ${form.phone}
Email: ${form.email}${form.message ? `
Mensagem: ${form.message}` : ""}`;
    window.S.openWa(msg);
    setSent(true);
  };

  return (
    <div className="page" data-screen-label="Contato">
      <section style={{ paddingTop: 140, padding: "140px var(--gutter) 80px" }}>
        <div className="wrap">
          <Reveal>
            <div className="eyebrow"><span className="dot"></span>Atendimento privado · Sob agendamento</div>
            <h1 className="display" style={{ margin: "32px 0 0", fontSize: "clamp(40px, 5.6vw, 96px)" }}>
              Conversemos, <em style={{ fontStyle: "italic" }}>reservadamente.</em>
            </h1>
            <p className="lede" style={{ marginTop: 32, maxWidth: 56 + "ch" }}>
              Atendimento sob agendamento, em nosso escritório, em visita ao imóvel ou em conversa privada com nossa curadoria.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: "40px var(--gutter) 120px" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80 }} className="contact-grid">
          <Reveal>
            {sent ? (
              <div style={{ padding: "60px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 40, color: "var(--gold)" }}>obrigado.</div>
                <h2 className="h2" style={{ margin: "16px 0 0" }}>Sua solicitação foi <em style={{ fontStyle: "italic" }}>recebida.</em></h2>
                <p className="body" style={{ marginTop: 24 }}>
                  Um membro da curadoria 10HOUSE entrará em contato em até 24 horas úteis para agendar a conversa.
                </p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div style={{ marginBottom: 32 }}>
                  <NumLabel n="01.">Formulário privado</NumLabel>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="fields-grid">
                  <div className="field">
                    <label>Nome</label>
                    <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="field">
                    <label>Telefone</label>
                    <input required value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="(__) _____-____"/>
                  </div>
                </div>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}/>
                </div>
                <div className="field">
                  <label>Interesse</label>
                  <select value={form.interest} onChange={(e) => setForm({ ...form, interest: e.target.value })}>
                    <option>Morar em Curitiba</option>
                    <option>Investir</option>
                    <option>Litoral catarinense</option>
                    <option>Curadoria privada</option>
                    <option>Conversa exploratória</option>
                  </select>
                </div>
                <div className="field">
                  <label>Mensagem</label>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Conte-nos sobre o que procura."/>
                </div>
                <div style={{ marginTop: 24 }}>
                  <button type="submit" className="btn">Solicitar atendimento<span className="arr"></span></button>
                </div>
                <style>{`@media (max-width: 600px){ .fields-grid { grid-template-columns: 1fr !important; } }`}</style>
              </form>
            )}
          </Reveal>

          <Reveal delay={200}>
            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
              <div>
                <NumLabel n="02.">Canais reservados</NumLabel>
                <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 18 }}>
                  {[
                    { eyebrow: "WhatsApp", value: "(41) 99711-1147", caption: "Direto · curadoria", href: window.S.waLink("Olá, 10HOUSE. Gostaria de falar com a curadoria.") },
                    { eyebrow: "Email", value: "contato@10house.com.br", caption: "Resposta em até 24h", href: "mailto:contato@10house.com.br" },
                    { eyebrow: "Escritório", value: "Av. República Argentina, 1228 — Sala 1701 · Curitiba PR", caption: "Sob agendamento" },
                    { eyebrow: "Instagram", value: "@10house", caption: "Editorial · seleção", href: "https://instagram.com/10house" },
                  ].map((c) => (
                    <div key={c.eyebrow} style={{ padding: "20px 0", borderTop: "1px solid var(--rule)" }}>
                      <div className="eyebrow">{c.eyebrow}</div>
                      {c.href ? (
                        <a href={c.href} target="_blank" rel="noopener noreferrer" style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 8, fontWeight: 400, display: "block", color: "inherit", textDecoration: "none" }}>{c.value}</a>
                      ) : (
                        <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 8, fontWeight: 400 }}>{c.value}</div>
                      )}
                      <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", marginTop: 6 }}>
                        {c.caption}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ padding: "24px 0", borderTop: "1px solid var(--rule)" }}>
                <div className="eyebrow">Horário</div>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, marginTop: 8, color: "var(--ink-2)" }}>
                  Seg–Sex · 9h–19h<br/>Sáb · sob agendamento
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr !important; gap: 56px !important; } }`}</style>
      </section>
    </div>
  );
}

window.Pages = window.Pages || {};
Object.assign(window.Pages, { CuradoriaPage, SobrePage, ContatoPage });