/* Pricing tiers + comparison matrix */

const TIER_FEATURES = {
  free: [
    'Calculator (limited): one role at a time, ACCP rates',
    'Save up to 3 calculations',
    'Manual day-rate breakdowns',
  ],
  basic: [
    'Everything in Free',
    'Unlimited calculations & history',
    'Create & email invoices (gear, labour, combined)',
    'Address book of production companies',
    'Calendar & job tracker',
    'Crew directory profile (be discoverable)',
    'Teams (split rentals with collaborators)',
    'Sun tracker & call sheet times',
    'AD Tools — child performer ACCP timers',
  ],
  pro: [
    'Everything in Basic',
    'Mileage tracker (CRA $0.70/km auto)',
    'Finances dashboard — HST, expenses, YTD',
    'Payroll Wrap (PMs: timesheets by ACCP line)',
    'Kit Inventory (track gear, daily rates, value)',
    'Branded PDFs (logo on every invoice)',
    'Claim a Job & My Jobs (PM workflow)',
    'Priority email support',
  ],
};

// Pricing
const Pricing = ({initialBilling='monthly'}) => {
  const [billing, setBilling] = React.useState(initialBilling);
  const prices = {
    monthly: {basic: '$4.99', pro: '$9.99', per: '/ mo'},
    yearly:  {basic: '$49.99', pro: '$99.99', per: '/ yr'},
  };
  const p = prices[billing];

  return (
    <section className="section" id="pricing" style={{paddingTop:100, paddingBottom:80}}>
      <div className="container" style={{textAlign:'center', marginBottom: 48}}>
        <div className="section-eyebrow">Pricing</div>
        <h2 className="display" style={{fontSize:'clamp(34px, 5vw, 64px)', margin:'0 0 18px', letterSpacing:'-0.03em'}}>
          Pay for the tools you'll <span className="serif grad-pearl" style={{fontWeight:500}}>actually use</span>.
        </h2>
        <p style={{fontSize:17, color:'var(--sa-text3)', maxWidth:560, margin:'0 auto 32px', lineHeight:1.5}}>
          Three tiers. Cancel any time. Yearly saves you about two months.
        </p>
        <div className="pricing-toggle">
          <button className={billing==='monthly'?'active':''} onClick={()=>setBilling('monthly')}>Monthly</button>
          <button className={billing==='yearly'?'active':''} onClick={()=>setBilling('yearly')}>
            Yearly<span className="save-pill">SAVE 16%</span>
          </button>
        </div>
      </div>

      <div className="container pricing-grid" style={{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 18, alignItems:'stretch'
      }}>
        {/* FREE */}
        <div className="tier">
          <div>
            <h3>Free</h3>
            <div style={{fontSize:13, color:'var(--sa-text3)', marginTop:4}}>Try the calculator.</div>
          </div>
          <div className="price-row">
            <span className="price">$0</span>
            <span className="per">forever</span>
          </div>
          <ul>
            {TIER_FEATURES.free.map((f,i)=>(
              <li key={i}>
                <Check color="var(--sa-text3)"/> {f}
              </li>
            ))}
          </ul>
          <div style={{flex:1}}/>
          <a href="https://apps.apple.com/ca/app/set-assist/id6762023708" target="_blank" rel="noopener" className="btn btn-secondary" style={{justifyContent:'center'}}>Download free</a>
        </div>

        {/* BASIC — recommended */}
        <div className="tier featured">
          <div style={{
            position:'absolute', top:-12, right:24,
            background:'var(--sa-accent-hi)', color:'#fff',
            fontSize:11, fontWeight:700, letterSpacing:'0.06em',
            padding:'4px 12px', borderRadius:99,
          }}>RECOMMENDED</div>
          <div>
            <h3>Basic</h3>
            <div style={{fontSize:13, color:'var(--sa-text3)', marginTop:4}}>For working freelancers.</div>
          </div>
          <div className="price-row">
            <span className="price tnum">{p.basic}</span>
            <span className="per">{p.per}</span>
          </div>
          <ul>
            {TIER_FEATURES.basic.map((f,i)=>(
              <li key={i}>
                <Check color="var(--sa-accent-2)"/> {f}
              </li>
            ))}
          </ul>
          <div style={{flex:1}}/>
          <a href="https://apps.apple.com/ca/app/set-assist/id6762023708" target="_blank" rel="noopener" className="btn btn-primary" style={{justifyContent:'center'}}>Get Basic</a>
        </div>

        {/* PRO — for incorporated freelancers */}
        <div className="tier">
          <div>
            <h3>Pro</h3>
            <div style={{fontSize:13, color:'var(--sa-text3)', marginTop:4}}>If you're incorporated.</div>
          </div>
          <div className="price-row">
            <span className="price tnum">{p.pro}</span>
            <span className="per">{p.per}</span>
          </div>
          <ul>
            {TIER_FEATURES.pro.map((f,i)=>(
              <li key={i}>
                <Check color="var(--sa-accent-hi)"/> {f}
              </li>
            ))}
          </ul>
          <div style={{flex:1}}/>
          <a href="https://apps.apple.com/ca/app/set-assist/id6762023708" target="_blank" rel="noopener" className="btn btn-secondary" style={{justifyContent:'center'}}>Get Pro</a>
        </div>
      </div>

      <div className="container" style={{textAlign:'center', marginTop: 28, fontSize:12, color:'var(--sa-text4)', maxWidth:680}}>
        Prices in CAD. Payment is charged to your Apple ID or Google Play account.
        Subscriptions auto-renew unless cancelled at least 24 hours before the end of the period.
      </div>

      <style>{`
        @media (max-width: 900px) {
          .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px; }
        }
        @media (max-width: 480px) {
          #pricing { padding-left: 16px !important; padding-right: 16px !important; }
        }
      `}</style>
    </section>
  );
};

// ── Comparison matrix ──
const COMPARE_GROUPS = [
  {
    title: 'Calculator',
    rows: [
      {feat:'ACCP recommended rates (every dept)', sub:'July 2025 → June 2026', f:'limit', b:true, p:true},
      {feat:'Custom roles & rates', f:false, b:true, p:true},
      {feat:'OT 1.5× / 2× / 3× scales', f:true, b:true, p:true},
      {feat:'Meal penalties, kit fees, multipliers', f:'partial', b:true, p:true},
      {feat:'Save & re-open calculations', f:'3 saves', b:'Unlimited', p:'Unlimited'},
    ]
  },
  {
    title: 'Invoicing',
    rows: [
      {feat:'Email invoices to clients', f:false, b:true, p:true},
      {feat:'Gear, labour, or combined invoices', f:false, b:true, p:true},
      {feat:'Production company address book', f:false, b:true, p:true},
      {feat:'Branded PDFs with your logo', f:false, b:false, p:true},
      {feat:'Auto invoice numbering & history', f:false, b:true, p:true},
    ]
  },
  {
    title: 'Crew & Calendar',
    rows: [
      {feat:'Calendar — book your shoot days', f:false, b:true, p:true},
      {feat:'Crew directory profile', f:false, b:true, p:true},
      {feat:'Teams (split rentals)', f:false, b:true, p:true},
      {feat:'Discover & book crew (PM)', f:false, b:false, p:true},
      {feat:'Claim a Job & My Jobs (PM)', f:false, b:false, p:true},
    ]
  },
  {
    title: 'Finances',
    rows: [
      {feat:'YTD income tracking', f:false, b:false, p:true},
      {feat:'Expense logging by category', f:false, b:false, p:true},
      {feat:'Mileage (CRA rate auto)', f:false, b:false, p:true},
      {feat:'HST quarterly tracking', f:false, b:false, p:true},
      {feat:'Tax-time export', f:false, b:false, p:true},
    ]
  },
  {
    title: 'Pro tools',
    rows: [
      {feat:'Payroll Wrap (PM timesheets)', f:false, b:false, p:true},
      {feat:'Kit Inventory & daily rates', f:false, b:false, p:true},
      {feat:'AD Tools — performer timers', f:false, b:true, p:true},
      {feat:'Sun tracker & call sheet times', f:false, b:true, p:true},
      {feat:'Priority email support', f:false, b:false, p:true},
    ]
  },
];

const Cell = ({v, featured}) => {
  let content;
  if (v === true) content = <Check color="var(--sa-accent-hi)" size={16}/>;
  else if (v === false) content = <Dash color="var(--sa-text5)" size={16}/>;
  else content = <span style={{fontSize:12, color: featured ? 'var(--sa-accent-hi)' : 'var(--sa-text2)', fontWeight:500}}>{v}</span>;
  return <td className={`tier-cell ${v===true?'yes':''} ${featured?'featured':''}`}>{content}</td>;
};

const Compare = () => {
  const renderVal = (v) => {
    if (v === true) return 'Included';
    if (v === false) return '—';
    if (v === 'limit') return 'Limited';
    if (v === 'partial') return 'Partial';
    return v;
  };
  const valClass = (v) => v === true ? 'yes' : v === false ? 'no' : '';

  return (
    <section className="section" id="compare" style={{paddingTop: 60, paddingBottom: 120}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom: 48}}>
          <div className="section-eyebrow">Compare</div>
          <h2 className="display" style={{fontSize:'clamp(32px, 5vw, 56px)', margin:'0 0 14px', letterSpacing:'-0.03em'}}>
            Every <span className="serif grad-champagne" style={{fontWeight:500}}>feature</span>, every tier.
          </h2>
          <p style={{fontSize:17, color:'var(--sa-text3)', maxWidth:560, margin:'0 auto'}}>
            The honest version of the pricing page. No "contact us." No asterisks.
          </p>
        </div>

        {/* Desktop: full matrix */}
        <div className="compare-wrap" style={{
          background:'var(--sa-card)',
          border:'0.5px solid rgba(255,255,255,0.08)',
          borderRadius: 24, overflow:'hidden'
        }}>
          <table className="compare">
            <thead>
              <tr>
                <th style={{width:'45%'}}></th>
                <th className="tier-col">Free</th>
                <th className="tier-col">Basic</th>
                <th className="tier-col featured">Pro</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_GROUPS.map((g,gi) => (
                <React.Fragment key={gi}>
                  <tr className="group-row"><td colSpan={4}>{g.title}</td></tr>
                  {g.rows.map((r,ri)=>(
                    <tr key={ri} className="row-feature">
                      <td>
                        {r.feat}
                        {r.sub && <div className="sub">{r.sub}</div>}
                      </td>
                      <Cell v={r.f === 'limit' ? 'Limited' : r.f === 'partial' ? 'Partial' : r.f}/>
                      <Cell v={r.b}/>
                      <Cell v={r.p} featured/>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>

        {/* Mobile: per-tier stacked cards */}
        <div className="compare-cards">
          {[
            {key:'f', name:'Free',  price:'$0',       featured:false},
            {key:'b', name:'Basic', price:'From $4.99/mo', featured:false},
            {key:'p', name:'Pro',   price:'From $9.99/mo', featured:true},
          ].map(t => (
            <div key={t.key} className={`compare-card ${t.featured?'featured':''}`}>
              <div className="compare-card-h">
                <span className="name">{t.name}</span>
                <span className="price">{t.price}</span>
              </div>
              {COMPARE_GROUPS.map((g,gi) => (
                <React.Fragment key={gi}>
                  <div className="compare-group">{g.title}</div>
                  {g.rows.map((r,ri) => (
                    <div key={ri} className="compare-line">
                      <div className="feat">
                        {r.feat}
                        {r.sub && <div className="sub">{r.sub}</div>}
                      </div>
                      <div className={`val ${valClass(r[t.key])}`}>{renderVal(r[t.key])}</div>
                    </div>
                  ))}
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Pricing, Compare });