// BRAND — Identidad visual de Artesanías Chepe

const Brand = ({ onNav }) => {
  const [variant, setVariant] = useState("henequen");
  const [shopName, setShopName] = useState("Chepe");
  const variants = [
    { id: "henequen", name: "Henequén",   sub: "Principal · el agave yucateco" },
    { id: "monogram", name: "Monograma",  sub: "Secundario · sello redondo" },
    { id: "woven",    name: "Tejido",     sub: "Alternativo · entrelazado" },
    { id: "sun",      name: "Sol",        sub: "Estacional · campañas" },
  ];

  return (
    <div className="page" data-screen-label="09 Marca">
      {/* Hero */}
      <section style={{ padding: "20px 20px 0" }}>
        <div className="eyebrow">Identidad</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 14vw, 82px)", margin: "12px 0 14px", lineHeight: 0.96 }}>
          La <span className="italic" style={{ color: "var(--clay)" }}>marca</span>,<br />
          contada.
        </h1>
        <p style={{ color: "var(--ink-80)", fontSize: 16, lineHeight: 1.55, maxWidth: 380 }}>
          Una identidad entre lo <strong>rural</strong> y lo <strong>minimal</strong>. Inspirada
          en el henequén, el oficio yucateco y el silencio del taller a las seis de la mañana.
        </p>
      </section>

      {/* Toggle Chepe / Chepe's */}
      <section className="container" style={{ paddingTop: 32 }}>
        <div className="hair" style={{
          padding: 16, borderRadius: 14, background: "var(--paper)",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, marginBottom: 10, flexWrap: "wrap" }}>
            <span className="eyebrow" style={{ whiteSpace: "nowrap" }}>Decisión de nombre</span>
            <span className="mono" style={{ fontSize: 9, color: "var(--clay)", letterSpacing: "0.14em", textTransform: "uppercase", whiteSpace: "nowrap" }}>artesaníaschepes.com</span>
          </div>
          <p style={{ fontSize: 13, color: "var(--ink-80)", lineHeight: 1.5, margin: "0 0 14px" }}>
            Tu dominio incluye una "s". Elige cómo aparece el nombre en el logo
            — todo el sitio se actualiza:
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {["Chepe", "Chepe's"].map(n => (
              <button key={n} onClick={() => setShopName(n)} style={{
                padding: "14px 12px", borderRadius: 12,
                border: "1px solid " + (shopName === n ? "var(--ink)" : "var(--hair-strong)"),
                background: shopName === n ? "var(--ink)" : "transparent",
                color: shopName === n ? "var(--bone)" : "var(--ink)",
              }}>
                <span className="logo-chepe" style={{ fontSize: 26 }}>{n}</span>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7, marginTop: 4 }}>
                  {n === "Chepe" ? "Apodo · familiar" : "Posesivo · comercial"}
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Logo principal — large */}
      <section style={{ padding: "32px 20px 0" }}>
        <div style={{
          background: "var(--paper)", borderRadius: 18,
          padding: "56px 24px", display: "flex", justifyContent: "center",
          border: "1px solid var(--hair)",
        }}>
          <window.Lockup size={110} orientation="stacked" color="ink" wordSize={88} shopName={shopName} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Lockup vertical · uso principal
          </span>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-40)" }}>v1.1</span>
        </div>
      </section>

      {/* Símbolo: variantes */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="El símbolo" title="Cuatro lecturas" />
        <p style={{ color: "var(--ink-80)", fontSize: 14, lineHeight: 1.6, marginTop: 0, marginBottom: 20 }}>
          Toca cada variante para verla en gran formato. La principal es el <strong>henequén</strong> —
          tres hojas que se levantan desde un mismo punto, como el oficio en tres generaciones.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {variants.map((v) => (
            <button key={v.id} onClick={() => setVariant(v.id)}
              style={{
                background: variant === v.id ? "var(--ink)" : "var(--paper)",
                color: variant === v.id ? "var(--bone)" : "var(--ink)",
                borderRadius: 16, padding: 18,
                border: "1px solid " + (variant === v.id ? "var(--ink)" : "var(--hair)"),
                display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14,
                textAlign: "left", transition: "all .2s ease",
              }}>
              <div style={{ width: "100%", display: "flex", justifyContent: "center", padding: "14px 0" }}>
                <window.Mark size={64} variant={v.id}
                  color={variant === v.id ? "var(--bone)" : "var(--ink)"} />
              </div>
              <div>
                <div className="serif" style={{ fontSize: 20, lineHeight: 1.1 }}>{v.name}</div>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7, marginTop: 4 }}>{v.sub}</div>
              </div>
            </button>
          ))}
        </div>

        {/* Big preview */}
        <div style={{
          marginTop: 18, background: "var(--ink)", color: "var(--bone)",
          borderRadius: 18, padding: "56px 24px",
          display: "flex", justifyContent: "center",
        }}>
          <window.Mark size={170} variant={variant} color="var(--bone)" strokeWidth={2.6} />
        </div>
      </section>

      {/* Construcción */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Construcción" title="Por qué el henequén" />
        <div className="card hair" style={{ padding: 22, borderRadius: 18 }}>
          <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
            <div style={{
              background: "var(--bone)", borderRadius: 14, padding: 14,
              border: "1px solid var(--hair-strong)",
              position: "relative",
            }}>
              {/* construction grid */}
              <svg width="120" height="120" viewBox="0 0 100 100" style={{ position: "absolute", inset: 14, opacity: 0.18 }}>
                <g stroke="var(--clay)" strokeWidth="0.4" fill="none">
                  {[10,20,30,40,50,60,70,80,90].map(n => (
                    <React.Fragment key={n}>
                      <line x1="0" y1={n} x2="100" y2={n} />
                      <line x1={n} y1="0" x2={n} y2="100" />
                    </React.Fragment>
                  ))}
                  <circle cx="50" cy="50" r="42" />
                </g>
              </svg>
              <window.Mark size={120} variant="henequen" color="var(--ink)" strokeWidth={3.2} />
            </div>
            <div style={{ flex: 1 }}>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-80)", margin: 0 }}>
                El henequén es el <em>oro verde</em> de Yucatán. Tres hojas que se elevan desde
                un mismo punto evocan las tres generaciones del taller.
              </p>
            </div>
          </div>
          <div className="divider" style={{ margin: "20px 0" }}></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {[
              { l: "Rejilla",  v: "10 × 10" },
              { l: "Trazo",    v: "3 px" },
              { l: "Esquinas", v: "Redondeadas" },
              { l: "Espacio mínimo", v: "× altura H" },
            ].map((it, i) => (
              <div key={i}>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>{it.l}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{it.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Lockups */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Composiciones" title="Cómo se arma" />
        <div className="stack-3">
          {/* Stacked */}
          <div className="hair" style={{
            borderRadius: 16, padding: "36px 24px",
            background: "var(--paper)", display: "flex", justifyContent: "center",
          }}>
            <window.Lockup size={72} orientation="stacked" color="ink" shopName={shopName} />
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Vertical · principal
          </div>

          {/* Integrated */}
          <div className="hair" style={{
            borderRadius: 16, padding: "36px 24px",
            background: "var(--paper)", display: "flex", justifyContent: "center",
          }}>
            <window.Lockup size={64} orientation="integrated" color="ink" wordSize={56} shopName={shopName} />
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Integrado · "Artesanías Chepe" como unidad
          </div>

          {/* Horizontal */}
          <div className="hair" style={{
            borderRadius: 16, padding: "36px 24px",
            background: "var(--paper)", display: "flex", justifyContent: "center",
          }}>
            <window.Lockup size={70} orientation="horizontal" color="ink" wordSize={50} shopName={shopName} />
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Horizontal · header y firma de correo
          </div>

          {/* Mark only */}
          <div className="hair" style={{
            borderRadius: 16, padding: "36px 24px",
            background: "var(--paper)", display: "flex", justifyContent: "center",
          }}>
            <window.Mark size={80} color="var(--ink)" variant="henequen" />
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Símbolo solo · favicon, etiquetas y empaque
          </div>

          {/* Wordmark only */}
          <div className="hair" style={{
            borderRadius: 16, padding: "36px 24px",
            background: "var(--paper)", display: "flex", justifyContent: "center", alignItems: "center",
          }}>
            <span className="logo-chepe" style={{ fontSize: 72 }}>{shopName}</span>
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>
            Solo palabra · usos editoriales
          </div>
        </div>
      </section>

      {/* Paleta */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Color" title="Paleta de la casa" />
        <div className="stack-3">
          {[
            { name: "Tinta",        hex: "#1c160f", bg: "#1c160f", c: "bone" },
            { name: "Bone",         hex: "#f0e6d2", bg: "#f0e6d2", c: "ink" },
            { name: "Paper",        hex: "#f7efdb", bg: "#f7efdb", c: "ink" },
            { name: "Terracota",    hex: "#b85432", bg: "#b85432", c: "bone" },
            { name: "Henequén",     hex: "#5e6a3a", bg: "#5e6a3a", c: "bone" },
          ].map((s) => (
            <div key={s.name} className="hair" style={{
              borderRadius: 14, overflow: "hidden",
              display: "flex", alignItems: "center", gap: 16,
            }}>
              <div style={{
                width: 110, height: 96, background: s.bg, flexShrink: 0,
              }}></div>
              <div style={{ padding: "14px 16px 14px 0", flex: 1 }}>
                <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{s.name}</div>
                <div className="mono" style={{ fontSize: 11, marginTop: 6, color: "var(--ink-60)" }}>{s.hex.toUpperCase()}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Tipografía */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Tipografía" title="La voz" />
        <div className="hair" style={{ borderRadius: 16, padding: 22 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Display · Cormorant Garamond Italic</div>
          <div className="display italic" style={{ fontSize: 68, lineHeight: 1, marginTop: 8, color: "var(--clay)" }}>Chepe</div>
          <div className="display" style={{ fontSize: 42, lineHeight: 1.05, marginTop: 4 }}>Aa Bb Cc</div>
          <div className="serif" style={{ fontSize: 14, color: "var(--ink-80)", marginTop: 8 }}>0 1 2 3 4 5 6 7 8 9</div>
          <div className="divider" style={{ margin: "22px 0" }}></div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Texto · Manrope</div>
          <div className="sans" style={{ fontSize: 32, fontWeight: 600, marginTop: 6 }}>Aa Bb Cc</div>
          <p className="sans" style={{ fontSize: 14, color: "var(--ink-80)", lineHeight: 1.55, marginTop: 4, marginBottom: 0 }}>
            "Tejer no es rápido. Es escuchar al material y darle tiempo."
          </p>
          <div className="divider" style={{ margin: "22px 0" }}></div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Detalle · JetBrains Mono</div>
          <p className="mono" style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 8, color: "var(--ink-80)" }}>
            HECHO A MANO · MÉRIDA · YUCATÁN · MX
          </p>
        </div>
      </section>

      {/* Aplicaciones */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="En vivo" title="Aplicaciones" />

        {/* Etiqueta colgante */}
        <div className="hair" style={{ borderRadius: 18, padding: 26, background: "var(--paper)" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)", marginBottom: 18 }}>Etiqueta colgante</div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div style={{
              background: "var(--bone)", padding: 18, borderRadius: "6px 6px 14px 14px",
              border: "1px solid var(--hair-strong)",
              width: 150, textAlign: "center", position: "relative",
              boxShadow: "var(--shadow-sm)",
            }}>
              <div style={{
                width: 16, height: 16, borderRadius: 999, border: "1.5px solid var(--ink-80)",
                position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)",
                background: "var(--bone)",
              }}></div>
              <div style={{ marginTop: 18 }}>
                <window.Mark size={36} color="var(--ink)" variant="henequen" />
              </div>
              <div className="logo-chepe" style={{ fontSize: 26, marginTop: 6 }}>Chepe</div>
              <div className="mono" style={{ fontSize: 7, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--ink-60)", marginTop: 6 }}>
                Hecho a mano<br />Mérida · MX
              </div>
              <div style={{ height: 1, background: "var(--hair)", margin: "10px 0" }}></div>
              <div className="mono" style={{ fontSize: 7, letterSpacing: "0.2em", color: "var(--ink-60)" }}>
                MIMBRE NATURAL<br />ACABADO MIEL
              </div>
            </div>
          </div>
        </div>

        {/* Tarjeta */}
        <div className="hair" style={{ borderRadius: 18, padding: 26, background: "var(--paper)", marginTop: 16 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)", marginBottom: 18 }}>Tarjeta de presentación</div>
          <div style={{
            background: "var(--ink)", color: "var(--bone)", borderRadius: 8,
            padding: 22, aspectRatio: "1.7/1",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            boxShadow: "var(--shadow-sm)",
          }}>
            <window.Mark size={40} color="var(--clay)" variant="henequen" />
            <div>
              <div className="serif" style={{ fontSize: 16 }}>Lucía Canul</div>
              <div className="mono" style={{ fontSize: 8, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7, marginTop: 4 }}>
                Asesoría · Proyectos
              </div>
              <div className="mono" style={{ fontSize: 8, letterSpacing: "0.16em", marginTop: 10, opacity: 0.85 }}>
                +52 999 123 4567<br />HOLA@CHEPE.MX
              </div>
            </div>
          </div>
        </div>

        {/* Etiqueta de hangtag en pieza */}
        <div className="hair" style={{ borderRadius: 18, padding: 0, background: "var(--paper)", marginTop: 16, overflow: "hidden" }}>
          <div className="ph ph-warm" style={{ aspectRatio: "4/3", fontSize: 9 }}>
            <span style={{ position: "absolute", bottom: 14, left: 16 }}>Pieza con sello tejido — placeholder</span>
            <div style={{
              position: "absolute", top: "32%", right: "18%",
              background: "var(--bone)", padding: "10px 14px", borderRadius: 8,
              transform: "rotate(-6deg)",
              boxShadow: "var(--shadow)",
            }}>
              <window.Lockup size={28} orientation="horizontal" color="ink" wordSize={20} showTagline={false} />
            </div>
          </div>
        </div>
      </section>

      {/* Reglas de uso */}
      <section className="container" style={{ paddingTop: 56 }}>
        <SectionHead eyebrow="Reglas" title="Sí / No" />
        <div className="stack-3">
          {[
            { yes: true,  t: "Sobre fondo claro y plano",   d: "Tinta sobre Bone, Paper o blanco." },
            { yes: true,  t: "Sobre fondo oscuro",          d: "Bone sobre tinta, con buen contraste." },
            { yes: false, t: "Sobre foto con poco contraste", d: "Buscar fondo limpio o usar caja." },
            { yes: false, t: "Rotado o distorsionado",      d: "Mantener proporciones y ángulo 0°." },
            { yes: false, t: "Colores fuera del sistema",   d: "Sólo tinta, bone, terracota o henequén." },
          ].map((r, i) => (
            <div key={i} className="hair" style={{
              borderRadius: 14, padding: 16, display: "flex", gap: 14, alignItems: "flex-start",
            }}>
              <span style={{
                width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                background: r.yes ? "var(--ink)" : "var(--clay)",
                color: "var(--bone)",
                display: "grid", placeItems: "center",
              }}>
                <Icon name={r.yes ? "check" : "close"} size={16} stroke={2.2} />
              </span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{r.t}</div>
                <p style={{ fontSize: 13, color: "var(--ink-80)", lineHeight: 1.5, margin: "4px 0 0" }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Manifiesto */}
      <section style={{ marginTop: 56, background: "var(--ink)", color: "var(--bone)", padding: "56px 24px" }}>
        <div className="eyebrow" style={{ color: "rgba(240,230,210,0.55)", marginBottom: 12 }}>Manifiesto</div>
        <h2 className="display" style={{ fontSize: 40, margin: 0, lineHeight: 1 }}>
          Lo que <span className="italic" style={{ color: "var(--clay)" }}>somos</span>.
        </h2>
        <div className="stack-4" style={{ marginTop: 26 }}>
          <p className="serif italic" style={{ fontSize: 22, lineHeight: 1.35, color: "rgba(240,230,210,0.92)", margin: 0 }}>
            Somos rurales sin ser rústicos. Modernos sin perder la mano.
          </p>
          <p className="serif italic" style={{ fontSize: 22, lineHeight: 1.35, color: "rgba(240,230,210,0.92)", margin: 0 }}>
            No fabricamos: tejemos.
          </p>
          <p className="serif italic" style={{ fontSize: 22, lineHeight: 1.35, color: "rgba(240,230,210,0.92)", margin: 0 }}>
            Cada pieza lleva el ritmo de una persona y el tiempo de Yucatán.
          </p>
        </div>
      </section>

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

window.Brand = Brand;