/* global React, useApp, Foto, SectionHead, Flourish, ProductCard, PapelPicado,
   MOTIFS, SolAzteca, CraneoVela, LunaMotif, RosaMotif, ManoMotif, GlyphDiamond, Star4, planchetteSvg,
   IconArrow, IconChevron, PRODUCTS, CATEGORIES, fmt */
const { createElement: c, useRef, useState: useStateHome } = React;

/* ---- texto en arco (parábola) ---- */
function ArcText({ text, spacing = 52, curve = 0.00072, tilt = 0.085, size = 30, color = "var(--gold-claro)" }) {
  const chars = [...text];
  const n = chars.length;
  const maxX = (n - 1) / 2 * spacing;
  const maxY = curve * maxX * maxX;
  return c("div", { className: "arc", style: { height: maxY + size + 10, width: "100%" } },
    chars.map((ch, i) => {
      const x = (i - (n - 1) / 2) * spacing;
      const y = curve * x * x;
      const rot = x * tilt;
      return c("span", { key: i, style: { left: `calc(50% + ${x}px)`, top: y, bottom: "auto", fontSize: size, color, transform: `translateX(-50%) rotate(${rot}deg)` } }, ch);
    }));
}

function Sparkle({ top, left, size = 14, o = .8 }) {
  return c(Star4, { size, style: { position: "absolute", top, left, color: "var(--gold-claro)", opacity: o } });
}

/* ============ HERO OUIJA (video de fondo + lockup del logo) ============ */
function OuijaHero() {
  const { navigate } = useApp();
  return c("section", { className: "ouija hero-video", style: { position: "relative", display: "flex", flexDirection: "column", overflow: "hidden" } },
    /* video de fondo */
    c("video", { className: "hero-bg", src: "hero%20mp4.mp4", poster: "scraps/01-v2-mid.png", autoPlay: true, muted: true, loop: true, playsInline: true, preload: "auto", "aria-hidden": "true" }),
    c("div", { className: "hero-scrim" }),

    /* lockup del logo, centrado */
    c("div", { className: "rise", style: { position: "relative", zIndex: 3, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "24px" } },
      c("div", { className: "hero-lockup" },
        c("div", { className: "hero-logo-wrap", style: { position: "relative", display: "inline-block", margin: "0 auto" } },
          c("div", { className: "hero-logo-glow", "aria-hidden": "true", style: { position: "absolute", inset: "-22% -14%", background: "radial-gradient(ellipse at center, rgba(150,80,34,.62), rgba(120,62,26,.24) 45%, transparent 72%)", filter: "blur(28px)", zIndex: 0, pointerEvents: "none" } }),
          c("img", { src: "logo-mictlan.png", alt: "MICTLÁN", className: "hero-logo-img", style: { position: "relative", zIndex: 1, width: "min(640px,82vw)", height: "auto", display: "block", filter: "drop-shadow(0 8px 26px rgba(0,0,0,.6))" } })),
        c(Flourish, { mt: 8 }),
        c("div", { style: { fontFamily: "var(--font-display)", fontSize: "clamp(12px,1.4vw,18px)", letterSpacing: ".42em", color: "var(--gold-claro)", marginTop: 10 } }, "ENTRE LA VIDA Y LA MUERTE"))
    )
  );
}

/* ============ CATEGORÍAS ============ */
function CategoriesRow() {
  const { navigate } = useApp();
  const tile = (cat, i) => c("div", { key: i, className: "cat-item", onClick: () => navigate("catalog", { cat: cat.id }) },
    c("div", { className: "card", style: { padding: 0 } }, c(Foto, { motif: cat.motif, color: cat.color, src: cat.img, hint: "", style: { height: 178 } })),
    c("div", { className: "display", style: { fontSize: 15, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--cream)", marginTop: 14 } }, cat.name),
    c("div", { style: { fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--gold)", marginTop: 6, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 } }, "Ver más", c(IconArrow, { size: 12 })));
  return c("section", { className: "foliage", style: { background: "transparent", padding: "60px 0 64px" } },
    c("div", { className: "wrap", style: { position: "relative", zIndex: 2 } },
      c(SectionHead, null, "Categorías"),
      c("div", { className: "cat-marquee" },
        c("div", { className: "cat-track" },
          CATEGORIES.concat(CATEGORIES).map((cat, i) => tile(cat, i))))));
}

/* ============ OCASIONES — "La oscuridad no tiene temporada" ============ */
const OCASIONES = [
  { title: "San Valengoth",     img: "img/prod-corazon-delator.jpg", to: ["catalog", {}] },
  { title: "Día de las Madres", img: "img/cat-arreglos.jpg",         to: ["catalog", {}] },
  { title: "Día del Padre",     img: "img/prod-playera-impresa.jpg", to: ["catalog", {}] },
  { title: "Día de Muertos",    img: "img/prod-vela-craneo.jpg",     to: ["catalog", {}] },
  { title: "Cumpleaños",        img: "img/prod-taza-caldero.jpg",    to: ["catalog", {}] },
  { title: "Navidark",          img: "img/cat-navidark.jpg",         to: ["catalog", { cat: "navidark" }] }
];

function OcasionCard({ o, onClick }) {
  return c("article", { className: "card", style: { cursor: "pointer", display: "flex", flexDirection: "column" }, onClick },
    c("div", { style: { position: "relative", height: 262 } },
      c(Foto, { src: o.img, hint: o.title, style: { height: "100%" } })),
    c("div", { style: { padding: "18px 16px 18px", textAlign: "center", display: "flex", flexDirection: "column", gap: 14, flex: 1 } },
      c("h3", { className: "serif", style: { fontSize: 21, fontWeight: 600, margin: 0, lineHeight: 1.15, color: "var(--cream)", flex: 1 } }, o.title),
      c("button", { className: "btn btn-wine btn-full", style: { marginTop: 4, fontSize: 11.5, padding: "13px 0" }, onClick },
        "Ver más", c(IconChevron, { size: 14, style: { transform: "rotate(-90deg)" } }))));
}

function Ocasiones() {
  const ref = useRef(null);
  const { navigate } = useApp();
  const scroll = (d) => { if (ref.current) ref.current.scrollBy({ left: d * 320, behavior: "smooth" }); };
  return c("section", { style: { background: "transparent", padding: "58px 0 70px", position: "relative" } },
    c("div", { className: "wrap", style: { textAlign: "center" } },
      c(SectionHead, null, "La oscuridad no tiene temporada"),
      c("p", { className: "serif", style: { fontSize: "clamp(20px,2.4vw,26px)", color: "var(--cream-soft)", margin: "16px 0 0", fontStyle: "italic" } }, "Descubre piezas para cada época del año")),
    c("div", { style: { position: "relative", marginTop: 36 } },
      c("button", { className: "carousel-arrow", onClick: () => scroll(-1), style: { ...ARROW, left: 14 } }, c(IconChevron, { size: 22, style: { transform: "rotate(90deg)" } })),
      c("button", { className: "carousel-arrow", onClick: () => scroll(1), style: { ...ARROW, right: 14 } }, c(IconChevron, { size: 22, style: { transform: "rotate(-90deg)" } })),
      c("div", { ref, style: { display: "flex", gap: 22, justifyContent: "safe center", overflowX: "auto", padding: "4px 52px 16px", scrollbarWidth: "none", scrollSnapType: "x mandatory" } },
        OCASIONES.map((o, i) => c("div", { key: i, style: { flex: "0 0 262px", scrollSnapAlign: "start" } }, c(OcasionCard, { o, onClick: () => navigate(o.to[0], o.to[1] || {}) }))))));
}
const ARROW = { position: "absolute", top: "40%", zIndex: 5, width: 46, height: 46, borderRadius: "50%", background: "var(--green)", color: "var(--gold-claro)", border: "1px solid var(--gold-deep)", display: "grid", placeItems: "center", boxShadow: "var(--shadow-card)" };

/* ============ MANIFIESTO ============ */
function Manifesto() {
  return c("section", { className: "manifesto foliage", style: { padding: "84px 0 88px", position: "relative", overflow: "hidden", borderTop: "1px solid rgba(176,134,66,.8)", borderBottom: "1px solid rgba(176,134,66,.8)" } },
    c("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(0,0,0,.74)", zIndex: 0 } }),
    c("img", { src: "img/sol-fade.png", alt: "", "aria-hidden": "true", className: "manif-sol", style: { position: "absolute", left: "-3%", top: "50%", transform: "translateY(-50%)", height: "132%", width: "auto", opacity: .5, zIndex: 1, pointerEvents: "none" } }),
    c("img", { src: "img/luna-fade.png", alt: "", "aria-hidden": "true", className: "manif-luna", style: { position: "absolute", right: "-3%", top: "50%", transform: "translateY(-50%)", height: "132%", width: "auto", opacity: .5, zIndex: 1, pointerEvents: "none" } }),
    c("div", { className: "wrap manifesto-grid", style: { position: "relative", zIndex: 2, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 50, alignItems: "center" } },
      c("div", null,
        c("h2", { style: { fontFamily: "var(--font-gothic)", fontWeight: 400, fontSize: "clamp(40px,5vw,68px)", margin: 0, lineHeight: 1.08, letterSpacing: ".01em", color: "var(--cream)" } }, "No es moda."),
        c("h2", { style: { fontFamily: "var(--font-gothic)", fontWeight: 400, fontSize: "clamp(40px,5vw,68px)", margin: "6px 0 0", lineHeight: 1.08, letterSpacing: ".01em", color: "var(--cream)" } }, "Es una forma de ", c("span", { style: { fontFamily: "var(--font-gothic)", color: "#c0332b", textShadow: "0 0 16px rgba(176,38,32,.45)" } }, "existir."))),
      c("div", null,
        c("p", { className: "serif", style: { fontSize: 21, lineHeight: 1.6, color: "var(--cream-soft)", margin: 0 } }, "Nuestra tienda nace para quienes no buscan encajar, sino expresar su sombra con elegancia, carácter y estilo propio."))));
}

/* ============ NUESTRA HISTORIA ============ */
function Historia() {
  return c("section", { className: "foliage", style: { background: "transparent", padding: "70px 0 76px", position: "relative" } },
    c("div", { className: "wrap", style: { position: "relative", zIndex: 2 } },
      c(SectionHead, null, "Nuestra historia"),
      c("div", { style: { maxWidth: 840, margin: "30px auto 0", textAlign: "center", background: "linear-gradient(180deg, rgba(10,18,12,.7), rgba(7,12,9,.82))", border: "1px solid rgba(176,134,66,.42)", borderRadius: 12, padding: "clamp(34px,5vw,54px) clamp(26px,6vw,62px)", boxShadow: "0 24px 60px -26px rgba(0,0,0,.85)" } },
        c("p", { className: "serif", style: { fontSize: "clamp(20px,2.2vw,26px)", lineHeight: 1.5, color: "var(--cream)", margin: 0, fontStyle: "italic" } }, "Mictlán nació entre veladoras y noches largas, del deseo de crear objetos que abracen lo oscuro sin miedo — donde lo gótico, lo oculto y lo eterno conviven con elegancia."),
        c(Flourish, { mt: 20 }),
        c("p", { className: "serif", style: { fontSize: 18, lineHeight: 1.62, color: "var(--cream-soft)", margin: "20px 0 0" } }, "Cada pieza se elige y empaca a mano en México, pensada para quienes habitan la frontera entre la vida y la muerte y hacen de su sombra un estilo."),
        c("p", { className: "serif", style: { fontSize: 18, lineHeight: 1.62, color: "var(--cream-soft)", margin: "14px 0 0" } }, "No vendemos productos: ofrecemos amuletos para quienes caminan su propio sendero."))));
}

function HomePage() {
  return c("div", null,
    c(OuijaHero, null),
    c(AnnouncementBar, null),
    c(CategoriesRow, null),
    c(Historia, null),
    c(Ocasiones, null),
    c(Manifesto, null));
}

Object.assign(window, { HomePage });