/* ============================================================
   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={<>Curated fabrics, <em style={{ color: 'var(--gold-deep)' }}>sourced with care</em></>} />

      <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} video videoSrc={IMG.about.video} label="Our atelier" 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 }}>We're a Victoria Island-based stockist of bridal and exclusive fashion fabrics — Aso-Oke, lace, velvet and bridal textiles. We source and curate the stock, then customise colourways and yardage to your occasion.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Every order gets a straight answer on what's in stock, what can be sourced, and realistic timelines — no guesswork, no public price list, just a direct conversation before anything is confirmed.</p>
            <p style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 24, color: 'var(--ink)', marginTop: 24 }}>“The right fabric, sourced properly and customised to you.”</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, 'Genuine sourcing', 'We source from trusted suppliers and are upfront about origin, material and stock levels on every fabric.'], [I.doc, 'Honest listings', 'Category-true details on every fabric — material, width, colourways and typical use. No vague descriptions.'], [I.truck, 'Real timelines', 'Sourced-to-order pieces get a realistic turnaround, confirmed with you before anything is agreed.']].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 the stock 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')}>Browse the stock</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.globe, 'Nationwide & beyond', 'Nationwide delivery, and international orders paid by dollar wire transfer']].map(([Ic, t, s], i) => (
              <div key={i} style={{ display: 'flex', gap: 16, padding: '20px 0', borderBottom: i < 1 ? '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.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: 'Delivery & Pickup', body: [
    ['Pickup', 'Collect by appointment from our Victoria Island atelier once your fabric is ready.'],
    ['Delivery', 'Nationwide delivery is arranged once payment is confirmed; timelines depend on sourcing and are agreed with you directly.'],
    ['Sourced-to-order pieces', 'Some fabrics are sourced specifically for your order. We confirm a realistic turnaround before anything is agreed.']] },
  returns: { title: 'Custom Orders', body: [
    ['Approve before you commit', 'Because fabrics are sourced or customised to your specification, we confirm the swatch and colourway with you before cutting or sourcing begins.'],
    ['Damaged or incorrect fabric', 'If what arrives doesn\u2019t match what was confirmed, tell us within 48 hours with a photo and we\u2019ll make it right.'],
    ['Cancellations', 'Sourced-to-order fabrics can only be cancelled before sourcing begins — we\u2019ll always confirm this stage with you.']] },
  payments: { title: 'Payment', body: [
    ['Paystack', 'Pay in naira by card, bank transfer or USSD. Payment is confirmed instantly and your order moves straight to sourcing.'],
    ['Dollar wire transfer', 'International clients can pay in USD by bank transfer to our domiciliary account. Account details are shown at checkout — quote your order number as the reference.'],
    ['Currency', 'Prices are set in naira, with a dollar equivalent shown for reference. Wire transfers are settled in USD at the rate shown at checkout.']] },
  privacy: { title: 'Privacy Policy', body: [
    ['What we collect', 'Only what an order needs: name, contact details and delivery address.'],
    ['How we use it', 'To fulfil your order, arrange delivery and — only with consent — send updates on new arrivals.'],
    ['Your rights', 'Request access to, or deletion of, your data at any time by reaching out on Instagram or through the contact form.']] },
};

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 });