/* ============================================================
   ABOUT · OUR CRAFT · CONTACT · POLICIES — Adire by Bissie
   ============================================================ */
function PageHero({ eyebrow, title, sub }) {
  return (
    <section style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--gold-soft))', padding: 'clamp(48px,7vw,96px) var(--gutter)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <p className="eyebrow">{eyebrow}</p>
        <h1 style={{ fontSize: 'clamp(40px,6vw,80px)', margin: '14px 0 16px' }}>{title}</h1>
        {sub && <p style={{ fontSize: 'clamp(16px,2vw,20px)', color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 560 }}>{sub}</p>}
      </div>
    </section>
  );
}

/* ---------- About ---------- */
function AboutPage() {
  const { nav } = useStore();
  return (
    <>
      <PageHero eyebrow="Our Story" title={<>Hand-dyed in <em style={{ fontStyle: 'italic' }}>Ibadan</em></>} sub="Adire by Bissie keeps a proud Yoruba craft alive — indigo cloth dyed by hand, one piece at a time, and shared far beyond Oyo State." />

      <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.founder} label="Adire by Bissie" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)' }} />
          </Reveal>
          <Reveal delay={2}>
            <p className="eyebrow">Who we are</p>
            <h2 style={{ fontSize: 'clamp(30px,4vw,48px)', margin: '14px 0 20px' }}>{BB.BRAND.name}</h2>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Founded by <strong style={{ color: 'var(--ink)' }}>Olaniyi Barakat Olabisi</strong> and registered as Bissie Ventures Fabrics and Essentials, Adire by Bissie is a hand-dyed adire house based in Ibadan, Oyo State.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>We hand-dye adire and batik on 100% soft cotton — full bundles, customized cloth carrying your own name or brand mark, and the traditional Yoruba designs handed down through generations. No fade, no fray. Delivered nationwide.</p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--ink)', marginTop: 24 }}>“Stay cultured.”</p>
          </Reveal>
        </div>
      </section>

      {/* Proof — Sunbeth / BellaNaija */}
      <section style={{ background: 'linear-gradient(160deg, var(--gold-soft), var(--cream))', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: 'clamp(48px,7vw,88px) var(--gutter)', textAlign: 'center', maxWidth: 820 }}>
          <p className="eyebrow" style={{ color: 'var(--gold-deep)' }}>Giving back</p>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(26px,4vw,44px)', lineHeight: 1.3, color: 'var(--ink)', margin: '16px 0 20px' }}>
            Bissie trained <em style={{ fontStyle: 'italic', color: 'var(--blush-deep)' }}>100 women</em> in adire dyeing under the Sunbeth Women Empowerment Programme.
          </p>
          <p style={{ fontSize: 13, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>As featured on BellaNaija · 2025</p>
        </div>
      </section>

      {/* values */}
      <section style={{ background: 'var(--cream-deep)' }}>
        <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={{ fontStyle: 'italic' }}>stand for</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 }}>
            {[[I.gift, 'Heritage craft', 'Real adire — oniko, eleko, alabere and more — resist-dyed by hand, keeping a Yoruba tradition alive.'], [I.heart, 'Made by hand', 'No two pieces are the same. Every bundle is dyed, rinsed and dried with care on 100% soft cotton.'], [I.globe, 'Empowering women', 'From training programmes to a growing reseller community, our craft creates opportunity for women.']].map(([Ic, t, s], i) => (
              <Reveal key={i} delay={i + 1} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 30, boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ width: 54, height: 54, borderRadius: 100, 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)' }}>Ready to stay cultured?</h2>
        <p className="muted" style={{ marginTop: 12, fontSize: 16.5 }}>Shop the adire, or start a customized piece of your own.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}>Shop the adire</button>
          <button className="btn btn-outline btn-lg" onClick={() => nav('services')}>Our craft</button>
        </div>
      </section>
    </>
  );
}

/* ---------- Our Craft (Services) ---------- */
function ServicesPage() {
  const { nav, toast } = useStore();
  const [sent, setSent] = useState(false);
  return (
    <>
      <PageHero eyebrow="Our Craft" title={<>How our adire is <em style={{ fontStyle: 'italic' }}>made</em></>} sub="Every piece begins with plain cotton and ends as something to be proud of. Here is the craft behind the cloth — and how we make it your own." />

      <section className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 28 }}>
          {[
            ['Customized Adire', IMG.services.styling, 'Your name, monogram or brand mark resist-dyed straight into the cloth. Chosen by families, celebrants, aso-ebi groups and businesses who want something that is truly theirs. Made to order — price on enquiry.', ['Names, monograms & dates', 'Logos & brand marks in bulk', 'Made to order on soft cotton']],
            ['Traditional Designs', IMG.services.custom, 'The ancient Yoruba patterns — Alarodudu Eleko, Oniko, Alabere and more — worked entirely by hand. Each piece carries the mark of the maker, so no two are ever identical.', ['Cassava-paste & stitch resist', 'Deep hand-dyed indigo', 'One-of-a-kind, per piece']],
          ].map(([title, img, desc, points], i) => (
            <Reveal key={i} delay={i + 1} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
              <Ph src={img} label={title} style={{ aspectRatio: '16/10' }} />
              <div style={{ padding: 28 }}>
                <h3 style={{ fontSize: 28, marginBottom: 12 }}>{title}</h3>
                <p style={{ fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 18 }}>{desc}</p>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {points.map(pt => <li key={pt} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14.5 }}><span style={{ width: 22, height: 22, borderRadius: 100, background: 'var(--gold-soft)', color: 'var(--gold-deep)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><I.check width={13} height={13} /></span>{pt}</li>)}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* process */}
      <section style={{ background: 'var(--cream-deep)' }}>
        <div className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,50px)', textAlign: 'center', marginBottom: 48 }}>From cotton to <em style={{ fontStyle: 'italic' }}>cloth</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 24 }}>
            {[['01', 'Design', 'We agree the pattern, or your name or mark, and mark out the cloth.'], ['02', 'Resist', 'Tying, stitching or cassava-paste is worked by hand to resist the dye.'], ['03', 'Indigo dye', 'The cotton is dipped in indigo until the colour runs deep and even.'], ['04', 'Rinse & dry', 'The resist is removed, the cloth rinsed and dried in the shade, ready for you.']].map(([n, t, s], i) => (
              <Reveal key={n} delay={i + 1}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 48, color: 'var(--gold)', lineHeight: 1 }}>{n}</div>
                <h3 style={{ fontSize: 23, margin: '10px 0 8px' }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{s}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* enquiry */}
      <section className="container" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)', maxWidth: 640 }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,48px)' }}>Enquire about a piece</h2>
          <p className="muted" style={{ marginTop: 10 }}>Tell us what you have in mind — we usually reply the same day.</p>
        </div>
        {sent ? (
          <div style={{ textAlign: 'center', background: 'var(--sage-soft)', borderRadius: 'var(--r-lg)', padding: 40 }}>
            <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)', fontSize: 26, fontStyle: 'italic' }}>Thank you — your enquiry is in. We'll be in touch soon.</p>
            <button className="btn btn-gold" style={{ marginTop: 20 }} onClick={() => nav('shop')}>Browse the shop</button>
          </div>
        ) : (
          <form onSubmit={e => { e.preventDefault(); setSent(true); toast('Enquiry noted ✿', 'heart'); }} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="form-row">
              <div className="field"><label>Name</label><input className="input" required /></div>
              <div className="field"><label>Phone / WhatsApp</label><input className="input" placeholder="+234 …" required /></div>
            </div>
            <div className="field"><label>What do you need?</label><select className="input"><option>Customized adire (name / mark)</option><option>Traditional design</option><option>Bundles / wholesale</option><option>Something else</option></select></div>
            <div className="field"><label>Tell us more</label><textarea className="input" rows="4" placeholder="Design, occasion, quantity, timeline…"></textarea></div>
            <button className="btn btn-gold btn-lg" type="submit">Send enquiry</button>
          </form>
        )}
      </section>
    </>
  );
}

/* ---------- Contact ---------- */
function ContactPage() {
  const { toast, nav } = useStore();
  const [sent, setSent] = useState(false);
  const B = BB.BRAND;
  return (
    <>
      <PageHero eyebrow="Say hello" title={<>Let's <em style={{ fontStyle: 'italic' }}>talk</em></>} sub="Questions about an order, a customized piece or a wholesale enquiry? Send us a message and we'll get right back to you." />
      <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, 'Phone & WhatsApp', B.whatsapp + '\n' + B.hours], [I.truck, 'Nationwide delivery', 'Tracked delivery anywhere in Nigeria']].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: 100, 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" aria-label="Instagram" className="btn btn-outline btn-sm"><I.ig width={17} height={17} /> Instagram</a>
              <a href={B.tiktok} target="_blank" rel="noopener" aria-label="TikTok" className="btn btn-outline btn-sm"><I.tiktok width={15} height={15} /> TikTok</a>
              <a href={B.facebook} target="_blank" rel="noopener" aria-label="Facebook" className="btn btn-outline btn-sm"><I.fb width={16} height={16} /> Facebook</a>
            </div>
          </div>
          <div style={{ background: 'var(--ivory)', 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)', fontSize: 26, fontStyle: 'italic' }}>Thank you — your message is on its way. We'll reply shortly.</p>
                <button className="btn btn-outline" style={{ marginTop: 20 }} onClick={() => nav('shop')}>Browse the shop</button>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); toast('Message noted ✿', 'heart'); }} 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>Phone / WhatsApp</label><input className="input" placeholder="+234 …" required /></div>
                </div>
                <div className="field"><label>Subject</label><input className="input" /></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', body: [['Nationwide', 'We deliver anywhere in Nigeria by tracked courier. Orders are dispatched once your order is confirmed and payment received.'], ['Timing', 'Ready bundles dispatch quickly; customized and traditional pieces are dyed to order, so we agree timing with you when you order.'], ['International', 'Shipping outside Nigeria can be arranged on request — message us on WhatsApp for a quote before you order.']] },
  returns: { title: 'Returns', body: [['Made-to-order & customized', 'Customized adire and pieces dyed to order are made especially for you and cannot be returned. We confirm your design before dyeing begins.'], ['Ready bundles', 'Unused ready bundles in original condition may be exchanged within 7 days of delivery — reach us on WhatsApp to arrange.'], ['Damaged on arrival', 'Send a photo within 48 hours of delivery and we\u2019ll make it right with a replacement or refund.']] },
  revisions: { title: 'Customization', body: [['Approve before we dye', 'For customized adire we confirm the name, mark or design and its placement with you before any dye touches the cloth.'], ['Changes', 'Adjust freely while we\u2019re still at the design stage. Once hand-dyeing begins the design is fixed, as the process cannot be undone.'], ['Ask about offers', 'Ask about any current offers when you place a customized order.']] },
  privacy: { title: 'Privacy', body: [['What we collect', 'Only what we need to fulfil your order: your name, contact details and delivery address.'], ['How we use it', 'To process orders, arrange delivery and reply to your enquiries. We never sell your data.'], ['Your rights', 'Ask us to access or delete your details at any time via WhatsApp.']] },
  care: { title: 'Fabric Care', body: [['Setting the colour', 'Hand-dyed indigo may release a little dye at first. Wash separately in cold water with a spoon of salt for the first wash or two to help set the colour.'], ['Washing', 'Hand-wash gently or use a cold, delicate cycle. Avoid harsh bleach and prolonged soaking. Dry in the shade to keep the indigo rich.'], ['Ironing & storage', 'A soft warm iron on the reverse keeps the cloth crisp. Store folded, away from damp. With care, your adire will not fade nor fray.']] },
};

function PolicyPage({ params }) {
  const { nav } = useStore();
  const id = params.id || 'shipping';
  const pol = POLICIES[id] || POLICIES.shipping;
  return (
    <>
      <PageHero eyebrow="Good to know" 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: '11px 14px', 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 happy to help.</span>
              <button className="btn btn-primary btn-sm" onClick={() => nav('contact')}>Contact us</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

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