/* ============================================================
   WHOLESALE — Adire by Bissie
   One real offer: 5 hand-dyed pieces for ₦55,000 + reseller programme.
   On-site request form (no off-site CTAs).
   Exports: PackagesPage
   ============================================================ */

function PackagesPage() {
  const { toast } = useStore();
  const nameRef = useRef(null);
  const [sent, setSent] = useState(false);
  const [f, setF] = useState({ name: '', email: '', phone: '', city: '', msg: '' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const ref = React.useMemo(() => BB.BRAND.orderPrefix + '-W' + Math.floor(10000 + Math.random() * 90000), []);
  const focusForm = () => { if (nameRef.current) nameRef.current.focus(); };
  const submit = (e) => { e.preventDefault(); if (!f.name.trim() || !f.email.includes('@')) return; setSent(true); toast('Wholesale request sent ✿', 'heart'); };

  const usd = BB.fmt(55000, BB.BRAND.currency.secondary.code);
  const perPiece = BB.fmt(11000, BB.BRAND.currency.primary.code);

  const included = [
    '5 full hand-dyed adire / batik pieces',
    '100% soft cotton — no fade nor fray',
    'A mix of designs, or your chosen theme',
    'A place in the reseller community',
    'Guidance to start your own adire business',
    'Delivered nationwide across Nigeria',
  ];
  const steps = [
    ['Request access', 'Fill in the short form below to tell us you want the wholesale bundle and the designs you have in mind.'],
    ['Confirm & pay', 'We confirm availability and share payment details. ₦55,000 for the 5 pieces.'],
    ['Receive & resell', 'Your pieces are dispatched nationwide, and you join the reseller community to grow.'],
  ];

  return (
    <div style={{ background: 'var(--cream)' }}>
      {/* Hero — light */}
      <div style={{ background: 'linear-gradient(160deg, var(--gold-soft), var(--cream))', padding: 'clamp(96px,12vw,140px) var(--gutter) clamp(48px,7vw,88px)', borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
          <p className="eyebrow" style={{ color: 'var(--gold-deep)' }}>Wholesale · Resellers</p>
          <h1 style={{ fontSize: 'clamp(42px,6.5vw,80px)', color: 'var(--ink)', margin: '14px 0 16px', lineHeight: .96 }}>Start your <em style={{ fontStyle: 'italic', background: 'linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,var(--blush))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>adire business.</em></h1>
          <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', maxWidth: 540, margin: '0 auto 26px', lineHeight: 1.75 }}>
            Buy our hand-dyed adire in bulk and resell it anywhere in Nigeria. One simple offer — five pieces, one wholesale price, and a reseller community to grow with.
          </p>
          <button className="btn btn-gold btn-lg" onClick={focusForm}>Request wholesale access</button>
        </div>
      </div>

      {/* Offer */}
      <div className="container wide" style={{ padding: 'clamp(48px,7vw,88px) var(--gutter)' }}>
        <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(28px,4vw,56px)', alignItems: 'stretch' }}>
          {/* Price card */}
          <Reveal>
            <div style={{ background: 'linear-gradient(160deg, var(--gold-soft) 0%, var(--ivory) 100%)', border: '1.5px solid var(--gold)', borderRadius: 'var(--r-xl)', padding: 'clamp(28px,4vw,44px)', height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'inline-flex', alignSelf: 'flex-start', background: 'var(--gold-deep)', color: 'var(--cream)', borderRadius: 100, padding: '5px 14px', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 18 }}>Reseller bundle</div>
              <h2 style={{ fontSize: 'clamp(28px,3.5vw,40px)', marginBottom: 6 }}>5 hand-dyed pieces</h2>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginBottom: 18 }}>A ready-to-resell bundle of our adire & batik.</p>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, color: 'var(--ink)' }}>₦55,000</span>
                <span style={{ fontSize: 14, color: 'var(--ink-faint)' }}>≈ {usd}</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-faint)', marginTop: 6 }}>That's just {perPiece} a piece.</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 11, margin: '26px 0 28px' }}>
                {included.map(t => (
                  <li key={t} style={{ display: 'flex', gap: 11, fontSize: 14.5, alignItems: 'flex-start' }}>
                    <span style={{ flexShrink: 0, marginTop: 2, color: 'var(--gold-deep)' }}>
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 13 4 4 10-11" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>{t}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto' }}>
                <button className="btn btn-gold btn-block btn-lg" onClick={focusForm}>Request wholesale access</button>
              </div>
            </div>
          </Reveal>

          {/* Image */}
          <Reveal delay={2} style={{ position: 'relative' }}>
            <Ph label="Stacks of hand-dyed adire" src={IMG.cats.bundles} style={{ height: '100%', minHeight: 340, borderRadius: 'var(--r-xl)' }} />
          </Reveal>
        </div>
      </div>

      {/* How wholesale works */}
      <div style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--line)', padding: 'clamp(48px,7vw,80px) var(--gutter)' }}>
        <div className="container wide">
          <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', textAlign: 'center', marginBottom: 40 }}>How wholesale <em style={{ fontStyle: 'italic' }}>works</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28 }}>
            {steps.map(([t, d], i) => (
              <div key={t} style={{ textAlign: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--serif)', fontSize: 22, margin: '0 auto 16px', boxShadow: '0 4px 16px rgba(44,76,142,.25)' }}>{i + 1}</div>
                <h3 style={{ fontSize: 20, marginBottom: 8 }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.65 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* On-site request form */}
      <div className="container" style={{ maxWidth: 680, padding: 'clamp(48px,7vw,88px) var(--gutter)' }}>
        <div style={{ textAlign: 'center', marginBottom: 30 }}>
          <p className="eyebrow">Get started</p>
          <h2 style={{ fontSize: 'clamp(28px,4vw,46px)', marginTop: 10 }}>Request wholesale access</h2>
          <p className="muted" style={{ marginTop: 10 }}>Tell us a little about you and we'll be in touch with next steps and payment details.</p>
        </div>
        {sent ? (
          <div style={{ background: 'var(--sage-soft)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 40, textAlign: 'center' }}>
            <div style={{ width: 64, height: 64, borderRadius: 100, background: 'var(--sage)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><I.check width={30} height={30} /></div>
            <h3 style={{ fontSize: 26, marginBottom: 8 }}>Request received</h3>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.65 }}>Thank you — your reference is <strong style={{ color: 'var(--ink)' }}>{ref}</strong>. We'll reach out about the wholesale bundle and reseller community. Payment details are shared when your order is confirmed.</p>
          </div>
        ) : (
          <form onSubmit={submit} style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(24px,4vw,40px)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="form-row">
              <div className="field"><label>Name</label><input ref={nameRef} className="input" value={f.name} onChange={e => set('name', e.target.value)} required /></div>
              <div className="field"><label>Email</label><input type="email" className="input" value={f.email} onChange={e => set('email', e.target.value)} required /></div>
            </div>
            <div className="form-row">
              <div className="field"><label>Phone (optional)</label><input className="input" value={f.phone} onChange={e => set('phone', e.target.value)} placeholder="+234 …" /></div>
              <div className="field"><label>City</label><input className="input" value={f.city} onChange={e => set('city', e.target.value)} placeholder="Ibadan" /></div>
            </div>
            <div className="field"><label>Which designs are you interested in?</label><textarea className="input" rows="3" value={f.msg} onChange={e => set('msg', e.target.value)} placeholder="Tell us the designs or themes you'd like to resell." /></div>
            <button className="btn btn-gold btn-block btn-lg" type="submit">Send wholesale request</button>
            <p className="muted" style={{ fontSize: 12.5, textAlign: 'center' }}>No payment now · we reply with next steps</p>
          </form>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PackagesPage });