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

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

  return (
    <>
      {/* ════ HERO ════ */}
      <section className="taller-int-hero">
        <div className="crumb"><a onClick={goHome} style={{ cursor: "pointer" }}>Inicio</a>  ·  El Taller</div>
        <div className="taller-int-hero-grid">
          <div className="taller-int-hero-text">
            <Eyebrow accent="var(--mostaza)">El Taller · desde 2014</Eyebrow>
            <h1>Aquí no se<br />fabrica.<br />Se <em>teje</em>.</h1>
            <p>
              No tenemos bodega. Tenemos un taller con manos trabajadoras y un proceso
              que lleva más de diez años de oficio. Tu pieza se empieza a tejer cuando
              tú la pides — y sale en quince días.
            </p>
            <div className="taller-int-stats">
              <div><span className="v">2014</span><span className="k">Año uno</span></div>
              <div><span className="v">~15 d</span><span className="k">Producción a pedido</span></div>
              <div><span className="v">100%</span><span className="k">Tejido a mano</span></div>
            </div>
          </div>
          <div className="taller-int-hero-photos">
            <div className="taller-int-photo main">
              <img src="assets/casas/taller-tejido-detalle.jpg" alt="Detalle del tejido sobre estructura" loading="lazy" />
            </div>
            <div className="taller-int-photo secondary">
              <img src="assets/casas/taller-orgulloso.jpg" alt="Artesano DAVA'S con pieza terminada" loading="lazy" />
            </div>
          </div>
        </div>
      </section>

      {/* ════ GALERÍA ════ */}
      <section style={{ padding: "clamp(16px, 2vw, 32px) var(--gutter, 24px)", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
          <div style={{ flex: "1 1 220px", aspectRatio: "4/5", borderRadius: 12, overflow: "hidden" }}><img src="assets/casas/taller-detalle-hilo.jpg" alt="Detalle del hilo" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
          <div style={{ flex: "1 1 220px", aspectRatio: "4/5", borderRadius: 12, overflow: "hidden" }}><img src="assets/casas/taller-estructura.jpg" alt="Estructura de madera" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
          <div style={{ flex: "1 1 220px", aspectRatio: "4/5", borderRadius: 12, overflow: "hidden" }}><img src="assets/casas/taller-ensamblaje.jpg" alt="Ensamblaje" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
          <div style={{ flex: "1 1 220px", aspectRatio: "4/5", borderRadius: 12, overflow: "hidden" }}><img src="assets/casas/taller-soldador.jpg" alt="Soldadura" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
        </div>
      </section>

      {/* ════ EL PROCESO ════ */}
      <section className="taller-int-process">
        <div className="taller-int-process-head">
          <Eyebrow>El oficio</Eyebrow>
          <h2>Del <em>diseño</em><br />a tu casa.</h2>
          <p>Cada pieza empieza con una idea y termina con la satisfacción de un trabajo bien hecho.</p>
        </div>

        <div className="taller-int-steps">
          <div className="taller-int-step">
            <div className="taller-int-step-num">01</div>
            <div className="taller-int-step-img"><img src="assets/casas/taller-orgulloso.jpg" alt="Diseño y planeación" loading="lazy" /></div>
            <h3>El diseño</h3>
            <p>Cada modelo nace de un dibujo. Se planea el patrón, se elige la madera, se calcula el hilo. Nada empieza sin saber cómo termina.</p>
          </div>
          <div className="taller-int-step">
            <div className="taller-int-step-num">02</div>
            <div className="taller-int-step-img"><img src="assets/casas/taller-estructura.jpg" alt="Elaboración de estructura" loading="lazy" /></div>
            <h3>La estructura</h3>
            <p>Madera curada, ensamble a espiga y caja. Hierro forjado soldado a mano. Sin tornillería vista — la estructura es el esqueleto de todo.</p>
          </div>
          <div className="taller-int-step">
            <div className="taller-int-step-num">03</div>
            <div className="taller-int-step-img"><img src="assets/casas/taller-tejido-detalle.jpg" alt="Tejido de alta calidad" loading="lazy" /></div>
            <h3>El tejido</h3>
            <p>Hilo Plástico Gold sobre la estructura desnuda. Manual, cuidado, de alta calidad. Una pieza, una mano — sin máquina de por medio.</p>
          </div>
          <div className="taller-int-step">
            <div className="taller-int-step-num">04</div>
            <div className="taller-int-step-img"><img src="assets/casas/taller-ensamblaje.jpg" alt="Patrón precolombino" loading="lazy" /></div>
            <h3>Los patrones</h3>
            <p>Precolombino, Diamante, Lineal, Pirámide, Espiga. No son decoración — son códigos del oficio que dan identidad a cada pieza.</p>
          </div>
          <div className="taller-int-step">
            <div className="taller-int-step-num">05</div>
            <div className="taller-int-step-img"><img src="assets/casas/taller-entrega.jpg" alt="Trabajo terminado" loading="lazy" /></div>
            <h3>La satisfacción</h3>
            <p>Revisión final, aceite sobre la madera, tensión del tejido punto por punto. Cuando sale del taller, sale perfecta.</p>
          </div>
        </div>
      </section>

      {/* ════ FRASE ANCLA ════ */}
      <section className="taller-int-pull">
        <blockquote>
          Tu pieza se empieza<br />
          <em>a tejer</em><br />
          cuando tú la pides.
        </blockquote>
      </section>

      {/* ════ CTA ════ */}
      <section className="taller-int-cta">
        <Eyebrow>Visitas · con cita previa</Eyebrow>
        <h2>Ven a ver<br />cómo se <em>hace</em>.</h2>
        <p>
          Visitas al showroom con cita previa. El taller se abre para cursos
          y para clientes que quieren ver su pieza siendo tejida.
        </p>
        <div style={{ display: "inline-flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
          <a className="btn wa lg" href={waLink("Hola DAVA'S, quiero agendar una visita al taller.")} target="_blank" rel="noopener">Agendar por WhatsApp <Arr /></a>
          <button className="btn line" onClick={() => setPage("home")}>← Volver al inicio</button>
        </div>
      </section>

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

window.Taller = Taller;