/* pages-home.jsx */
const { useState, useEffect, useRef } = React;

function HomePage({ go, openContact, openProperty }) {
  const { Reveal, Ph, Eyebrow, OrnRule, NumLabel, PropertyCard, Marquee, PROPERTIES, Folio, Plate, MarginNote, currentEdition } = window.S;
  const edition = currentEdition();

  /* Cinematic hero — slow-cross-fade through 3 placeholder shots */
  const heroShots = [
  { tag: "balneário camboriú · litoral catarinense", tone: "sea", num: "01 / 02", src: "assets/balneario-camboriu.jpeg" },
  { tag: "terraço · vista parque barigui", tone: "moss", num: "02 / 02", src: "assets/oas/08-terraco-barigui.png" }];

  const [shot, setShot] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setShot((s) => (s + 1) % heroShots.length), 6500);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="page" data-screen-label="Home">
      {/* HERO */}
      <section style={{ position: "relative", height: "100vh", minHeight: 640, overflow: "hidden" }}>
        {heroShots.map((h, i) =>
        <div
          key={i}
          style={{
            position: "absolute", inset: 0,
            opacity: i === shot ? 1 : 0,
            transition: "opacity 2400ms cubic-bezier(.22,.61,.36,1), transform 12000ms linear",
            transform: i === shot ? "scale(1.05)" : "scale(1)"
          }}>
          
            <Ph tone={h.tone} src={h.src} pos={h.pos} style={{ position: "absolute", inset: 0 }} />
          </div>
        )}
        {/* gradient veil — stronger top scrim so the edition/subtitle hold over bright sky */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(11,26,17,0.74) 0%, rgba(16,38,25,0.36) 30%, rgba(28,61,46,0.12) 48%, rgba(184,149,86,0.18) 74%, rgba(11,26,17,0.92) 100%)"
        }}></div>

        {/* hero content — editorial composition */}
        <div className="wrap" style={{
          position: "relative", height: "100%",
          display: "grid",
          gridTemplateColumns: "1fr",
          padding: "130px var(--gutter) 150px",
          color: "var(--paper)"
        }}>
          {/* top row: edition + dateline */}
          <Reveal delay={120} style={{
            display: "flex", justifyContent: "space-between", alignItems: "start"
          }}>
            <div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.28em", textTransform: "uppercase", color: "rgba(240,228,198,0.95)", textShadow: "0 1px 20px rgba(8,20,13,0.6), 0 1px 3px rgba(8,20,13,0.55)" }}>
                {edition.label}
              </div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--champagne)", marginTop: 10, textShadow: "0 1px 20px rgba(8,20,13,0.6), 0 1px 3px rgba(8,20,13,0.5)" }}>
                Curadoria privada · imóveis, arquitetura, lifestyle, mobilidade, crédito
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 44, color: "var(--gold-soft)", lineHeight: 0.9, textShadow: "0 2px 24px rgba(8,20,13,0.6), 0 1px 3px rgba(8,20,13,0.55)" }}>{edition.season}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(240,228,198,0.92)", marginTop: 8, textShadow: "0 1px 20px rgba(8,20,13,0.6), 0 1px 3px rgba(8,20,13,0.5)" }}>
                {edition.yearRoman}
              </div>
            </div>
          </Reveal>

          {/* center: oversized display, tight composition */}
          <Reveal delay={250} style={{ alignSelf: "center", maxWidth: 1100 }}>
            <h1 className="display" style={{ margin: 0, fontSize: "clamp(46px, 8vw, 132px)", lineHeight: 0.96 }}>
              Imóveis<br />
              <em style={{ paddingLeft: "8vw" }}>selecionados</em><br />
              <span style={{ color: "rgba(247,241,226,0.55)", fontStyle: "italic", fontFamily: "var(--serif)", fontWeight: 300 }}>—</span> para uma <em>vida discreta.</em>
            </h1>
          </Reveal>

          {/* bottom row: lede + CTAs + marker */}
          <Reveal delay={500} style={{
            display: "grid",
            gridTemplateColumns: "1fr auto auto",
            gap: 32,
            alignItems: "end",
            paddingTop: 24,
            borderTop: "1px solid rgba(232,217,179,0.2)"
          }} className="hero-foot">
            <div style={{ maxWidth: 440 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(232,217,179,0.7)", marginBottom: 12 }}>
                — Editorial da estação
              </div>
              <p style={{
                fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 19, fontWeight: 300,
                lineHeight: 1.4, color: "rgba(247,241,226,0.94)", margin: 0, textWrap: "pretty"
              }}>
                Uma seleção privada de imóveis, crédito, arquitetura, parceiros e experiências — em Curitiba e no litoral catarinense, fora do mercado aberto.
              </p>
            </div>
            <button className="btn on-dark" onClick={() => go("morar")}>
              Ler a edição<span className="arr"></span>
            </button>
            <button className="btn on-dark" onClick={() => openContact("Olá, 10HOUSE. Gostaria de falar com a curadoria.")} style={{
              borderColor: "var(--gold)", color: "var(--gold)"
            }}>
              Atendimento<span className="arr"></span>
            </button>
          </Reveal>
        </div>

        <style>{`@media (max-width: 800px){ .hero-foot { grid-template-columns: 1fr !important; } }`}</style>

        {/* shot indicator */}
        <div style={{
          position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)",
          display: "flex", gap: 8
        }}>
          {heroShots.map((_, i) =>
          <button key={i} onClick={() => setShot(i)} style={{
            width: 28, height: 1.5,
            background: i === shot ? "var(--gold)" : "rgba(250,247,240,0.4)",
            border: "none", padding: 0, cursor: "pointer",
            transition: "background 600ms"
          }}></button>
          )}
        </div>
      </section>

      {/* MARQUEE — values */}
      <Marquee
        items={[
        "Curadoria silenciosa",
        "Atendimento reservado",
        "Patrimônio com inteligência",
        "Endereços selecionados",
        "Discrição",
        "Sob agendamento"]
        } />
      

      {/* INTRO STATEMENT — w/ drop cap + marginalia + giant plate numeral */}
      <section style={{ padding: "160px var(--gutter) 140px", position: "relative", overflow: "hidden" }}>
        <Plate n="I" style={{ position: "absolute", top: "8vw", right: "-2vw" }} />
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 2.2fr 0.8fr", gap: 64, position: "relative" }}>
          <Reveal>
            <Folio n="01" label="Posicionamento" />
            <div style={{ marginTop: 32 }}>
              <span className="vrt">— {edition.season} · Seleção</span>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <h2 className="h2" style={{ margin: 0, fontSize: "clamp(30px, 4vw, 56px)" }}>
              Não somos um portal.<br />
              Somos uma <em>seleção.</em>
            </h2>
            <p className="body dropcap" style={{ marginTop: 36, fontSize: 16.5, lineHeight: 1.78, maxWidth: "44ch" }}>
              A 10HOUSE foi formada para um perfil de cliente que valoriza tempo, discrição e critério. Não publicamos catálogos. Não anunciamos. Selecionamos um número limitado de imóveis a cada estação — sempre com leitura de localização, projeto e potencial de patrimônio.
            </p>
            <div style={{ marginTop: 40 }}>
              <a className="link" onClick={() => go("curadoria")}>
                Conheça a curadoria<span className="arr"></span>
              </a>
            </div>
          </Reveal>
          <Reveal delay={400} style={{ paddingTop: 64 }}>
            <MarginNote label="Nota da curadoria">
              "Cada estação fechamos a seleção em menos de oito imóveis. O número é parte do método."
            </MarginNote>
            <div style={{ marginTop: 32, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-3)" }}>

            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 1000px){ section > .wrap[style*="0.8fr"] { grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
      </section>

      {/* INDEX / Table-of-contents — editorial */}
      <section style={{ padding: "0 var(--gutter) 140px" }}>
        <div className="wrap">
          <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 40 }}>
            <Folio n="02" label="Índice da edição" />
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--ink-3)" }}>
              {edition.label}
            </div>
          </Reveal>
          <div style={{ borderTop: "1px solid var(--forest-soft)" }}>
            {[
            { n: "I.", page: "p. 14", title: "Morar em Curitiba", sub: "Batel, Ecoville, Bigorrilho, Água Verde", route: "morar" },
            { n: "II.", page: "p. 28", title: "Investir com inteligência", sub: "Pré-lançamentos · renda · oportunidades reservadas", route: "investir" },
            { n: "III.", page: "p. 46", title: "Litoral selecionado", sub: "Balneário Camboriú · Itapema · Itajaí · Porto Belo", route: "litoral" },
            { n: "IV.", page: "p. 62", title: "Curadoria 10HOUSE", sub: "Imobiliário · arquitetura · lifestyle · mobilidade · crédito", route: "curadoria" }].
            map((c, i) =>
            <Reveal key={c.n} delay={i * 80}>
                <a onClick={() => go(c.route)} style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr 1.4fr 90px 30px",
                gap: 24,
                padding: "28px 0",
                borderBottom: "1px solid var(--forest-soft)",
                alignItems: "baseline",
                cursor: "pointer",
                textDecoration: "none",
                color: "var(--ink)",
                transition: "padding-left 480ms cubic-bezier(.22,.61,.36,1), background-color 480ms"
              }} onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "16px"} onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, color: "var(--gold)" }}>{c.n}</span>
                  <span style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.4vw, 34px)", letterSpacing: "-0.005em" }}>{c.title}</span>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 15, color: "var(--ink-3)" }}>{c.sub}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-3)" }}>{c.page}</span>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--gold)", fontSize: 22, textAlign: "right" }}>→</span>
                </a>
              </Reveal>
            )}
          </div>
          <style>{`@media (max-width: 800px){
            section > .wrap > div[style*="1.4fr"] a { grid-template-columns: 40px 1fr 30px !important; }
            section > .wrap > div[style*="1.4fr"] a > :nth-child(3),
            section > .wrap > div[style*="1.4fr"] a > :nth-child(4) { display: none; }
          }`}</style>
        </div>
      </section>

      {/* SECTION 1 — MORAR EM CURITIBA */}
      <section style={{ padding: "0 var(--gutter) 120px" }}>
        <div className="wrap">
          <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
            <div>
              <NumLabel n="ii.">Morar em Curitiba</NumLabel>
              <h2 className="h2" style={{ margin: "24px 0 0", maxWidth: "18ch" }}>
                Endereços <em style={{ fontStyle: "italic" }}>desejados</em>, vida em estado refinado.
              </h2>
            </div>
            <a className="link" onClick={() => go("morar")}>Ver seleção<span className="arr"></span></a>
          </Reveal>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 16
          }} className="nb-grid">
            {[
            { name: "Batel", sub: "centralidade clássica", src: "assets/batel.jpeg" },
            { name: "Ecoville", sub: "verde estabelecido", src: "assets/ecoville-noite.jpeg" },
            { name: "Bigorrilho", sub: "arquitetura premium", src: "assets/oas/01-torre-dia.png", pos: "75% center" },
            { name: "Água Verde", sub: "ruas baixas e arborizadas", src: "assets/agua-verde.jpeg" }].
            map((n, i) =>
            <Reveal key={n.name} delay={i * 120} className="nb" onClick={() => go("morar")}>
                <Ph tag={n.src ? "" : `${n.name.toLowerCase()} · arquitetura`} tone={["cool", "moss", "stone", "forest"][i]} src={n.src} pos={n.pos} />
                <div className="label">
                  <div>
                    <div className="name">{n.name}</div>
                    <div className="sub">{n.sub}</div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>

        <style>{`@media (max-width: 1000px){ .nb-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </section>

      {/* SECTION 2 — INVESTIR (dark block) */}
      <section className="dark-block" style={{ padding: "160px var(--gutter)", position: "relative", overflow: "hidden" }}>
        <Plate n="III" style={{ position: "absolute", top: "6vw", left: "-2vw" }} />
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center", position: "relative" }}>
          <Reveal>
            <Folio n="III" label="Investir" />
            <h2 className="h2" style={{ margin: "32px 0 0", color: "var(--paper)" }}>
              Onde patrimônio e <em>liquidez</em><br />caminham juntos.
            </h2>
            <p className="lede" style={{ marginTop: 28, color: "rgba(250,247,240,0.86)" }}>
              Acesso a pré-lançamentos estratégicos, operações de renda e oportunidades fora do mercado aberto.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn on-dark" onClick={() => go("investir")}>
                Oportunidades selecionadas<span className="arr"></span>
              </button>
            </div>
          </Reveal>

          <Reveal delay={200} style={{ position: "relative", aspectRatio: "5/6" }}>
            <Ph tag="" tone="warm" src="assets/ecoville-comeco.jpeg" style={{ position: "absolute", inset: 0 }} />
            <div style={{
              position: "absolute", left: "-32px", bottom: "-32px",
              background: "var(--gold)",
              color: "var(--forest-deep)",
              padding: "24px 28px",
              maxWidth: 260
            }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 8 }}>
                Pré-lançamento
              </div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.1 }}>Acesso prioritário a até 6 unidades selecionadas.

              </div>
            </div>
          </Reveal>
        </div>

        <style>{`@media (max-width: 900px){ .dark-block .wrap { grid-template-columns: 1fr !important; gap: 56px !important; } }`}</style>
      </section>

      {/* SECTION 3 — LITORAL */}
      <section style={{ padding: "140px var(--gutter)" }}>
        <div className="wrap">
          <Reveal style={{ marginBottom: 56 }}>
            <NumLabel n="iv.">Litoral selecionado</NumLabel>
            <h2 className="h2" style={{ margin: "24px 0 0", maxWidth: "16ch" }}>
              Onde a vista, o projeto e a localização <em style={{ fontStyle: "italic" }}>se encontram.</em>
            </h2>
          </Reveal>

          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 24
          }} className="lit-grid">
            <Reveal>
              <div style={{ position: "relative", aspectRatio: "5/4", overflow: "hidden" }}>
                <Ph tag="" tone="sea" src="assets/balneario-camboriu.jpeg" style={{ position: "absolute", inset: 0 }} />
                <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(180deg, rgba(14,32,24,0.05) 40%, rgba(14,32,24,0.78) 100%)",
                  pointerEvents: "none"
                }}></div>
                <div style={{
                  position: "absolute", left: 28, bottom: 28, color: "var(--paper)"
                }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.85 }}>
                    Santa Catarina · 01
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(32px, 3.6vw, 48px)", lineHeight: 1, marginTop: 10 }}>
                    Balneário Camboriú
                  </div>
                </div>
              </div>
            </Reveal>
            <div style={{ display: "grid", gridTemplateRows: "1fr 1fr 1fr", gap: 24 }}>
              {[
              { name: "Itapema", tone: "sand", src: "assets/itapema-aerea.jpeg" },
              { name: "Itajaí", tone: "stone", src: "assets/itajai.jpeg" },
              { name: "Porto Belo", tone: "cool", src: "assets/porto-belo.jpeg" }].
              map((p, i) =>
              <Reveal key={p.name} delay={150 + i * 120} style={{ position: "relative", overflow: "hidden" }}>
                  <Ph tag={p.src ? "" : `${p.name.toLowerCase()} · litoral`} tone={p.tone} src={p.src} style={{ position: "absolute", inset: 0 }} />
                  {p.src && <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(180deg, rgba(14,32,24,0.05) 45%, rgba(14,32,24,0.78) 100%)",
                  pointerEvents: "none"
                }}></div>}
                  <div style={{
                  position: "absolute", left: 22, bottom: 18, color: "var(--paper)",
                  fontFamily: "var(--serif)", fontSize: 26
                }}>{p.name}</div>
                </Reveal>
              )}
            </div>
          </div>

          <div style={{ marginTop: 56 }}>
            <a className="link" onClick={() => go("litoral")}>Explorar o litoral<span className="arr"></span></a>
          </div>
        </div>

        <style>{`@media (max-width: 900px){ .lit-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* FEATURED PROPERTIES — horizontal scroll */}
      <section style={{ padding: "0 0 140px" }}>
        <div className="wrap" style={{ padding: "0 var(--gutter)" }}>
          <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
            <div>
              <NumLabel n="v.">Em curadoria nesta estação</NumLabel>
              <h2 className="h2" style={{ margin: "24px 0 0", maxWidth: "14ch" }}>Imóveis em <em style={{ fontStyle: "italic" }}>seleção.</em></h2>
            </div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-3)" }}>
              {PROPERTIES.length} em curadoria{PROPERTIES.length > 3 ? " · arraste →" : ""}
            </div>
          </Reveal>
        </div>

        <div className="prop-marquee">
          <div className="prop-track">
            {[...PROPERTIES.slice(0, 6), ...PROPERTIES.slice(0, 6)].map((p, i) =>
            <PropertyCard key={p.ref + "-" + i} p={p} onOpen={openProperty} />
            )}
          </div>
        </div>
      </section>

      {/* SECTION — O ECOSSISTEMA · 5 TERRITÓRIOS */}
      <section className="mid-block" style={{ padding: "140px var(--gutter)", overflow: "hidden" }}>
        <div className="wrap">
          <Reveal style={{ marginBottom: 64, maxWidth: 960 }}>
            <NumLabel n="vi.">Curadoria 10HOUSE</NumLabel>
            <h2 className="h2" style={{ margin: "32px 0 0", color: "var(--paper)" }}>
              Uma curadoria que vai <em style={{ fontStyle: "italic" }}>além</em> do imóvel.
            </h2>
            <p className="lede" style={{ marginTop: 28, color: "rgba(247,241,226,0.78)", maxWidth: 640 }}>
              Imóveis, arquitetura, lifestyle, mobilidade e crédito — cinco territórios, uma única rede privada de acesso, leitura e bom gosto.
            </p>
          </Reveal>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 24 }} className="terr-grid">
            {[
            { n: "01", title: "Imobiliário", body: "Residências de alto padrão e oportunidades selecionadas em Curitiba e no litoral catarinense.", tone: "stone", route: "morar" },
            { n: "02", title: "Arquitetura", body: "Indicações reservadas de arquitetos, escritórios de interiores e fornecedores premium.", tone: "warm", route: "curadoria" },
            { n: "03", title: "Lifestyle", body: "Experiências, marcas e parceiros alinhados ao universo do alto padrão.", tone: "moss", route: "curadoria" },
            { n: "04", title: "Mobilidade", body: "Parceiros premium de mobilidade — automotivo, náutico e aviação executiva, por indicação privada.", tone: "night", route: "curadoria" },
            { n: "05", title: "Crédito", body: "Financiamento, consórcio e consórcio contemplado junto ao imóvel — crédito como instrumento de investimento.", tone: "cool", route: "curadoria" }].
            map((t, i) =>
            <Reveal key={t.n} delay={i * 100}>
                <a onClick={() => go(t.route)} style={{ cursor: "pointer", display: "block", color: "inherit" }}>
                  <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden" }}>
                    <Ph tag={`${t.title.toLowerCase()} · curadoria`} tone={t.tone} num={t.n} style={{ position: "absolute", inset: 0 }} />
                  </div>
                  <div style={{ marginTop: 22 }}>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(232,217,179,0.55)" }}>
                      — {t.n} · território
                    </div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 28, color: "var(--paper)", marginTop: 12, fontWeight: 300, letterSpacing: "-0.005em" }}>
                      {t.title}
                    </div>
                    <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.7, color: "rgba(247,241,226,0.7)" }}>
                      {t.body}
                    </p>
                  </div>
                </a>
              </Reveal>
            )}
          </div>

          <style>{`@media (max-width: 1100px){ .terr-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px){ .terr-grid { grid-template-columns: 1fr !important; } }`}</style>

          <div style={{ marginTop: 64, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, paddingTop: 36, borderTop: "1px solid rgba(232,217,179,0.2)" }}>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 19, fontWeight: 300, color: "rgba(247,241,226,0.86)", margin: 0, maxWidth: "44ch", lineHeight: 1.4 }}>
              Um ecossistema reservado, conectado pelo mesmo critério.
            </p>
            <a className="link" style={{ color: "var(--paper)", borderBottomColor: "var(--gold-soft)" }} onClick={() => go("curadoria")}>
              Conheça a curadoria 10HOUSE<span className="arr"></span>
            </a>
          </div>
        </div>

        <style>{`
          @media (max-width: 1100px){ .terr-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 600px){ .terr-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* ATENDIMENTO PRIVADO */}
      <section className="dark-block" style={{ padding: "140px var(--gutter)", position: "relative", overflow: "hidden" }}>
        <div className="watermark" style={{ color: "var(--paper)", opacity: 0.04 }}>10<i>HOUSE</i></div>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center", position: "relative" }}>
          <Reveal>
            <Folio n="VII" label="Atendimento privado" />
            <OrnRule short style={{ marginTop: 32, maxWidth: 220 }} />
            <h2 className="h2" style={{ margin: "32px 0 0", color: "var(--paper)" }}>
              Reservado, <em>sob agendamento.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lede" style={{ color: "rgba(250,247,240,0.86)", marginBottom: 32 }}>
              O atendimento da 10HOUSE acontece de forma reservada — em nosso escritório, em visita ao imóvel ou em conversa privada com nossa curadoria.
            </p>
            <button className="btn on-dark" onClick={() => openContact("Olá, 10HOUSE. Gostaria de solicitar um atendimento privado.")}>
              Solicite atendimento privado<span className="arr"></span>
            </button>
          </Reveal>
        </div>
        <style>{`@media (max-width: 900px){ .dark-block .wrap { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </section>
    </div>);

}

window.Pages = window.Pages || {};
window.Pages.HomePage = HomePage;