/* Alchemy website — Join / Pricing */
const { Button, Tag, ElementTile, SectionHeading } = window.DS;

const jWrap = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };

const PLANS = [
  { sym: 'Cl', n: '55', name: 'Business Club', price: '$149', cadence: '/mo', tag: 'Most flexible',
    blurb: 'Come and go as you please.', highlight: false,
    features: ['Open workspace access', 'Phone booths', '4 meeting-room hrs / mo', 'Community events'] },
  { sym: 'Dk', n: '36', name: 'Dedicated Desk', price: '$349', cadence: '/mo', tag: 'Most popular', highlight: true,
    blurb: 'A desk to call your own.',
    features: ['Your own desk', 'Locking storage', '24/7 secure access', '8 meeting-room hrs / mo', 'Mail handling', 'Everything in Club'] },
  { sym: 'Of', n: '12', name: 'Private Office', price: 'Prices Vary', cadence: '', tag: 'Your HQ', highlight: false,
    blurb: 'A turn-key headquarters.',
    features: ['Furnished private office', 'Sit/stand + ergo chairs', 'Lockable & yours', 'Unlimited meeting rooms', 'Guest welcome', 'Everything in Desk'] },
];

function PlanCard({ p, onNavigate }) {
  const dark = p.highlight;
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 'var(--space-4)',
      background: dark ? 'var(--navy-700)' : 'var(--surface)',
      color: dark ? 'var(--text-on-dark)' : 'var(--text-body)',
      border: dark ? '1px solid var(--navy-700)' : '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)',
      boxShadow: dark ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
      transform: dark ? 'translateY(-10px)' : 'none',
    }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
        <Tag variant={dark ? 'solid' : 'soft'}>{p.tag}</Tag>
      </div>
      <div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.5rem', margin: 0, color: dark ? '#fff' : 'var(--text-strong)' }}>{p.name}</h3>
        <p style={{ margin: '4px 0 0', fontSize: '0.95rem', color: dark ? 'var(--slate-300)' : 'var(--text-muted)' }}>{p.blurb}</p>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '2.6rem', color: dark ? '#fff' : 'var(--navy-700)' }}>{p.price}</span>
        <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.9rem', color: dark ? 'var(--slate-300)' : 'var(--text-muted)' }}>{p.cadence}</span>
      </div>
      <div style={{ height: 1, background: dark ? 'var(--border-on-dark)' : 'var(--border)' }} />
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {p.features.map((f, i) => (
          <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: '0.95rem', lineHeight: 1.4 }}>
            <span style={{ color: dark ? 'var(--slate-300)' : 'var(--slate-500)', fontWeight: 700, flex: 'none' }}>+</span>
            <span style={{ color: dark ? 'rgba(255,255,255,0.9)' : 'var(--text-body)' }}>{f}</span>
          </li>
        ))}
      </ul>
      <Button variant={dark ? 'onDark' : 'primary'} block onClick={() => onNavigate('intake')}>
        {p.highlight ? 'Claim your desk' : 'Get started'}
      </Button>
    </div>
  );
}

function JoinScreen({ onNavigate }) {
  return (
    <React.Fragment>
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...jWrap, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-6)', textAlign: 'center' }}>
          <SectionHeading align="center" eyebrow="Partners, Not Members" title="Join the community from $149/mo" lead="Start where you are and get where you want to go. Month-to-month flexibility, no funny business, cancel or upgrade as your business grows." as="h1" />
        </div>
      </section>
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...jWrap, paddingBottom: 'var(--space-7)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-5)', alignItems: 'start' }}>
          {PLANS.map((p) => <PlanCard key={p.name} p={p} onNavigate={onNavigate} />)}
        </div>
        <div style={{ ...jWrap, paddingBottom: 'var(--section-y)', textAlign: 'center' }}>
          <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: '0.95rem' }}>
            All plans include community events and 24/7 building access. Day passes also available.
          </p>
        </div>
      </section>
    </React.Fragment>
  );
}

window.JoinScreen = JoinScreen;