// Home page — Hero, Friday Drop countdown, Categories, Best sellers, Lookbook preview, IG wall, News

const Hero = () => {
  const { setRoute } = useApp();
  return (
    <section style={{ position: 'relative', background: 'var(--ink)', color: '#fff', overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', minHeight: 'min(720px, 82vh)' }} className="hero-grid">
        <div style={{ padding: 'clamp(40px, 6vw, 96px)', display: 'flex', flexDirection: 'column', gap: 48, position: 'relative', zIndex: 2, minHeight: 'inherit' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>SS26 · WK17 · 04.25</div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>CHAPTER 01</div>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 20 }}>— Friday Drop 01 / SS26</div>
            <h1 className="display italic-slant" style={{ fontSize: 'clamp(56px, 9vw, 140px)', lineHeight: 0.88 }}>
              EVERY<br/>FRIDAY<br/>IS A<br/><span style={{ color: 'var(--accent)' }}>GOOD DAY.</span>
            </h1>
            <p style={{ maxWidth: 440, marginTop: 32, fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7 }}>
              軌道星芒系列 — 以 280gsm 重磅棉為底，水洗加工、手繪刺繡。台北製造,每週五 00:00 上架。
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn accent" onClick={() => setRoute('shop', { cat: 'friday' })}>
                Shop the drop <IconArrow size={14}/>
              </button>
              <button className="btn ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}
                onClick={() => setRoute('lookbook')}>View Lookbook</button>
            </div>
          </div>
          <div style={{ fontSize: 11, fontFamily: 'var(--f-mono)', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.4)' }}>
            SCROLL ↓ &nbsp; EST. 2024 &nbsp;/ &nbsp; TAIPEI
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="ph ph-dark" data-label="HERO · 01" style={{ position: 'absolute', inset: 0, borderLeft: '1px solid rgba(255,255,255,0.08)' }}/>
          <div style={{ position: 'absolute', bottom: 24, right: 24, color: '#fff', fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em', textAlign: 'right' }}>
            PH. KENTA IGARASHI<br/>
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>TAIPEI / 2026.04</span>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr !important; } .hero-grid > div:last-child { min-height: 420px; } }`}</style>
    </section>
  );
};

const FridayCountdown = () => {
  const t = useCountdown(FRIDAY_DROP_TIME);
  const { setRoute } = useApp();
  return (
    <section style={{ background: 'var(--surface)', padding: '80px 0' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="fd-grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 16 }}>◉ LIVE · FRIDAY DROP</div>
            <h2 className="display italic-slant" style={{ fontSize: 'clamp(40px, 6vw, 80px)' }}>
              本週五<br/>00:00 上架
            </h2>
            <p style={{ marginTop: 24, fontSize: 14, color: 'var(--mute)', maxWidth: 440, lineHeight: 1.7 }}>
              WK17 · 軌道星芒系列 — 限量 120 件。錯過這週,只能等下一個禮拜五。
            </p>
            <div className="countdown" style={{ marginTop: 32 }}>
              {[['DAYS', t.d], ['HRS', t.h], ['MIN', t.m], ['SEC', t.s]].map(([l, n]) => (
                <div key={l} className="box">
                  <div className="n">{String(n).padStart(2, '0')}</div>
                  <div className="l">{l}</div>
                </div>
              ))}
            </div>
            <button className="btn" style={{ marginTop: 32 }} onClick={() => setRoute('shop', { cat: 'friday' })}>
              預覽本週商品 <IconArrow size={14}/>
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="ph" data-label="DROP · A" style={{ aspectRatio: '3/4' }}/>
            <div className="ph" data-label="DROP · B" style={{ aspectRatio: '3/4', marginTop: 40 }}/>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .fd-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

const CategoryGrid = () => {
  const { setRoute } = useApp();
  const feat = [
    { slug: 'tops',      name: 'TOPS',       sub: 'T恤 / 衛衣 / 襯衫', span: 2 },
    { slug: 'outerwear', name: 'OUTERWEAR',  sub: '外套 / 風衣', span: 1 },
    { slug: 'bottoms',   name: 'BOTTOMS',    sub: '長褲 / 短褲', span: 1 },
    { slug: 'bags',      name: 'BAGS',       sub: '包款', span: 1 },
    { slug: 'acc',       name: 'ACCESSORIES',sub: '配件 / 小物', span: 2 },
  ];
  return (
    <section style={{ padding: '80px 0' }}>
      <div className="container-wide">
        <div className="sec-head">
          <div className="t">
            <div className="eyebrow">01 / CATEGORIES</div>
            <h2>Shop by category.</h2>
          </div>
          <a href="#" className="more" onClick={(e) => { e.preventDefault(); setRoute('shop'); }}>
            View all <IconArrow size={14}/>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }} className="cat-grid">
          {feat.map((c, i) => (
            <a key={c.slug} href="#" onClick={(e) => { e.preventDefault(); setRoute('shop', { cat: c.slug }); }}
              style={{ gridColumn: `span ${c.span}`, aspectRatio: c.span === 2 ? '2/1.2' : '1/1.2', position: 'relative', overflow: 'hidden' }}>
              <div className="ph" data-label={c.name} style={{ position: 'absolute', inset: 0 }}/>
              <div style={{ position: 'absolute', left: 20, bottom: 20, color: 'var(--ink)', mixBlendMode: 'difference', filter: 'invert(1)' }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 4 }}>0{i+1}</div>
                <div className="display italic-slant" style={{ fontSize: 32, color: '#fff' }}>{c.name}</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{c.sub}</div>
              </div>
            </a>
          ))}
        </div>
        <style>{`@media (max-width: 800px) { .cat-grid { grid-template-columns: repeat(2, 1fr) !important; } .cat-grid a { grid-column: span 1 !important; } }`}</style>
      </div>
    </section>
  );
};

const BestSellers = () => {
  const picks = PRODUCTS.slice(0, 8);
  const { setRoute } = useApp();
  return (
    <section style={{ padding: '60px 0' }}>
      <div className="container-wide">
        <div className="sec-head">
          <div className="t">
            <div className="eyebrow">02 / Best sellers</div>
            <h2>This week's favorites.</h2>
          </div>
          <a href="#" className="more" onClick={(e) => { e.preventDefault(); setRoute('shop'); }}>All products <IconArrow size={14}/></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="pp-grid">
          {picks.map(p => <ProductCard key={p.id} p={p}/>)}
        </div>
        <style>{`@media (max-width: 900px) { .pp-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </div>
    </section>
  );
};

const LookbookStrip = () => {
  const { setRoute } = useApp();
  return (
    <section style={{ padding: '80px 0', background: 'var(--ink)', color: '#fff' }}>
      <div className="container-wide">
        <div className="sec-head">
          <div className="t">
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>03 / Editorial</div>
            <h2 style={{ color: '#fff' }}>Lookbook SS26.</h2>
          </div>
          <a href="#" className="more" style={{ color: '#fff' }} onClick={(e) => { e.preventDefault(); setRoute('lookbook'); }}>
            View all chapters <IconArrow size={14}/>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="lb-grid">
          {LOOKBOOK.map((l, i) => (
            <div key={l.id} onClick={() => setRoute('lookbook')} style={{ cursor: 'pointer' }}>
              <div className="ph ph-dark" data-label={`LB 0${i+1}`} style={{ aspectRatio: '3/4', borderColor: 'rgba(255,255,255,0.08)' }}/>
              <div style={{ marginTop: 14 }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>{l.sub}</div>
                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6 }}>{l.title}</div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 800px) { .lb-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

const IGWall = () => {
  return (
    <section style={{ padding: '80px 0' }}>
      <div className="container-wide">
        <div className="sec-head">
          <div className="t">
            <div className="eyebrow">04 / Community</div>
            <h2>#EveryFridayIsAGoodDay</h2>
          </div>
          <a href="#" className="more">@friday.selectshop <IconInstagram size={14}/></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }} className="ig-grid">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="ph" data-label={`@ #${i+1}`} style={{ aspectRatio: '1/1', cursor: 'pointer' }}/>
          ))}
        </div>
        <style>{`@media (max-width: 800px) { .ig-grid { grid-template-columns: repeat(3, 1fr) !important; } }`}</style>
      </div>
    </section>
  );
};

const NewsStrip = () => {
  const { setRoute } = useApp();
  return (
    <section style={{ padding: '80px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div className="sec-head">
          <div className="t">
            <div className="eyebrow">05 / Journal</div>
            <h2>Latest from the studio.</h2>
          </div>
          <a href="#" className="more" onClick={(e) => { e.preventDefault(); setRoute('news'); }}>Read all <IconArrow size={14}/></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="news-grid">
          {NEWS.map((n, i) => (
            <article key={n.id} style={{ cursor: 'pointer' }} onClick={() => setRoute('news')}>
              <div className="ph" data-label={`JRN 0${i+1}`} style={{ aspectRatio: '4/5' }}/>
              <div style={{ marginTop: 14, display: 'flex', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--mute)' }}>
                <span>{n.date}</span><span>·</span><span>{n.cat.toUpperCase()}</span>
              </div>
              <div style={{ marginTop: 8, fontSize: 14, fontWeight: 500, lineHeight: 1.4 }}>{n.title}</div>
            </article>
          ))}
        </div>
        <style>{`@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

const ValueBar = () => (
  <section style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '32px 0' }}>
    <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
      {[
        [IconTruck, '免運', '消費滿 NT$2,000'],
        [IconReturn, '7 天退換', '未拆封商品'],
        [IconShield, '正品保證', '原廠授權'],
        [IconChat, '線上客服', 'Mon–Fri 10–19'],
      ].map(([Ic, t, s], i) => (
        <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <Ic size={22}/>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{t}</div>
            <div style={{ fontSize: 11, color: 'var(--mute)' }}>{s}</div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

const HomePage = () => (
  <>
    <Hero/>
    <ValueBar/>
    <FridayCountdown/>
    <CategoryGrid/>
    <BestSellers/>
    <LookbookStrip/>
    <IGWall/>
    <NewsStrip/>
  </>
);

Object.assign(window, { HomePage });