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

function Showroom({ setPage }) {
  const goHome = () => window.__davasRoute?.setPage("home");
  const msg = "Hola DAVA'S, quiero agendar una visita al showroom de Bogotá.";

  return (
    <>
      {/* ════ HERO ════ */}
      <section style={{ position: "relative", height: "85vh", minHeight: 500, overflow: "hidden" }}>
        <img src="assets/casas/showroom-bogota.jpg" alt="Showroom DAVA'S" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(26,23,20,.1) 0%, rgba(26,23,20,.75) 100%)" }} />
        <div style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: "clamp(28px, 5vw, 60px) var(--gutter, 24px)", maxWidth: 650, color: "var(--bone, #F5EDE0)" }}>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", opacity: .7, marginBottom: 20 }}>
            <a onClick={goHome} style={{ cursor: "pointer", color: "inherit", textDecoration: "none" }}>Inicio</a>  ·  Showroom
          </div>
          <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: "clamp(48px, 8vw, 96px)", lineHeight: .88, margin: "0 0 16px" }}>
            Ven a<br /><em style={{ fontStyle: "italic" }}>sentarte</em>.
          </h1>
          <p style={{ fontSize: "clamp(16px, 1.5vw, 20px)", lineHeight: 1.5, opacity: .85, margin: "0 0 20px" }}>
            Las piezas se ven distinto cuando te sientas en ellas. Visitas con cita previa.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 12, background: "rgba(255,255,255,.12)", backdropFilter: "blur(10px)", borderRadius: 12, padding: "14px 18px", maxWidth: "fit-content", marginBottom: 20 }}>
            <span style={{ fontSize: 20 }}>📍</span>
            <div>
              <strong style={{ fontSize: 14 }}>Cra 21 #49-13 · Bogotá</strong><br />
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", opacity: .7 }}>Lunes a sábado · con cita previa</span>
            </div>
          </div>
          <a className="btn wa lg" href={waLink(msg)} target="_blank" rel="noopener">Agendar visita <Arr /></a>
        </div>
      </section>

      {/* ════ NARRATIVA: DEL TALLER A TU CASA ════ */}
      <section style={{ padding: "clamp(48px, 6vw, 80px) var(--gutter, 24px)", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "clamp(28px, 4vw, 56px)", alignItems: "center" }}>
          <div style={{ flex: "1 1 300px", borderRadius: 16, overflow: "hidden", aspectRatio: "1/1", minWidth: 280 }}>
            <img src="assets/casas/taller-tejido-detalle.jpg" alt="Detalle del tejido a mano" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div style={{ flex: "1 1 280px" }}>
            <Eyebrow>Lo que hay detrás</Eyebrow>
            <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: .95, margin: "10px 0 18px" }}>
              Siempre<br /><em style={{ fontStyle: "italic" }}>mejorando</em>.
            </h2>
            <p style={{ fontSize: "clamp(15px, 1.2vw, 17px)", lineHeight: 1.7, color: "var(--ink-soft, #5A544D)", maxWidth: "44ch", margin: "0 0 10px" }}>
              En nuestro showroom estamos siempre puliendo detalles, agregando inventario nuevo y mejorando cada pieza. No es una tienda — es el lugar donde el taller muestra su mejor trabajo.
            </p>
            <p style={{ fontSize: "clamp(15px, 1.2vw, 17px)", lineHeight: 1.7, color: "var(--ink-soft, #5A544D)", maxWidth: "44ch", margin: "0 0 16px" }}>
              Cada semana salen piezas nuevas a más ciudades del país. Lo que ves hoy puede no estar mañana — porque alguien ya se la llevó.
            </p>
            <a className="btn line" onClick={() => setPage("taller")} style={{ cursor: "pointer" }}>Conocer el taller <Arr /></a>
          </div>
        </div>

        {/* Strip de 3 fotos */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: "clamp(32px, 4vw, 56px)" }}>
          {[
            { src: "assets/casas/taller-ensamblaje.jpg", alt: "Ensamblaje", label: "Estructura" },
            { src: "assets/casas/taller-entrega.jpg", alt: "Despacho", label: "Empaque y entrega" },
            { src: "assets/casas/taller-carga-camioneta.jpg", alt: "Carga", label: "Envío nacional" },
          ].map((p, i) => (
            <div key={i} style={{ position: "relative", borderRadius: 14, overflow: "hidden", aspectRatio: "4/3", flex: "1 1 200px", minWidth: 200 }}>
              <img src={p.src} alt={p.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <span style={{ position: "absolute", bottom: 12, left: 14, fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.85)", textShadow: "0 1px 6px rgba(0,0,0,.5)" }}>{p.label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ════ CINEMATIC BREAK ════ */}
      <section style={{ position: "relative", height: "clamp(280px, 45vw, 480px)", overflow: "hidden" }}>
        <img src="assets/casas/taller-carga-color.jpg" alt="Mecedoras camino a su nuevo hogar" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(26,23,20,.6) 0%, transparent 60%)" }} />
        <div style={{ position: "absolute", bottom: "clamp(20px, 4vw, 40px)", left: "var(--gutter, 24px)", fontFamily: "var(--f-display)", fontWeight: 300, fontStyle: "italic", fontSize: "clamp(28px, 4vw, 56px)", color: "#fff", textShadow: "0 2px 20px rgba(0,0,0,.4)", lineHeight: .95 }}>
          Del taller a tu casa.
        </div>
      </section>

      {/* ════ CONTACTO ════ */}
      <section style={{ background: "var(--verde-deep, #2B3A1A)", color: "var(--bone, #F5EDE0)", padding: "clamp(48px, 6vw, 80px) var(--gutter, 24px)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", flexWrap: "wrap", gap: "clamp(24px, 3vw, 48px)" }}>
          <div style={{ flex: "1 1 200px", minWidth: 180 }}>
            <Eyebrow onDark accent="var(--mostaza)">Contacto</Eyebrow>
            <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontStyle: "italic", fontSize: "clamp(36px, 4.5vw, 64px)", margin: "8px 0 4px", lineHeight: .9 }}>Bogotá</h2>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", opacity: .6 }}>Cra 21 #49-13</div>
          </div>
          <div style={{ flex: "1 1 180px", display: "flex", flexDirection: "column", gap: 14 }}>
            <div><div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase", opacity: .5, marginBottom: 2 }}>WhatsApp</div><span>300 526 0637</span></div>
            <div><div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase", opacity: .5, marginBottom: 2 }}>Email</div><span>ventas@artedavas.com</span></div>
            <div><div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em", textTransform: "uppercase", opacity: .5, marginBottom: 2 }}>Instagram</div><span>@artedavas</span></div>
          </div>
          <div style={{ flex: "1 1 200px", display: "flex", flexDirection: "column", gap: 10 }}>
            <a className="btn wa lg" href={waLink(msg)} target="_blank" rel="noopener">Agendar visita <Arr /></a>
            <a className="btn line on-dark" href="https://maps.google.com/?q=Cra+21+49-13+Bogota" target="_blank" rel="noopener">Google Maps <Arr /></a>
          </div>
        </div>
      </section>

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

window.Showroom = Showroom;