// Pricing.jsx — membership plans (Founding Member, Individual) + emphasis variant
const phPlans = [
  {
    id: 'founding', name: 'Founding Member', price: 70, per: '/month',
    badge: 'First 20 members',
    blurb: 'A locked-in rate for our earliest patients.',
    highlight: 'Free annual preventive labs',
    feats: ['$70/mo locked in for life', 'Everything in Individual', 'Priority onboarding & scheduling', 'A founding voice in the practice'],
    cta: 'Claim a founding spot',
  },
  {
    id: 'individual', name: 'Individual', price: 85, per: '/month',
    blurb: 'For one adult (18+) who wants a provider on their side.',
    feats: ['Unlimited visits, no copays', 'Direct call, text & video', 'Same & next-day appointments', 'Wholesale labs & medications'],
    cta: 'Become a member',
  },
];

// Lookup helper so other pages (enroll) can resolve a plan by id.
const phPlanById = (id) => phPlans.find(p => p.id === id) || phPlans[0];

// PlanGrid renders the membership cards. In `selectable` mode the whole card is
// clickable, the chosen card highlights, and the button reads "Choose this membership".
// Otherwise the buttons link to enroll.html?plan=<id> so the enroll page pre-selects.
function PlanGrid({ emphasis = 'founding', selectable = false, selected = null, onSelect }) {
  // On mobile, selectable cards collapse to compact rows; one can be expanded at a time.
  const [expanded, setExpanded] = useState(null);
  return (
    <div className="ph-plans">
      {phPlans.map(p => {
        const isSel = selectable && selected === p.id;
        const isOn = selectable ? isSel : emphasis === p.id;
        const isExp = expanded === p.id;
        // Selectable cards only ever show the real badge pill (e.g. "First 20 members"),
        // never the "Most popular" emphasis label.
        const flag = p.badge || (!selectable && isOn ? 'Most popular' : null);
        const pick = () => onSelect && onSelect(p.id);
        return (
          <div
            className={'ph-plan' + (isOn ? ' is-popular' : '') + (selectable ? ' is-selectable' : '') + (isSel ? ' is-selected' : '') + (isExp ? ' is-expanded' : '')}
            key={p.id}
            onClick={selectable ? pick : undefined}
            role={selectable ? 'button' : undefined}
            tabIndex={selectable ? 0 : undefined}
            aria-pressed={selectable ? isSel : undefined}
            onKeyDown={selectable ? (e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } }) : undefined}
          >
            {flag && <span className="ph-plan-flag">{flag}</span>}
            {selectable && (
              <button type="button" className="ph-plan-toggle" aria-expanded={isExp}
                aria-label={(isExp ? 'Hide' : 'Show') + ' ' + p.name + ' details'}
                onClick={(e) => { e.stopPropagation(); setExpanded(isExp ? null : p.id); }}>
                <Icon name="chevron" size={22} color="#1E364E" />
              </button>
            )}
            <h3>{p.name}</h3>
            {selectable && (
              <div className="ph-plan-compact">
                <span className="ph-plan-compact-price">${p.price}<span>/mo</span></span>
              </div>
            )}
            <p className="ph-plan-blurb">{p.blurb}</p>
            <div className="ph-plan-price">
              <span className="ph-plan-cur">$</span>{p.price}
              <span className="ph-plan-per">{p.per}</span>
            </div>
            {p.highlight && (
              <div className="ph-plan-highlight">
                <Icon name="sparkle" size={17} color="#506330" /> {p.highlight}
              </div>
            )}
            <ul>
              {p.feats.map(f => <li key={f}><Icon name="check" size={19} color="#506330" /> {f}</li>)}
            </ul>
            {selectable ? (
              <button type="button" className={'btn ' + (isSel ? 'btn-primary' : 'btn-secondary')}
                onClick={(e) => { e.stopPropagation(); pick(); }}>
                {isSel ? 'Selected ✓' : 'Choose this membership'}
              </button>
            ) : (
              <a className={'btn ' + (isOn ? 'btn-primary' : 'btn-secondary')} href={'enroll.html?plan=' + p.id}>{p.cta}</a>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Pricing({ emphasis = 'founding', showNote = true, showHead = true, tint = true }) {
  return (
    <section className={'ph-section' + (tint ? ' is-tint' : '')} id="pricing">
      <div className="ph-container">
        {showHead && (
          <SectionHead center eyebrow="Membership" title="One flat fee. No surprises."
            sub="Membership covers your primary care. No insurance needed, no contracts. Cancel anytime." />
        )}
        <PlanGrid emphasis={emphasis} />
        {showNote && <p className="ph-plans-note">Membership is not insurance. We recommend pairing it with a wrap-around or
          high-deductible plan for hospital and specialist coverage.</p>}
      </div>
    </section>
  );
}
Object.assign(window, { Pricing, PlanGrid, phPlans, phPlanById });