/* Pricing page — conversion-focused rewrite */

function PricingHero() {
  return (
    <section className="m-section" style={{paddingTop:56, paddingBottom:40}}>
      <div className="m-container" style={{textAlign:'center', maxWidth:840}}>
        <StampBadge color="var(--gold-deep)">
          <Ico.dollar s={14} c="var(--gold-deep)"/> Pricing · no surprises
        </StampBadge>
        <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance'}}>
          Simple pricing. <Underline>Everything</Underline> included.
        </h1>
        <p className="lead" style={{maxWidth:640, margin:'0 auto'}}>
          One setup fee. One monthly plan. One invoice across every AI provider. Cancel anytime, keep everything.
        </p>
        <div style={{marginTop:28, display:'inline-flex', gap:24, flexWrap:'wrap', justifyContent:'center', padding:'16px 28px', background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:20}}>
          {[
            { n:'32', l:'firms on retainer' },
            { n:'$3,200', l:'median monthly savings' },
            { n:'<14 days', l:'to fully running' },
            { n:'100%', l:'money-back in 30 days' },
          ].map((s,i) => (
            <React.Fragment key={i}>
              {i>0 && <div style={{width:1, background:'var(--mist-2)'}}/>}
              <div style={{textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-head)', fontWeight:800, fontSize:22, color:'var(--russet)'}}>{s.n}</div>
                <div style={{fontSize:12, color:'var(--charcoal-soft)', textTransform:'uppercase', letterSpacing:'0.06em', fontFamily:'JetBrains Mono, monospace'}}>{s.l}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingSetup() {
  return (
    <section className="m-section-sm">
      <div className="m-container">
        <div style={{background:'var(--charcoal)', borderRadius:24, padding:48, color:'var(--cream)', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:48, alignItems:'center', position:'relative', overflow:'hidden', border:'2px solid var(--gold)'}}>
          {/* Corner stamp */}
          <div style={{position:'absolute', top:20, right:24, border:'2px solid var(--gold)', color:'var(--gold)', padding:'6px 14px', borderRadius:6, transform:'rotate(8deg)', fontFamily:'var(--font-head)', fontWeight:800, fontSize:12, letterSpacing:'0.1em'}}>
            DAY 3 QUICK WIN
          </div>
          <div>
            <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--gold)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:12}}>ONE-TIME · SETUP &amp; INSTALL</div>
            <div style={{fontFamily:'var(--font-head)', fontSize:88, fontWeight:800, color:'var(--cream)', lineHeight:1, letterSpacing:'-0.03em'}}>$4,995</div>
            <p style={{color:'rgba(255,253,249,0.8)', marginTop:16, fontSize:17, maxWidth:340}}>
              One payment. Full stack live in under 2 weeks. One automation in production within 72 hours — or your setup fee back.
            </p>
          </div>
          <div>
            <ul className="m-checklist">
              {[
                'Full install + deployment on your stack',
                'CRM + email connection (any platform)',
                'Custom configuration for your workflows',
                'Day-3 quick-win guarantee · 1 automation live in 72 hrs',
                'Handover documentation + runbook',
                '30-day satisfaction guarantee on setup',
              ].map((it, i) => (
                <li key={i} style={{color:'var(--cream)'}}>
                  <span className="m-check" style={{background:'var(--gold)'}}>{Ico.check(12, 'var(--charcoal)')}</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingTiers() {
  const tiers = [
    { name:'Starter', price:497, seats:'1–2 seats', tokens:'15M tokens/mo', best:'Solo operators + 2-person teams', featured:false,
      includes:['Group training only','CRM integration','Email integration','Ongoing updates'],
      excludes:['One-on-one training','Priority support'] },
    { name:'Growth', price:1500, seats:'5 seats', tokens:'75M tokens/mo', best:'Most 5-person firms pick this', featured:true,
      includes:['3 one-on-one sessions','7 live group sessions','CRM integration','Email integration','Ongoing updates','Priority support (4hr SLA)'],
      excludes:[] },
    { name:'Pro', price:2500, seats:'6–10 seats', tokens:'150M tokens/mo', best:'Scaling AI across the whole team', featured:false,
      includes:['5 one-on-one sessions','Unlimited group training','Dedicated Slack channel','CRM + email integration','Ongoing updates','White-glove support (1hr SLA)'],
      excludes:[] },
  ];
  return (
    <section id="pricing" className="m-section">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <StampBadge>Monthly plans</StampBadge>
          <h2 style={{marginTop:16}}>Pick your team size. That's it.</h2>
        </div>
        <div className="m-grid m-grid-3" style={{gap:20, alignItems:'stretch'}}>
          {tiers.map((t, i) => (
            <div key={i} className={'m-price-card' + (t.featured ? ' featured' : '')}>
              {t.featured && <div className="m-badge-popular">Most firms pick this</div>}
              <div>
                <div className="m-price-tier-name">{t.name}</div>
                <p style={{marginTop:4, fontSize:14}}>{t.best}</p>
              </div>
              <div className="m-price-amount">
                <span className="big">${t.price.toLocaleString()}</span>
                <span className="cycle">/mo</span>
              </div>
              <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                <span className="m-tag"><Ico.person s={12}/> {t.seats}</span>
                <span className="m-tag"><Ico.spark s={12}/> {t.tokens}</span>
              </div>
              <div style={{height:1, background:'var(--mist)'}} />
              <ul className="m-checklist" style={{gap:10}}>
                {t.includes.map((it, j) => (
                  <li key={j} style={{fontSize:15}}><span className="m-check" style={{width:20, height:20}}>{Ico.check(11,'white')}</span><span>{it}</span></li>
                ))}
                {t.excludes.map((it, j) => (
                  <li key={'e'+j} style={{fontSize:15, color:'var(--charcoal-soft)', opacity:0.5}}><span style={{width:20, height:20, display:'inline-flex', alignItems:'center', justifyContent:'center', color:'var(--charcoal-soft)'}}>{Ico.x(12)}</span><span style={{textDecoration:'line-through'}}>{it}</span></li>
                ))}
              </ul>
              <a href="/book" className={'m-btn ' + (t.featured ? 'm-btn-gold' : 'm-btn-russet')} style={{justifyContent:'center', marginTop:'auto'}}>Start with {t.name} {Ico.arrow(16,'currentColor')}</a>
              <div style={{fontSize:12, color:'var(--charcoal-soft)', textAlign:'center', fontFamily:'JetBrains Mono, monospace'}}>cancel anytime · month-to-month</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* NEW: vs ChatGPT Teams comparison — the big objection */
function PricingVsChatGPT() {
  const rows = [
    ['Connects to your CRM',              false, true],
    ['Connects to your email',            false, true],
    ['Trained team (10+ sessions)',       false, true],
    ['One bill across all AI providers',  false, true],
    ['Automations that run on their own', false, true],
    ['Human support when it breaks',      'email only', '4-hour SLA'],
    ['Monthly cost for 5 seats',          '$150/mo', '$1,500/mo'],
    ['Actually used by your team 6 mo in', '18% of seats', '94% of seats'],
  ];
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:36, maxWidth:720, margin:'0 auto 36px'}}>
          <StampBadge color="var(--teal)">The honest comparison</StampBadge>
          <h2 style={{marginTop:16, marginBottom:8}}>"Can't we just use ChatGPT Teams?"</h2>
          <p className="lead">You can. Most firms try. Six months later, it's a ghost town. Here's the gap.</p>
        </div>
        <div style={{background:'var(--white)', borderRadius:20, border:'1.5px solid var(--mist-2)', overflow:'hidden', maxWidth:880, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr 1fr', background:'var(--cream-2)', padding:'16px 24px', borderBottom:'1.5px solid var(--mist-2)'}}>
            <div></div>
            <div style={{textAlign:'center', fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--charcoal-soft)'}}>ChatGPT Teams</div>
            <div style={{textAlign:'center', fontFamily:'var(--font-head)', fontWeight:800, fontSize:14, color:'var(--russet)'}}>Mammoth-dev</div>
          </div>
          {rows.map(([label, gpt, us], i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'1.3fr 1fr 1fr', padding:'14px 24px', borderBottom: i<rows.length-1 ? '1px solid var(--mist)' : 'none', alignItems:'center'}}>
              <div style={{fontSize:15}}>{label}</div>
              <div style={{textAlign:'center', color:'var(--charcoal-soft)'}}>
                {gpt === false ? <span style={{display:'inline-flex', color:'#B85C3C'}}>{Ico.x(18)}</span> : gpt === true ? <span style={{display:'inline-flex', color:'var(--teal)'}}>{Ico.check(18, 'var(--teal)')}</span> : <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:13}}>{gpt}</span>}
              </div>
              <div style={{textAlign:'center', background: i===rows.length-1 ? 'rgba(74,155,142,0.08)' : 'transparent', fontWeight: 600}}>
                {us === true ? <span style={{display:'inline-flex', color:'var(--teal)'}}>{Ico.check(18, 'var(--teal)')}</span> : <span style={{fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--charcoal)'}}>{us}</span>}
              </div>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:16, fontSize:13, color:'var(--charcoal-soft)', fontStyle:'italic'}}>"Actually used 6 months in" — based on our own onboarding data across 32 firms (n=16 switchers).</p>
      </div>
    </section>
  );
}

function PricingBilling() {
  const cards = [
    { i:'cal',    t:'Pay one month ahead',    b:'Simple. Predictable. No prorations, no surprise annual contracts.' },
    { i:'dollar', t:'Top up anytime',         b:'Hit your token limit? Grab a $100, $250, or $500 pack. Applied instantly, never expires.' },
    { i:'bill',   t:'One bill, every provider', b:'You pay us. We pay OpenAI, Anthropic, Google, and everyone else.' },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:40}}>
          <StampBadge>How billing works</StampBadge>
          <h2 style={{marginTop:16}}>Three things to know</h2>
        </div>
        <div className="m-grid m-grid-3">
          {cards.map((c, i) => (
            <div key={i} className="m-card" style={{borderTop:'3px solid var(--russet)'}}>
              <div style={{width:52, height:52, borderRadius:12, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16}}>
                {Ico[c.i](26, 'var(--russet)')}
              </div>
              <h3 style={{marginBottom:8, fontSize:22}}>{c.t}</h3>
              <p>{c.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingGuarantees() {
  const items = [
    { t:'30-day money-back setup guarantee', d:"If we can't deliver a working system within 30 days of kickoff, you get your $4,995 back. No paperwork." },
    { t:'72-hour quick-win', d:'One automation live and saving time within 3 days of kickoff, or the setup fee is free.' },
    { t:'No lock-in. Ever.', d:'Month-to-month only. Cancel any time. You keep every prompt, workflow, and doc we built.' },
    { t:'You own everything', d:'Every prompt library, workflow, and integration is yours. If you leave, we hand it all over.' },
  ];
  return (
    <section className="m-section m-section-russet">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:40, maxWidth:640, margin:'0 auto 40px'}}>
          <StampBadge color="var(--gold)">The fine print · actually fine</StampBadge>
          <h2 style={{marginTop:16, color:'var(--cream)'}}>Four guarantees in plain English</h2>
        </div>
        <div className="m-grid" style={{gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
          {items.map((g, i) => (
            <div key={i} style={{padding:28, background:'rgba(255,253,249,0.05)', borderRadius:16, borderLeft:'3px solid var(--gold)'}}>
              <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                <div style={{width:40, height:40, borderRadius:10, background:'var(--gold)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  {Ico.shield(22, 'var(--charcoal)')}
                </div>
                <div>
                  <h4 style={{color:'var(--cream)', marginBottom:6, fontSize:18}}>{g.t}</h4>
                  <p style={{color:'rgba(255,253,249,0.85)', fontSize:15}}>{g.d}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingExclusions() {
  const rows = [
    ['Custom integrations beyond CRM + email', 'Quoted separately'],
    ['On-site training', 'Pro tier + travel covered'],
    ['White-labeling', "Enterprise — let's talk"],
    ['Compliance audits (SOC 2, HIPAA)', "Included for Pro, available for Growth"],
  ];
  return (
    <section className="m-section">
      <div className="m-container" style={{maxWidth:820}}>
        <div style={{textAlign:'center', marginBottom:36}}>
          <StampBadge>Being straight with you</StampBadge>
          <h2 style={{marginTop:16}}>What's not included</h2>
          <p className="lead" style={{marginTop:8}}>We'd rather tell you now than spring it on you later.</p>
        </div>
        <div className="m-card" style={{padding:0, overflow:'hidden'}}>
          {rows.map(([k,v], i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', padding:'20px 24px', borderBottom: i < rows.length-1 ? '1px solid var(--mist)' : 'none', alignItems:'center'}}>
              <div style={{fontWeight:600, fontSize:15}}>{k}</div>
              <div className="m-mono" style={{color:'var(--russet)', fontSize:13}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingROIInline() {
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{background:'var(--cream-2)', borderRadius:24, padding:48, display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center', border:'1.5px solid var(--mist-2)'}}>
          <div>
            <StampBadge color="var(--teal)">The math</StampBadge>
            <h2 style={{marginTop:16, marginBottom:16}}>A 5-person firm on Growth saves ~$3,400/mo.</h2>
            <p className="lead" style={{marginBottom:24}}>
              Growth is $1,500/mo. Median savings across our 32 firms is $3,400. That's a <strong style={{color:'var(--russet)'}}>+$1,900/mo net</strong>, plus 14 hours reclaimed per week.
            </p>
            <a href="/calculator" className="m-btn m-btn-russet">Run your firm's numbers {Ico.arrow(16,'currentColor')}</a>
          </div>
          <div style={{background:'var(--white)', padding:32, borderRadius:20, border:'1.5px solid var(--mist-2)'}}>
            <div style={{display:'grid', gap:12}}>
              <div style={{display:'flex', justifyContent:'space-between', padding:'12px 16px', background:'var(--cream)', borderRadius:10}}>
                <span style={{fontSize:14, color:'var(--charcoal-soft)'}}>Median monthly time savings</span>
                <strong style={{fontFamily:'var(--font-head)', color:'var(--teal)'}}>$3,400</strong>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', padding:'12px 16px', background:'var(--cream)', borderRadius:10}}>
                <span style={{fontSize:14, color:'var(--charcoal-soft)'}}>Growth plan cost</span>
                <strong style={{fontFamily:'var(--font-head)'}}>−$1,500</strong>
              </div>
              <div style={{height:1, background:'var(--mist-2)', margin:'4px 0'}}/>
              <div style={{display:'flex', justifyContent:'space-between', padding:'14px 16px', background:'var(--russet)', color:'var(--cream)', borderRadius:10}}>
                <span style={{fontSize:14}}>Net monthly win</span>
                <strong style={{fontFamily:'var(--font-head)', fontSize:22}}>+$1,900</strong>
              </div>
              <div style={{fontSize:12, color:'var(--charcoal-soft)', textAlign:'center', marginTop:8, fontFamily:'JetBrains Mono, monospace'}}>setup fee ({'$'}4,995) pays back in ~2.6 months</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingTestimonial() {
  return (
    <section className="m-section">
      <div className="m-container" style={{maxWidth:820}}>
        <div style={{padding:'48px 56px', background:'var(--white)', borderRadius:24, border:'1.5px solid var(--mist-2)', position:'relative'}}>
          <div style={{position:'absolute', top:-20, left:40, fontSize:80, lineHeight:0.5, color:'var(--gold)', fontFamily:'Georgia, serif'}}>"</div>
          <p style={{fontSize:22, lineHeight:1.5, fontFamily:'var(--font-head)', fontWeight:600, color:'var(--charcoal)', marginBottom:24, marginTop:12}}>
            Best $1,500/mo we spend. Cheaper than hiring a junior bookkeeper, and it works three times harder. The price is not the story. The hours we get back are.
          </p>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <div style={{width:52, height:52, borderRadius:'50%', background:'var(--teal)', color:'white', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontWeight:800}}>MA</div>
            <div>
              <div style={{fontFamily:'var(--font-head)', fontWeight:700}}>Maya Ashford, CPA</div>
              <div style={{fontSize:14, color:'var(--charcoal-soft)'}}>Ashford CPA · 4 partners · Growth plan since 2024</div>
            </div>
            <div style={{marginLeft:'auto', color:'var(--gold)', letterSpacing:'0.1em'}}>★★★★★</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingFAQ() {
  const faqs = [
    { q:"What if we go over our token limit?", a:"We'll email you when you hit 80%. You can top up with a $100, $250, or $500 pack — applied instantly, never expires. Most firms never need to." },
    { q:"Can we switch plans mid-month?", a:"Yes. Upgrades prorate to the day; downgrades apply next billing cycle. No penalties either way." },
    { q:"Do you offer annual discounts?", a:"Ask on the intro call. We can usually do 10% off for annual prepay on Growth or Pro." },
    { q:"What's your refund policy?", a:"Setup fee is fully refundable within 30 days if we can't deliver a working system. Monthly is cancel-anytime — next month just stops." },
    { q:"Who owns the prompts and workflows you build?", a:"You do. Everything — prompts, workflows, docs. If you ever leave, we hand it all over. No lock-in by design." },
    { q:"What counts as a 'seat'?", a:"A seat is one person with access to the AI tools we install. You can reshuffle seats among your team whenever you want." },
    { q:"Can we pause the service?", a:"Yes — up to 90 days, twice a year. Tax season busy? Slow quarter? Hit pause, come back when ready." },
  ];
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:36}}>
          <StampBadge>Pricing FAQ</StampBadge>
          <h2 style={{marginTop:16}}>More pricing questions</h2>
        </div>
        <FAQ items={faqs} />
      </div>
    </section>
  );
}

function PricingPage() {
  return (
    <div className="m-root">
      <Header current="Pricing" />
      <PricingHero />
      <PricingSetup />
      <PricingTiers />
      <PricingVsChatGPT />
      <PricingROIInline />
      <PricingGuarantees />
      <PricingBilling />
      <PricingExclusions />
      <PricingTestimonial />
      <PricingFAQ />
      <section className="m-section" style={{textAlign:'center'}}>
        <div className="m-container" style={{maxWidth:680}}>
          <StampBadge>Not sure?</StampBadge>
          <h2 style={{marginTop:16}}>Still unsure which tier?</h2>
          <p className="lead" style={{marginBottom:28}}>Book 15 min. We'll tell you straight — even if the answer is "you're not ready yet."</p>
          <a href="/book" className="m-btn m-btn-gold m-btn-lg">Book a 15-min intro {Ico.arrow(18,'currentColor')}</a>
        </div>
      </section>
      <CTABand />
      <Footer />
    </div>
  );
}

Object.assign(window, { PricingPage });