// PROJECTS — Artesanías Chepe

const Projects = ({ onNav }) => {
  const [active, setActive] = useState(null);

  return (
    <div className="page" data-screen-label="05 Proyectos">
      {/* Hero */}
      <section style={{ padding: "20px 20px 0" }}>
        <div className="eyebrow">Proyectos comerciales</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 13vw, 84px)", margin: "10px 0 16px", lineHeight: 0.98 }}>
          Hoteles, restaurantes y <span className="italic" style={{ color: "var(--clay)" }}>haciendas</span>.
        </h1>
        <p style={{ color: "var(--ink-80)", fontSize: 16, lineHeight: 1.55, maxWidth: 380 }}>
          Trabajamos con diseñadores, arquitectos y dueños de hospitalidad para amueblar
          espacios con piezas tejidas a la medida. Desde el render hasta la instalación.
        </p>

        <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
          <button onClick={() => onNav("contact")} className="btn btn-primary">
            Cotizar proyecto <Icon name="arrow" size={16} />
          </button>
          <button onClick={() => onNav("wholesale")} className="btn btn-ghost">
            Mayoreo
          </button>
        </div>
      </section>

      {/* Stats */}
      <section style={{ padding: "40px 20px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
          {[
            { n: "210", l: "Proyectos" },
            { n: "32", l: "Hoteles" },
            { n: "12", l: "Estados MX" },
          ].map((s, i) => (
            <div key={i} style={{ borderTop: "1px solid var(--hair-strong)", paddingTop: 14 }}>
              <div className="display italic" style={{ fontSize: 36, color: "var(--ink)" }}>{s.n}</div>
              <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)", marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Proceso */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Cómo trabajamos" title="El proceso" />
        <div className="stack-3">
          {[
            { n: "01", t: "Llamada inicial", d: "Cuéntanos el proyecto: espacio, fechas, paleta, referencias." },
            { n: "02", t: "Propuesta visual", d: "Render con piezas, materiales, acabados y presupuesto detallado." },
            { n: "03", t: "Producción artesanal", d: "El taller teje y arma. Te enviamos avances en video." },
            { n: "04", t: "Entrega e instalación", d: "Coordinamos transporte y montaje en sitio cuando aplica." },
          ].map((s) => (
            <div key={s.n} className="hair" style={{ padding: 18, borderRadius: 14, display: "flex", gap: 16 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--clay)" }}>{s.n}</div>
              <div style={{ flex: 1 }}>
                <div className="serif" style={{ fontSize: 20, marginBottom: 4 }}>{s.t}</div>
                <p style={{ fontSize: 14, color: "var(--ink-80)", margin: 0, lineHeight: 1.5 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Galería de proyectos */}
      <section style={{ paddingTop: 56 }}>
        <div className="container">
          <SectionHead eyebrow="Portafolio" title="Proyectos realizados" />
        </div>
        <div className="stack-3" style={{ padding: "0 20px" }}>
          {window.PROJECTS.map((pr, i) => (
            <button key={pr.id} onClick={() => setActive(pr)}
              className="fade-up"
              style={{
                width: "100%", textAlign: "left",
                borderRadius: 18, overflow: "hidden",
                background: "var(--paper)",
                animationDelay: (i * 80) + "ms",
              }}>
              <div className={"ph " + pr.placeholderClass} style={{
                aspectRatio: i === 0 ? "16/13" : "4/3",
                fontSize: 9, position: "relative",
              }}>
                <span style={{ position: "absolute", bottom: 16, left: 16 }}>{pr.title} · foto principal</span>
                <span style={{
                  position: "absolute", top: 16, left: 16,
                  background: "var(--bone)", color: "var(--ink)",
                  padding: "5px 10px", borderRadius: 999,
                  fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase",
                }}>{pr.year}</span>
              </div>
              <div style={{ padding: "18px 18px 22px" }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>{pr.place}</div>
                <div className="display" style={{ fontSize: 26, marginTop: 4 }}>{pr.title}</div>
                <p style={{ color: "var(--ink-80)", fontSize: 14, lineHeight: 1.5, marginTop: 8, marginBottom: 0 }}>{pr.scope}</p>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* CTA grande */}
      <section style={{ marginTop: 64, background: "var(--ink)", color: "var(--bone)", padding: "56px 24px" }}>
        <div className="eyebrow" style={{ color: "color-mix(in srgb, var(--bone) 55%, transparent)", marginBottom: 12 }}>¿Tu próximo proyecto?</div>
        <h2 className="display" style={{ fontSize: 44, margin: 0, lineHeight: 1 }}>
          Hagamos algo <span className="italic" style={{ color: "var(--clay)" }}>tejido</span> juntos.
        </h2>
        <p style={{ color: "color-mix(in srgb, var(--bone) 85%, transparent)", fontSize: 15, lineHeight: 1.55, marginTop: 16 }}>
          Cuéntanos del espacio. En 48 horas tienes una primera propuesta con piezas, materiales y rango de inversión.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 26 }}>
          <button onClick={() => onNav("contact")} className="btn btn-clay btn-block" style={{ height: 54 }}>
            <Icon name="wa" size={18} /> Hablar por WhatsApp
          </button>
          <button onClick={() => onNav("contact")} className="btn btn-block" style={{ height: 54, background: "transparent", color: "var(--bone)", border: "1px solid color-mix(in srgb, var(--bone) 30%, transparent)" }}>
            <Icon name="mail" size={16} /> Enviar brief por correo
          </button>
        </div>
      </section>

      <Footer onNav={onNav} />

      {/* Project modal */}
      {active && (
        <React.Fragment>
          <div onClick={() => setActive(null)} style={{ position: "fixed", inset: 0, background: "color-mix(in srgb, var(--ink) 70%, transparent)", zIndex: 80, animation: "fadeIn .2s ease" }} />
          <div style={{
            position: "fixed", bottom: 0, left: "50%", transform: "translateX(-50%)",
            width: "100%", maxWidth: 480, maxHeight: "90vh",
            background: "var(--bone)", borderRadius: "18px 18px 0 0",
            zIndex: 90, overflowY: "auto",
            animation: "slideUpFull .35s cubic-bezier(.2,.7,.2,1)",
          }}>
            <style>{`@keyframes slideUpFull { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }`}</style>
            <div style={{ position: "sticky", top: 0, display: "flex", justifyContent: "space-between", alignItems: "center", padding: 16, background: "var(--bone)", borderBottom: "1px solid var(--hair)" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Proyecto</span>
              <button onClick={() => setActive(null)} aria-label="Cerrar"><Icon name="close" size={22} /></button>
            </div>
            <div style={{ padding: "16px 20px 40px" }}>
              <div className={"ph " + active.placeholderClass} style={{ aspectRatio: "4/5", borderRadius: 14, marginBottom: 18, fontSize: 9 }}>
                <span style={{ position: "absolute", bottom: 14, left: 16 }}>{active.title} — foto 1 de 6</span>
              </div>
              <div className="rail" style={{ marginBottom: 22 }}>
                {[1,2,3,4,5].map(n => (
                  <div key={n} className={"ph " + (n%2 ? "ph-warm" : "ph-dark")} style={{ width: 110, height: 130, borderRadius: 10, fontSize: 8 }}></div>
                ))}
              </div>
              <div className="eyebrow">{active.year} · {active.place}</div>
              <h2 className="display" style={{ fontSize: 36, margin: "8px 0 14px" }}>{active.title}</h2>
              <p style={{ fontSize: 15, color: "var(--ink-80)", lineHeight: 1.6 }}>{active.blurb}</p>
              <div className="divider" style={{ margin: "20px 0" }}></div>
              <div className="stack-3">
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Alcance</div>
                  <div style={{ fontSize: 15, marginTop: 4 }}>{active.scope}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Piezas</div>
                  <div style={{ fontSize: 15, marginTop: 4 }}>{active.pieces}</div>
                </div>
              </div>
              <button onClick={() => { setActive(null); onNav("contact"); }} className="btn btn-primary btn-block" style={{ marginTop: 26 }}>
                Quiero algo así <Icon name="arrow" size={16} />
              </button>
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

window.Projects = Projects;