/* Landing page for obsidia.mx — company / family */

const Landing = () => {
  const Vert = ({ k }) => {
    const v = VERTICALS[k];
    return (
      <div style={{
        background: "#fff",
        border: `1px solid ${OBSIDIA.line}`,
        borderRadius: 18,
        padding: 28,
        display: "flex", flexDirection: "column", gap: 18,
        position: "relative", overflow: "hidden",
        minHeight: 260,
      }}>
        <div style={{ position: "absolute", top: -50, right: -50, width: 160, height: 160, borderRadius: "50%", background: v.accent, opacity: 0.07 }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: `${v.accent}14`, display: "grid", placeItems: "center", color: v.accent }}>
            <VerticalGlyph kind={v.glyph} size={22} color={v.accent} />
          </div>
          <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>
            {k === "wig" ? "BETA" : k === "bake" ? "PRÓXIMO" : "PLANEADO"}
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 24, letterSpacing: "-0.02em", color: OBSIDIA.ink }}>silix</span>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 16, color: v.accent, fontWeight: 500 }}>.{v.name.toLowerCase()}</span>
          </div>
          <div style={{ fontSize: 13, color: OBSIDIA.mute, lineHeight: 1.5, marginTop: 10 }}>{v.tagline}</div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: `1px solid ${OBSIDIA.line}` }}>
          <span style={{ fontSize: 12, color: OBSIDIA.ink, fontWeight: 500 }}>Conocer →</span>
          <span style={{ fontSize: 11, color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>0{Object.keys(VERTICALS).indexOf(k) + 1}</span>
        </div>
      </div>
    );
  };

  return (
    <div style={{ width: 1440, background: OBSIDIA.surface, fontFamily: "'Inter', system-ui, sans-serif", color: OBSIDIA.ink }}>

      {/* HERO */}
      <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, padding: "32px 64px 96px", position: "relative", overflow: "hidden" }}>
        {/* faceted decoration */}
        <svg viewBox="0 0 1440 800" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }}>
          <g transform="translate(1180 380)" opacity="0.5">
            <path d="M0 -340 L290 0 L0 380 L-290 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="1" opacity="0.3" />
            <path d="M0 -340 L0 380 M-290 0 L290 0" stroke={OBSIDIA.gold} strokeWidth="0.6" opacity="0.2" />
            <path d="M0 -340 L150 0 L0 380 L-150 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="0.8" opacity="0.25" />
            <path d="M0 -340 L75 0 L0 380 L-75 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="0.6" opacity="0.15" />
            <path d="M0 -340 L290 0 L0 0 Z" fill={OBSIDIA.gold} opacity="0.04" />
          </g>
        </svg>

        {/* nav */}
        <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }}>
          <ObsidiaLockup size={22} color={OBSIDIA.surface} />
          <div style={{ display: "flex", gap: 36, fontSize: 13, color: "rgba(247,244,239,0.75)" }}>
            <span>Productos</span>
            <span>Manifiesto</span>
            <span>Precios</span>
            <span>Historias</span>
            <span>Soporte</span>
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <span style={{ fontSize: 13, color: "rgba(247,244,239,0.7)" }}>Iniciar sesión</span>
            <button style={{ background: OBSIDIA.gold, color: OBSIDIA.carbon, border: "none", padding: "10px 18px", borderRadius: 999, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
              Empieza gratis
            </button>
          </div>
        </nav>

        <div style={{ maxWidth: 920, marginTop: 96, position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 32 }}>
            <div style={{ height: 1, width: 48, background: OBSIDIA.gold }} />
            <span style={{ fontSize: 12, letterSpacing: "0.4em", textTransform: "uppercase", color: OBSIDIA.gold }}>Forjado para tu negocio</span>
          </div>
          <h1 style={{
            fontFamily: "'Fraunces', serif",
            fontWeight: 300,
            fontSize: 124,
            lineHeight: 0.95,
            letterSpacing: "-0.04em",
            margin: 0,
          }}>
            Una piedra,<br />
            <em style={{ fontStyle: "italic", fontWeight: 400, color: OBSIDIA.gold }}>cinco filos.</em>
          </h1>
          <p style={{ fontSize: 22, lineHeight: 1.5, color: "rgba(247,244,239,0.72)", maxWidth: 620, marginTop: 32 }}>
            Obsidia es la plataforma operativa para negocios independientes. Cotiza, da seguimiento, cobra y comparte por WhatsApp — desde tu celular, sin descargar nada.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 40, alignItems: "center" }}>
            <button style={{ background: OBSIDIA.gold, color: OBSIDIA.carbon, border: "none", padding: "16px 28px", borderRadius: 999, fontSize: 14, fontWeight: 600, cursor: "pointer", letterSpacing: "0.01em" }}>
              Empieza gratis →
            </button>
            <button style={{ background: "transparent", color: OBSIDIA.surface, border: "1px solid rgba(247,244,239,0.2)", padding: "16px 28px", borderRadius: 999, fontSize: 14, cursor: "pointer" }}>
              Ver demo · 2 min
            </button>
          </div>
        </div>

        {/* stats strip */}
        <div style={{ marginTop: 96, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, paddingTop: 32, borderTop: "1px solid rgba(247,244,239,0.1)" }}>
          {[
            ["5", "verticales especializados"],
            ["30s", "cotización a PDF profesional"],
            ["0", "apps que descargar"],
            ["100%", "operable desde WhatsApp"],
          ].map(([n, l], i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 56, lineHeight: 1, color: OBSIDIA.gold, letterSpacing: "-0.03em" }}>{n}</div>
              <div style={{ fontSize: 12, color: "rgba(247,244,239,0.6)", letterSpacing: "0.05em" }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* PRODUCTS */}
      <div style={{ padding: "120px 64px", background: OBSIDIA.surface }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 12 }}>La familia</div>
            <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 76, fontWeight: 300, margin: 0, letterSpacing: "-0.03em", lineHeight: 1 }}>
              Un producto.<br />
              <em style={{ fontWeight: 400 }}>Cinco industrias.</em>
            </h2>
          </div>
          <p style={{ maxWidth: 360, color: OBSIDIA.mute, fontSize: 15, lineHeight: 1.6 }}>
            Cada negocio recibe una experiencia hecha-a-medida para su giro. El 70% del producto se comparte; lo que cambia: módulos, campos, color y voz.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {Object.keys(VERTICALS).map((k) => <Vert key={k} k={k} />)}
        </div>
      </div>

      {/* HOW IT WORKS — typographic strip */}
      <div style={{ padding: "100px 64px", background: OBSIDIA.paper, borderTop: `1px solid ${OBSIDIA.line}`, borderBottom: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 32 }}>Lo que reemplaza</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          {[
            ["Antes", [
              "Cotizaciones en notas de WhatsApp que se pierden",
              "Seguimiento en libretas o Excel",
              "“¿Ya me depositaste?” — cobranza manual",
              "Fotos de avance revueltas en el carrete",
              "Catálogo en posts sin precios claros",
            ], OBSIDIA.mute],
            ["Con Obsidia", [
              "Cotización profesional en PDF en 30 segundos",
              "Timeline visual del pedido con fotos",
              "Pagos registrados con saldo automático",
              "El cliente sigue su pedido por link sin app",
              "Catálogo compartible con botón de WhatsApp",
            ], OBSIDIA.ink],
          ].map(([title, items, color], i) => (
            <div key={i}>
              <h3 style={{ fontFamily: "'Fraunces', serif", fontSize: 28, fontWeight: 400, margin: 0, color, letterSpacing: "-0.02em" }}>{title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
                {items.map((it, j) => (
                  <li key={j} style={{ display: "flex", gap: 14, alignItems: "flex-start", color, fontSize: 16, lineHeight: 1.5 }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: i === 1 ? OBSIDIA.gold : OBSIDIA.mute, marginTop: 5, minWidth: 20 }}>{String(j + 1).padStart(2, "0")}</span>
                    <span style={{ opacity: i === 0 ? 0.7 : 1 }}>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* PRICING */}
      <div style={{ padding: "120px 64px", background: OBSIDIA.surface }}>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 12 }}>Precios</div>
          <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 64, fontWeight: 300, margin: 0, letterSpacing: "-0.03em" }}>
            Empieza gratis. <em style={{ fontWeight: 400 }}>Crece cuando estés listo.</em>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { name: "Free", price: "$0", sub: "MXN / mes", desc: "Para probar la herramienta", feats: ["5 clientes", "10 cotizaciones", "1 usuario", "Sin PDF profesional"], dark: false },
            { name: "Pro", price: "$299", sub: "MXN / mes", desc: "Para negocios en operación", feats: ["Clientes ilimitados", "Cotizaciones ilimitadas", "PDF con tu branding", "WhatsApp + Catálogo + Notificaciones"], dark: true, featured: true },
            { name: "Enterprise", price: "$599", sub: "MXN / mes", desc: "Para equipos y multi-usuario", feats: ["Todo de Pro", "Múltiples usuarios + roles", "Reportes avanzados", "Soporte prioritario · API"], dark: false },
          ].map((p, i) => (
            <div key={i} style={{
              background: p.dark ? OBSIDIA.carbon : "#fff",
              color: p.dark ? OBSIDIA.surface : OBSIDIA.ink,
              border: p.dark ? "1px solid #1d1d20" : `1px solid ${OBSIDIA.line}`,
              borderRadius: 20,
              padding: 36,
              display: "flex", flexDirection: "column", gap: 24,
              position: "relative",
              minHeight: 460,
            }}>
              {p.featured && (
                <div style={{ position: "absolute", top: 24, right: 24, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: OBSIDIA.gold, padding: "4px 10px", border: `1px solid ${OBSIDIA.gold}`, borderRadius: 999 }}>
                  Más popular
                </div>
              )}
              <div>
                <div style={{ fontFamily: "'Fraunces', serif", fontSize: 28, fontWeight: 400, letterSpacing: "-0.02em" }}>{p.name}</div>
                <div style={{ fontSize: 13, opacity: 0.6, marginTop: 4 }}>{p.desc}</div>
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: "'Fraunces', serif", fontSize: 64, fontWeight: 400, letterSpacing: "-0.04em" }}>{p.price}</span>
                <span style={{ fontSize: 12, opacity: 0.6 }}>{p.sub}</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                {p.feats.map((f, j) => (
                  <li key={j} style={{ fontSize: 14, display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <span style={{ color: p.featured ? OBSIDIA.gold : (p.dark ? OBSIDIA.gold : OBSIDIA.ink), marginTop: 6, fontSize: 8 }}>◆</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button style={{
                background: p.featured ? OBSIDIA.gold : (p.dark ? OBSIDIA.surface : OBSIDIA.carbon),
                color: p.featured ? OBSIDIA.carbon : (p.dark ? OBSIDIA.carbon : OBSIDIA.surface),
                border: "none", padding: "14px 20px", borderRadius: 999,
                fontSize: 13, fontWeight: 600, cursor: "pointer",
              }}>
                Empezar
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* FOOTER */}
      <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, padding: "64px 64px 36px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <ObsidiaLockup size={24} color={OBSIDIA.surface} />
            <p style={{ fontSize: 13, color: "rgba(247,244,239,0.55)", marginTop: 16, lineHeight: 1.6, maxWidth: 320 }}>
              Forjado para los negocios independientes que merecen las herramientas de los grandes.
            </p>
          </div>
          {[
            ["Producto", ["Wig", "Bake", "Trade", "Lens", "Ink"]],
            ["Empresa", ["Manifiesto", "Equipo", "Prensa", "Contacto"]],
            ["Legal", ["Privacidad", "Términos", "LFPDPPP", "Cookies"]],
          ].map(([t, items], i) => (
            <div key={i}>
              <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.gold, marginBottom: 16 }}>{t}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map(it => <li key={it} style={{ fontSize: 13, color: "rgba(247,244,239,0.7)" }}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "1px solid rgba(247,244,239,0.08)", fontSize: 11, color: "rgba(247,244,239,0.4)", letterSpacing: "0.05em" }}>
          <span>© 2026 obsidia. forjado en méxico.</span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>obsidia.mx</span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Landing });