/* global React, Reveal, Icon, IMG, FEATURED, LIFESTYLE_CATEGORIES, WA_LINK */
const { useState, useEffect, useRef: useRefHome } = React;

const HERO_SLIDES = [
  { img: IMG.heroMain, label: "Residência contemporânea · Bairro Jardim, Ijuí" },
  { img: IMG.prop2, label: "Cobertura duplex · Centro, Ijuí" },
  { img: IMG.prop1, label: "Casa em condomínio · Vale Verde" },
  { img: IMG.prop6, label: "Sítio com lago · Augusto Pestana" },
  { img: IMG.prop8, label: "Penthouse vista cidade · Edifício Atrium" },
];

const Home = ({ setPage }) => {
  const heroRef = useRefHome(null);
  const [scrollY, setScrollY] = useState(0);
  const [slide, setSlide] = useState(0);

  useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Auto-cycle hero
  useEffect(() => {
    const id = setInterval(() => setSlide(s => (s + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(id);
  }, []);

  const go = (id) => () => { setPage(id); window.scrollTo({ top: 0, behavior: "smooth" }); };

  return (
    <div className="bn-page">
      {/* ============ HERO CAROUSEL ============ */}
      <section className="hero" ref={heroRef}>
        <div className="hero-media">
          {HERO_SLIDES.map((s, i) => (
            <div key={i} className={`hero-slide ${i === slide ? "active" : ""}`}>
              <img src={s.img} alt={s.label} />
            </div>
          ))}
        </div>

        <div className="hero-meta">
          <span>IJUÍ · RIO GRANDE DO SUL</span>
          <span className="dot"></span>
          <span>DESDE 2001</span>
          <span className="dot"></span>
          <span>CRECI/RS 47.107</span>
        </div>

        <div className="hero-content">
          <h1 className="display hero-title" style={{ transform: `translateY(${-scrollY * 0.12}px)`, opacity: 1 - scrollY / 800 }}>
            Onde morar<br/>
            é <em><i style={{ fontFamily: "var(--f-display)", fontStyle: "italic" }}>encontrar-se</i></em><br/>
            em casa.
          </h1>
          <div className="hero-bottom">
            <p className="hero-tag">
              Imóveis selecionados com curadoria humana, em Ijuí e interior do Rio Grande do Sul. Para quem busca um lar, e para quem investe em patrimônio.
            </p>
            <div className="hero-scroll">
              <span>Role para descobrir</span>
              <span className="line"></span>
            </div>
          </div>
        </div>

        {/* Slide indicator */}
        <div className="hero-indicators">
          {HERO_SLIDES.map((_, i) => (
            <span key={i} className={`ind ${i === slide ? "active" : ""}`} onClick={() => setSlide(i)}></span>
          ))}
        </div>

        {/* Floating Interactive Search Bar */}
        <HeroSearch onSubmit={go("listings")} />
      </section>

      <div style={{ height: 36 }}></div>

      {/* ============ STATS ============ */}
      <div className="stats-strip">
        <Reveal className="stat">
          <div className="num"><em>23</em> anos</div>
          <div className="lbl">de história em Ijuí e região</div>
        </Reveal>
        <Reveal className="stat" delay={0.1}>
          <div className="num"><em>2.400+</em></div>
          <div className="lbl">famílias atendidas</div>
        </Reveal>
        <Reveal className="stat" delay={0.2}>
          <div className="num"><em>R$ 480M</em></div>
          <div className="lbl">em patrimônio intermediado</div>
        </Reveal>
        <Reveal className="stat" delay={0.3}>
          <div className="num"><em>96%</em></div>
          <div className="lbl">de clientes que indicam</div>
        </Reveal>
      </div>

      {/* ============ FEATURED LISTINGS ============ */}
      <section className="section">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Seleção Bene</span>
            <h2 className="section-title">Imóveis em<br/><em><i style={{ fontStyle: "italic" }}>destaque</i></em></h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead">
              Uma curadoria mensal dos imóveis mais especiais do nosso portfólio — residências, lançamentos e oportunidades de investimento que mereciam ser vistas primeiro.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
              <button className="btn btn-primary" onClick={go("listings")}>Ver portfólio completo <Icon name="arrow" /></button>
            </div>
          </Reveal>
        </div>

        <div className="feat-grid">
          {[
            { ...FEATURED[0], span: 7 },
            { ...FEATURED[1], span: 5 },
            { ...FEATURED[2], span: 4 },
            { ...FEATURED[5], span: 4 },
            { ...FEATURED[3], span: 4 },
          ].map((p, i) => (
            <Reveal key={p.id} delay={i * 0.08} className={`feat-card span-${p.span}`} as="article">
              <div onClick={go("detail")} style={{ cursor: "pointer" }}>
                <div className="feat-img">
                  <img src={p.img} alt={p.title} />
                  {p.badge && <span className={`feat-tag ${p.badge === "EXCLUSIVO" ? "gold" : p.badge === "LANÇAMENTO" ? "navy" : ""}`}>{p.badge}</span>}
                </div>
                <div className="feat-info">
                  <div className="loc">{p.loc} · {p.type}</div>
                  <div className="ttl">{p.title}</div>
                  <div className="meta">
                    {p.quartos > 0 && <span>{p.quartos} dorm</span>}
                    {p.suites > 0 && <span>{p.suites} suítes</span>}
                    <span>{p.area} m²</span>
                    {p.vagas > 0 && <span>{p.vagas} vagas</span>}
                  </div>
                  <div className="price">{p.price}<small>{p.id}</small></div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ MARQUEE ============ */}
      <div className="marquee">
        <div className="marquee-track">
          {Array(2).fill(0).map((_, k) => (
            <div className="marquee-item" key={k}>
              <span>Curadoria</span>
              <span><em>humanizada</em></span>
              <span>Avaliações técnicas</span>
              <span><em>locação</em></span>
              <span>Investimento</span>
              <span><em>lançamentos</em></span>
              <span>Comercial</span>
              <span><em>residencial</em></span>
            </div>
          ))}
        </div>
      </div>

      {/* ============ EDITORIAL: ABOUT TEASER ============ */}
      <section className="section">
        <div className="editorial">
          <Reveal className="editorial-media">
            <img src={IMG.interior1} alt="Interior premium" />
            <div className="badge">
              <small>Desde 2001</small>
              23 anos<br/>em Ijuí
            </div>
          </Reveal>
          <Reveal delay={0.15} className="editorial-body">
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>A Imobiliária</span>
            <h2>Premium não é<br/>preço. É <em><i style={{ fontStyle: "italic" }}>cuidado</i></em>.</h2>
            <p>
              Acreditamos que a casa certa não se acha — se reconhece. Por isso ouvimos antes de mostrar. Estudamos o bairro, a planta, o vizinho, a luz da manhã.
            </p>
            <p>
              Em duas décadas, formamos uma rede de corretores, arquitetos e investidores que confiam na Bene Imóveis para decisões que vão muito além da metragem.
            </p>
            <ul className="editorial-list">
              <li><span>Imóveis vendidos / ano</span><span>180+</span></li>
              <li><span>Contratos de locação ativos</span><span>340</span></li>
              <li><span>Tempo médio de venda</span><span>47 dias</span></li>
              <li><span>Atuação geográfica</span><span>Ijuí + 12 cidades</span></li>
            </ul>
            <div style={{ marginTop: 36 }}>
              <button className="btn-arrow" onClick={go("about")}>Conheça nossa história <span className="arr">→</span></button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ============ LIFESTYLE TILES ============ */}
      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Por estilo de vida</span>
            <h2 className="section-title">O que você<br/>busca <em><i style={{ fontStyle: "italic" }}>de verdade</i></em>?</h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead">
              Em vez de filtrar por metragem, comece pelo que importa. Quatro caminhos para encontrar o imóvel certo na sua vida.
            </p>
          </Reveal>
        </div>
        <div className="lifestyle">
          {LIFESTYLE_CATEGORIES.map((c, i) => (
            <Reveal key={c.num} delay={i * 0.08} className="life-tile" as="article">
              <div onClick={go("listings")}>
                <img src={c.img} alt={c.title} />
                <div className="info">
                  <h3>{c.title}</h3>
                  <p>{c.desc}</p>
                  <div className="cta-row">
                    <span>Ver imóveis</span>
                    <span className="arr">→</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ PROCESS ============ */}
      <section className="section" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{
          position: "absolute",
          top: "10%", left: "-5%",
          transform: `translateX(${-scrollY * 0.05}px)`,
          pointerEvents: "none"
        }}>
          <div className="parallax-text">premium · humano · técnico ·</div>
        </div>

        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Como atendemos</span>
            <h2 className="section-title">Quatro passos.<br/>Zero <em><i style={{ fontStyle: "italic" }}>pressa</i></em>.</h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead">
              Nosso processo é desenhado para que você decida com clareza — seja para morar, alugar ou investir.
            </p>
          </Reveal>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {[
            { t: "Escuta", d: "Conversa inicial sem compromisso para entender estilo de vida, prazos e objetivo patrimonial." },
            { t: "Curadoria", d: "Seleção criteriosa de imóveis que atendem aos critérios — não inundamos com listas infinitas." },
            { t: "Visita", d: "Acompanhamento presencial ou tour por vídeo, com análise técnica de cada imóvel." },
            { t: "Decisão", d: "Negociação, documentação e assessoria pós-venda. Continuamos ao seu lado depois das chaves." },
          ].map((step, i) => (
            <Reveal key={step.t} delay={i * 0.1} className="value" as="div">
              <h3>{step.t}</h3>
              <p>{step.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ CTA BLOCK ============ */}
      <section className="cta-block">
        <Reveal>
          <h2>Tem um imóvel<br/>para vender ou<br/><em><i style={{ fontStyle: "italic" }}>locar</i></em>?</h2>
        </Reveal>
        <Reveal delay={0.15} className="cta-side">
          <p>
            Cadastre seu imóvel com a Bene e tenha avaliação técnica, fotografia profissional, vídeo e divulgação direcionada para o público certo.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-gold" href={WA_LINK} target="_blank" rel="noopener">
              <Icon name="wa" size={14} /> Cadastrar pelo WhatsApp
            </a>
            <button className="btn btn-ghost" onClick={go("contact")}>Falar por formulário <Icon name="arrow" /></button>
          </div>
        </Reveal>
      </section>
    </div>
  );
};

window.Home = Home;

// =====================================================
// Interactive Hero Search
// =====================================================
const SEARCH_OPTS = {
  op: [
    { val: "Comprar", sub: "Venda" },
    { val: "Alugar", sub: "Locação" },
    { val: "Lançamentos", sub: "Empreendimentos" },
  ],
  type: [
    { val: "Todos os tipos", sub: "" },
    { val: "Casas", sub: "" },
    { val: "Apartamentos", sub: "" },
    { val: "Coberturas", sub: "" },
    { val: "Sobrados", sub: "" },
    { val: "Comercial", sub: "" },
    { val: "Terrenos", sub: "" },
    { val: "Rural / Sítios", sub: "" },
  ],
  loc: [
    { val: "Ijuí · Todos os bairros", sub: "" },
    { val: "Bairro Jardim", sub: "Ijuí" },
    { val: "Centro", sub: "Ijuí" },
    { val: "Vale Verde", sub: "Ijuí" },
    { val: "Augusto Pestana", sub: "Interior" },
    { val: "Catuípe", sub: "Interior" },
    { val: "Panambi", sub: "Interior" },
    { val: "Cruz Alta", sub: "Região" },
  ],
  price: [
    { val: "Até R$ 500.000", sub: "Até 500k" },
    { val: "R$ 500k — R$ 1M", sub: "" },
    { val: "R$ 1M — R$ 2,5M", sub: "" },
    { val: "R$ 2,5M — R$ 5M", sub: "" },
    { val: "Acima de R$ 5M", sub: "Alto padrão" },
  ],
};

const HeroSearch = ({ onSubmit }) => {
  const [open, setOpen] = React.useState(null);
  const [vals, setVals] = React.useState({
    op: "Comprar",
    type: "Casas, apartamentos…",
    loc: "Ijuí e região",
    price: "Até R$ 2.500.000",
  });
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(null); };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const choose = (key, value) => {
    setVals(v => ({ ...v, [key]: value }));
    setOpen(null);
  };

  const Cell = ({ k, label }) => (
    <div className={`hero-search-cell ${open === k ? "open" : ""}`} onClick={(e) => { e.stopPropagation(); setOpen(open === k ? null : k); }}>
      <div className="lbl">{label}</div>
      <div className="val">
        <span className="v-text">{vals[k]}</span>
        <Icon name="chev" size={11} />
      </div>
      {open === k && (
        <div className="dropdown" onClick={(e) => e.stopPropagation()}>
          {SEARCH_OPTS[k].map((o) => (
            <div key={o.val}
                 className={`opt ${vals[k] === o.val ? "selected" : ""}`}
                 onClick={() => choose(k, o.val)}>
              <span>{o.val}</span>
              {o.sub && <small>{o.sub}</small>}
            </div>
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="hero-search" ref={ref}>
      <Cell k="op" label="Operação" />
      <Cell k="type" label="Tipo de imóvel" />
      <Cell k="loc" label="Localização" />
      <Cell k="price" label="Faixa de preço" />
      <button className="hero-search-go" onClick={onSubmit}>
        <Icon name="search" size={14} />
        BUSCAR
      </button>
    </div>
  );
};

window.HeroSearch = HeroSearch;