// pricing-page.jsx — 5-tier pricing page with comparison matrix and FAQ

const TIERS = [
  {
    id: 'free',
    name: 'Free',
    sub: 'Try before you commit',
    weekly: '$0',
    monthly: '0',
    annual: '0',
    cta: 'Start free',
    ghost: true,
    feats: [
      { on: true,  text: '<strong>Mastery Map</strong> · current week only' },
      { on: true,  text: '5 drill questions / day' },
      { on: true,  text: 'Weekly Challenge participation' },
      { on: false, text: 'Question DNA · past paper data' },
      { on: false, text: 'AI Marker on extended responses' },
      { on: false, text: 'Focus Rooms (peer & tutor)' },
      { on: false, text: 'Live tutoring sessions' },
    ],
  },
  {
    id: 'solo',
    name: 'Solo',
    sub: 'Self-serve studying',
    weekly: '$5',
    monthly: '19',
    annual: '180',
    saving: 'save $48',
    cta: 'Start Solo',
    feats: [
      { on: true, text: '<strong>Full Mastery Map</strong> · all subjects + modules' },
      { on: true, text: 'Unlimited drill questions' },
      { on: true, text: 'Question DNA + topic prediction' },
      { on: true, text: '<strong>AI Marker</strong> · 50 responses / wk' },
      { on: true, text: 'Peer Focus Rooms' },
      { on: false, text: 'Live tutor lessons' },
    ],
  },
  {
    id: 'class',
    name: 'Class',
    sub: 'For most HSC students',
    weekly: '$15',
    monthly: '59',
    annual: '560',
    saving: 'save $148',
    cta: 'Start Class',
    featured: true,
    feats: [
      { on: true, text: 'Everything in <strong>Solo</strong> · +' },
      { on: true, text: '<strong>1 live group lesson / week</strong> · 50 min' },
      { on: true, text: 'Tutor-led Focus Room · audio Q&A' },
      { on: true, text: '<strong>Unlimited AI Marker</strong>' },
      { on: true, text: '2 graded assignments / wk by your tutor' },
      { on: true, text: 'Direct tutor chat · 24h reply' },
    ],
  },
  {
    id: 'crew',
    name: 'Crew',
    sub: 'Daily learners',
    weekly: '$25',
    monthly: '99',
    annual: '940',
    saving: 'save $248',
    cta: 'Start Crew',
    feats: [
      { on: true, text: 'Everything in <strong>Class</strong> · +' },
      { on: true, text: '<strong>Unlimited group lessons</strong>' },
      { on: true, text: 'Bookable any time across all subjects' },
      { on: true, text: 'Priority chat · 4h reply' },
      { on: true, text: 'Squad of up to 5 included' },
      { on: true, text: 'Year-12 trial-week mock paper marked' },
    ],
  },
  {
    id: 'coach',
    name: 'Coach',
    sub: 'Premium · 1-on-1',
    weekly: '$40',
    monthly: '169',
    annual: '1,580',
    saving: 'save $448',
    cta: 'Start Coach',
    feats: [
      { on: true, text: 'Everything in <strong>Crew</strong> · +' },
      { on: true, text: '<strong>1× 1-on-1 lesson / week</strong> · 50 min' },
      { on: true, text: 'Tutor walks in knowing your weak dots' },
      { on: true, text: 'Same tutor each week · pick yours' },
      { on: true, text: '24h priority marking' },
      { on: true, text: 'HSC predictions report (monthly)' },
    ],
  },
];

// Comparison matrix groups
const MX = [
  { section: 'Self-study' },
  { row: 'Mastery Map across all modules',          v: ['—', '✓', '✓', '✓', '✓'] },
  { row: 'Drill questions / day',                   v: ['5', '∞', '∞', '∞', '∞'] },
  { row: 'Question DNA · past papers',              v: ['—', '✓', '✓', '✓', '✓'] },
  { row: 'Misconception Engine',                    v: ['—', '✓', '✓', '✓', '✓'] },
  { row: 'AI Marker · extended responses / wk',     v: ['—', '50', '∞', '∞', '∞'] },

  { section: 'Group sessions' },
  { row: 'Live group lessons / week',               v: ['—', '—', '1', '∞', '∞'] },
  { row: 'Subjects available',                      v: ['—', '—', 'all', 'all', 'all'] },
  { row: 'Open Q&A rooms · drop in',                v: ['—', '—', '✓', '✓', '✓'] },
  { row: 'Tutor-marked assignments / wk',           v: ['—', '—', '2', '5', '∞'] },

  { section: '1-on-1 tutoring' },
  { row: 'Weekly 1-on-1 sessions',                  v: ['—', '—', '—', '—', '1'] },
  { row: 'Pick your own tutor',                     v: ['—', '—', '—', '—', '✓'] },
  { row: 'HSC prediction report',                   v: ['—', '—', '—', '—', '✓'] },

  { section: 'Support' },
  { row: 'Tutor chat reply time',                   v: ['—', '—', '24h', '4h', '4h'] },
  { row: 'Sibling discount',                        v: ['—', '10%', '10%', '15%', '15%'] },
  { row: 'Cancel anytime',                          v: ['✓', '✓', '✓', '✓', '✓'] },
];

function PricingPage() {
  // Static for design — would normally be state
  const cycle = 'monthly'; // 'weekly' | 'monthly' | 'annual'

  return (
    <div className="tier-screen wc-scope">
      <div className="tp-wrap">
        {/* Hero */}
        <div className="tp-hero">
          <div className="tp-eye"><Icon name="star"/> Built for HSC · Priced for students</div>
          <h1>Choose how you<br/>want to <em>study</em>.</h1>
          <div className="tp-hero-sub">
            Five tiers, one platform. Start free. Upgrade when you're ready for marking, group lessons, or 1-on-1 coaching. Cancel any time.
          </div>
          <div className="tp-trust">
            <span><Icon name="users"/> <strong>4,820</strong> students this term</span>
            <span style={{ width: 1, height: 16, background: 'var(--adv-rule)' }}/>
            <span><Icon name="school"/> <strong>62</strong> NSW schools</span>
            <span style={{ width: 1, height: 16, background: 'var(--adv-rule)' }}/>
            <span><Icon name="trophy"/> <strong>9 of 12</strong> Band 6s in our 2025 trial cohort</span>
          </div>
        </div>

        {/* Bill cycle toggle */}
        <div className="tp-toggle-row">
          <div className="tp-toggle">
            <button className="tp-toggle-opt">Weekly</button>
            <button className="tp-toggle-opt active">Monthly</button>
            <button className="tp-toggle-opt">HSC year <small>SAVE 20%</small></button>
          </div>
        </div>

        {/* Tier cards */}
        <div className="tp-tiers">
          {TIERS.map(t => (
            <div key={t.id} className={`tp-tier ${t.featured ? 'featured' : ''}`}>
              {t.featured && <span className="tp-recommend">MOST POPULAR</span>}
              <div className="tp-tier-name">{t.name}</div>
              <div className="tp-tier-sub">{t.sub}</div>

              <div className="tp-tier-price">
                <strong>${t.monthly}</strong>
                <em>/mo</em>
              </div>
              {t.id !== 'free' && (
                <div className="tp-tier-price-alt">{t.weekly}/wk · or ${t.annual}/yr <span style={{ color: 'var(--adv-green)', fontWeight: 700 }}>{t.saving}</span></div>
              )}

              <ul className="tp-tier-feats">
                {t.feats.map((f, i) => (
                  <li key={i} className={`tp-tier-feat ${f.on ? '' : 'off'}`}
                      dangerouslySetInnerHTML={{ __html: f.text }}/>
                ))}
              </ul>

              <button className={`tp-tier-cta ${t.ghost ? 'ghost' : ''}`}>{t.cta}</button>
            </div>
          ))}
        </div>

        {/* Comparison matrix */}
        <div className="tp-matrix">
          <div className="tp-matrix-title">
            <small>Compare in detail</small>
            What you get in each plan
          </div>

          {/* head row */}
          <div className="tp-mx-row head">
            <div className="tp-mx-cell">Feature</div>
            <div className="tp-mx-cell">Free</div>
            <div className="tp-mx-cell">Solo</div>
            <div className="tp-mx-cell featured">Class ★</div>
            <div className="tp-mx-cell">Crew</div>
            <div className="tp-mx-cell">Coach</div>
          </div>

          {MX.map((m, i) => (
            m.section ? (
              <div key={i} className="tp-mx-row section">
                <div className="tp-mx-cell">{m.section}</div>
                <div className="tp-mx-cell"/><div className="tp-mx-cell"/>
                <div className="tp-mx-cell"/><div className="tp-mx-cell"/>
                <div className="tp-mx-cell"/>
              </div>
            ) : (
              <div key={i} className="tp-mx-row">
                <div className="tp-mx-cell">{m.row}</div>
                {m.v.map((v, vi) => (
                  <div key={vi} className="tp-mx-cell">
                    {v === '✓' ? <span className="tp-mx-yes">✓</span>
                     : v === '—' ? <span className="tp-mx-no">—</span>
                     : <span className="tp-mx-val">{v}</span>}
                  </div>
                ))}
              </div>
            )
          ))}
        </div>

        {/* FAQ */}
        <div className="tp-faq">
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> Can I switch tiers any time?</div>
            <div className="tp-faq-a">Yes. Upgrade applies immediately and is pro-rated. Downgrade kicks in at the end of your current billing period — you keep everything you've already booked.</div>
          </div>
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> What if I cancel mid-HSC year?</div>
            <div className="tp-faq-a">Cancel anytime. If you cancel an annual plan, we refund the unused portion to the day. <strong>No "minimum term" lock-in.</strong></div>
          </div>
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> Who are your tutors?</div>
            <div className="tp-faq-a">All tutors are NESA-trained teachers or 99+ ATAR uni students currently studying STEM. Each tutor walks in knowing your Mastery Map — no "tell me about yourself" warm-ups.</div>
          </div>
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> What does my parent pay vs. me?</div>
            <div className="tp-faq-a">Parent or student — either can pay. Bills are monthly to one card. Family plans get 10–15% off siblings and let the parent see weekly progress digests.</div>
          </div>
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> Are group lessons one-on-many or interactive?</div>
            <div className="tp-faq-a">Tutor broadcasts audio. Students raise hands or ask in chat. <strong>Cameras off by default.</strong> The room is built for focus, not for performing.</div>
          </div>
          <div className="tp-faq-card">
            <div className="tp-faq-q"><Icon name="question"/> Is there a free trial on paid plans?</div>
            <div className="tp-faq-a">First week of any paid tier is free. You can book one live lesson during that week and we'll mark up to 3 assignments before you commit.</div>
          </div>
        </div>

        {/* Footer CTA */}
        <div className="tp-footer">
          <div>
            <h3>HSC is hard enough. <em>Choosing a plan shouldn't be.</em></h3>
            <p>If you're unsure, start on Class — it's where most students land. You can downgrade to Solo or upgrade to Coach at any time without losing your progress or booked sessions.</p>
          </div>
          <div className="tp-footer-cta-row">
            <button className="tp-footer-cta ghost">Compare in detail</button>
            <button className="tp-footer-cta">Start free week of Class</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PricingPage = PricingPage;