// Landing screen — story-led welcome

function Landing({ go, cartCount }) {
  return (
    <div className="screen" data-screen-label="01 Landing">
      {/* Hero */}
      <div style={{ position: "relative" }}>
        {/* Top bar */}
        <div style={{
          position: "absolute", top: 0, left: 0, right: 0, zIndex: 4,
          padding: "var(--safe-top) 20px 16px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontStyle: "italic",
            fontSize: 22, color: "#fff8e7", letterSpacing: "-0.02em",
          }}>
            Baswara<span style={{ color: "var(--gold-soft)" }}>.</span>
          </div>
          <button className="btn-icon" onClick={() => go("cart")}
            style={{ background: "rgba(255,248,231,0.15)", borderColor: "rgba(255,248,231,0.3)", color: "#fff8e7", backdropFilter: "blur(8px)" }}>
            <Icon name="bag" size={18} />
            {cartCount > 0 && (
              <span style={{
                position: "absolute", top: 4, right: 4,
                background: "var(--gold)", color: "var(--cocoa-deep)",
                fontSize: 9, fontWeight: 700, fontFamily: "var(--font-mono)",
                width: 14, height: 14, borderRadius: "50%",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>{cartCount}</span>
            )}
          </button>
        </div>

        {/* Hero image area */}
        <div style={{
          height: "clamp(480px, 62vh, 620px)",
          background: `
            radial-gradient(ellipse at 30% 20%, rgba(180, 138, 60, 0.4), transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(74, 45, 26, 0.6), transparent 50%),
            linear-gradient(180deg, #2a1810 0%, #4a2d1a 60%, #6b3f24 100%)
          `,
          position: "relative",
          overflow: "hidden",
        }}>
          {/* Store banner from Accel ERP */}
          <img src={STORE.heroBanner} alt={STORE.name} style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center 35%",
          }} />
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background: "linear-gradient(180deg, rgba(26,14,8,0.55) 0%, transparent 30%)",
          }} />

          {/* Bottom gradient + label */}
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0,
            padding: "24px 20px 28px",
            background: "linear-gradient(180deg, transparent 0%, rgba(26, 14, 8, 0.55) 25%, rgba(26, 14, 8, 0.9) 70%)",
            color: "#fff8e7",
          }}>
            <div className="eyebrow" style={{ color: "var(--gold-soft)", marginBottom: 6 }}>
              From Bali With Love
            </div>
            <div style={{
              fontFamily: "var(--font-display)", fontStyle: "italic",
              fontSize: 30, lineHeight: 1.05, letterSpacing: "-0.02em",
            }}>
              Manisnya kejutan,<br/>
              <span style={{ color: "var(--gold-soft)" }}>setiap gigitan.</span>
            </div>
          </div>
        </div>
      </div>

      {/* Welcome card */}
      <div style={{ padding: "28px 24px 0" }}>
        <div className="ornament" style={{ marginBottom: 18 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase" }}>
            Om Swastiastu
          </span>
        </div>
        <p style={{
          fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3,
          margin: 0, color: "var(--ink)", textWrap: "pretty",
        }}>
          Selamat datang di <em>Baswara Bali</em> — cokelat artisan dari kakao Tabanan, dibuat dengan tangan dan cerita.
        </p>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6,
          color: "var(--ink-muted)", marginTop: 12, marginBottom: 0,
        }}>
          Welcome — handcrafted Indonesian chocolate, made from Tabanan cacao.
        </p>
      </div>

      {/* Primary CTA */}
      <div style={{ padding: "24px" }}>
        <button className="btn btn-primary" onClick={() => go("catalog")}>
          Lihat semua cokelat
          <Icon name="chevron" size={16} />
        </button>
        <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
          <a className="btn btn-ghost" href={waLink("Halo Baswara! Saya ingin pesan cokelat 🍫")}
            target="_blank" rel="noopener" style={{ flex: 1, color: "var(--ink-soft)", textDecoration: "none" }}>
            <Icon name="wa" size={16} /> Pesan via WhatsApp
          </a>
        </div>
      </div>

      {/* Featured trio */}
      <div style={{ padding: "8px 0 24px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "0 24px 14px" }}>
          <div>
            <div className="eyebrow">Pilihan kami</div>
            <div className="h-display" style={{ fontSize: 24, marginTop: 4 }}>Kenalan dulu</div>
          </div>
          <button onClick={() => go("catalog")} style={{
            background: "none", border: "none", color: "var(--ink-soft)",
            fontSize: 13, fontFamily: "var(--font-body)", textDecoration: "underline",
            textUnderlineOffset: 4, cursor: "pointer",
          }}>
            Semua →
          </button>
        </div>
        <div className="scroller">
          {PRODUCTS.slice(0, 4).map((p) => (
            <button key={p.id} onClick={() => go("product", p.id)} style={{
              width: 180, background: "var(--surface)",
              borderRadius: "var(--r-lg)", border: "1px solid var(--line)",
              padding: 12, cursor: "pointer", textAlign: "left",
              fontFamily: "var(--font-body)",
            }}>
              <div style={{
                aspectRatio: "1/1", borderRadius: "var(--r-md)",
                background: `linear-gradient(135deg, ${p.color}22, ${p.accent}33)`,
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 10, position: "relative", overflow: "hidden",
              }}>
                <ProductPhoto p={p} />
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, lineHeight: 1.1 }}>
                {p.name}
              </div>
              <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
                {p.weight} · {formatIDR(p.price)}
              </div>
            </button>
          ))}
          <div style={{ flex: "0 0 12px" }}></div>
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: "8px 24px 32px", textAlign: "center" }}>
        <div className="eyebrow" style={{ color: "var(--ink-muted)" }}>
          Indonesian Chocolate · From Bali With Love
        </div>
      </div>

      {/* WA fab */}
      <a className="wa-fab" href={waLink("Halo Baswara! 🍫")} target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
        <Icon name="wa" size={26} />
      </a>
    </div>
  );
}

window.Landing = Landing;