/* global React, BouzWordmark, FadeUp, useScrollY, Marquee */
const { useEffect, useRef, useState } = React;

// ─── DIRECTION B — "EDITORIAL STUDIO" ──────────────────────────────────────
// Cream/off-white, magazine-style, big black poster type, looser whitespace,
// roman-numeral chapters, single blue accent moments, marquee ribbon.

const CREAM = "#F2EEE6";
const INK = "#0A0A0A";
const MUTED_ON_INK = "rgb(118, 132, 146)";

function useMobile() {
  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
  useEffect(() => {
    const check = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", check, { passive: true });
    return () => window.removeEventListener("resize", check);
  }, []);
  return mobile;
}

// Pixel-art wordmark (5×7 bitmap font for B,O,U,Z,L,A,S)
const PIXEL_FONT = {
  B: ["####.", "#...#", "#...#", "####.", "#...#", "#...#", "####."],
  O: [".###.", "#...#", "#...#", "#...#", "#...#", "#...#", ".###."],
  U: ["#...#", "#...#", "#...#", "#...#", "#...#", "#...#", ".###."],
  Z: ["#####", "....#", "...#.", "..#..", ".#...", "#....", "#####"],
  L: ["#....", "#....", "#....", "#....", "#....", "#....", "#####"],
  A: [".###.", "#...#", "#...#", "#####", "#...#", "#...#", "#...#"],
  S: [".####", "#....", "#....", ".###.", "....#", "....#", "####."]
};
function PixelWord({ word, color, cell = 2, gap = 1, letterGap = 1 }) {
  const stride = cell + gap;
  const rects = [];
  let x = 0;
  for (let li = 0; li < word.length; li++) {
    const grid = PIXEL_FONT[word[li]];
    if (!grid) continue;
    for (let r = 0; r < grid.length; r++) {
      for (let c = 0; c < grid[0].length; c++) {
        if (grid[r][c] === "#") {
          rects.push(<rect key={`${li}-${r}-${c}`} x={x + c * stride} y={r * stride}
          width={cell} height={cell} fill={color} />);
        }
      }
    }
    x += (grid[0].length + letterGap) * stride;
  }
  const w = x - letterGap * stride - gap;
  const h = 7 * stride - gap;
  return <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h}
  style={{ display: "block", height: "1em", width: "auto" }}>{rects}</svg>;
}
function BouzPixelLogo({ color = INK, accent = "var(--color-brand-600)", size = 16, gap = 8 }) {
  // 02·B: BOUZ pixel + brand square + LABS pixel, same height
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap, fontSize: size, lineHeight: 1 }}>
      <PixelWord word="BOUZ" color={color} />
      <span style={{ width: "0.18em", height: "0.18em", background: accent, display: "block" }} />
      <PixelWord word="LABS" color={color} />
    </span>);

}

function BNav() {
  const [scrolled, setScrolled] = useState(false);
  const isMobile = useMobile();
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 30,
      display: "flex", alignItems: "center",
      padding: isMobile ? "16px 20px" : "20px 48px",
      background: scrolled ? "rgba(242,238,230,0.92)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? `1px solid ${INK}1a` : "1px solid transparent",
      transition: "background 240ms, border-color 240ms",
      color: INK
    }}>
      <BouzPixelLogo color={INK} size={isMobile ? 18 : 22} gap={10} />
      <div style={{ marginLeft: "auto", display: "flex", gap: isMobile ? 16 : 32, alignItems: "center" }}>
        {!isMobile && [
        ["I", "Filosofía"],
        ["II", "MeteoZen"],
        ["III", "Nosotros"],
        ["IV", "Contacto"]].
        map(([n, x], i) =>
        <a key={x} href={`#b-${i}`} style={{
          display: "inline-flex", alignItems: "baseline", gap: 8,
          color: INK, textDecoration: "none"
        }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.1em", color: "rgba(10,10,10,0.4)" }}>{n}</span>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 15,
            fontWeight: 500, letterSpacing: "-0.01em" }}>{x}</span>
          </a>
        )}
        <a href="#b-3" style={{
          marginLeft: isMobile ? 0 : 12,
          fontFamily: "var(--font-display)", fontSize: isMobile ? 14 : 15, fontWeight: 600,
          color: INK, textDecoration: "none",
          borderBottom: `2px solid var(--color-brand-600)`,
          paddingBottom: 2, letterSpacing: "-0.01em"
        }}>Hablemos →</a>
      </div>
    </nav>);

}

// Hero — editorial poster: massive type, asymmetric, single blue dot accent.
function BHero() {
  const y = useScrollY();
  const isMobile = useMobile();
  const px = isMobile ? "20px" : "48px";
  return (
    <section style={{
      position: "relative", minHeight: "100vh",
      background: CREAM, color: INK,
      padding: isMobile ? "120px 20px 60px" : "180px 48px 80px",
      display: "flex", alignItems: "center", overflow: "hidden"
    }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: `radial-gradient(${INK}06 1px, transparent 1px)`,
        backgroundSize: "3px 3px", opacity: 0.5
      }} />
      <div style={{ position: "relative", maxWidth: 1500, margin: "0 auto", width: "100%" }}>
        <FadeUp>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            flexWrap: "wrap", gap: 8,
            paddingBottom: 18, borderBottom: `1px solid ${INK}33`,
            marginBottom: 40,
            fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.12em", textTransform: "uppercase", color: `${INK}99`
          }}>
            <span>Bouz Labs · Vol. 01</span>
            {!isMobile && <span>Edición fundacional</span>}
            <span>Edición 2026</span>
          </div>
        </FadeUp>

        <div style={{ position: "relative" }}>
          {!isMobile && (
            <FadeUp delay={200} style={{ position: "absolute", top: 0, right: 0, zIndex: 2 }}>
              <div style={{
                writingMode: "vertical-rl", transform: "rotate(180deg)",
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "0.18em", textTransform: "uppercase", color: `${INK}88`
              }}>
                Estudio de producto · Software para empresas
              </div>
            </FadeUp>
          )}
          <div style={{ paddingRight: isMobile ? 0 : 60 }}>
            <FadeUp delay={80}>
              <h1 style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(48px, 10vw, 168px)",
                fontWeight: 600, lineHeight: 1.02,
                letterSpacing: "-0.035em", color: INK,
                margin: 0, textWrap: "balance"
              }}>
                Pequeñas<br />
                <span style={{ display: "inline-flex", alignItems: "baseline", gap: "0.12em" }}>
                  herramientas
                  <span style={{
                    width: "0.34em", height: "0.34em",
                    background: "var(--color-brand-600)", borderRadius: 999,
                    display: "inline-block", marginLeft: "0.18em",
                    transform: `translateY(-${Math.max(0, 80 - y * 0.2)}px)`,
                    transition: "transform 200ms"
                  }} />
                </span><br />
                <span style={{ fontStyle: "italic", fontWeight: 400 }}>de gran impacto.</span>
              </h1>
            </FadeUp>
          </div>
        </div>

        <div style={{
          marginTop: 60,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0,1fr) minmax(0,440px)",
          gap: isMobile ? 40 : 60, alignItems: "start"
        }}>
          <FadeUp delay={260}>
            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: isMobile ? 18 : 22, fontWeight: 400, lineHeight: 1.45,
              letterSpacing: "-0.01em", color: INK, margin: 0
            }}>
              Construimos software enfocado para empresas que tienen un
              problema concreto. Nuestra primera obsesión es la prevención
              de riesgos laborales — porque conocemos el oficio desde
              dentro.
            </p>
          </FadeUp>
          <FadeUp delay={340}>
            <div>
              <a href="mailto:info@meteozen.app" style={{
                display: isMobile ? "flex" : "inline-flex",
                alignItems: "center", justifyContent: isMobile ? "center" : "flex-start",
                gap: 14, background: INK, color: CREAM,
                padding: "20px 32px",
                fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500,
                letterSpacing: "-0.01em", textDecoration: "none"
              }}>Cuéntanos tu problema <span style={{ fontFamily: "var(--font-mono)" }}>→</span></a>
              <div style={{
                marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11,
                color: `${INK}88`, letterSpacing: "0.1em", textTransform: "uppercase",
                textAlign: isMobile ? "center" : "left"
              }}>Respuesta en menos de 48 h</div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>);

}

// Marquee ribbon between sections
function BRibbon() {
  return (
    <div style={{
      background: INK, color: CREAM,
      padding: "30px 0", borderTop: `1px solid ${INK}`, borderBottom: `1px solid ${INK}`
    }}>
      <Marquee speed={50} gap={60}>
        {["Software pequeño", "·", "Problemas resueltos", "·", "PRL primero", "·",
        "Estudio de producto", "·",
        "Nuevo en el laboratorio →", "·"].map((t, i) =>
        <span key={i} style={{
          fontFamily: "var(--font-display)",
          fontSize: 36, fontWeight: 500, letterSpacing: "-0.02em",
          color: t.startsWith("·") || t.startsWith("Nuevo") ? "var(--color-brand-600)" : CREAM,
          fontStyle: t.startsWith("Software") || t.startsWith("Problemas") ? "italic" : "normal"
        }}>{t}</span>
        )}
      </Marquee>
    </div>);

}

// Manifesto — capítulos numerados con romanos
function BManifesto() {
  const isMobile = useMobile();
  const items = [
  { n: "I", t: "Un problema, una solución.", b: "No vendemos suites. Vendemos la herramienta concreta que resuelve algo concreto. Si necesitas más, hablamos." },
  { n: "II", t: "Lo que sirve, no lo que vende.", b: "Las funciones que no usarás no entran. Cada feature gana su sitio porque alguien la pidió de verdad." },
  { n: "III", t: "Lo usamos antes que tú.", b: "Probamos cada herramienta en operación real antes de cobrarla. Si no nos sirve a nosotros, tampoco a ti." },
  { n: "IV", t: "Nacidos en PRL.", b: "Empezamos en prevención porque es lo que conocemos. El método, sin embargo, sirve para cualquier área operativa." }];

  return (
    <section id="b-0" style={{ background: CREAM, padding: isMobile ? "80px 20px 60px" : "180px 48px 120px", color: INK }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <FadeUp>
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 32 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Capítulo I</span>
            <span style={{ flex: 1, height: 1, background: `${INK}33` }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Filosofía</span>
          </div>
        </FadeUp>

        <FadeUp delay={80}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(48px, 11vw, 184px)",
            fontWeight: 600, lineHeight: 1.08,
            letterSpacing: "-0.025em", color: INK,
            margin: "0 0 20px", maxWidth: 1500, textWrap: "balance"
          }}>
            Lo pequeño <span style={{ fontStyle: "italic", fontWeight: 400 }}>resuelve.</span><br />
            Lo grande <span style={{ fontStyle: "italic", fontWeight: 400, color: `${INK}55` }}>distrae.</span>
          </h2>
        </FadeUp>
        <FadeUp delay={160}>
          <p style={{
            fontFamily: "var(--font-display)", fontSize: isMobile ? 17 : 20, fontWeight: 400,
            lineHeight: 1.5, letterSpacing: "-0.005em", color: `${INK}b3`,
            margin: isMobile ? "24px 0 48px" : "40px 0 100px", maxWidth: 760
          }}>
            Cuatro principios que nos ayudan a decir <em>no</em> más veces que sí.
            Si vas a leer algo de Bouz Labs, que sea esto.
          </p>
        </FadeUp>

        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {items.map((it, i) =>
          <FadeUp key={it.n} delay={i * 60}
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "48px 1fr" : "120px 1fr 1.4fr",
            gap: isMobile ? "16px 20px" : 60, alignItems: "start",
            padding: isMobile ? "32px 0" : "56px 0",
            borderTop: `1px solid ${INK}33`,
            ...(i === items.length - 1 ? { borderBottom: `1px solid ${INK}33` } : {})
          }}>
              <span style={{
              fontFamily: "var(--font-display)",
              fontSize: isMobile ? 40 : 64, fontWeight: 500, lineHeight: 1,
              letterSpacing: "-0.02em",
              color: i === 0 ? "var(--color-brand-600)" : `${INK}55`,
              fontStyle: "italic"
            }}>{it.n}</span>
              <div>
                <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: isMobile ? 22 : "clamp(28px, 3vw, 44px)",
                fontWeight: 600, letterSpacing: "-0.025em",
                lineHeight: 1.05, color: INK, margin: isMobile ? "0 0 10px" : 0
              }}>{it.t}</h3>
                {isMobile && <p style={{
                fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 400,
                lineHeight: 1.55, color: `${INK}aa`, margin: 0
              }}>{it.b}</p>}
              </div>
              {!isMobile && <p style={{
              fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 400,
              lineHeight: 1.55, color: `${INK}aa`, margin: 0
            }}>{it.b}</p>}
            </FadeUp>
          )}
        </div>
      </div>
    </section>);

}

// Pull-quote breaker
function BBreaker() {
  const isMobile = useMobile();
  return (
    <section style={{
      background: CREAM, padding: isMobile ? "60px 20px" : "140px 48px",
      borderTop: `1px solid ${INK}33`, borderBottom: `1px solid ${INK}33`
    }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <FadeUp>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "auto 1fr" : "auto 1fr", gap: isMobile ? 20 : 40, alignItems: "start" }}>
            <span style={{
              fontFamily: "var(--font-display)",
              fontSize: isMobile ? 100 : 200, lineHeight: 0.7, fontWeight: 600,
              color: "var(--color-brand-600)", fontStyle: "italic"
            }}>"</span>
            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(22px, 4vw, 60px)",
              fontWeight: 400, lineHeight: 1.18,
              letterSpacing: "-0.02em",
              color: INK, margin: 0
            }}>
              No queremos ser el SAP de nadie.
              Queremos ser <span style={{ fontWeight: 600 }}>la herramienta que abres
              el lunes a las 8:00</span>, la que no requiere formación, la que cuando
              falta, se nota.
            </p>
          </div>
        </FadeUp>
      </div>
    </section>);

}

// MeteoZen showcase — editorial layout
function BProducto() {
  const isMobile = useMobile();
  return (
    <section id="b-1" style={{ background: CREAM, padding: isMobile ? "80px 20px 60px" : "160px 48px", color: INK }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <FadeUp>
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: isMobile ? 40 : 60 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Capítulo II</span>
            <span style={{ flex: 1, height: 1, background: `${INK}33` }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Producto vivo</span>
          </div>
        </FadeUp>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 48 : 80, alignItems: "start" }}>
          <div>
            <FadeUp delay={60}>
              <div style={{
                display: "inline-block",
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--color-brand-600)",
                border: `1px solid var(--color-brand-600)`,
                padding: "6px 12px", marginBottom: 32
              }}>Producto 01 · en producción</div>
            </FadeUp>
            <FadeUp delay={120}>
              <h2 style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(56px, 8vw, 132px)",
                fontWeight: 600, lineHeight: 1.0,
                letterSpacing: "-0.035em", color: INK,
                margin: "0 0 32px"
              }}>
                Meteo<span style={{ fontWeight: 400, fontStyle: "italic" }}>Zen.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={200}>
              <p style={{
                fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400,
                lineHeight: 1.4, letterSpacing: "-0.005em", color: INK,
                margin: "0 0 28px", maxWidth: 540
              }}>
                Vigilancia meteorológica para empresas y administraciones.
                Conectado a AEMET y MeteoAlarm. Activa tus protocolos antes
                de que la borrasca llegue.
              </p>
            </FadeUp>
            <FadeUp delay={260}>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.7,
                color: `${INK}99`, margin: "0 0 36px", maxWidth: 540
              }}>
                Cumple los Reales Decretos-Ley 4/2023 y 8/2024. Diseñado
                con responsables de PRL — y luego validado en operaciones
                multi-centro reales.
              </p>
            </FadeUp>
            <FadeUp delay={320}>
              <a href="https://meteozen.app" target="_blank" rel="noreferrer" style={{
                display: "inline-flex", alignItems: "center", gap: 14,
                background: INK, color: CREAM, padding: "18px 32px",
                fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500,
                letterSpacing: "-0.005em", textDecoration: "none"
              }}>Visitar meteozen.app <span style={{ fontFamily: "var(--font-mono)" }}>↗</span></a>
            </FadeUp>
          </div>

          <FadeUp delay={180}>
            <BMeteoCard />
          </FadeUp>
        </div>

        {/* Lab strip */}
        <FadeUp delay={400}>
          <div style={{
            marginTop: isMobile ? 48 : 120, padding: isMobile ? "28px 20px" : "44px 40px",
            border: `1px solid ${INK}33`,
            display: "grid", gridTemplateColumns: isMobile ? "1fr" : "auto 1fr auto", gap: isMobile ? 12 : 40, alignItems: "center"
          }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: `${INK}99`
            }}>En el laboratorio</div>
            <p style={{
              fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500,
              letterSpacing: "-0.015em", color: INK, margin: 0
            }}>
              La próxima herramienta ya está en marcha.{" "}
              <span style={{ color: `${INK}88`, fontWeight: 400 }}>Otra vez en PRL.</span>
            </p>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--color-brand-600)", letterSpacing: "0.18em",
              textTransform: "uppercase"
            }}>Próximamente →</span>
          </div>
        </FadeUp>
      </div>
    </section>);

}

function BMeteoCard() {
  return (
    <div style={{
      border: `1px solid ${INK}`, background: "#fff",
      transform: "rotate(-1deg)",
      boxShadow: `12px 12px 0 ${INK}`
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10, padding: "10px 14px",
        borderBottom: `1px solid ${INK}`, background: CREAM
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          {[0, 1, 2].map((i) => <span key={i} style={{ width: 9, height: 9, background: INK, borderRadius: 999 }} />)}
        </div>
        <div style={{ flex: 1, fontFamily: "var(--font-mono)", fontSize: 11, color: `${INK}aa`, padding: "2px 8px" }}>meteozen.app/avisos</div>
      </div>
      <div style={{ padding: 22 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 18 }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600,
            letterSpacing: "-0.01em", color: INK }}>Avisos activos</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: `${INK}99`,
            letterSpacing: "0.1em", textTransform: "uppercase" }}>3 ZONAS · ESPAÑA</div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
          { l: "#DC2626", ink: "#fff", n: "ROJO", phen: "🌊 Costero", t: "Temporal marítimo en costa norte" },
          { l: "#F97316", ink: "#fff", n: "NARANJA", phen: "💨 Viento", t: "Rachas muy fuertes en interior" },
          { l: "#FACC15", ink: "#422006", n: "AMARILLO", phen: "🌧️ Lluvia", t: "Precipitaciones en Cataluña" }].
          map((a, i) =>
          <div key={i} style={{ display: "flex", border: `1px solid ${INK}22`, borderRadius: 8, overflow: "hidden" }}>
              <div style={{ width: 6, background: a.l }} />
              <div style={{ padding: "10px 14px", flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                  <span style={{ background: a.l, color: a.ink, padding: "1px 6px", fontSize: 9, fontWeight: 700, letterSpacing: "0.08em" }}>{a.n}</span>
                  <span style={{ fontSize: 11, color: `${INK}aa` }}>{a.phen}</span>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, color: INK }}>{a.t}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// Founder
function BFundador() {
  const isMobile = useMobile();
  return (
    <section id="b-2" style={{ background: INK, color: CREAM, padding: isMobile ? "80px 20px 60px" : "180px 48px" }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <FadeUp>
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: isMobile ? 40 : 60 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
                letterSpacing: "0.18em", color: MUTED_ON_INK, textTransform: "uppercase" }}>Capítulo III</span>
            <span style={{ flex: 1, height: 1, background: `${CREAM}55` }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
                letterSpacing: "0.18em", color: MUTED_ON_INK, textTransform: "uppercase" }}>El fundador</span>
          </div>
        </FadeUp>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 40 : 100, alignItems: "start" }}>
          <FadeUp delay={120}>
            <div>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(48px, 6vw, 92px)",
                fontWeight: 600, lineHeight: 1.02,
                letterSpacing: "-0.03em", color: CREAM, margin: "0 0 12px"
              }}>Sergio<br /><span style={{ fontStyle: "italic", fontWeight: 400 }}>Fernández.</span></h3>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "0.18em",
                textTransform: "uppercase", marginBottom: 32, color: MUTED_ON_INK
              }}>Fundador · Bouz Labs</div>
              <div style={{
                display: "grid", gridTemplateColumns: "auto 1fr", gap: "12px 24px",
                fontFamily: "var(--font-mono)", fontSize: 13, color: CREAM
              }}>
                <span style={{ color: MUTED_ON_INK }}>Background</span><span style={{ color: MUTED_ON_INK }}>Prevención de riesgos laborales</span>
                <span style={{ color: MUTED_ON_INK }}>Stack</span><span style={{ color: MUTED_ON_INK }}>React · Supabase · Postgres</span>
                <span style={{ color: MUTED_ON_INK }}>Foco</span><span style={{ color: MUTED_ON_INK }}>Producto enfocado, entrega rápida</span>
              </div>
            </div>
          </FadeUp>
          <FadeUp delay={200}>
            <div>
              <p style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(24px, 2.6vw, 38px)",
                fontWeight: 400, lineHeight: 1.3,
                letterSpacing: "-0.02em", color: CREAM,
                margin: "0 0 32px"
              }}>
                Pasé años en prevención de riesgos laborales viendo cómo
                los equipos peleaban con hojas de cálculo y procesos
                manuales que se rompían justo cuando importaban.
              </p>
              <p style={{
                fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400,
                lineHeight: 1.4, letterSpacing: "-0.01em", color: `${CREAM}dd`,
                margin: "0 0 40px"
              }}>
                Bouz Labs nace de esa frustración. Si llegas con un dolor
                operativo concreto, sabré de qué hablas.
              </p>
              <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}>
                <a href="mailto:info@meteozen.app" style={{
                  fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600,
                  color: CREAM, textDecoration: "none",
                  borderBottom: "2px solid var(--color-brand-600)", paddingBottom: 4
                }}>Escríbeme directamente →</a>
                <a href="https://www.linkedin.com/company/meteozen/" target="_blank" rel="noreferrer" style={{
                  fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 500,
                  color: CREAM, textDecoration: "none",
                  borderBottom: `1px solid ${CREAM}66`, paddingBottom: 4
                }}>LinkedIn ↗</a>
              </div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>);

}

// Contact
function BContacto() {
  const isMobile = useMobile();
  return (
    <section id="b-3" style={{ background: CREAM, padding: isMobile ? "80px 20px 60px" : "180px 48px", color: INK }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <FadeUp>
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: isMobile ? 40 : 60 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Capítulo IV</span>
            <span style={{ flex: 1, height: 1, background: `${INK}33` }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              letterSpacing: "0.18em", color: `${INK}99`, textTransform: "uppercase" }}>Contacto</span>
          </div>
        </FadeUp>
        <FadeUp delay={80}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(42px, 8.5vw, 148px)",
            fontWeight: 600, lineHeight: 1.1,
            letterSpacing: "-0.03em", color: INK,
            margin: isMobile ? "0 0 40px" : "0 0 60px", maxWidth: 1500, textWrap: "balance"
          }}>
            ¿Qué te <span style={{ fontStyle: "italic", fontWeight: 400 }}>duele</span><br />
            esta semana?
          </h2>
        </FadeUp>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 60 }}>
          <FadeUp delay={140}>
            <div style={{ paddingTop: 28, borderTop: `1px solid ${INK}` }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: `${INK}88`, marginBottom: 16
              }}>01 · Email directo</div>
              <a href="mailto:info@meteozen.app" style={{
                display: "block",
                fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3.2vw, 48px)",
                fontWeight: 500, letterSpacing: "-0.02em",
                color: INK, textDecoration: "none", marginBottom: 18,
                lineHeight: 1.1
              }}>info@<br /><span style={{ color: "var(--color-brand-600)" }}>meteozen.app
</span></a>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 400,
                lineHeight: 1.55, color: `${INK}99`, margin: 0, maxWidth: 380
              }}>
                Cuéntanos en 3 líneas qué hace tu equipo y dónde se atasca.
                Respondemos en menos de 48 h. Sin formularios largos.
              </p>
            </div>
          </FadeUp>
          <FadeUp delay={220}>
            <div style={{ paddingTop: 28, borderTop: `1px solid ${INK}` }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: `${INK}88`, marginBottom: 16
              }}>02 · 30 minutos</div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3.2vw, 48px)",
                fontWeight: 500, letterSpacing: "-0.02em",
                color: INK, marginBottom: 18, lineHeight: 1.1
              }}>Llamada de descubrimiento.</div>
              <p style={{
                fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 400,
                lineHeight: 1.55, color: `${INK}99`, margin: "0 0 24px", maxWidth: 380
              }}>
                Sin demos guiadas. Solo entender si tu problema encaja con
                lo que hacemos. Si no, te lo decimos sin rodeos.
              </p>
              <a href="mailto:info@meteozen.app" style={{
                display: "inline-flex", alignItems: "center", gap: 12,
                background: INK, color: CREAM, padding: "16px 28px",
                fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500,
                textDecoration: "none"
              }}>Contáctanos <span style={{ fontFamily: "var(--font-mono)" }}>→</span></a>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>);

}

// Footer
function BFooter() {
  const isMobile = useMobile();
  const muted = MUTED_ON_INK;
  return (
    <footer style={{ background: INK, color: CREAM, padding: isMobile ? "32px 20px 24px" : "40px 48px 32px", borderTop: `1px solid ${CREAM}1f` }}>
      <div style={{ maxWidth: 1500, margin: "0 auto",
        display: "flex", flexDirection: isMobile ? "column" : "row",
        alignItems: isMobile ? "flex-start" : "center",
        justifyContent: "space-between",
        gap: isMobile ? 20 : 40, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <BouzPixelLogo color={CREAM} size={20} gap={9} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.18em", textTransform: "uppercase", color: muted }}>
            Estudio de producto · España
          </span>
        </div>
        <nav style={{ display: "flex", gap: 28, flexWrap: "wrap",
          fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500 }}>
          <a href="https://meteozen.app" style={{ color: CREAM, textDecoration: "none" }}>MeteoZen</a>
          <a href="#b-2" style={{ color: CREAM, textDecoration: "none" }}>Fundador</a>
          <a href="mailto:info@meteozen.app" style={{ color: CREAM, textDecoration: "none" }}>info@meteozen.app</a>
          <a href="https://www.linkedin.com/company/meteozen/" style={{ color: CREAM, textDecoration: "none" }}>LinkedIn</a>
        </nav>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.14em", textTransform: "uppercase", color: muted }}>
          © 2026 Bouz SFG Labs S.L.
        </span>
      </div>
    </footer>);

}

const COOKIE_KEY = "bouz_cookie_consent";

function BCookieBanner() {
  const [visible, setVisible] = useState(() => !localStorage.getItem(COOKIE_KEY));
  const [expanded, setExpanded] = useState(false);
  const isMobile = useMobile();

  if (!visible) return null;

  const accept = (level) => {
    localStorage.setItem(COOKIE_KEY, level);
    setVisible(false);
  };

  return (
    <div style={{
      position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 1000,
      background: INK, color: CREAM,
      borderTop: `1px solid ${CREAM}22`,
    }}>
      <div style={{
        maxWidth: 1500, margin: "0 auto",
        padding: isMobile ? "20px 20px" : "28px 48px",
      }}>
        {/* Main row */}
        <div style={{
          display: "flex", flexDirection: isMobile ? "column" : "row",
          alignItems: isMobile ? "stretch" : "center",
          gap: isMobile ? 16 : 40,
        }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 14, marginBottom: 6,
            }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: MUTED_ON_INK,
              }}>Cookies</span>
              <span style={{
                flex: 1, height: 1, background: `${CREAM}22`,
              }} />
            </div>
            <p style={{
              fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 400,
              lineHeight: 1.5, letterSpacing: "-0.005em",
              color: `${CREAM}cc`, margin: 0, maxWidth: 680,
            }}>
              Usamos cookies propias esenciales para que el sitio funcione.
              No tenemos analítica ni publicidad.{" "}
              <button onClick={() => setExpanded(x => !x)} style={{
                background: "none", border: "none", padding: 0, cursor: "pointer",
                fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500,
                color: "var(--color-brand-600)", textDecoration: "underline",
                letterSpacing: "-0.005em",
              }}>
                {expanded ? "Ocultar detalle" : "Más información"}
              </button>
            </p>
          </div>

          <div style={{
            display: "flex", flexDirection: isMobile ? "column" : "row",
            gap: 12, flexShrink: 0,
          }}>
            <button onClick={() => accept("essential")} style={{
              appearance: "none", border: `1px solid ${CREAM}44`,
              background: "transparent", color: CREAM,
              padding: "12px 24px", cursor: "pointer",
              fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 500,
              letterSpacing: "-0.005em",
            }}>
              Solo necesarias
            </button>
            <button onClick={() => accept("all")} style={{
              appearance: "none", border: "none",
              background: CREAM, color: INK,
              padding: "12px 24px", cursor: "pointer",
              fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600,
              letterSpacing: "-0.005em",
            }}>
              Aceptar todo
            </button>
          </div>
        </div>

        {/* Expandable detail */}
        {expanded && (
          <div style={{
            marginTop: 24, paddingTop: 24,
            borderTop: `1px solid ${CREAM}22`,
            display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 20,
          }}>
            {[
              { name: "Esenciales", desc: "Necesarias para que el sitio funcione. No pueden desactivarse.", always: true },
              { name: "Preferencias", desc: "Recuerdan tus ajustes (como el idioma). Solo en local.", always: false },
              { name: "Analítica", desc: "Actualmente no usamos ninguna herramienta de analítica.", always: false },
              { name: "Marketing", desc: "No mostramos publicidad ni usamos cookies de seguimiento.", always: false },
            ].map(c => (
              <div key={c.name} style={{
                padding: "14px 16px",
                border: `1px solid ${CREAM}18`,
              }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  marginBottom: 6,
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    letterSpacing: "0.12em", textTransform: "uppercase",
                    color: CREAM,
                  }}>{c.name}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    letterSpacing: "0.1em", textTransform: "uppercase",
                    color: c.always ? "var(--color-brand-600)" : MUTED_ON_INK,
                  }}>{c.always ? "Siempre activas" : "Inactivas"}</span>
                </div>
                <p style={{
                  fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 400,
                  lineHeight: 1.5, color: MUTED_ON_INK, margin: 0,
                }}>{c.desc}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function DirectionB() {
  return (
    <div data-screen-label="Direction B · Editorial Studio">
      <BNav />
      <BHero />
      <BManifesto />
      <BBreaker />
      <BProducto />
      <BFundador />
      <BContacto />
      <BFooter />
      <BCookieBanner />
    </div>);

}

Object.assign(window, { DirectionB });