// Account, About, News, Stores, Contact, Lookbook pages

const AccountPage = () => {
  const { user, logout, setRoute, setAuthOpen } = useApp();
  const [tab, setTab] = React.useState('orders');
  if (!user) {
    React.useEffect(() => { setAuthOpen(true); }, []);
    return <section style={{ padding: 80, textAlign: 'center' }}>請先登入</section>;
  }
  const orders = [
    { id: 'FRI-48172039', date: '2026.04.15', status: '已出貨', total: 3960, items: 2 },
    { id: 'FRI-47156823', date: '2026.03.28', status: '已完成', total: 1480, items: 1 },
    { id: 'FRI-46023417', date: '2026.02.14', status: '已完成', total: 6240, items: 3 },
  ];
  const statusColor = (s) => s === '已出貨' ? 'var(--accent)' : s === '已完成' ? 'var(--ok)' : 'var(--mute)';

  return (
    <>
      <Breadcrumb items={[{ label: 'Home', onClick: () => setRoute('home') }, { label: 'Account' }]}/>
      <section style={{ padding: '20px 0 80px' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 48 }} className="acct-grid">
          <aside>
            <div style={{ padding: 20, background: 'var(--ink)', color: '#fff', marginBottom: 16 }}>
              <div className="eyebrow" style={{ color: 'var(--accent)' }}>{user.tier} MEMBER</div>
              <div style={{ fontSize: 20, fontWeight: 600, marginTop: 8 }}>{user.name}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>{user.email}</div>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.15)' }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>Points</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 24, marginTop: 4 }}>{user.points.toLocaleString()}</div>
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>距離 GOLD 等級還差 1,520 點</div>
                <div style={{ height: 3, background: 'rgba(255,255,255,0.15)', marginTop: 8 }}>
                  <div style={{ width: '62%', height: '100%', background: 'var(--accent)' }}/>
                </div>
              </div>
            </div>
            <nav style={{ display: 'flex', flexDirection: 'column' }}>
              {[['orders','訂單紀錄'],['wish','收藏清單'],['addr','收件地址'],['profile','個人資料'],['password','變更密碼']].map(([k, l]) => (
                <button key={k} onClick={() => setTab(k)}
                  style={{ textAlign: 'left', padding: '12px 0', borderBottom: '1px solid var(--line)', fontSize: 13, fontWeight: tab === k ? 600 : 400, color: tab === k ? 'var(--ink)' : 'var(--mute)' }}>
                  {l}
                </button>
              ))}
              <button onClick={logout} style={{ textAlign: 'left', padding: '12px 0', fontSize: 13, color: 'var(--mute)' }}>登出</button>
            </nav>
          </aside>
          <div>
            {tab === 'orders' && <>
              <h1 className="display" style={{ fontSize: 40, marginBottom: 24 }}>Your orders</h1>
              {orders.map(o => (
                <div key={o.id} style={{ border: '1px solid var(--line)', padding: 20, marginBottom: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: 16, alignItems: 'center' }}>
                  <div><div className="eyebrow">Order</div><div style={{ fontFamily: 'var(--f-mono)', fontSize: 13, marginTop: 4 }}>{o.id}</div></div>
                  <div><div className="eyebrow">Date</div><div style={{ fontSize: 13, marginTop: 4 }}>{o.date}</div></div>
                  <div><div className="eyebrow">Items</div><div style={{ fontSize: 13, marginTop: 4 }}>{o.items} 件</div></div>
                  <div><div className="eyebrow">Total</div><div style={{ fontFamily: 'var(--f-mono)', fontSize: 13, marginTop: 4 }}>{fmtPrice(o.total)}</div></div>
                  <div style={{ textAlign: 'right' }}>
                    <span className="tag-pill" style={{ borderColor: statusColor(o.status), color: statusColor(o.status) }}>{o.status}</span>
                  </div>
                </div>
              ))}
            </>}
            {tab === 'wish' && <WishView/>}
            {tab === 'addr' && <AddrView/>}
            {tab === 'profile' && <ProfileView/>}
            {tab === 'password' && <div><h1 className="display" style={{ fontSize: 40, marginBottom: 24 }}>Change password</h1>
              <div style={{ display: 'grid', gap: 16, maxWidth: 420 }}>
                <div className="field"><label>Current</label><input className="input" type="password"/></div>
                <div className="field"><label>New</label><input className="input" type="password"/></div>
                <div className="field"><label>Confirm</label><input className="input" type="password"/></div>
                <button className="btn" style={{ marginTop: 8 }}>Update password</button>
              </div></div>}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </>
  );
};

const WishView = () => {
  const { wish, toggleWish } = useApp();
  const items = PRODUCTS.filter(p => wish.includes(p.id));
  return <>
    <h1 className="display" style={{ fontSize: 40, marginBottom: 24 }}>Wishlist</h1>
    {items.length === 0 ? <p style={{ color: 'var(--mute)' }}>還沒有收藏商品</p>
      : <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>{items.map(p => <ProductCard key={p.id} p={p}/>)}</div>}
  </>;
};
const AddrView = () => <><h1 className="display" style={{ fontSize: 40, marginBottom: 24 }}>Addresses</h1>
  <div style={{ border: '1px solid var(--line)', padding: 20, maxWidth: 440 }}>
    <div className="eyebrow">預設地址</div>
    <div style={{ marginTop: 8, lineHeight: 1.6, fontSize: 13 }}>王小明<br/>0912 345 678<br/>台北市大同區赤峰街 41 巷 12 號</div>
    <div style={{ display: 'flex', gap: 12, marginTop: 16 }}><button className="btn ghost sm">編輯</button><button className="btn ghost sm">刪除</button></div>
  </div>
  <button className="btn ghost" style={{ marginTop: 16 }}><IconPlus size={14}/> Add address</button></>;
const ProfileView = () => <><h1 className="display" style={{ fontSize: 40, marginBottom: 24 }}>Profile</h1>
  <div style={{ display: 'grid', gap: 16, maxWidth: 420 }}>
    <div className="field"><label>Name</label><input className="input" defaultValue="王小明"/></div>
    <div className="field"><label>Email</label><input className="input" defaultValue="friday@shop.com"/></div>
    <div className="field"><label>Phone</label><input className="input" defaultValue="0912 345 678"/></div>
    <div className="field"><label>Birthday</label><input className="input" type="date" defaultValue="1998-05-14"/></div>
    <button className="btn" style={{ marginTop: 8 }}>Save changes</button>
  </div></>;

const AboutPage = () => {
  const { setRoute } = useApp();
  return <>
    <section style={{ padding: '80px 0', background: 'var(--ink)', color: '#fff' }}>
      <div className="container-wide">
        <div className="eyebrow" style={{ color: 'var(--accent)' }}>EST. 2024 · TAIPEI</div>
        <h1 className="display italic-slant" style={{ fontSize: 'clamp(48px, 9vw, 140px)', marginTop: 16 }}>
          Every<br/>Friday<br/>is a <span style={{ color: 'var(--accent)' }}>ritual.</span>
        </h1>
      </div>
    </section>
    <section style={{ padding: '80px 0' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }} className="ab-grid">
        <div>
          <div className="eyebrow">Our story</div>
          <h2 className="display" style={{ fontSize: 40, marginTop: 12, marginBottom: 24 }}>A select shop for every good Friday.</h2>
          <p style={{ lineHeight: 1.8, color: 'var(--mute)', marginBottom: 16 }}>
            FRIDAY SELECT SHOP 誕生於 2024 年的台北赤峰街。我們相信每個禮拜五都值得被慶祝 — 不論是一件剛到手的重磅T、一雙久違的好鞋、或只是在週五夜晚與朋友的一頓飯。
          </p>
          <p style={{ lineHeight: 1.8, color: 'var(--mute)' }}>
            我們精選來自日本、歐洲與台灣的獨立品牌,同時推出自有 FRIDAY 系列 — 以台灣製造為核心,用重磅棉、水洗加工與手繪印花製作每週五限定的小批量新品。
          </p>
        </div>
        <div className="ph" data-label="STUDIO" style={{ aspectRatio: '4/5' }}/>
      </div>
    </section>
    <section style={{ padding: '40px 0 80px' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }} className="val-grid">
          {[
            ['01', 'Weekly rhythm', '每週五 00:00,限定 drop。錯過再等七天。'],
            ['02', 'Made honestly', '台灣製造,透明的工藝與誠實的定價。'],
            ['03', 'Selected not collected', '我們只賣自己會穿的東西。每件單品都經過挑選。'],
          ].map(([n, t, d]) => (
            <div key={n}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--accent)' }}>{n}</div>
              <div className="display" style={{ fontSize: 28, marginTop: 12, marginBottom: 12 }}>{t}</div>
              <div style={{ color: 'var(--mute)', fontSize: 14, lineHeight: 1.7 }}>{d}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 900px) { .val-grid, .ab-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </div>
    </section>
    <section style={{ padding: '80px 0', background: 'var(--surface)' }}>
      <div className="container-wide">
        <div className="sec-head"><div className="t"><div className="eyebrow">Words from customers</div><h2>What they say.</h2></div></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="val-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} style={{ padding: 28, background: '#fff', border: '1px solid var(--line)' }}>
              <div style={{ color: 'var(--accent)', display: 'flex', gap: 2 }}>{[1,2,3,4,5].map(s => <IconStar key={s} size={12}/>)}</div>
              <p style={{ marginTop: 16, lineHeight: 1.7, fontSize: 14 }}>「{t.text}」</p>
              <div style={{ marginTop: 20, fontSize: 12, color: 'var(--mute)', fontFamily: 'var(--f-mono)', letterSpacing: '0.08em' }}>— {t.name} / {t.city}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>;
};

const NewsPage = () => {
  const { setRoute } = useApp();
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? NEWS : NEWS.filter(n => n.cat === filter);
  return <>
    <Breadcrumb items={[{ label: 'Home', onClick: () => setRoute('home') }, { label: 'News' }]}/>
    <section style={{ padding: '20px 0 60px' }}>
      <div className="container-wide">
        <div className="eyebrow">Journal</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 88px)', marginTop: 8 }}>News & Drops.</h1>
        <div style={{ display: 'flex', gap: 8, marginTop: 32 }}>
          {[['all','All'],['Drop','Drops'],['Collab','Collabs'],['Event','Events'],['Journal','Journal']].map(([k,l]) => (
            <button key={k} onClick={() => setFilter(k)} className={cx('tag-pill', filter === k && 'dark')}>{l}</button>
          ))}
        </div>
      </div>
    </section>
    <section style={{ paddingBottom: 80 }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 48 }} className="val-grid">
        {filtered.map((n, i) => (
          <article key={n.id} style={{ cursor: 'pointer' }}>
            <div className="ph" data-label={`JRN 0${i+1}`} style={{ aspectRatio: '16/10' }}/>
            <div style={{ marginTop: 16, display: 'flex', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--mute)', letterSpacing: '0.1em' }}>
              <span>{n.date}</span><span>·</span><span>{n.cat.toUpperCase()}</span>
            </div>
            <h3 className="display" style={{ fontSize: 24, marginTop: 8, lineHeight: 1.2 }}>{n.title}</h3>
            <a href="#" className="btn link" style={{ marginTop: 12, display: 'inline-flex' }}>Read more →</a>
          </article>
        ))}
      </div>
    </section>
  </>;
};

const StoresPage = () => {
  const { setRoute } = useApp();
  const [sel, setSel] = React.useState(0);
  return <>
    <Breadcrumb items={[{ label: 'Home', onClick: () => setRoute('home') }, { label: 'Stores' }]}/>
    <section style={{ padding: '20px 0 40px' }}>
      <div className="container-wide">
        <div className="eyebrow">Physical Stores</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 88px)', marginTop: 8 }}>Find us.</h1>
      </div>
    </section>
    <section style={{ paddingBottom: 80 }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 32 }} className="acct-grid">
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {STORES.map((s, i) => (
            <button key={i} onClick={() => setSel(i)}
              style={{ textAlign: 'left', padding: '20px 0', borderBottom: '1px solid var(--line)', borderLeft: sel === i ? '2px solid var(--accent)' : '2px solid transparent', paddingLeft: 16 }}>
              <div className="eyebrow">STORE 0{i+1}</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>{s.name}</div>
              <div style={{ fontSize: 12, color: 'var(--mute)', marginTop: 4 }}>{s.addr}</div>
            </button>
          ))}
        </div>
        <div>
          <div className="ph" data-label={`MAP · ${STORES[sel].name}`} style={{ aspectRatio: '16/10', marginBottom: 24 }}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, padding: 24, border: '1px solid var(--line)' }}>
            <div><div className="eyebrow">Address</div><div style={{ fontSize: 13, marginTop: 8 }}>{STORES[sel].addr}</div></div>
            <div><div className="eyebrow">Hours</div><div style={{ fontSize: 13, marginTop: 8 }}>{STORES[sel].hours}</div></div>
            <div><div className="eyebrow">Phone</div><div style={{ fontSize: 13, marginTop: 8, fontFamily: 'var(--f-mono)' }}>{STORES[sel].tel}</div></div>
          </div>
        </div>
      </div>
    </section>
  </>;
};

const ContactPage = () => {
  const { setRoute, showToast } = useApp();
  const [sent, setSent] = React.useState(false);
  return <>
    <Breadcrumb items={[{ label: 'Home', onClick: () => setRoute('home') }, { label: 'Contact' }]}/>
    <section style={{ padding: '20px 0 80px' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="ab-grid">
        <div>
          <div className="eyebrow">Get in touch</div>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', marginTop: 8 }}>Say hello.</h1>
          <p style={{ color: 'var(--mute)', marginTop: 24, lineHeight: 1.7, maxWidth: 420 }}>
            訂單、批發、合作提案、媒體詢問 — 留言給我們,我們會在 2 個工作日內回覆。
          </p>
          <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}><IconMail size={16}/><span style={{ fontSize: 14 }}>hello@fridayofficial.com</span></div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}><IconPhone size={16}/><span style={{ fontSize: 14, fontFamily: 'var(--f-mono)' }}>02 2555 1987</span></div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}><IconInstagram size={16}/><span style={{ fontSize: 14 }}>@friday.selectshop</span></div>
          </div>
        </div>
        <div>
          {sent ? (
            <div style={{ padding: 48, background: 'var(--surface)', textAlign: 'center' }}>
              <IconCheck size={32} style={{ color: 'var(--accent)' }}/>
              <h3 className="display" style={{ fontSize: 28, marginTop: 12 }}>訊息已送出</h3>
              <p style={{ color: 'var(--mute)', marginTop: 8, fontSize: 13 }}>我們會盡快回覆你</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field"><label>Name</label><input className="input" required/></div>
                <div className="field"><label>Email</label><input className="input" type="email" required/></div>
              </div>
              <div className="field"><label>Subject</label>
                <select className="select">
                  <option>訂單問題</option><option>商品諮詢</option><option>批發合作</option><option>媒體採訪</option><option>其他</option>
                </select>
              </div>
              <div className="field"><label>Message</label><textarea className="textarea" required/></div>
              <button type="submit" className="btn lg">Send message <IconArrow size={14}/></button>
            </form>
          )}
        </div>
      </div>
    </section>
  </>;
};

const LookbookPage = () => {
  const { setRoute } = useApp();
  const [ch, setCh] = React.useState(0);
  const book = LOOKBOOK[ch];
  return <>
    <section style={{ padding: '20px 0 40px' }}>
      <div className="container-wide">
        <div className="eyebrow">Lookbook</div>
        <h1 className="display italic-slant" style={{ fontSize: 'clamp(48px, 8vw, 120px)', marginTop: 8 }}>SS26 Chapters.</h1>
        <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
          {LOOKBOOK.map((l, i) => (
            <button key={l.id} onClick={() => setCh(i)} className={cx('tag-pill', ch === i && 'dark')}>Chapter 0{i+1}</button>
          ))}
        </div>
      </div>
    </section>
    <section style={{ paddingBottom: 80 }}>
      <div className="container-wide">
        <div style={{ padding: '32px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', marginBottom: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 16, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent)' }}>{book.sub}</div>
            <h2 className="display italic-slant" style={{ fontSize: 48, marginTop: 8 }}>{book.title}</h2>
          </div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--mute)' }}>{book.items.length} looks · SS26 Collection</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }} className="val-grid">
          <div className="ph" data-label={`LK · 01`} style={{ aspectRatio: '3/4', gridRow: 'span 2' }}/>
          <div className="ph" data-label={`LK · 02`} style={{ aspectRatio: '3/2' }}/>
          <div className="ph" data-label={`LK · 03`} style={{ aspectRatio: '3/2' }}/>
          <div className="ph" data-label={`LK · 04`} style={{ aspectRatio: '3/2', gridColumn: 'span 2' }}/>
        </div>
        <div style={{ marginTop: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Shop this chapter</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="val-grid">
            {book.items.map(id => {
              const p = PRODUCTS.find(x => +x.id.slice(1) === id);
              return p && <ProductCard key={p.id} p={p}/>;
            })}
          </div>
        </div>
      </div>
    </section>
  </>;
};

Object.assign(window, { AccountPage, AboutPage, NewsPage, StoresPage, ContactPage, LookbookPage });