// 彤冠茶莊 website — Our Story
function StoryPage({ t, lang, go }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const s = t.story;
  return (
    <main lang={lang}>
      {/* hero */}
      <section style={{ position: "relative", minHeight: "min(64vh, 560px)", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <img src="assets/scenery/story-ridge.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(34,31,24,0.74), rgba(34,31,24,0.15) 55%, rgba(34,31,24,0.05))" }}></div>
        <div className="tg-container tg-container--wide" style={{ position: "relative", paddingBottom: "var(--space-8)" }}>
          <span className="tg-eyebrow" style={{ color: "var(--mist)" }}>{s.kicker}</span>
          <h1 className="tg-display" style={{ fontSize: "clamp(2.4rem, 5.5vw, 4rem)", margin: "18px 0 0", color: "var(--paper-0)" }}>
            {s.title.split("\n").map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
          </h1>
        </div>
      </section>

      {/* lead + body */}
      <section style={{ padding: "var(--space-10) 0" }}>
        <div className="tg-container" style={{ maxWidth: 760 }}>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(1.4rem, 2.6vw, 1.9rem)", lineHeight: 1.5, color: "var(--ink)", margin: "0 0 36px" }}>{s.lead}</p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16.5, lineHeight: 1.9, color: "var(--text-secondary)", margin: "0 0 24px" }}>{s.body1}</p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16.5, lineHeight: 1.9, color: "var(--text-secondary)", margin: 0 }}>{s.body2}</p>
        </div>
      </section>

      {/* stats */}
      <section style={{ background: "var(--surface-tea)", color: "var(--paper-0)", padding: "var(--space-8) 0" }}>
        <div className="tg-container tg-container--wide" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 30, textAlign: "center" }} className="tg-values-grid">
          {s.stat.map((st, i) => (
            <div key={i}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 500 }}>{st.n}</div>
              <div className="tg-eyebrow" style={{ color: "var(--mist)", marginTop: 10 }}>{st.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* imagery band */}
      <section style={{ padding: "var(--space-9) 0" }}>
        <div className="tg-container tg-container--wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }} className="tg-featured">
          {["assets/products/teaware-box-grass.jpg", "assets/products/kraft-giftbox-grass.jpg"].map((src, i) => (
            <div key={i} style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "4/3", boxShadow: "var(--shadow-sm)" }}>
              <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          ))}
        </div>
        <div className="tg-container" style={{ textAlign: "center", marginTop: "var(--space-7)" }}>
          <button onClick={() => go("shop")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--ink)", display: "inline-flex", alignItems: "center", gap: 8 }}>
            {t.nav.shop} <i data-lucide="arrow-right" style={{ width: 17, height: 17 }}></i>
          </button>
        </div>
      </section>
    </main>
  );
}
window.StoryPage = StoryPage;