/* ============================================================
   ABOUT · CONTACT · POLICIES
   ============================================================ */
function PageHero({ title }) {
  return (
    <section style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--gold-soft))', padding: 'clamp(48px,7vw,96px) var(--gutter)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <h1 style={{ fontSize: 'clamp(40px,6vw,80px)' }}>{title}</h1>
      </div>
    </section>
  );
}

/* ---------- About ---------- */
function AboutPage() {
  const { nav } = useStore();
  return (
    <>
      <PageHero title={<>Clothing for <em style={{ color: 'var(--gold-deep)' }}>everyday</em> life</>} />

      <section className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
        <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '.95fr 1.05fr', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
          <Reveal style={{ position: 'relative' }}>
            <Ph src={IMG.about.store} vid={IMG.about.storeVid} focus={IMG.about.focus} label="Our store" variant="ph-gold" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)' }} />
          </Reveal>
          <Reveal delay={2}>
            <h2 style={{ fontSize: 'clamp(30px,4vw,48px)', marginBottom: 20 }}>{BB.BRAND.name}</h2>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>{BB.BRAND.name} is a Lagos-based clothing and accessories brand. We put together stylish pieces for everyday life, chosen for fit, fabric and finish, and deliver them nationwide.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Every listing shows the details that matter for what you are buying, such as size, fit, material, colour and care, so you know what you are getting before you order. The clips and photos on this site are our own.</p>
            <p style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 24, color: 'var(--ink)', marginTop: 24 }}>“{BB.BRAND.tagline}.”</p>
          </Reveal>
        </div>
      </section>

      {/* values */}
      <section style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', textAlign: 'center', marginBottom: 48 }}>What we <em style={{ color: 'var(--gold-deep)' }}>stand for</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 }}>
            {[[I.shield, 'Considered pieces', 'Clothing and accessories chosen for fit, fabric and finish, for everyday dressing.'], [I.doc, 'Clear listings', 'Size, fit, material, colour and care on every product, so there are no vague descriptions.'], [I.truck, 'Delivered nationwide', 'Tracked from confirmed to delivered, with the dispatch window shown on every product page.']].map(([Ic, t, s], i) => (
              <Reveal key={i} delay={i + 1} style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 30, boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ width: 54, height: 54, borderRadius: 'var(--r-md)', background: 'var(--gold-soft)', color: 'var(--gold-deep)', display: 'grid', placeItems: 'center', marginBottom: 18 }}>{Ic({ width: 26, height: 26 })}</span>
                <h3 style={{ fontSize: 25, marginBottom: 10 }}>{t}</h3>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{s}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="container" style={{ padding: 'clamp(56px,8vw,90px) var(--gutter)', textAlign: 'center', maxWidth: 620 }}>
        <h2 style={{ fontSize: 'clamp(30px,4.5vw,48px)' }}>See it for yourself</h2>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}>Shop all products</button>
          <button className="btn btn-outline btn-lg" onClick={() => nav('contact')}>Contact us</button>
        </div>
      </section>
    </>
  );
}

/* ---------- Contact ---------- */
function ContactPage() {
  const { toast } = useStore();
  const [sent, setSent] = useState(false);
  const B = BB.BRAND;
  return (
    <>
      <PageHero title={<>Let's <em style={{ color: 'var(--gold-deep)' }}>talk</em></>} />
      <section className="container wide" style={{ padding: 'clamp(48px,7vw,90px) var(--gutter)' }}>
        <div className="contact-grid">
          <div>
            {[[I.pin, 'Find us', B.address], [I.truck, 'Order support', B.email + '\n' + B.hours], [I.globe, 'Nationwide & beyond', 'Tracked delivery to every Nigerian state; neighbouring countries on request']].map(([Ic, t, s], i) => (
              <div key={i} style={{ display: 'flex', gap: 16, padding: '20px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
                <span style={{ width: 48, height: 48, flexShrink: 0, borderRadius: 'var(--r-md)', background: 'var(--cream-deep)', color: 'var(--gold-deep)', display: 'grid', placeItems: 'center' }}>{Ic({ width: 22, height: 22 })}</span>
                <div><h3 style={{ fontSize: 21, marginBottom: 4 }}>{t}</h3><p style={{ fontSize: 14.5, color: 'var(--ink-soft)', whiteSpace: 'pre-line', lineHeight: 1.5 }}>{s}</p></div>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href={B.whatsapp} target="_blank" rel="noopener" className="btn btn-outline btn-sm"><I.wa width={16} height={16} /> WhatsApp</a>
              <a href={B.instagram} target="_blank" rel="noopener" className="btn btn-outline btn-sm"><I.ig width={17} height={17} /> Instagram</a>
            </div>
          </div>
          <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(24px,4vw,40px)', boxShadow: 'var(--shadow-sm)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ width: 60, height: 60, borderRadius: 100, background: 'var(--sage)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><I.check width={30} height={30} /></div>
                <p style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 26 }}>Message sent — talk soon.</p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); toast('Message sent', 'check'); }} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <h3 style={{ fontSize: 26 }}>Send a message</h3>
                <div className="form-row">
                  <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>Order number (optional)</label><input className="input" placeholder={B.orderPrefix + '123456'} /></div>
                <div className="field"><label>Message</label><textarea className="input" rows="5" required></textarea></div>
                <button className="btn btn-gold btn-lg" type="submit">Send message</button>
              </form>
            )}
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------- Policies ---------- */
const POLICIES = {
  shipping: { title: 'Shipping & Delivery', body: [
    ['Dispatch times by category', 'Orders ship within 1–3 working days. The dispatch window is shown on every product page.'],
    ['Delivery & tracking', 'Standard delivery is 2–5 working days nationwide (free over the free-delivery threshold); express reaches major cities in 1–2 days. All rates, windows and courier assignment are resolved live through Shipbubble, our logistics partner — every order is tracked from your account, Order Received through Delivered.']] },
  returns: { title: 'Returns & Refunds', body: [
    ['Returns', 'Items may be returned within 7 days of delivery, unused and in original packaging, for a refund or exchange.'],
    ['Damaged or wrong items', 'Anything that arrives damaged or not as listed is replaced or refunded. Send us a photo within 48 hours.']] },
  payments: { title: 'Payments & Pricing', body: [
    ['Dollars and naira', 'Prices are shown in US dollars with a naira equivalent; the currency toggle in the header switches the whole store, and you pay in the currency you are viewing.'],
    ['How you can pay', 'Paystack and Flutterwave for naira cards, bank transfer and local rails; or Dollar Wire Transfer for USD bank-to-bank payment. All three are shown at checkout regardless of the currency you are viewing. We never take payment over chat or DM.']] },
  privacy: { title: 'Privacy Policy', body: [
    ['What we collect', 'Only what an order needs: name, contact details, delivery address and payment confirmation.'],
    ['How we use it', 'To process orders, arrange delivery and — only with consent — send the newsletter. We never sell your data.'],
    ['Your rights', 'Request access to, or deletion of, your data at any time by emailing support.']] },
};

function PolicyPage({ params }) {
  const { nav } = useStore();
  const id = params.id || 'shipping';
  const pol = POLICIES[id] || POLICIES.shipping;
  return (
    <>
      <PageHero title={pol.title} />
      <section className="container wide" style={{ padding: 'clamp(40px,6vw,72px) var(--gutter) clamp(64px,9vw,110px)' }}>
        <div className="policy-layout">
          <aside>
            <p className="eyebrow" style={{ marginBottom: 14 }}>All policies</p>
            <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {Object.entries(POLICIES).map(([k, v]) => (
                <button key={k} onClick={() => nav('policy', { id: k })} style={{ textAlign: 'left', padding: '12px 14px', minHeight: 44, borderRadius: 'var(--r-md)', fontSize: 14.5, fontWeight: 500, background: k === id ? 'var(--cream-deep)' : 'transparent', color: k === id ? 'var(--ink)' : 'var(--ink-soft)', transition: 'all .2s' }}>{v.title}</button>
              ))}
            </nav>
          </aside>
          <div style={{ maxWidth: 680 }}>
            {pol.body.map(([h, t], i) => (
              <div key={i} style={{ marginBottom: 32 }}>
                <h3 style={{ fontSize: 26, marginBottom: 10 }}>{h}</h3>
                <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.75 }}>{t}</p>
              </div>
            ))}
            <div style={{ background: 'var(--cream-deep)', borderRadius: 'var(--r-lg)', padding: 24, marginTop: 8, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ flex: 1, minWidth: 200, fontSize: 15 }}>Still have a question? We're here to help.</span>
              <button className="btn btn-primary btn-sm" onClick={() => nav('contact')}>Contact us</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { AboutPage, ContactPage, PolicyPage });