// HOME — Artesanías Chepe

const Home = ({ onNav, onProduct, onAddCart }) => {
  // Featured: priorizar piezas marcadas "Más vendido", luego rellenar
  const bestsellers = window.PRODUCTS.filter(p => p.badge === "Más vendido");
  const rest = window.PRODUCTS.filter(p => p.badge !== "Más vendido");
  const featured = [...bestsellers, ...rest].slice(0, 6);
  // Rail "Recién tejido": piezas nuevas (las que no estaban en el catálogo original)
  const popular = window.PRODUCTS.slice(-8);

  return (
    <div className="page" data-screen-label="01 Home">
      {/* ===== HERO ===== */}
      <section style={{ paddingBottom: 28 }}>
        <div style={{ padding: "8px 20px 0" }}>
          <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--clay)" }}></span>
            Taller en Mérida · Yucatán
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", padding: "0 20px", marginTop: 4, marginBottom: -8 }}>
          <window.Mark size={68} color="var(--clay)" strokeWidth={3.4} variant="henequen" />
        </div>

        <h1 className="display" style={{
          fontSize: "clamp(56px, 16vw, 92px)",
          margin: "10px 20px 0",
          letterSpacing: "-0.02em",
        }}>
          Tejido a<br />
          <span className="italic" style={{ color: "var(--clay)" }}>mano</span>,<br />
          desde 1978.
        </h1>

        <p style={{
          fontSize: 16, color: "var(--ink-80)", lineHeight: 1.5,
          padding: "20px 20px 0", maxWidth: 360,
        }}>
          Mimbre, ratán y palma trabajados por familias artesanas yucatecas.
          Piezas para casa, jardín y proyectos comerciales.
        </p>

        <div style={{ display: "flex", gap: 10, padding: "22px 20px 0" }}>
          <button className="btn btn-primary" onClick={() => onNav("catalog")}>
            Ver catálogo <Icon name="arrow" size={16} />
          </button>
          <button className="btn btn-ghost" onClick={() => onNav("projects")}>
            Proyectos
          </button>
        </div>

        {/* Hero image */}
        <div style={{ padding: "28px 20px 0" }}>
          <div className="ph ph-warm" style={{
            aspectRatio: "4/5", borderRadius: 18, position: "relative",
          }}>
            <span style={{ position: "absolute", bottom: 14, left: 16 }}>Foto principal — taller / pieza señalada</span>
            <span style={{
              position: "absolute", top: 14, right: 14,
              background: "var(--bone)", color: "var(--ink)",
              padding: "6px 10px", borderRadius: 999,
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
            }}>3 generaciones</span>
          </div>
        </div>
      </section>

      {/* ===== Marquee ===== */}
      <Marquee items={[
        "Hecho a mano", "Envíos a todo México", "Mayoreo y proyectos", "Garantía 5 años en estructura",
      ]} />

      {/* ===== Categorías ===== */}
      <section className="container" style={{ paddingTop: 48, paddingBottom: 12 }}>
        <SectionHead
          eyebrow="Catálogo"
          title="Explora por categoría"
          action="Ver todo" onAction={() => onNav("catalog")}
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {window.CATEGORIES.map((c, i) => (
            <button key={c.id}
              onClick={() => onNav("catalog", { cat: c.id })}
              className="fade-up"
              style={{
                textAlign: "left",
                background: i % 3 === 0 ? "var(--ink)" : "var(--paper)",
                color: i % 3 === 0 ? "var(--bone)" : "var(--ink)",
                borderRadius: 16,
                padding: 16,
                minHeight: 140,
                display: "flex", flexDirection: "column", justifyContent: "space-between",
                gridColumn: i === 0 ? "1 / -1" : "auto",
                animationDelay: (i * 60) + "ms",
              }}>
              <div className={"ph " + (i === 0 ? "ph-warm" : (i % 2 ? "ph-dark" : "ph"))}
                style={{ height: i === 0 ? 120 : 80, borderRadius: 10, marginBottom: 10, fontSize: 8 }}>{c.name}</div>
              <div>
                <div className="serif" style={{ fontSize: i === 0 ? 26 : 20, lineHeight: 1.1 }}>{c.name}</div>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.65, marginTop: 4 }}>{c.sub}</div>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* ===== Featured grid ===== */}
      <section style={{ background: "var(--cream)", paddingTop: 56 }}>
      <div className="container">
        <SectionHead
          eyebrow="Destacados"
          title="Lo más pedido"
          action="Ver todo" onAction={() => onNav("catalog")}
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px 14px" }}>
          {featured.map((p, i) => (
            <ProductCard key={p.id} product={p} onClick={onProduct} onAdd={(p, e) => onAddCart(p, e)} />
          ))}
        </div>
      </div>
      </section>

      {/* ===== Historia teaser ===== */}
      <section style={{ marginTop: 64, background: "var(--ink)", color: "var(--bone)", padding: "56px 24px" }}>
        <div className="eyebrow" style={{ color: "color-mix(in srgb, var(--bone) 55%, transparent)", marginBottom: 12 }}>Sobre Chepe</div>
        <h2 className="display" style={{ fontSize: 44, margin: 0 }}>
          De <span className="italic" style={{ color: "var(--clay)" }}>Don Chepe</span> a la mesa de tu casa.
        </h2>
        <p style={{ marginTop: 20, color: "color-mix(in srgb, var(--bone) 80%, transparent)", fontSize: 15, lineHeight: 1.6 }}>
          En 1978, José "Chepe" Canul abrió un pequeño taller en el barrio de Santiago para tejer canastas y sillas.
          Hoy somos tres generaciones tejiendo con las mismas manos y la misma paciencia.
        </p>
        <button onClick={() => onNav("about")}
          className="btn btn-clay" style={{ marginTop: 24 }}>
          Conoce la historia <Icon name="arrow" size={16} />
        </button>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginTop: 40 }}>
          {[
            { n: "47", l: "Años de oficio" },
            { n: "18", l: "Familias artesanas" },
            { n: "210", l: "Proyectos entregados" },
          ].map((s, i) => (
            <div key={i} style={{ borderTop: "1px solid color-mix(in srgb, var(--bone) 20%, transparent)", paddingTop: 14 }}>
              <div className="display italic" style={{ fontSize: 36 }}>{s.n}</div>
              <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.7, marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ===== Popular rail ===== */}
      <section style={{ paddingTop: 56, background: "var(--cream)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Nuevo en taller"
            title="Recién tejido"
          />
        </div>
        <div className="rail" style={{ padding: "0 20px 8px" }}>
          {popular.map((p) => (
            <div key={p.id} style={{ width: 200 }}>
              <ProductCard product={p} onClick={onProduct} onAdd={(p, e) => onAddCart(p, e)} compact />
            </div>
          ))}
          <div style={{ width: 4 }}></div>
        </div>
      </section>

      {/* ===== Proyectos teaser ===== */}
      <section className="container" style={{ paddingTop: 64 }}>
        <SectionHead
          eyebrow="Proyectos comerciales"
          title="Hoteles, restaurantes y casas"
          action="Ver proyectos" onAction={() => onNav("projects")}
        />
        <div className="rail">
          {window.PROJECTS.slice(0, 3).map((pr, i) => (
            <button key={pr.id} onClick={() => onNav("projects")} style={{
              width: 280, textAlign: "left",
            }}>
              <div className={"ph " + pr.placeholderClass} style={{
                aspectRatio: "4/5", borderRadius: 14, marginBottom: 12, fontSize: 9,
              }}>
                <span style={{ position: "absolute", bottom: 14, left: 14 }}>{pr.title}</span>
              </div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-60)" }}>{pr.year} · {pr.place}</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>{pr.title}</div>
            </button>
          ))}
        </div>
      </section>

      {/* ===== Testimonials ===== */}
      <section style={{ background: "var(--cream)", paddingTop: 64 }}>
      <div className="container">
        <SectionHead eyebrow="Lo que dicen" title="Voces" />
        <div className="stack-4">
          {window.TESTIMONIALS.map((t, i) => (
            <div key={i} className="card hair" style={{ padding: 20 }}>
              <div style={{ display: "flex", gap: 4, color: "var(--clay)", marginBottom: 10 }}>
                {[...Array(5)].map((_, k) => <Icon key={k} name="star" size={14} stroke={1.8} />)}
              </div>
              <p className="serif italic" style={{ fontSize: 20, margin: 0, lineHeight: 1.35 }}>"{t.text}"</p>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)", marginTop: 12 }}>
                {t.name} · {t.place}
              </div>
            </div>
          ))}
        </div>
      </div>
      </section>

      {/* ===== Mayoreo CTA ===== */}
      <section className="container" style={{ paddingTop: 64 }}>
        <div className="card" style={{
          background: "var(--clay)", color: "var(--bone)",
          padding: 28, borderRadius: 18,
        }}>
          <div className="eyebrow" style={{ color: "color-mix(in srgb, var(--bone) 70%, transparent)" }}>Para tu negocio</div>
          <h3 className="display" style={{ fontSize: 36, margin: "10px 0 12px", color: "var(--bone)" }}>
            Mayoreo y <span className="italic">proyectos</span>
          </h3>
          <p style={{ color: "color-mix(in srgb, var(--bone) 92%, transparent)", fontSize: 14, lineHeight: 1.55, marginBottom: 22 }}>
            Hoteles, restaurantes, decoradores y tiendas: trabajamos órdenes desde 25 piezas con catálogo y precios especiales.
          </p>
          <button onClick={() => onNav("wholesale")}
            style={{
              background: "var(--bone)", color: "var(--ink)",
              padding: "12px 22px", borderRadius: 999,
              display: "inline-flex", alignItems: "center", gap: 8,
              fontWeight: 500, fontSize: 14,
            }}>
            Solicitar cotización <Icon name="arrow" size={16} />
          </button>
        </div>
      </section>

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

window.Home = Home;