/* global React, Icon, Reveal, IMG, FEATURED, WA_LINK */

const Detail = ({ setPage }) => {
  const p = FEATURED[0];
  const gallery = [IMG.prop1, IMG.interior1, IMG.interior2, IMG.interior3, IMG.interior4];
  return (
    <div className="bn-page detail-page">
      <div style={{ padding: "20px clamp(20px, 5vw, 80px)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.55 }}>
        <span style={{ cursor: "pointer" }} onClick={() => { setPage("home"); window.scrollTo(0,0); }}>Início</span>
        <span style={{ margin: "0 12px" }}>/</span>
        <span style={{ cursor: "pointer" }} onClick={() => { setPage("listings"); window.scrollTo(0,0); }}>Imóveis</span>
        <span style={{ margin: "0 12px" }}>/</span>
        <span style={{ color: "var(--gold-deep)" }}>{p.id}</span>
      </div>

      {/* Gallery mosaic */}
      <div className="detail-gallery">
        <div className="g g0"><img src={gallery[0]} alt="" /></div>
        <div className="g"><img src={gallery[1]} alt="" /></div>
        <div className="g"><img src={gallery[2]} alt="" /></div>
        <div className="g video-thumb"><img src={gallery[3]} alt="" /></div>
        <div className="g" style={{ position: "relative" }}>
          <img src={gallery[4]} alt="" />
          <button className="more-btn"><Icon name="camera" size={12} /> Ver todas as {p.fotos} fotos</button>
        </div>
      </div>

      {/* Head */}
      <div className="detail-head">
        <div>
          <div className="loc">{p.loc} · REF {p.id}</div>
          <h1>Residência<br/>contemporânea<br/>com <em><i style={{ fontStyle: "italic" }}>pomar privativo</i></em></h1>
          <div className="quick">
            <span><Icon name="bed" size={14} /> {p.quartos} dormitórios</span>
            <span><Icon name="bath" size={14} /> {p.suites} suítes</span>
            <span><Icon name="area" size={14} /> {p.area} m²</span>
            <span><Icon name="car" size={14} /> {p.vagas} vagas</span>
          </div>
        </div>
        <div className="price-block">
          <div className="price">{p.price}</div>
          <small>Aceita financiamento · IPTU R$ 4.200/ano</small>
          <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
            <button className="btn btn-ghost" style={{ padding: "10px 16px" }}><Icon name="heart" size={12} /> Salvar</button>
            <button className="btn btn-ghost" style={{ padding: "10px 16px" }}><Icon name="share" size={12} /> Compartilhar</button>
          </div>
        </div>
      </div>

      {/* Body */}
      <div className="detail-body">
        <div>
          {/* Video Tour */}
          <div className="detail-section">
            <h3>Tour em vídeo</h3>
            <VideoTour />
          </div>

          {/* Description */}
          <div className="detail-section">
            <h3>Sobre o imóvel</h3>
            <p>{p.desc}</p>
            <p>O lote de 720 m² abriga um pomar com mangueiras nativas, área gourmet integrada à piscina aquecida e estúdio independente — ideal para home office ou hóspedes. A construção, finalizada em 2021, segue padrões de eficiência energética e isolamento acústico.</p>
            <p>Localização privilegiada no Bairro Jardim: a 5 minutos do centro de Ijuí, próximo às melhores escolas e ao Parque da Maturidade. Rua arborizada, baixo fluxo, vizinhança consolidada.</p>
          </div>

          {/* Specs */}
          <div className="detail-section">
            <h3>Ficha técnica</h3>
            <div className="spec-grid">
              <div className="spec"><div className="lbl">Área construída</div><div className="val">380 m²</div></div>
              <div className="spec"><div className="lbl">Área do terreno</div><div className="val">720 m²</div></div>
              <div className="spec"><div className="lbl">Ano de construção</div><div className="val">2021</div></div>
              <div className="spec"><div className="lbl">Dormitórios</div><div className="val">4 (3 suítes)</div></div>
              <div className="spec"><div className="lbl">Banheiros</div><div className="val">5</div></div>
              <div className="spec"><div className="lbl">Vagas garagem</div><div className="val">4 cobertas</div></div>
              <div className="spec"><div className="lbl">Orientação</div><div className="val">Norte</div></div>
              <div className="spec"><div className="lbl">IPTU anual</div><div className="val">R$ 4.200</div></div>
              <div className="spec"><div className="lbl">Mat. construtivo</div><div className="val">Alvenaria + estrutura metálica</div></div>
            </div>
          </div>

          {/* Amenities */}
          <div className="detail-section">
            <h3>Diferenciais e comodidades</h3>
            <div className="amenities">
              {[
                "Piscina aquecida", "Área gourmet integrada", "Pomar privativo",
                "Estúdio independente", "Sistema de automação", "Painéis solares",
                "Aquecimento solar", "Cisterna 5.000L", "Isolamento acústico",
                "Pé-direito duplo", "Lareira a gás", "Cozinha gourmet",
                "Closet suíte master", "Pet-friendly", "Cerca elétrica",
              ].map(a => (
                <div className="amenity" key={a}><span className="dot"></span> {a}</div>
              ))}
            </div>
          </div>

          {/* Location */}
          <div className="detail-section">
            <h3>Localização</h3>
            <div style={{ aspectRatio: "16/9", background: "linear-gradient(135deg, #1F2D44, #2A4159)", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, opacity: 0.35,
                backgroundImage: "linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)",
                backgroundSize: "32px 32px" }}></div>
              <div className="map-pin gold" style={{ top: "50%", left: "50%" }}>{p.loc.split(",")[0]}</div>
              <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 100 56" preserveAspectRatio="none">
                <path d="M 0,30 L 30,28 L 50,32 L 75,28 L 100,30" stroke="rgba(255,255,255,0.25)" strokeWidth="0.4" fill="none"/>
                <path d="M 50,0 L 48,28 L 52,32 L 48,56" stroke="rgba(255,255,255,0.2)" strokeWidth="0.3" fill="none"/>
              </svg>
              <div className="map-overlay">Bairro Jardim, Ijuí — RS</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 24 }}>
              {[
                { lbl: "Escolas próximas", val: "Colégio Evangélico · 0,8 km" },
                { lbl: "Centro de Ijuí", val: "5 min de carro" },
                { lbl: "Hospital", val: "Hospital de Caridade · 1,2 km" },
                { lbl: "Parque", val: "Parque da Maturidade · 600 m" },
              ].map(item => (
                <div key={item.lbl} className="spec" style={{ borderTop: "1px solid var(--line-soft)" }}>
                  <div className="lbl">{item.lbl}</div>
                  <div className="val" style={{ fontSize: 16 }}>{item.val}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Sticky contact */}
        <div>
          <div className="contact-card">
            <div className="agent">
              <div className="avatar">DC</div>
              <div>
                <div className="name">Denise Cereser</div>
                <div className="role">Sócia‑proprietária</div>
              </div>
            </div>
            <h4>Quer conhecer este imóvel?</h4>
            <p style={{ fontSize: 12, opacity: 0.65, marginBottom: 20 }}>Resposta em até 30 minutos, em horário comercial.</p>

            <div className="field">
              <label>Seu nome</label>
              <input type="text" defaultValue="" placeholder="Como devemos te chamar?" />
            </div>
            <div className="field">
              <label>WhatsApp</label>
              <input type="text" placeholder="(55) 9 9999‑9999" />
            </div>
            <div className="field">
              <label>Mensagem</label>
              <textarea defaultValue="Olá! Gostaria de agendar uma visita ao imóvel BN‑1842."></textarea>
            </div>

            <div className="actions">
              <a className="wa-btn" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="wa" size={14} /> Falar pelo WhatsApp
              </a>
              <button className="btn btn-primary" style={{ justifyContent: "center" }}>Enviar mensagem</button>
            </div>

            <div style={{ marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--line-soft)", display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, opacity: 0.75 }}><Icon name="phone" size={12} /> (55) 3333‑2222</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, opacity: 0.75 }}><Icon name="mail" size={12} /> denise@imoveisbene.com.br</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, opacity: 0.75 }}><Icon name="clock" size={12} /> Seg-Sex 9-18 · Sáb 9-12</div>
            </div>
          </div>
        </div>
      </div>

      {/* Similar */}
      <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="section-head">
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 16, display: "inline-block" }}>Sugestões</span>
            <h2 className="section-title">Imóveis<br/><em><i style={{ fontStyle: "italic" }}>parecidos</i></em></h2>
          </Reveal>
        </div>
        <div className="feat-grid">
          {FEATURED.slice(1, 4).map((p, i) => (
            <Reveal key={p.id} delay={i * 0.08} className="feat-card span-4" as="article">
              <div onClick={() => { window.scrollTo(0, 0); }} 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>}
                    <span>{p.area} m²</span>
                  </div>
                  <div className="price">{p.price}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
};

// =====================================================
// Video Tour with aspect ratio toggle (16:9 + 9:16)
// =====================================================
const VideoTour = () => {
  const [ar, setAr] = React.useState("16-9");
  const isVertical = ar === "9-16";

  return (
    <>
      <div className="video-toggle">
        <button className={ar === "16-9" ? "active" : ""} onClick={() => setAr("16-9")}>
          ▭ Horizontal 16:9
        </button>
        <button className={ar === "9-16" ? "active" : ""} onClick={() => setAr("9-16")}>
          ▯ Vertical 9:16
        </button>
      </div>
      <div className={`video-player ar-${ar}`}>
        <img src={isVertical ? IMG.interior4 : IMG.interior2} alt="Tour da residência" style={isVertical ? { objectPosition: "center" } : {}} />
        <div className="video-play">
          <div className="circle">▶</div>
        </div>
        <div className="pip-label"><span className="ind"></span> {isVertical ? "Reels · vertical" : "Tour · 4K"}</div>
        <div className="pip-duration">{isVertical ? "00:58" : "02:48"}</div>
      </div>
      <p style={{ marginTop: 14, fontSize: 13, opacity: 0.7 }}>
        Aceitamos vídeos em ambos os formatos. {isVertical ? "Vertical (9:16) ideal para Reels e Stories — perfeito para visualizações rápidas." : "Horizontal (16:9) para tours completos com narração do corretor."} Gravado em {new Date().toLocaleDateString("pt-BR", { month: "long", year: "numeric" })}.
      </p>
    </>
  );
};

window.Detail = Detail;