/* SECTION 01 — Hero + SECTION 02 — credibility bar. */
function ModalitiesStrip() {
  const modalities = [
    ["home", "Imóveis residenciais"],
    ["storefront", "Imóveis comerciais"],
    ["landscape", "Fazendas e chácaras"],
    ["property-assessment", "Avaliações CNAI"],
    ["subscription", "Consórcio imobiliário"]
  ];

  return (
    <section className="cn-modalities-strip" aria-labelledby="cn-modalities-title">
      <div className="cn-modalities-shell">
        <h2 id="cn-modalities-title" className="cn-sr-only">Modalidades atendidas pela Carina Imóveis</h2>
        <div className="cn-modalities-list">
          {modalities.map(([icon, label]) => (
            <article key={label} className="cn-modality-item">
              <span className="cn-modality-icon" aria-hidden="true">
                <Icon name={icon} size={34} color="currentColor" strokeWidth={1.25} />
              </span>
              <span>{label}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PropertyFilterDivider({ onGo }) {
  const listings = window.CARINA_LISTINGS || [];
  const unique = (field) => [...new Set(listings.map(item => item[field]).filter(Boolean))].sort((a, b) => a.localeCompare(b, "pt-BR"));
  const types = unique("type");
  const bairros = unique("bairro");
  const prices = [
    ["300000", "Até " + window.CARINA_FMT(300000)],
    ["500000", "Até " + window.CARINA_FMT(500000)],
    ["750000", "Até " + window.CARINA_FMT(750000)]
  ];
  const selected = new URLSearchParams(window.location.search);

  const submitFilter = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const params = new URLSearchParams();

    ["busca", "tipo", "bairro", "quartos", "preco"].forEach((key) => {
      const value = String(data.get(key) || "").trim();
      if (value) params.set(key, value);
    });

    const query = params.toString();
    const nextUrl = `${window.location.pathname}${query ? "?" + query : ""}#imoveis`;
    window.history.replaceState(null, "", nextUrl);
    window.dispatchEvent(new CustomEvent("carina:filters", { detail: Object.fromEntries(params) }));
    if (onGo) onGo("#imoveis");
  };

  return (
    <div className="cn-filter-divider">
      <div className="cn-filter-wrap">
        <form className="cn-property-filter" onSubmit={submitFilter} role="search" aria-label="Filtro rápido de imóveis">
          <div className="cn-filter-field">
            <label htmlFor="cn-filter-busca">Buscar imóvel</label>
            <input
              id="cn-filter-busca"
              name="busca"
              className="cn-filter-control"
              type="search"
              autoComplete="off"
              spellCheck={false}
              defaultValue={selected.get("busca") || ""}
              placeholder="Ex.: casa no centro…"
            />
          </div>

          <div className="cn-filter-field">
            <label htmlFor="cn-filter-tipo">Tipo</label>
            <select id="cn-filter-tipo" name="tipo" className="cn-filter-control cn-filter-select" autoComplete="off" defaultValue={selected.get("tipo") || ""}>
              <option value="">Todos</option>
              {types.map(type => <option key={type} value={type}>{type}</option>)}
            </select>
          </div>

          <div className="cn-filter-field">
            <label htmlFor="cn-filter-bairro">Bairro</label>
            <select id="cn-filter-bairro" name="bairro" className="cn-filter-control cn-filter-select" autoComplete="off" defaultValue={selected.get("bairro") || ""}>
              <option value="">Todos</option>
              {bairros.map(bairro => <option key={bairro} value={bairro}>{bairro}</option>)}
            </select>
          </div>

          <div className="cn-filter-field">
            <label htmlFor="cn-filter-quartos">Quartos</label>
            <select id="cn-filter-quartos" name="quartos" className="cn-filter-control cn-filter-select" autoComplete="off" defaultValue={selected.get("quartos") || ""}>
              <option value="">Todos</option>
              <option value="1">1+</option>
              <option value="2">2+</option>
              <option value="3">3+</option>
              <option value="4">4+</option>
            </select>
          </div>

          <div className="cn-filter-field">
            <label htmlFor="cn-filter-preco">Preço</label>
            <select id="cn-filter-preco" name="preco" className="cn-filter-control cn-filter-select" autoComplete="off" defaultValue={selected.get("preco") || ""}>
              <option value="">Qualquer</option>
              {prices.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
            </select>
          </div>

          <button className="cn-filter-submit" type="submit">
            <Icon name="sliders-horizontal" size={16} color="var(--accent-ink)" />
            Filtrar
          </button>
        </form>
      </div>
    </div>
  );
}

function Hero({ onPortfolio, onGo }) {
  return (
    <React.Fragment>
      <section style={{ position: "relative", minHeight: "100vh", background: "var(--black)", display: "flex", flexDirection: "column" }}>
        {/* full-bleed video backdrop with branded fallback behind it */}
        <div style={{ position: "absolute", inset: 0 }}><Photo tone={3} watermark={true} corner={false} /></div>
        <video
          aria-hidden="true"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", opacity: 0.74, pointerEvents: "none"
          }}
        >
          <source src="assets/videohero.mov" />
        </video>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to top, rgba(10,9,8,0.96) 0%, rgba(10,9,8,0.30) 46%, rgba(10,9,8,0.66) 100%)"
        }} />

        <div style={{
          position: "relative", flex: 1, maxWidth: 1280, width: "100%", margin: "0 auto",
          padding: "0 40px", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center"
        }}>
          <div className="cn-rise" style={{ maxWidth: 860, textAlign: "center" }}>
            <div className="cn-eyebrow" style={{ marginBottom: 22, display: "flex", alignItems: "center", justifyContent: "center", gap: 12 }}>
              <span style={{ width: 30, height: 1, background: "var(--accent)", display: "inline-block" }}></span>
              Creci 39.689 GO · Foco em Gurupi-TO
            </div>
            <h1 style={{
              fontFamily: "var(--font-serif)", fontWeight: 500, color: "var(--cream)",
              fontSize: "clamp(40px, 6.4vw, 72px)", lineHeight: 1.04, margin: 0, letterSpacing: "0.005em", textWrap: "balance"
            }}>
              Seu próximo imóvel em Gurupi <span style={{ fontStyle: "italic", color: "var(--accent)" }}>começa aqui.</span>
            </h1>
            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 300, color: "var(--ink-200)",
              fontSize: "clamp(17px, 1.6vw, 20px)", lineHeight: 1.76, margin: "28px auto 0", maxWidth: 680, textWrap: "pretty"
            }}>
              Seja para comprar, vender ou investir — a Carina conecta você ao imóvel
              certo, com segurança, agilidade e quem realmente conhece cada bairro da cidade.
            </p>

            <div style={{ display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap", marginTop: 38 }}>
              <PrimaryCTA label="Fale com a Carina agora" href={window.CARINA_WHATS_SITE} />
              <GhostCTA label="Ver imóveis disponíveis" icon="arrow-down" onClick={() => onGo("#imoveis")} style={{ color: "var(--cream)" }} />
            </div>

            <div style={{
              marginTop: 30, display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap",
              fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.5, letterSpacing: "0.04em", color: "var(--ink-300)"
            }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="badge-check" size={15} color="var(--accent)" /> Creci 39.689 GO</span>
              <span style={{ color: "var(--ink-600)" }}>·</span>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="marker" size={15} color="var(--accent)" /> Gurupi-TO</span>
              <span style={{ color: "var(--ink-600)" }}>·</span>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="whatsapp" size={15} color="var(--accent)" /> Atendimento via WhatsApp</span>
            </div>
          </div>
        </div>

        <button className="cn-scroll-cue" onClick={() => onGo("#imoveis")} aria-label="Rolar" style={{
          position: "absolute", bottom: "clamp(112px, 12vh, 150px)", left: "50%", transform: "translateX(-50%)",
          background: "none", border: "none", cursor: "pointer", color: "var(--ink-400)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 8
        }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase" }}>Role</span>
          <span className="cn-scroll-dot" style={{ width: 1, height: 30, background: "linear-gradient(var(--accent), transparent)" }}></span>
        </button>
      </section>

      <PropertyFilterDivider onGo={onGo} />

      {/* SECTION 02 — credibility bar */}
      <section className="cn-light-section" style={{
        position: "relative", overflow: "hidden",
        background: "var(--ivory-50)",
        borderTop: "none", borderBottom: "1px solid var(--border-gold)"
      }}>
        <div style={{
          position: "absolute", inset: "0 auto 0 50%", width: 1,
          background: "linear-gradient(to bottom, transparent, rgba(209,169,90,0.34), transparent)",
          opacity: 0.7
        }} />
        <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "46px 40px" }}>
          <h2 className="cn-sr-only">Diferenciais da Carina Imóveis</h2>
          <div className="cn-cred-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: 16 }}>
            {[
              ["01", "home", "Imóveis em Gurupi", "Casas, apartamentos e terrenos com orientação real para comprar, vender ou investir."],
              ["02", "map-pinned", "Leitura de bairro", "Valorização, acesso, escola, comércio e rotina local antes da sua decisão."],
              ["03", "heart-handshake", "Atendimento personalizado", "Conversa direta, curadoria de opções e acompanhamento até a assinatura."],
              ["04", "calendar-check", "Desde 2016 no mercado", "Experiência prática para transformar sonho em patrimônio com segurança."]
            ].map(([n, ic, t, d]) => (
              <article key={t} className="cn-cred-card" style={{
                position: "relative", minHeight: 210, padding: "28px 26px 30px", overflow: "hidden",
                background: "var(--bg-card)",
                border: "1px solid rgba(209,169,90,0.18)", borderRadius: "var(--r-md)",
                boxShadow: "0 22px 54px -42px rgba(209,169,90,0.55)"
              }}>
                <div style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18,
                  marginBottom: 28
                }}>
                  <div style={{
                    width: 46, height: 46, display: "grid", placeItems: "center",
                    border: "1px solid var(--border-gold-strong)", borderRadius: "var(--r-sm)",
                    background: "rgba(209,169,90,0.07)", boxShadow: "inset 0 0 24px rgba(209,169,90,0.06)"
                  }}>
                    <Icon name={ic} size={23} color="var(--accent)" strokeWidth={1.35} />
                  </div>
                  <span style={{
                    fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: "0.2em",
                    color: "rgba(209,169,90,0.52)"
                  }}>{n}</span>
                </div>
                <h3 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(20px, 1.7vw, 24px)",
                  color: "var(--fg)", lineHeight: 1.12, margin: 0, textWrap: "balance"
                }}>{t}</h3>
                <p style={{
                  fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 15.5,
                  color: "var(--ink-300)", lineHeight: 1.72, margin: "12px 0 0", textWrap: "pretty"
                }}>{d}</p>
                <span style={{
                  position: "absolute", left: 26, right: 26, bottom: 0, height: 1,
                  background: "linear-gradient(90deg, transparent, var(--accent), transparent)",
                  opacity: 0.52
                }} />
              </article>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function CatalogHero({ onGo }) {
  return (
    <React.Fragment>
      <section style={{ position: "relative", minHeight: "72vh", background: "var(--black)", display: "flex", flexDirection: "column" }}>
        <div style={{ position: "absolute", inset: 0 }}><Photo tone={2} watermark={true} corner={false} /></div>
        <video
          aria-hidden="true"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", opacity: 0.52, pointerEvents: "none"
          }}
        >
          <source src="assets/videohero.mov" />
        </video>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to top, rgba(10,9,8,0.98) 0%, rgba(10,9,8,0.42) 48%, rgba(10,9,8,0.74) 100%)"
        }} />

        <div style={{
          position: "relative", flex: 1, maxWidth: 1280, width: "100%", margin: "0 auto",
          padding: "0 40px", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center"
        }}>
          <div className="cn-rise" style={{ maxWidth: 820 }}>
            <div className="cn-eyebrow" style={{ marginBottom: 22, display: "flex", alignItems: "center", justifyContent: "center", gap: 12 }}>
              <span style={{ width: 30, height: 1, background: "var(--accent)", display: "inline-block" }}></span>
              Catálogo · Gurupi-TO
            </div>
            <h1 style={{
              fontFamily: "var(--font-serif)", fontWeight: 500, color: "var(--cream)",
              fontSize: "clamp(40px, 6vw, 68px)", lineHeight: 1.04, margin: 0, letterSpacing: "0.005em", textWrap: "balance"
            }}>
              Imóveis disponíveis em <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Gurupi.</span>
            </h1>
            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 300, color: "var(--ink-200)",
              fontSize: "clamp(17px, 1.5vw, 19px)", lineHeight: 1.76, margin: "24px auto 0", maxWidth: 650, textWrap: "pretty"
            }}>
              Filtre por tipo, bairro, quartos e faixa de valor para encontrar opções cadastradas pela Carina.
            </p>
          </div>
        </div>
      </section>

      <PropertyFilterDivider onGo={onGo} />
    </React.Fragment>
  );
}

Object.assign(window, { Hero, CatalogHero, ModalitiesStrip });