// 彤冠茶莊 website — Home
const { Button: HButton, ProductCard: HProductCard, Tag: HTag } = window.TongguanTeaDesignSystem_a1a7a1;

function HeroLines({ text, style }) {
  return text.split("\n").map((l, i) => <span key={i} style={{ display: "block", ...style }}>{l}</span>);
}

function HomePage({ t, lang, products, go, addToCart, journal }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const featured = products.find((p) => p.featured) || products[0];
  const grid = products.slice(0, 4);

  return (
    <main lang={lang}>
      {/* HERO */}
      <section style={{ position: "relative", minHeight: "min(86vh, 760px)", display: "flex", alignItems: "center", overflow: "hidden" }}>
        <img src="assets/scenery/hero-mountains.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(245,238,225,0.94) 0%, rgba(245,238,225,0.72) 38%, rgba(245,238,225,0.10) 72%, rgba(245,238,225,0) 100%)" }}></div>
        <div className="tg-container tg-container--wide" style={{ position: "relative" }}>
          <div style={{ maxWidth: 560 }}>
            <span className="tg-eyebrow" style={{ color: "var(--tea-deep)" }}>{t.hero.kicker}</span>
            <h1 className="tg-display" style={{ fontSize: "clamp(2.6rem, 6vw, 4.5rem)", margin: "20px 0 0", color: "var(--ink)" }}>
              <HeroLines text={t.hero.title} />
            </h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--fs-lead)", lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: "46ch", margin: "26px 0 34px" }}>{t.hero.body}</p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <HButton variant="primary" size="lg" iconRight="arrow-right" onClick={() => go("shop")}>{t.hero.cta1}</HButton>
              <HButton variant="ghost" size="lg" onClick={() => go("story")}>{t.hero.cta2}</HButton>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES — dark tea band */}
      <section style={{ background: "var(--surface-tea)", color: "var(--paper-0)", padding: "var(--space-9) 0" }}>
        <div className="tg-container tg-container--wide">
          <span className="tg-eyebrow" style={{ color: "var(--mist)" }}>{t.values.kicker}</span>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 30, marginTop: 38 }} className="tg-values-grid">
            {t.values.items.map((v, i) => (
              <div key={i} style={{ borderTop: "1px solid var(--border-on-dark)", paddingTop: 22 }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 40, fontWeight: 500, color: "var(--paper-0)", lineHeight: 1 }}>{v.t}</div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.7, color: "var(--text-on-dark-2)", margin: "16px 0 0" }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED */}
      <section style={{ padding: "var(--space-10) 0" }}>
        <div className="tg-container tg-container--wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px, 5vw, 72px)", alignItems: "center" }} className="tg-featured">
          <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "5/6", boxShadow: "var(--shadow-md)" }}>
            <img src={featured.image} alt={featured.name[lang]} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div>
            <span className="tg-eyebrow" style={{ color: "var(--text-seal)" }}>{t.featured.kicker}</span>
            <h2 className="tg-display" style={{ fontSize: "clamp(2rem, 4vw, 3rem)", margin: "16px 0 0" }}>{t.featured.title}</h2>
            <div style={{ display: "flex", gap: 8, margin: "20px 0", flexWrap: "wrap" }}>
              {featured.tags.map((tg, i) => <HTag key={i} tone={tg.tone}>{tg[lang]}</HTag>)}
            </div>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.8, color: "var(--text-secondary)", maxWidth: "42ch", margin: "0 0 30px" }}>{t.featured.body}</p>
            <HButton variant="secondary" size="lg" iconRight="arrow-right" onClick={() => go("product", featured.id)}>{t.featured.cta}</HButton>
          </div>
        </div>
      </section>

      {/* SHOP PREVIEW */}
      <section style={{ background: "var(--surface-sunken)", padding: "var(--space-9) 0" }}>
        <div className="tg-container tg-container--wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 16 }}>
            <div>
              <span className="tg-eyebrow" style={{ color: "var(--text-accent)" }}>{t.shop.title}</span>
              <h2 className="tg-display" style={{ fontSize: "clamp(1.8rem, 3.4vw, 2.6rem)", margin: "12px 0 0" }}>{t.shop.body}</h2>
            </div>
            <button onClick={() => go("shop")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, color: "var(--ink)", display: "inline-flex", alignItems: "center", gap: 7, whiteSpace: "nowrap" }}>
              {t.shop.all} <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
            </button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 26 }} className="tg-shop-grid">
            {grid.map((p) => (
              <HProductCard key={p.id} image={p.image} eyebrow={p.eyebrow[lang]} name={p.name[lang]} subtitle={p.sub[lang]}
                tags={p.tags.slice(0, 2).map((tg) => ({ label: tg[lang], tone: tg.tone }))} amount={p.price}
                addLabel={t.product.add} onAdd={() => addToCart(p.id)} onClick={() => go("product", p.id)} />
            ))}
          </div>
        </div>
      </section>

      {/* JOURNAL PREVIEW */}
      <section style={{ padding: "var(--space-10) 0" }}>
        <div className="tg-container tg-container--wide">
          <div style={{ textAlign: "center", marginBottom: 46 }}>
            <span className="tg-eyebrow" style={{ color: "var(--text-accent)" }}>{t.journalSec.kicker}</span>
            <h2 className="tg-display" style={{ fontSize: "clamp(2rem, 4vw, 3rem)", margin: "12px 0 0" }}>{t.journalSec.title}</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 30 }} className="tg-journal-grid">
            {journal.map((j) => (
              <article key={j.id} onClick={() => go("journal")} style={{ cursor: "pointer" }}>
                <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", aspectRatio: "3/2", marginBottom: 18 }}>
                  <img src={j.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.95)" }} />
                </div>
                <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 10 }}>
                  <span className="tg-eyebrow" style={{ color: "var(--text-seal)" }}>{j.cat[lang]}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{j.date}</span>
                </div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 21, lineHeight: 1.3, margin: "0 0 8px" }}>{j.title[lang]}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.65, color: "var(--text-secondary)", margin: 0 }}>{j.excerpt[lang]}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <NewsletterBand t={t} />
    </main>
  );
}

function NewsletterBand({ t }) {
  const [val, setVal] = React.useState("");
  const [done, setDone] = React.useState(false);
  return (
    <section style={{ background: "var(--surface-ink)", color: "var(--paper-0)", padding: "var(--space-9) 0" }}>
      <div className="tg-container" style={{ textAlign: "center", maxWidth: 620 }}>
        <span className="tg-eyebrow" style={{ color: "var(--mist)" }}>{t.newsletter.kicker}</span>
        <h2 className="tg-display" style={{ fontSize: "clamp(1.9rem, 3.6vw, 2.8rem)", margin: "14px 0 12px", color: "var(--paper-0)" }}>{t.newsletter.title}</h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-on-dark-2)", margin: "0 auto 28px", maxWidth: "40ch" }}>{t.newsletter.body}</p>
        <form onSubmit={(e) => { e.preventDefault(); setDone(true); }} style={{ display: "flex", gap: 10, maxWidth: 460, margin: "0 auto" }}>
          <input value={val} onChange={(e) => setVal(e.target.value)} type="email" required placeholder={t.newsletter.ph}
            style={{ flex: 1, height: 52, padding: "0 18px", border: "1px solid var(--border-on-dark)", background: "rgba(252,250,244,0.06)", color: "var(--paper-0)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-sans)", fontSize: 15, outline: "none" }} />
          <HButton variant="primary" size="lg" type="submit">{done ? "✓" : t.newsletter.btn}</HButton>
        </form>
      </div>
    </section>
  );
}
window.HomePage = HomePage;