// Parties / packages page. window.CJParties
function CJParties({ go }) {
  const D = window.CJDS;
  const { SectionHeading, PriceCard, Card, Badge, Button } = D;
  const Icon = window.CJIcon;
  const data = window.CJ_DATA;
  const addons = [
    { icon: 'gift', label: 'Extra goodie bags', price: '$6 / child' },
    { icon: 'ice-cream-cone', label: 'Ice-cream sundae bar', price: '$45' },
    { icon: 'camera', label: 'Party photographer', price: '$120' },
    { icon: 'cake', label: 'Custom themed cake', price: 'from $55' },
  ];
  return (
    <div style={{ background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 32px 40px' }}>
        <SectionHeading eyebrow="Birthday Parties" title="Pick your party tier" subtitle="Every package includes jump time, a party table, food and grip socks. Upgrade to Gold for a private room and a dedicated host." />
      </div>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '24px 32px 20px', display: 'flex', gap: 26, justifyContent: 'center', flexWrap: 'wrap' }}>
        {data.packages.map((p) => (
          <PriceCard key={p.tier} {...p} onSelect={() => go('Booking')} />
        ))}
      </div>

      {/* Add-ons */}
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '56px 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, color: 'var(--text-strong)' }}>Make it extra special</h2>
          <p style={{ margin: '8px 0 0', fontFamily: 'var(--font-body)', color: 'var(--text-muted)' }}>Add any of these at checkout.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
          {addons.map((a) => (
            <Card key={a.label} padding={22} interactive elevation="sm">
              <div style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--sunset-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <Icon name={a.icon} size={26} color="var(--sunset-600)" />
              </div>
              <div style={{ fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 16, color: 'var(--text-strong)' }}>{a.label}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', marginTop: 4 }}>{a.price}</div>
            </Card>
          ))}
        </div>
      </div>

      {/* FAQ / reassurance band */}
      <div style={{ maxWidth: 1120, margin: '0 auto 90px', padding: '0 32px' }}>
        <div style={{ borderRadius: 'var(--radius-2xl)', background: '#fff', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-sm)', padding: '40px 44px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32 }}>
          {[['calendar-check', 'Flexible dates', 'Reschedule free up to 72 hours before your party.'], ['users', 'Extra guests welcome', 'Add jumpers at $18 each — just let your host know.'], ['badge-check', 'Fully insured', 'Every party is covered and staffed by certified monitors.']].map(([ic, t, d]) => (
            <div key={t} style={{ display: 'flex', gap: 14 }}>
              <Icon name={ic} size={26} color="var(--brand)" />
              <div>
                <div style={{ fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 16, color: 'var(--text-strong)' }}>{t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.5 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.CJParties = CJParties;