/* global React, Eyebrow, Arr, HomeFooter, waLink */

const { useState } = React;

const GALERIA = [
  { photo: "assets/casas/casa-1-cocina.jpg", caption: "Donde empieza el café de la mañana.", by: "Cocina · Bogotá", product: "Sillas Bar · Zenú" },
  { photo: "assets/casas/casa-2-balcon-urbano.jpg", caption: "El atardecer se ve mejor desde aquí.", by: "Balcón · Bogotá", product: "Mecedoras · Precolombino" },
  { photo: "assets/casas/casa-3-balcon-jardin.jpg", caption: "Un jardín a ocho pisos del suelo.", by: "Balcón · Medellín", product: "Set Completo · Zenú" },
  { photo: "assets/casas/casa-4-terraza.jpg", caption: "Cuando el espacio pide más que una silla.", by: "Terraza · Sabana de Bogotá", product: "Amoblado Completo" },
  { photo: "assets/casas/casa-5-patio.jpg", caption: "Llueve, pero nadie se mueve.", by: "Patio · Bogotá", product: "Set Completo · Fucsia" },
];

function Clientes({ setPage }) {
  const goHome = () => window.__davasRoute?.setPage("home");

  const [lightbox, setLightbox] = useState(null);

  return (
    <>
      {/* LIGHTBOX */}
      {lightbox !== null && (
        <div onClick={() => setLightbox(null)} style={{ position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,.9)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "zoom-out", padding: 20 }}>
          <img src={GALERIA[lightbox].photo} alt={GALERIA[lightbox].caption} style={{ maxWidth: "90vw", maxHeight: "90vh", objectFit: "contain", borderRadius: 8 }} />
          <div style={{ position: "absolute", bottom: 32, left: 0, right: 0, textAlign: "center", color: "#fff", fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: "clamp(18px, 2.5vw, 28px)" }}>{GALERIA[lightbox].caption}</div>
        </div>
      )}

      {/* HERO */}
      <section style={{ padding: "40px var(--gutter, 24px) 0", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-mute, #8A8078)", marginBottom: 24 }}>
          <a onClick={goHome} style={{ cursor: "pointer", color: "inherit", textDecoration: "none" }}>Inicio</a>  ·  Clientes
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px, 4vw, 48px)", alignItems: "end" }}>
          <div>
            <Eyebrow accent="var(--accent)">Clientes · galería</Eyebrow>
            <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: "clamp(36px, 5vw, 72px)", lineHeight: .92, margin: "14px 0 0" }}>
              Así se ven<br />en <em style={{ fontStyle: "italic" }}>tu casa</em>.
            </h1>
          </div>
          <p style={{ fontSize: "clamp(15px, 1.2vw, 17px)", lineHeight: 1.65, color: "var(--ink-soft, #5A544D)", maxWidth: "44ch", margin: 0 }}>
            Fotos reales de clientes DAVA'S. Cada pieza tejida a mano, cada espacio único.
            ¿Quieres que tu casa aparezca acá? Mándanos tu foto por WhatsApp.
          </p>
        </div>
      </section>

      {/* GALERÍA */}
      <section style={{ padding: "clamp(32px, 4vw, 56px) var(--gutter, 24px)", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {GALERIA.map((c, i) => (
            <div key={i} onClick={() => setLightbox(i)} style={{
              position: "relative",
              borderRadius: 16,
              overflow: "hidden",
              aspectRatio: i === 0 || i === 3 ? "4/3" : "3/4",
              gridColumn: i === 3 ? "span 2" : undefined,
              cursor: "zoom-in",
            }}>
              <img src={c.photo} alt={c.caption} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform .7s cubic-bezier(.2,.8,.2,1)" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%)", pointerEvents: "none" }} />
              <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "clamp(16px, 3vw, 28px)", color: "#fff" }}>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontStyle: "italic", fontSize: "clamp(20px, 2.5vw, 32px)", lineHeight: 1.05, marginBottom: 6 }}>
                  {c.caption}
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", opacity: .8 }}>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase" }}>{c.by}</span>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase" }}>{c.product}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: "var(--bone, #F5EDE0)", padding: "clamp(48px, 6vw, 80px) var(--gutter, 24px)", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: "clamp(32px, 4.5vw, 64px)", lineHeight: .95, margin: "0 0 16px" }}>
          ¿Tu pieza ya<br /><em style={{ fontStyle: "italic" }}>llegó</em>?
        </h2>
        <p style={{ maxWidth: 480, margin: "0 auto 28px", color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.65 }}>
          Mándanos la foto de tu pieza DAVA'S en su nuevo hogar. Las mejores aparecen acá.
        </p>
        <div style={{ display: "inline-flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
          <a className="btn wa lg" href={waLink("Hola DAVA'S, quiero enviarles la foto de mi pieza en casa.")} target="_blank" rel="noopener">Enviar mi foto <Arr /></a>
          <button className="btn line" onClick={() => setPage("home")}>← Volver al inicio</button>
        </div>
      </section>

      <HomeFooter setPage={setPage} />
    </>
  );
}

window.Clientes = Clientes;