/* ============================================================
   screens-main.jsx — 首頁 / 商城 / 商品詳情
   ============================================================ */

const Wrap = ({ children, style }) => (
  <div style={{ maxWidth: 1200, margin: '0 auto', padding: '32px', ...style }}>{children}</div>
);

/* ---- 首頁 ---- */
function HomeScreen() {
  const app = useApp();
  const featured = PRODUCTS.filter((p) => p.hot).slice(0, 3);
  const fresh = PRODUCTS.filter((p) => p.cat === 'banana');
  return (
    <div>
      {/* Hero */}
      <Wrap style={{ paddingTop: 40, paddingBottom: 8 }}>
        <section style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'center', background: 'var(--bg-cream)', borderRadius: 'var(--radius-lg)', padding: '56px 64px', border: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'flex-start' }}>
            <Tag tone="leaf">🌱 產地直送 · 友善耕作</Tag>
            <h1 style={{ fontSize: '52px', lineHeight: 1.12 }}>在欉自然熟的<br />山林好蕉,<br /><span style={{ color: 'var(--accent-strong)' }}>蕉您來好康</span></h1>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.7, maxWidth: 460 }}>
              海拔 800 公尺友善栽培,現採現出、48 小時到府。從一根香蕉開始,把台灣山林的好味道送到你家餐桌。
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="dark" size="lg" onClick={() => app.navigate('shop')}>立即選購 <i className="ph-bold ph-arrow-right"></i></Button>
              <Button variant="ghost" size="lg" onClick={() => app.navigate('about')}>認識農場</Button>
            </div>
            <div style={{ display: 'flex', gap: 26, marginTop: 6 }}>
              {[['4.9★', '顧客評分'], ['2,400+', '滿意訂單'], ['48hr', '產地到府']].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontSize: 24, fontWeight: 900, fontFamily: 'var(--font-display)', color: 'var(--fg-1)' }}>{n}</div>
                  <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div style={{ width: '85%', aspectRatio: '1', borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, #FDE38A, #F2B705)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 160, boxShadow: 'var(--shadow-card)' }}>
              <img alt="" style={{ width: '85%' }} src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'/>" onError={(e) => (e.target.style.display = 'none')} />
              🍌
            </div>
          </div>
        </section>
      </Wrap>

      {/* 價值 */}
      <Wrap style={{ paddingTop: 28, paddingBottom: 8 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {VALUES.map((v) => (
            <div key={v.title} style={{ display: 'flex', gap: 14, padding: '22px 24px', background: 'var(--bg-surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', alignItems: 'flex-start' }}>
              <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, flexShrink: 0 }}>
                <i className={'ph ' + v.icon}></i>
              </div>
              <div>
                <div style={{ fontWeight: 800, color: 'var(--fg-1)', marginBottom: 4, fontFamily: 'var(--font-display)' }}>{v.title}</div>
                <div style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.6 }}>{v.text}</div>
              </div>
            </div>
          ))}
        </div>
      </Wrap>

      {/* 精選 */}
      <Wrap style={{ paddingTop: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 12 }}>
          <SectionHead kicker="本月精選" title="人氣首選,不踩雷" sub="老顧客回購率最高的招牌商品。" />
          <Button variant="ghost" onClick={() => app.navigate('shop')} style={{ marginBottom: 26 }}>看全部 <i className="ph-bold ph-arrow-right"></i></Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {featured.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
      </Wrap>

      {/* 訂閱 CTA */}
      <Wrap>
        <section style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36, alignItems: 'center', background: 'var(--fg-1)', borderRadius: 'var(--radius-lg)', padding: '48px 56px', color: '#fff' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
            <Tag tone="accent">🧺 訂閱制 · 隨時可取消</Tag>
            <h2 style={{ fontSize: '36px', color: '#fff', lineHeight: 1.2 }}>每週鮮果箱,<br />把當令好味道交給我們</h2>
            <p style={{ color: '#C9BFA9', fontSize: 16, lineHeight: 1.7, maxWidth: 420 }}>
              農場主人依當週收成挑選 4–6 種當令蔬果,固定含一份招牌山蕉。訂閱享 9 折與免運。
            </p>
            <Button variant="primary" size="lg" onClick={() => app.openProduct('weekly-box')}>了解鮮果箱</Button>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            {SUBSCRIPTIONS.map((s) => (
              <div key={s.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderRadius: 14, background: s.popular ? 'var(--accent)' : 'rgba(255,255,255,.06)', color: s.popular ? 'var(--accent-ink)' : '#fff' }}>
                <div>
                  <div style={{ fontWeight: 800, fontFamily: 'var(--font-display)' }}>{s.label}{s.popular && ' ⭐'}</div>
                  <div style={{ fontSize: 13, opacity: .8 }}>{s.note}</div>
                </div>
                <div style={{ fontWeight: 900, fontFamily: 'var(--font-display)', fontSize: 20 }}>{NT(s.price)}<span style={{ fontSize: 12, fontWeight: 500 }}>{s.per}</span></div>
              </div>
            ))}
          </div>
        </section>
      </Wrap>

      {/* 好評 */}
      <Wrap>
        <SectionHead kicker="顧客好評" title="他們這樣說" center />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {TESTIMONIALS.map((t) => (
            <div key={t.name} style={{ padding: '26px 24px', background: 'var(--bg-surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Stars value={5} />
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--fg-2)', flex: 1 }}>「{t.text}」</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 28 }}>{t.avatar}</span>
                <span style={{ fontWeight: 700, color: 'var(--fg-1)' }}>{t.name}</span>
              </div>
            </div>
          ))}
        </div>
      </Wrap>
    </div>
  );
}

/* ---- 商城 ---- */
function ShopScreen() {
  const app = useApp();
  const [cat, setCat] = useState('all');
  const list = cat === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.cat === cat);
  return (
    <Wrap>
      <SectionHead kicker="全部商品" title="新鮮上架" sub="從產地直送的山蕉、手作加工品到當令蔬果,通通在這。" />
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 24 }}>
        {CATEGORIES.map((c) => (
          <button key={c.id} onClick={() => setCat(c.id)}
            style={{
              padding: '9px 18px', borderRadius: 999, fontSize: 14, fontWeight: 700, fontFamily: 'var(--font-display)',
              border: '1px solid ' + (cat === c.id ? 'var(--fg-1)' : 'var(--border-strong)'),
              background: cat === c.id ? 'var(--fg-1)' : 'var(--bg-surface)',
              color: cat === c.id ? '#fff' : 'var(--fg-2)', cursor: 'pointer',
            }}>{c.label}</button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
        {list.map((p) => <ProductCard key={p.id} p={p} />)}
      </div>
    </Wrap>
  );
}

/* ---- 商品詳情 ---- */
function ProductScreen() {
  const app = useApp();
  const p = PRODUCTS.find((x) => x.id === app.productId) || PRODUCTS[0];
  const [qty, setQty] = useState(1);
  useEffect(() => { setQty(1); }, [app.productId]);
  const related = PRODUCTS.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 3);
  return (
    <Wrap>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: 'var(--fg-3)', marginBottom: 18, cursor: 'pointer' }} onClick={() => app.navigate('shop')}>
        <i className="ph ph-arrow-left"></i> 返回商城
      </div>

      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
        <div style={{ aspectRatio: '1', borderRadius: 'var(--radius-lg)', background: `linear-gradient(135deg, ${p.grad[0]}, ${p.grad[1]})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 200, boxShadow: 'var(--shadow-card)', position: 'relative' }}>
          {p.badge && <span style={{ position: 'absolute', top: 18, left: 18 }}><Tag tone="dark">{p.badge}</Tag></span>}
          {p.emoji}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start' }}>
          <Tag tone="leaf">{(CATEGORIES.find((c) => c.id === p.cat) || {}).label}</Tag>
          <h1 style={{ fontSize: '40px', lineHeight: 1.15 }}>{p.name}</h1>
          <Stars value={p.rating} reviews={p.reviews} />
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontSize: '38px', fontWeight: 900, fontFamily: 'var(--font-display)', color: 'var(--fg-1)' }}>{NT(p.price)}</span>
            <span style={{ color: 'var(--fg-3)' }}>{p.unit}</span>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--fg-2)' }}>{p.detail}</p>

          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginTop: 4 }}>
            <QtyStepper value={qty} onChange={setQty} />
            <Button variant="primary" size="lg" onClick={() => app.addToCart(p.id, qty)}>
              <i className="ph-bold ph-shopping-cart-simple"></i> 加入購物車
            </Button>
            <Button variant="dark" size="lg" onClick={() => { app.addToCart(p.id, qty); app.goCheckout(); }}>直接購買</Button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8, padding: '18px 20px', background: 'var(--bg-cream)', borderRadius: 'var(--radius)', border: '1px solid var(--border)', width: '100%' }}>
            {[['ph-truck', '滿 NT$600 免運,48 小時內冷鏈到府'], ['ph-shield-check', '產銷履歷可溯源,鮮度不滿意包退'], ['ph-arrows-clockwise', '可加入訂閱,享 9 折優惠']].map(([i, t]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-2)' }}>
                <i className={'ph ' + i} style={{ color: 'var(--leaf)', fontSize: 18 }}></i> {t}
              </div>
            ))}
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <div style={{ marginTop: 56 }}>
          <SectionHead title="你可能也喜歡" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {related.map((r) => <ProductCard key={r.id} p={r} />)}
          </div>
        </div>
      )}
    </Wrap>
  );
}