/* global React, Icon, Reveal, IMG, TEAM, VALUES, WA_LINK */

// Carousel images for "Onde estamos" section
const OFFICE_CAROUSEL = [
  { img: IMG.office, label: "Sala principal · Lounge de atendimento" },
  { img: IMG.interior1, label: "Sala de tour virtual" },
  { img: IMG.interior2, label: "Sala de reunião · 1º andar" },
  { img: IMG.interior3, label: "Recepção · Centro de Ijuí" },
  { img: IMG.interior4, label: "Sala de tour virtual · 4K" },
];

const About = ({ setPage }) => {
  const [slide, setSlide] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setSlide(s => (s + 1) % OFFICE_CAROUSEL.length), 5000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="bn-page about-page">
      {/* Hero */}
      <div className="about-hero">
        <div className="text">
          <span className="eyebrow" style={{ color: "var(--gold)" }}>A Imobiliária · Desde 2001</span>
          <h1>Vinte e três<br/>anos ouvindo<br/><em><i style={{ fontStyle: "italic" }}>a vida</i></em><br/>antes da casa.</h1>
          <p>A Bene Imóveis nasceu em uma sala emprestada no centro de Ijuí. Hoje somos a referência regional em imóveis premium — mas o método continua o mesmo: escutar primeiro, mostrar depois.</p>
        </div>
        <div className="media">
          <img src={IMG.interior4} alt="Sala de estar premium" />
        </div>
      </div>

      {/* Story */}
      <section className="about-story">
        <div className="columns">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>História</span>
            <h2>Uma sala<br/>emprestada.<br/>Uma <em><i style={{ fontStyle: "italic" }}>palavra</i></em><br/>cumprida.</h2>
          </Reveal>          <Reveal delay={0.15} className="body">
            <p>Denise Cereser começou em 2001 com cinco imóveis em uma pasta de couro. A cidade era menor, o mercado era informal, e a única garantia que ela oferecia era a palavra. Funcionou.</p>
            <p>Em duas décadas, a imobiliária cresceu sem perder esse traço: ainda hoje, cada cliente é atendido pessoalmente pela Denise, e cada imóvel passa por uma triagem antes de virar anúncio. A diferença é que agora temos fotografia profissional, vídeos em 4K e uma base de dados que cobre Ijuí e mais 12 cidades da região.</p>
            <p>Nosso compromisso é com decisões boas — para quem vende, para quem compra, para quem investe. Por isso, dizemos "não" quando precisa. E dizemos "espere mais um pouco" quando o imóvel certo ainda não chegou.</p>
          </Reveal>
        </div>
      </section>

      {/* Manifesto / Big quote */}
      <section style={{ background: "var(--bg-soft)", padding: "clamp(80px, 12vh, 140px) clamp(20px, 5vw, 80px)" }}>
        <div style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 32, display: "inline-block" }}>Manifesto</span>
            <p className="display" style={{ fontSize: "clamp(32px, 4.5vw, 64px)", lineHeight: 1.15, letterSpacing: "-0.01em", marginTop: 16 }}>
              "A casa certa não se vende, se <em style={{ color: "var(--gold-deep)", fontStyle: "italic" }}>reconhece</em>. O nosso trabalho é estar lá no momento em que ela aparece — e ter feito o dever de casa antes."
            </p>
            <div style={{ marginTop: 36, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.6 }}>
              Denise Cereser · Sócia‑proprietária
            </div>
          </Reveal>
        </div>
      </section>

      {/* Values */}
      <section className="section">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Valores</span>
            <h2 className="section-title">Três coisas<br/>que <em><i style={{ fontStyle: "italic" }}>não negociamos</i></em></h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead">
              São os pilares que sustentam toda relação que firmamos — seja para um aluguel de R$ 2 mil ou uma venda de R$ 8 milhões.
            </p>
          </Reveal>
        </div>
        <div className="values-grid">
          {VALUES.map((v, i) => (
            <Reveal key={v.title} delay={i * 0.1} className="value">
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Office editorial with CAROUSEL */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="editorial">
          <Reveal delay={0.1} className="editorial-body">
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Onde estamos</span>
            <h2>No coração<br/>de <em><i style={{ fontStyle: "italic" }}>Ijuí</i></em>.</h2>
            <p>Nossa sede fica na Rua Bento Gonçalves, 371 — um sobrado restaurado no Centro, com café fresco, lounge para reuniões e uma sala de tour virtual onde você pode visitar imóveis sem sair daqui.</p>
            <p>Atendemos toda a região noroeste do RS: Ijuí, Augusto Pestana, Catuípe, Ajuricaba, Coronel Barros, Bozano, Joia, Panambi, Cruz Alta, Santo Ângelo e Três Passos.</p>
            <ul className="editorial-list">
              <li><span>Endereço</span><span>Rua Bento Gonçalves, 371</span></li>
              <li><span>Cidades atendidas</span><span>13</span></li>
              <li><span>Equipe</span><span>14 profissionais</span></li>
              <li><span>CRECI</span><span>RS 47.107</span></li>
            </ul>
          </Reveal>
          <Reveal className="carousel" as="div">
            <div className="carousel-dots">
              {OFFICE_CAROUSEL.map((_, i) => (
                <span key={i} className={`d ${i === slide ? "active" : ""}`} onClick={() => setSlide(i)}></span>
              ))}
            </div>
            <div className="carousel-track" style={{ transform: `translateX(-${slide * 100}%)`, aspectRatio: "4/5" }}>
              {OFFICE_CAROUSEL.map((s, i) => (
                <div className="carousel-slide" key={i} style={{ aspectRatio: "4/5" }}>
                  <img src={s.img} alt={s.label} style={{ aspectRatio: "4/5", height: "100%" }} />
                  <div className="caption">
                    <small>{String(i + 1).padStart(2, "0")} / {String(OFFICE_CAROUSEL.length).padStart(2, "0")}</small>
                    {s.label}
                  </div>
                </div>
              ))}
            </div>
            <div className="carousel-nav">
              <button onClick={() => setSlide(s => (s - 1 + OFFICE_CAROUSEL.length) % OFFICE_CAROUSEL.length)}>‹</button>
              <button onClick={() => setSlide(s => (s + 1) % OFFICE_CAROUSEL.length)}>›</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Team — Denise Cereser */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--bg)" }}>
        <div className="section-head wide-title">
          <Reveal>
            <span className="eyebrow" style={{ color: "var(--gold)", marginBottom: 16, display: "inline-block" }}>Quem atende você</span>
            <h2 className="section-title" style={{ color: "var(--bg)" }}>Uma pessoa.<br/>Uma <em style={{ color: "var(--gold)" }}><i style={{ fontStyle: "italic" }}>palavra</i></em><br/>cumprida.</h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead" style={{ color: "rgba(255,255,255,0.7)" }}>
              Sem call centers, sem bots, sem terceirização. Na Bene Imóveis, quem responde o WhatsApp é a mesma pessoa que pisa no imóvel — do primeiro contato até a entrega das chaves.
            </p>
          </Reveal>
        </div>

        <div className="solo-team">
          <Reveal className="photo-wrap">
            <img src="assets/denise.png" alt="Denise Cereser" />
            <div className="stamp">CRECI/RS 47.107 · Sócia‑proprietária</div>
          </Reveal>

          <Reveal delay={0.15} className="body" as="div">
            <div className="name">
              Denise <em><i style={{ fontStyle: "italic" }}>Cereser</i></em>.
            </div>
            <div className="role-line">
              <span className="role">Sócia‑proprietária</span>
              <span className="dot"></span>
              <span className="role">Corretora</span>
              <span className="dot"></span>
              <span className="creci">CRECI/RS 47.107</span>
            </div>

            <p className="bio">
              Há mais de duas décadas, Denise Cereser construiu a Bene Imóveis sobre uma premissa simples: cada cliente merece ser ouvido antes de ver qualquer imóvel.
            </p>
            <p className="bio">
              É ela quem visita pessoalmente cada propriedade do portfólio, conhece as histórias por trás de cada venda, e acompanha cada negociação do começo ao fim. Sem intermediários, sem promessas vazias — uma relação direta, técnica e humana ao mesmo tempo.
            </p>

            <div className="signature">— atendimento pessoal</div>
            <div className="signature-sub">Mais de 2.400 famílias atendidas em Ijuí e região</div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <a className="btn btn-gold" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="wa" size={14} /> Falar com a Denise
              </a>
              <button className="btn btn-ghost" style={{ borderColor: "rgba(255,255,255,0.3)" }} onClick={() => { setPage && setPage("contact"); window.scrollTo(0, 0); }}>
                Agendar atendimento <Icon name="arrow" />
              </button>
            </div>

            <div className="quick-contact">
              <div>
                <div className="lbl">WhatsApp</div>
                <div className="val">(55) 3333‑2222</div>
              </div>
              <div>
                <div className="lbl">E‑mail</div>
                <div className="val" style={{ fontSize: 14 }}>denise@imoveisbene.com.br</div>
              </div>
              <div>
                <div className="lbl">Atendimento</div>
                <div className="val">Seg–Sex · 9h‑18h</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Region */}
      <section className="section">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Território</span>
            <h2 className="section-title">Ijuí<br/>e <em><i style={{ fontStyle: "italic" }}>o noroeste</i></em>.</h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="section-lead">
              "Capital do Trabalho" no coração do Rio Grande do Sul. Uma cidade universitária, agroindustrial e cosmopolita — onde a qualidade de vida é o ativo mais valorizado.
            </p>
          </Reveal>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {[
            { num: "84.5k", lbl: "Habitantes em Ijuí" },
            { num: "13", lbl: "Cidades atendidas" },
            { num: "1890", lbl: "Ano de fundação" },
            { num: "+12%", lbl: "Valorização média 5 anos" },
          ].map((s, i) => (
            <Reveal key={s.lbl} delay={i * 0.08}>
              <div className="display" style={{ fontSize: 64, lineHeight: 1, marginBottom: 8, color: "var(--navy)" }}>{s.num}</div>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.6 }}>{s.lbl}</div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
};

window.About = About;