/* ============ Home page ============ */
function HomePage({ store, navigate }) {
  const featured = store.products.slice(0, 6);
  const cats = store.categories;
  const content = store.content || SEED_CONTENT;
  const hero = content.hero;
  const values = content.values;
  const editorial = content.editorial || SEED_CONTENT.editorial;

  return (
    <main>
      {/* HERO */}
      <section style={{
        position: "relative", minHeight: "calc(100vh - 100px)", overflow: "hidden",
        "--hero-pos-mobile": hero.imagePositionMobile || "right center",
      }}>
        <div style={{ position: "absolute", inset: 0, background: "var(--pink-50)" }}>
          {hero.image ? (
            <img src={hero.image} alt="" className="hero-image"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
          ) : (
            <div className="img-ph" style={{ width: "100%", height: "100%", border: 0, background: "var(--pink-50)" }}>
              <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
                   style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.6 }}>
                <defs>
                  <pattern id="grain" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <circle cx="10" cy="10" r="0.4" fill="rgba(74,19,24,0.35)"/>
                  </pattern>
                </defs>
                <rect width="1600" height="900" fill="url(#grain)"/>
                <g stroke="rgba(74,19,24,0.22)" strokeWidth="1.5" fill="none">
                  <ellipse cx="200" cy="200" rx="80" ry="36" transform="rotate(-25 200 200)"/>
                  <ellipse cx="260" cy="280" rx="80" ry="36" transform="rotate(25 260 280)"/>
                  <ellipse cx="320" cy="360" rx="80" ry="36" transform="rotate(-25 320 360)"/>
                </g>
                <g stroke="rgba(74,19,24,0.28)" strokeWidth="1.2" fill="none">
                  <circle cx="1280" cy="560" r="200"/>
                  <circle cx="1280" cy="560" r="220"/>
                  <path d="M1245 320 L1280 280 L1315 320 L1300 360 L1260 360 Z"/>
                  <path d="M1260 360 L1280 280 L1300 360"/>
                </g>
              </svg>
            </div>
          )}
        </div>

        <div style={{
          position: "relative", maxWidth: 1400, margin: "0 auto",
          padding: "clamp(56px, 12vw, 180px) var(--pad)",
          color: "var(--burgundy-deep)",
        }}>
          <div className="eyebrow" style={{ color: "var(--burgundy)" }}>{hero.eyebrow}</div>
          <h1 style={{
            fontFamily: "var(--serif)", fontWeight: 300,
            fontSize: "clamp(32px, 9vw, 132px)", lineHeight: 1,
            letterSpacing: "-0.015em", margin: "16px 0 24px",
            color: "var(--burgundy-deep)", maxWidth: 900,
          }}>
            {hero.titleLine1}<br/>
            <span style={{ fontStyle: "italic", fontWeight: 300 }}>{hero.titleLine2}</span>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, maxWidth: 480, color: "var(--ink-2)", marginBottom: 40 }}>
            {hero.body}
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-lg" onClick={()=>navigate("/c/anillos")}>
              {hero.cta1} <Icon name="arrow" size={14}/>
            </button>
            <button className="btn btn-ghost btn-lg">
              {hero.cta2}
            </button>
          </div>
        </div>

        <div className="hero-corner" style={{
          position: "absolute", left: "var(--pad)", right: "var(--pad)", bottom: 24,
          display: "flex", gap: 32, color: "var(--burgundy)",
          fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
          flexWrap: "wrap",
        }}>
          <span>{hero.cornerMeta}</span>
          <span style={{ opacity: 0.5 }}>{hero.cornerCredit}</span>
        </div>
      </section>

      {/* CATEGORÍAS */}
      <section className="section" style={{ paddingTop: "clamp(80px, 10vw, 140px)" }}>
        <div className="section-header">
          <div>
            <div className="eyebrow">01 · Categorías</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              Explora <em>por</em> pieza
            </h2>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 20,
        }}
        className="cat-grid"
        >
          {cats.map((c, i) => {
            const hasImage = !!c.image;
            return (
              <a key={c.id}
                 onClick={()=>navigate("/c/"+c.id)}
                 style={{
                   cursor: "pointer",
                   display: "block",
                   position: "relative",
                   aspectRatio: "3/4",
                   background: i % 2 === 0 ? "var(--cream)" : "var(--pink-200)",
                   overflow: "hidden",
                   border: "1px solid var(--line-2)",
                 }}>
                <div style={{ position: "absolute", inset: 0 }}>
                  {hasImage ? (
                    <img src={c.image} alt={c.name}
                      style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                  ) : (
                    <ProductImg p={{ id: c.id, category: c.id }} idx={i*3}/>
                  )}
                </div>
                {hasImage && (
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(180deg, rgba(42,15,18,0) 40%, rgba(42,15,18,0.55) 100%)",
                  }}/>
                )}
                <div style={{
                  position: "absolute", left: 24, right: 24, bottom: 24,
                  color: hasImage ? "var(--pink-50)" : "var(--burgundy)",
                }}>
                  <div className="eyebrow" style={{ fontSize: 10, color: hasImage ? "var(--pink-100)" : undefined }}>0{i+1}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 30, marginTop: 4 }}>{c.name}</div>
                  <div style={{ fontSize: 12, color: hasImage ? "var(--pink-100)" : "var(--ink-2)", marginTop: 6 }}>{c.tagline}</div>
                  <div style={{ marginTop: 14, display: "inline-flex", alignItems: "center", gap: 8,
                    fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 600 }}>
                    Comprar <Icon name="arrow" size={12}/>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </section>

      {/* DESTACADOS */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="section-header">
          <div>
            <div className="eyebrow">02 · Destacados</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              Las piezas <em>más queridas</em>
            </h2>
          </div>
          <a className="nav-link" style={{ alignSelf: "center" }}>Ver todas →</a>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: "32px 28px",
        }} className="prod-grid">
          {featured.map(p => (
            <ProductCard key={p.id} p={p} onClick={()=>navigate("/p/"+p.id)}/>
          ))}
        </div>
      </section>

      {/* PROPUESTA DE VALOR */}
      <section style={{ background: "var(--burgundy)", color: "var(--pink-50)" }}>
        <div className="section home-values" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48 }}>
          {values.map((v, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ color: "var(--pink-100)" }}><Icon name={v.icon} size={28}/></div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 400 }}>{v.title}</div>
              <div style={{ fontSize: 14, color: "var(--pink-200)", lineHeight: 1.6 }}>{v.body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* EDITORIAL BAND */}
      <section className="section home-editorial" style={{
        display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center"
      }}>
        <div style={{ aspectRatio: "4/5", position: "relative" }}>
          {editorial.image ? (
            <img src={editorial.image} alt={editorial.eyebrow}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          ) : (
            <>
              <div className="img-ph" style={{ height: "100%" }}>
                <ProductImg p={{ id: "editorial", category: "collares" }} idx={5}/>
              </div>
              <div className="label" style={{ position: "absolute", top: 12, left: 12 }}>editorial · cusco-workshop.jpg</div>
            </>
          )}
        </div>
        <div>
          <div className="eyebrow">{editorial.eyebrow}</div>
          <h2 className="section-title" style={{ marginTop: 16, fontSize: "clamp(28px, 5vw, 64px)" }}>
            {editorial.titleStart} <em>{editorial.titleItalic}</em> {editorial.titleEnd}
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.75, color: "var(--ink-2)", marginTop: 24, maxWidth: 480 }}>
            {editorial.body}
          </p>
          {editorial.cta && (
            <button className="btn btn-ghost" style={{ marginTop: 32 }}>
              {editorial.cta} <Icon name="arrow" size={14}/>
            </button>
          )}
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;