// Cookie Craving Club — subscription push
const CravingClub = ({ onJoin }) => {
  const [plan, setPlan] = React.useState('monthly'); // monthly | 3mo | 6mo
  const plans = {
    monthly: { label: 'Monthly',  price: 27, sub: 'Pause or skip anytime' },
    '3mo':   { label: '3-month',  price: 25, sub: 'Save $6 · one-time charge' },
    '6mo':   { label: '6-month',  price: 23, sub: 'Save $24 · best value' },
  };
  const p = plans[plan];

  const bullets = [
    { icon: 'cookie', label: 'New flavor every month' },
    { icon: 'truck', label: 'Baked fresh & ships right away' },
    { icon: 'sparkle', label: 'Members save vs one-time orders' },
    { icon: 'calendar', label: 'Skip, swap, or pause anytime' },
  ];

  return (
    <section style={{ padding: '96px 0', background: 'var(--brown-900)', color: 'var(--cream-50)' }}>
      <div className="container">
        <div className="club-grid" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--brown-300)', marginBottom: 14 }}>
              Cookie Craving Club
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(40px, 4.5vw, 60px)', fontWeight: 500, margin: 0,
              lineHeight: 1.04, letterSpacing: '-0.02em',
            }}>
              Never run out<br/>
              <em style={{ fontWeight: 500, color: 'var(--brown-300)' }}>of cookies.</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, margin: '22px 0 28px', opacity: 0.88, maxWidth: 480 }}>
              A monthly box of fresh-baked Gooey Butter Cookies delivered to your door. Flexible, low risk, extremely delicious.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'grid', gap: 14 }}>
              {bullets.map((b, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{
                    width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.08)',
                    display: 'grid', placeItems: 'center', color: 'var(--brown-300)',
                    border: '1px solid rgba(255,255,255,.10)',
                  }}>
                    <Icon name={b.icon} size={18}/>
                  </span>
                  <span style={{ fontSize: 16, fontWeight: 500 }}>{b.label}</span>
                </li>
              ))}
            </ul>

            {/* plan selector */}
            <div style={{
              display: 'inline-flex', gap: 6, padding: 6, borderRadius: 999,
              background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.10)',
              marginBottom: 22,
            }}>
              {Object.entries(plans).map(([k, v]) => (
                <button key={k} onClick={() => setPlan(k)}
                  style={{
                    padding: '10px 18px', borderRadius: 999, fontSize: 13.5, fontWeight: 600,
                    background: plan === k ? 'var(--cream-50)' : 'transparent',
                    color: plan === k ? 'var(--brown-900)' : 'var(--cream-50)',
                    transition: 'background .2s, color .2s',
                  }}>
                  {v.label}
                </button>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 24 }}>
              <div className="serif" style={{ fontSize: 42, fontWeight: 600, letterSpacing: '-0.02em' }}>
                ${p.price}
                <span style={{ fontSize: 16, fontWeight: 400, opacity: 0.75, marginLeft: 4 }}>/ box</span>
              </div>
              <div style={{ fontSize: 13, opacity: 0.7 }}>{p.sub}</div>
            </div>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-lg" onClick={onJoin} style={{
                background: 'var(--cream-50)', color: 'var(--brown-900)',
              }}>
                Join the Club <Icon name="chevron-right" size={14} strokeWidth={2.2}/>
              </button>
              <a className="btn btn-outline-white btn-lg" href={SITE.local.club + '#how'}>
                How it works
              </a>
            </div>
          </div>

          <div>
            <Photo src="assets/box.webp" aspect="4/5" label="The Club Box"/>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .club-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { CravingClub });