// ABOUT — Artesanías Chepe — historia

const About = ({ onNav }) => (
  <div className="page" data-screen-label="07 Sobre Chepe">
    {/* Hero editorial */}
    <section style={{ padding: "20px 20px 0" }}>
      <div className="eyebrow">Sobre la casa</div>
      <h1 className="display" style={{ fontSize: "clamp(56px, 16vw, 92px)", margin: "12px 0", lineHeight: 0.95 }}>
        Hilo, paciencia y <span className="italic" style={{ color: "var(--clay)" }}>memoria</span>.
      </h1>
    </section>

    <section style={{ padding: "12px 20px 0" }}>
      <div className="ph ph-warm" style={{ aspectRatio: "1/1", borderRadius: 18, fontSize: 9 }}>
        <span style={{ position: "absolute", bottom: 16, left: 16 }}>Don Chepe — retrato en el taller, 1985</span>
      </div>
    </section>

    {/* Quote */}
    <section className="container" style={{ paddingTop: 36 }}>
      <p className="serif italic" style={{ fontSize: 28, lineHeight: 1.3, margin: 0, color: "var(--ink-80)" }}>
        "Tejer no es rápido. Es escuchar al material y darle tiempo. Eso lo aprendí de mi abuela y mi abuela de la suya."
      </p>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-60)", marginTop: 16 }}>
        — José "Chepe" Canul · Fundador
      </div>
    </section>

    {/* Timeline */}
    <section className="container" style={{ paddingTop: 56 }}>
      <SectionHead eyebrow="Línea del tiempo" title="47 años de oficio" />
      <div style={{ position: "relative", paddingLeft: 18 }}>
        <div style={{ position: "absolute", left: 4, top: 4, bottom: 4, width: 1, background: "var(--hair-strong)" }}></div>
        {[
          { y: "1978", t: "El primer taller", d: "Don Chepe abre un taller de canastas en el barrio de Santiago, Mérida." },
          { y: "1992", t: "Mecedoras yucatecas", d: "Empezamos a tejer mecedoras tradicionales sobre estructura de madera de zapote." },
          { y: "2005", t: "Primera hacienda", d: "Amueblamos la Hacienda Sotuta de Peón. La pieza estrella: una lámpara colgante de 1.20 m." },
          { y: "2014", t: "Segunda generación", d: "Lucía Canul toma las riendas comerciales. Suman ratán sintético al catálogo." },
          { y: "2021", t: "Tienda en línea", d: "Llegamos a clientes en CDMX, Monterrey, Guadalajara y Tulum." },
          { y: "2025", t: "Tercera generación", d: "Hoy 18 familias artesanas colaboran con la casa. 210 proyectos entregados." },
        ].map((it, i) => (
          <div key={i} className="fade-up" style={{
            position: "relative", paddingLeft: 22, paddingBottom: 22,
            animationDelay: (i * 80) + "ms",
          }}>
            <span style={{
              position: "absolute", left: -4, top: 4,
              width: 10, height: 10, borderRadius: 999, background: "var(--clay)",
              border: "2px solid var(--bone)",
            }}></span>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--clay)" }}>{it.y}</div>
            <div className="serif" style={{ fontSize: 22, margin: "4px 0 6px" }}>{it.t}</div>
            <p style={{ fontSize: 14, color: "var(--ink-80)", lineHeight: 1.55, margin: 0 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </section>

    {/* Valores */}
    <section style={{ marginTop: 56, background: "var(--paper)", padding: "48px 20px" }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Nuestros valores</div>
      <h2 className="display" style={{ fontSize: 36, margin: 0, lineHeight: 1 }}>
        Lo que <span className="italic" style={{ color: "var(--clay)" }}>defendemos</span>.
      </h2>
      <div className="stack-3" style={{ marginTop: 22 }}>
        {[
          { t: "Pago justo", d: "Las artesanas que tejen para Chepe ganan en promedio 2.4× el salario mínimo regional." },
          { t: "Material local", d: "Mimbre, palma y henequén comprados directo a productores yucatecos." },
          { t: "Tiempo del oficio", d: "Una mecedora toma 8–12 días de trabajo. No hay atajos." },
        ].map((v, i) => (
          <div key={i} style={{ borderTop: "1px solid var(--hair-strong)", paddingTop: 14 }}>
            <div className="display italic" style={{ fontSize: 26 }}>{v.t}</div>
            <p style={{ fontSize: 14, color: "var(--ink-80)", lineHeight: 1.55, marginTop: 6 }}>{v.d}</p>
          </div>
        ))}
      </div>
    </section>

    {/* Galería del taller */}
    <section style={{ paddingTop: 56 }}>
      <div className="container">
        <SectionHead eyebrow="El taller" title="Manos al hilo" />
      </div>
      <div className="rail" style={{ padding: "0 20px" }}>
        {[
          { c: "ph-warm", l: "Tejido en mimbre — detalle" },
          { c: "ph",      l: "Bastidores de madera" },
          { c: "ph-dark", l: "Don Chepe trabajando" },
          { c: "ph-clay", l: "Acabados a mano" },
          { c: "ph",      l: "Almacén — fibra cruda" },
        ].map((p, i) => (
          <div key={i} className={"ph " + p.c} style={{ width: 240, height: 300, borderRadius: 14, fontSize: 9 }}>
            <span style={{ position: "absolute", bottom: 14, left: 14 }}>{p.l}</span>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section className="container" style={{ paddingTop: 56 }}>
      <div className="card" style={{ background: "var(--ink)", color: "var(--bone)", padding: 28, borderRadius: 18 }}>
        <h3 className="display" style={{ fontSize: 32, margin: "0 0 12px" }}>
          Visítanos en <span className="italic" style={{ color: "var(--clay)" }}>Mérida</span>.
        </h3>
        <p style={{ color: "color-mix(in srgb, var(--bone) 85%, transparent)", fontSize: 14, lineHeight: 1.55 }}>
          El taller-tienda en Calle 60 × 41 está abierto al público de lunes a sábado. Café incluido.
        </p>
        <button onClick={() => onNav("contact")} className="btn btn-clay" style={{ marginTop: 18 }}>
          Cómo llegar <Icon name="arrow" size={16} />
        </button>
      </div>
    </section>

    <Footer onNav={onNav} />
  </div>
);

window.About = About;