// Subscriptions page — Toys + Clothes, monthly/quarterly per age

const SUB_CATEGORIES = [
  {
    id: 'toys',
    name: 'The Toy Box',
    tag: 'Curated play',
    headline: 'A box of toys, perfect for right now.',
    sub: 'Open-ended, age-matched, and never the same one twice. Editorial-curated for each developmental stage.',
    img: 'https://images.unsplash.com/photo-1605651531144-51381895e23d?w=1600&q=85&auto=format&fit=crop',
    contains: [
      '3–5 toys per box, $80–$140 retail value',
      'A short field guide for how to play together',
      'Wood, fabric, and recycled-plastic only',
      'Skip, swap, or cancel any time',
    ],
    pricing: {
      monthly:   { perDelivery: 65, billedAs: '/month',   everyText: 'Every month' },
      quarterly: { perDelivery: 95, billedAs: '/quarter', everyText: 'Every 3 months' },
    },
    sample: {
      title: 'A typical 12–18 month box',
      retail: 138,
      items: [
        { name: 'Wooden push wagon',       brand: 'Plan Toys',      retail: 48, why: 'First wobbly steps, with a handle to grab.', img: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?w=900&q=80&auto=format&fit=crop' },
        { name: 'Stacking ring tower',     brand: 'Grimm’s',   retail: 32, why: 'Bright wood, builds fine motor.',           img: 'https://images.unsplash.com/photo-1605651531144-51381895e23d?w=900&q=80&auto=format&fit=crop' },
        { name: 'Soft fabric book',        brand: 'Manhattan Toy',  retail: 18, why: 'For tactile reading and naptime.',          img: 'https://images.unsplash.com/photo-1503602642458-232111445657?w=900&q=80&auto=format&fit=crop' },
        { name: 'Object permanence box',   brand: 'Lovevery',       retail: 40, why: 'A Montessori classic. Ball drops, ball returns.', img: 'https://images.unsplash.com/photo-1597764690523-15bea4c581c9?w=900&q=80&auto=format&fit=crop' },
      ],
    },
  },
  {
    id: 'clothes',
    name: 'The Closet',
    tag: 'Capsule wardrobe',
    headline: 'A capsule wardrobe, always the right size.',
    sub: 'A small, considered set of pieces in the next size up — organic cotton, gender-neutral cuts, mix-and-match palette.',
    img: 'https://images.unsplash.com/photo-1622290291468-a28f7a7dc6a8?w=1600&q=85&auto=format&fit=crop',
    contains: [
      '6–8 garments per delivery, $180–$240 retail value',
      'GOTS-certified organic cotton, low-impact dyes',
      'Sized for tomorrow, not today — always one size up',
      'Free returns; pay only for what you keep',
    ],
    pricing: {
      monthly:   { perDelivery: 110, billedAs: '/month',   everyText: 'Every month' },
      quarterly: { perDelivery: 165, billedAs: '/quarter', everyText: 'Every 3 months' },
    },
    sample: {
      title: 'A typical 12–18 month box',
      retail: 218,
      items: [
        { name: 'Ribbed onesie set (3)',  brand: 'Petit Bateau',     retail: 64, why: 'Layering base. Buttery cotton, snap closures.', img: 'https://images.unsplash.com/photo-1567721913486-6585f069b332?w=900&q=80&auto=format&fit=crop' },
        { name: 'Cord overall',           brand: 'Mini Rodini',      retail: 58, why: 'Mid-weight, adjustable straps.',                img: 'https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?w=900&q=80&auto=format&fit=crop' },
        { name: 'Knit cardigan',          brand: 'Hanna Andersson',  retail: 48, why: 'Goes with everything. Hand-knit feel.',         img: 'https://images.unsplash.com/photo-1604881991720-f91add269bed?w=900&q=80&auto=format&fit=crop' },
        { name: 'Soft-sole booties',      brand: 'Bobux',            retail: 48, why: 'For new walkers; flexible leather.',            img: 'https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=900&q=80&auto=format&fit=crop' },
      ],
    },
  },
];

const SUB_AGES = [
  { id: 'pre',   label: '0–3 mo',  detail: 'Newborn'      },
  { id: '3-6',   label: '3–6 mo',  detail: 'Early infant' },
  { id: '6-12',  label: '6–12 mo', detail: 'Late infant'  },
  { id: '12-18', label: '12–18 mo',detail: 'Toddler I'    },
  { id: '18-24', label: '18–24 mo',detail: 'Toddler II'   },
  { id: '2-3',   label: '2–3 yr',  detail: 'Preschool'    },
  { id: '3-5',   label: '3–5 yr',  detail: 'Pre-K'        },
  { id: '5-7',   label: '5–7 yr',  detail: 'Early school' },
];

const SUB_TIMELINE = [
  { i: 1, title: 'A 4-minute setup',   body: 'Tell us their birthday, the season ahead, and a few preferences. We do the rest.' },
  { i: 2, title: 'A box at the door',  body: 'Arrives every month or quarter. Expect it 2 weeks before the new size or stage hits.' },
  { i: 3, title: 'Open, play, keep',   body: 'Every box ships with a prepaid return bag. Send back what doesn’t click; pay only for what you keep.' },
  { i: 4, title: 'Grows with them',    body: 'Each delivery adapts to the last. Outgrew it? Already had it? We learn and pivot.' },
];

function SubscriptionsPage() {
  const [catId, setCatId] = useState('toys');
  const [age, setAge] = useState('12-18');
  const [cadence, setCadence] = useState('quarterly');
  const [step, setStep] = useState('plan');

  const cat = SUB_CATEGORIES.find(c => c.id === catId);
  const ageObj = SUB_AGES.find(a => a.id === age);
  const price = cat.pricing[cadence];
  const yearTotal = cadence === 'monthly' ? price.perDelivery * 12 : price.perDelivery * 4;

  if (step === 'done') {
    return (
      <div className="page">
        <div style={{ maxWidth: 560, margin: '120px auto 0', textAlign: 'center' }}>
          <div className="success-mark">{'✓'}</div>
          <h1 className="page-title" style={{ fontSize: 'clamp(40px, 4.5vw, 56px)', marginTop: 24 }}>Your first box ships<br/><em>in 2 weeks.</em></h1>
          <p className="page-sub" style={{ margin: '20px auto 32px' }}>
            {'We’ll email you a tracking number and a quick form to sharpen the picks before it leaves the warehouse.'}
          </p>
          <button className="btn" onClick={() => setStep('plan')} style={{ margin: '0 auto', width: 'auto', padding: '14px 24px' }}>
            <span>Manage subscription</span><span className="arrow">{'→'}</span>
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Subscriptions</div>
          <h1 className="page-title">The right things,<br/><em>at every stage.</em></h1>
          <p className="page-sub">{'A monthly or quarterly delivery of toys or clothes — sized, staged, and curated for whoever they’re becoming next.'}</p>
        </div>
      </div>

      <div className="sub-cats">
        {SUB_CATEGORIES.map(c => (
          <button key={c.id} className={`sub-cat${catId === c.id ? ' is-current' : ''}`} onClick={() => setCatId(c.id)}>
            <div className="sub-cat-img"><img src={c.img} alt="" /></div>
            <div className="sub-cat-body">
              <div className="sub-cat-tag">{c.tag}</div>
              <h3 className="sub-cat-name">{c.name}</h3>
              <p className="sub-cat-headline">{c.headline}</p>
            </div>
            <div className={`sub-cat-radio${catId === c.id ? ' is-current' : ''}`}>{catId === c.id ? '✓' : ''}</div>
          </button>
        ))}
      </div>

      {/* Example box showcase */}
      <section className="sub-example">
        <div className="sub-example-head">
          <div>
            <div className="page-eyebrow" style={{ marginBottom: 8 }}>Inside a box</div>
            <h2 className="sub-example-h">{cat.sample.title}</h2>
            <p className="sub-example-sub">{`A real example of what arrives. ${cat.sample.items.length} items, ~$${cat.sample.retail} retail value, hand-picked by our editors.`}</p>
          </div>
          <div className="sub-example-meta">
            <div className="sub-example-meta-row"><span>Items</span><span>{cat.sample.items.length}</span></div>
            <div className="sub-example-meta-row"><span>Retail value</span><span>~${cat.sample.retail}</span></div>
            <div className="sub-example-meta-row"><span>You pay</span><span style={{ color: 'var(--accent)', fontWeight: 500 }}>${price.perDelivery}</span></div>
          </div>
        </div>
        <div className="sub-example-grid">
          {cat.sample.items.map((it, i) => (
            <article key={i} className="sub-example-item">
              <div className="sub-example-img"><img src={it.img} alt="" loading="lazy" /></div>
              <div className="sub-example-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="sub-example-body">
                <div className="sub-example-brand">{it.brand}</div>
                <h4 className="sub-example-name">{it.name}</h4>
                <p className="sub-example-why">{it.why}</p>
                <div className="sub-example-retail">{`Retail $${it.retail}`}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <div className="sub-builder">
        <div className="sub-builder-l">
          <h2 className="sub-builder-h">Build your {cat.name}</h2>
          <p className="sub-builder-sub">{cat.sub}</p>

          <div className="sub-step">
            <div className="sub-step-h"><span className="sub-step-n">1</span><span>Their age</span></div>
            <div className="sub-age-grid">
              {SUB_AGES.map(a => (
                <button key={a.id} className={`sub-age${age === a.id ? ' is-current' : ''}`} onClick={() => setAge(a.id)}>
                  <span className="sub-age-lbl">{a.label}</span>
                  <span className="sub-age-detail">{a.detail}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="sub-step">
            <div className="sub-step-h"><span className="sub-step-n">2</span><span>How often</span></div>
            <div className="sub-cadence">
              <button className={`sub-cadence-opt${cadence === 'monthly' ? ' is-current' : ''}`} onClick={() => setCadence('monthly')}>
                <div>
                  <div className="sub-cadence-name">Monthly</div>
                  <div className="sub-cadence-detail">Every month, no commitment</div>
                </div>
                <div className="sub-cadence-price">${cat.pricing.monthly.perDelivery}<span>/mo</span></div>
              </button>
              <button className={`sub-cadence-opt${cadence === 'quarterly' ? ' is-current' : ''}`} onClick={() => setCadence('quarterly')}>
                <div>
                  <div className="sub-cadence-name">Quarterly <span className="sub-tag">Best value</span></div>
                  <div className="sub-cadence-detail">Every 3 months, a fuller box</div>
                </div>
                <div className="sub-cadence-price">${cat.pricing.quarterly.perDelivery}<span>/qtr</span></div>
              </button>
            </div>
          </div>

          <div className="sub-step">
            <div className="sub-step-h"><span className="sub-step-n">3</span><span>{'What’s in the box'}</span></div>
            <ul className="sub-includes">
              {cat.contains.map((c, i) => (
                <li key={i}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5L20 7"/></svg>
                  <span>{c}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <aside className="sub-summary">
          <div className="sub-summary-card">
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Your plan</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em', marginTop: 6, marginBottom: 16, lineHeight: 1.15 }}>
              {cat.name}<br/>
              <span style={{ color: 'var(--ink-2)', fontStyle: 'italic', fontSize: 22 }}>for {ageObj.label}</span>
            </div>
            <div className="sub-summary-row"><span>Cadence</span><span style={{ fontWeight: 500 }}>{price.everyText}</span></div>
            <div className="sub-summary-row"><span>Per delivery</span><span style={{ fontWeight: 500 }}>${price.perDelivery}</span></div>
            <div className="sub-summary-row"><span>Approx. annual</span><span style={{ color: 'var(--ink-2)' }}>${yearTotal.toLocaleString()}</span></div>
            <div style={{ borderTop: '1px solid var(--rule)', margin: '20px 0 16px', paddingTop: 16 }}>
              <div className="sub-summary-row" style={{ fontSize: 14 }}>
                <span style={{ fontWeight: 500 }}>Today</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.01em' }}>${price.perDelivery}</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{`Then $${price.perDelivery} ${price.billedAs}. Skip or cancel anytime.`}</div>
            </div>
            <button className="btn" onClick={() => setStep('review')} style={{ marginTop: 8 }}>
              <span>{`Subscribe · $${price.perDelivery}${price.billedAs}`}</span>
              <span className="arrow">{'→'}</span>
            </button>
            <div style={{ display: 'flex', gap: 14, marginTop: 16, fontSize: 11.5, color: 'var(--ink-3)', justifyContent: 'center' }}>
              <span>{'✓ Free returns'}</span>
              <span>{'✓ Skip any time'}</span>
              <span>{'✓ Pause for travel'}</span>
            </div>
          </div>
        </aside>
      </div>

      <section className="sub-how">
        <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(28px, 3vw, 36px)', letterSpacing: '-0.025em', margin: '0 0 32px', fontWeight: 400 }}>How it works</h2>
        <div className="sub-how-grid">
          {SUB_TIMELINE.map(s => (
            <div key={s.i} className="sub-how-step">
              <div className="sub-how-n">{String(s.i).padStart(2, '0')}</div>
              <h4 className="sub-how-title">{s.title}</h4>
              <p className="sub-how-body">{s.body}</p>
            </div>
          ))}
        </div>
      </section>

      {step === 'review' && (
        <>
          <div className="share-scrim is-open" onClick={() => setStep('plan')} />
          <div className="share-modal is-open" style={{ width: 'min(520px, 92vw)' }}>
            <h3 className="share-h">Confirm your subscription</h3>
            <p className="share-sub">Review before we charge your card.</p>
            <div style={{ background: 'var(--chip)', borderRadius: 'var(--r-md)', padding: 18, margin: '16px 0 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}><span style={{ color: 'var(--ink-2)' }}>Plan</span><span style={{ fontWeight: 500 }}>{cat.name}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}><span style={{ color: 'var(--ink-2)' }}>For</span><span style={{ fontWeight: 500 }}>{`${ageObj.label} · ${ageObj.detail}`}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}><span style={{ color: 'var(--ink-2)' }}>Cadence</span><span style={{ fontWeight: 500 }}>{price.everyText}</span></div>
              <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 10, marginTop: 4, display: 'flex', justifyContent: 'space-between', fontSize: 16 }}>
                <span style={{ fontWeight: 500 }}>Today</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em' }}>${price.perDelivery}</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setStep('plan')} style={{ width: 'auto', padding: '10px 18px' }}><span>Back</span></button>
              <button className="btn" onClick={() => setStep('done')} style={{ width: 'auto', padding: '10px 20px' }}>
                <span>Confirm</span><span className="arrow">{'→'}</span>
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

window.SubscriptionsPage = SubscriptionsPage;