/* About, FAQ, Learn, Book — conversion-optimized rewrite, no emoji */

function AboutPage() {
  return (
    <div className="m-root">
      <Header current="About" />

      {/* Hero — Kodi's story */}
      <section className="m-section" style={{paddingTop:56}}>
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:56, alignItems:'center'}}>
            <div style={{position:'relative', textAlign:'center'}}>
              <div style={{display:'inline-block', padding:28, background:'var(--cream-2)', borderRadius:24, border:'1.5px solid var(--mist-2)', boxShadow:'8px 8px 0 var(--russet)'}}>
                <div style={{width:280, height:320, borderRadius:16, background:'var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:800, fontSize:96, letterSpacing:'-0.04em', position:'relative', overflow:'hidden'}}>
                  <div style={{position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,253,249,0.06) 14px 15px)'}}/>
                  <span style={{position:'relative', zIndex:1}}>K</span>
                </div>
              </div>
              <div style={{position:'absolute', top:-14, right:-8, background:'#FFF5BB', padding:'10px 14px', transform:'rotate(4deg)', boxShadow:'2px 4px 12px rgba(0,0,0,0.1)', fontFamily:'Caveat, cursive', fontSize:18, color:'var(--charcoal)', maxWidth:200, lineHeight:1.2}}>
                Hi — I'm Kodi. Founder, full-time builder, part-time mammoth wrangler.
              </div>
            </div>
            <div>
              <StampBadge>The origin story</StampBadge>
              <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance'}}>
                Life should be <Underline>enjoyed.</Underline><br/>Skills should be refined.
              </h1>
              <p className="lead" style={{marginBottom:20}}>
                Those two things pull in opposite directions — unless you invest in the people who do the work.
              </p>
              <p style={{marginBottom:18, fontSize:17, color:'var(--charcoal-soft)', lineHeight:1.7}}>
                I've spent the last few years as an AI solutions consultant — building automations in n8n, Make, custom code, whatever the job needed. I did it for startups, agencies, law firms, insurance brokers. Different industries, same conversation every time.
              </p>
              <p style={{marginBottom:18, fontSize:17, color:'var(--charcoal-soft)', lineHeight:1.7}}>
                The front end is never the problem. <strong style={{color:'var(--charcoal)'}}>The backend is always the problem.</strong> A million tools. A dozen API keys. Integrations that break on Tuesdays. Updates nobody has time to run. Every client had the same bottleneck, and none of them had an IT department to fix it.
              </p>
              <p style={{marginBottom:28, fontSize:17, color:'var(--charcoal)', lineHeight:1.7, fontWeight:500, borderLeft:'3px solid var(--gold)', paddingLeft:18}}>
                Then MCP landed. And for the first time, I saw a setup where any business — even a 3-person firm — could run like a 300-person one. If someone just handled the plumbing.
              </p>
              <p style={{marginBottom:28, fontSize:17, color:'var(--charcoal-soft)', lineHeight:1.7}}>
                Mammoth-dev is that someone. We give small teams the same AI plumbing I'd set up for myself — so you can grow the business, hone your craft, and still clock out at 5pm knowing the robots are working while you're not.
              </p>
              <div className="m-row">
                <a href="/book" className="m-btn m-btn-gold m-btn-lg">Meet me · 15 min {Ico.arrow(18,'currentColor')}</a>
                <a href="/pricing" className="m-btn m-btn-ghost">See pricing</a>
              </div>
              <div style={{marginTop:20, fontFamily:'Caveat, cursive', fontSize:20, color:'var(--russet)', transform:'rotate(-1deg)'}}>
                — Kodi, founder
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission / beliefs strip */}
      <section className="m-section-sm m-section-russet">
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:32, alignItems:'center'}}>
            <div style={{fontFamily:'Caveat, cursive', fontSize:72, color:'var(--gold)', lineHeight:0.8, fontWeight:700}}>
              Our<br/>mission.
            </div>
            <div>
              <p style={{color:'var(--cream)', fontSize:22, lineHeight:1.5, fontFamily:'var(--font-head)', fontWeight:600, marginBottom:16}}>
                Give every small business the superpowers a Fortune 500 IT team buys for millions — for the price of one junior hire.
              </p>
              <p style={{color:'rgba(255,253,249,0.75)', fontSize:16, lineHeight:1.6}}>
                Because when you invest in your people with the right tools, they don't just work faster. They work better. They go home on time. They stay. And the business quietly becomes something they're proud of.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section className="m-section-sm m-section-mist">
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24, textAlign:'center'}}>
            {[
              { n:'2024', l:'Founded' },
              { n:'32', l:'Firms served' },
              { n:'$127K', l:'Average annual client savings' },
              { n:'4.9/5', l:'Client satisfaction' },
            ].map((s, i) => (
              <div key={i}>
                <div style={{fontFamily:'var(--font-head)', fontSize:44, fontWeight:800, color:'var(--russet)', letterSpacing:'-0.03em', lineHeight:1}}>{s.n}</div>
                <div style={{color:'var(--charcoal-soft)', marginTop:8, fontSize:14}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="m-section m-section-alt">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge>The team</StampBadge>
            <h2 style={{marginTop:16}}>Small team. Real people. <Underline>No offshore call center.</Underline></h2>
          </div>
          <div className="m-grid m-grid-3">
            {[
              { n:'Kodi', r:'Founder · AI Solutions', loc:'Remote · USA', bio:'Spent years as an AI consultant in n8n / Make / custom code — saw every client hit the same backend wall. Built Mammoth-dev to tear it down.' },
              { n:'Sam Okafor', r:'Head of Training', loc:'Remote · NYC', bio:'Former CPA turned AI trainer. Knows the pain firsthand — which is why the training actually sticks.' },
              { n:'Priya Rao', r:'Client Success · On-Call', loc:'Remote · Chicago', bio:'Answers your emails within 2 hours. Watches the maintenance dashboard so you never have to. Fixes breakages before you notice.' },
            ].map((p, i) => (
              <div key={i} className="m-card" style={{borderTop:'3px solid var(--russet)'}}>
                <div style={{width:72, height:72, borderRadius:'50%', background:'var(--russet)', marginBottom:16, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:800, fontSize:24}}>{p.n.split(' ').map(x=>x[0]).join('')}</div>
                <h4 style={{marginBottom:4}}>{p.n}</h4>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'var(--russet)', marginBottom:12, letterSpacing:'0.02em'}}>{p.r} · {p.loc}</div>
                <p style={{fontSize:15}}>{p.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we believe */}
      <section className="m-section">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge color="var(--teal)">What we believe</StampBadge>
            <h2 style={{marginTop:16}}>Four things we actually mean</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
            {[
              { i:'spark', t:'Life is meant to be enjoyed', d:"Nobody's deathbed thought is 'I wish I'd updated more CRM records.' Tools exist so humans don't have to be machines. We take the grunt work; you take Friday afternoon." },
              { i:'teach', t:'Invest in your people', d:"The firms that win over the next decade are the ones who hand their team superpowers, not more software. Training is not a line item — it's the point." },
              { i:'shield', t:'Boring reliability beats flashy demos', d:'Your firm runs on trust. AI that breaks loses that fast. We pick sturdy over shiny, every time — and we watch it 24/7 so it stays that way.' },
              { i:'grow', t:'A 5-person firm can beat a 50-person one', d:"When the plumbing works, small teams ship faster, serve better, and keep more of what they earn. That's the whole game." },
            ].map((v, i) => (
              <div key={i} style={{padding:32, borderRadius:'var(--radius-lg)', background:'var(--cream-2)', border:'1.5px solid var(--mist-2)'}}>
                <div style={{width:52, height:52, borderRadius:12, background:'var(--white)', border:'1.5px solid var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20}}>
                  {Ico[v.i](26, 'var(--russet)')}
                </div>
                <h3 style={{marginBottom:10, fontSize:20}}>{v.t}</h3>
                <p style={{fontSize:15}}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who we're for / who we're not */}
      <section className="m-section m-section-mist">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge>Fit check</StampBadge>
            <h2 style={{marginTop:16}}>We're honest about who we're for</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, maxWidth:920, margin:'0 auto'}}>
            <div style={{padding:28, background:'var(--teal-soft)', borderRadius:16, borderLeft:'3px solid var(--teal)'}}>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'var(--teal)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:14}}>A good fit if you…</div>
              <ul className="m-checklist">
                {['Run a 3–15 person firm','Do accounting, insurance, or advisory work','Want AI but not another vendor to manage','Prefer one monthly bill over 12 subscriptions'].map((t, i) => (
                  <li key={i}><span className="m-check" style={{background:'var(--teal)'}}>{Ico.check(11, 'white')}</span><span>{t}</span></li>
                ))}
              </ul>
            </div>
            <div style={{padding:28, background:'rgba(184,92,60,0.06)', borderRadius:16, borderLeft:'3px solid #B85C3C'}}>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'#B85C3C', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:14}}>Not a fit if you…</div>
              <ul className="m-checklist">
                {['Have an in-house engineering team (you can DIY)','Need a <$500/month solution (try ChatGPT Teams)','Want enterprise RFPs (we\'re not that)','Are looking for "AI strategy consulting"'].map((t, i) => (
                  <li key={i}><span className="m-check" style={{background:'#B85C3C'}}>{Ico.x(11, 'white')}</span><span>{t}</span></li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <CTABand heading="Want to meet us?" sub="15 minutes on the calendar. No pitch. We'll tell you honestly if we can help." />
      <Footer />
    </div>
  );
}

function FAQPage() {
  const groups = [
    { name:'Getting started', icon:'spark', items:[
      { q:"How long does setup take?", a:"Under 2 weeks from intro call to fully running. We guarantee one live automation within 72 hours of kickoff — in writing." },
      { q:"What do I need to bring to the intro call?", a:"Nothing. Show up. Tell us what's annoying you. We'll tell you if we can help. 15 minutes, no slide deck." },
      { q:"Can we start with one person and grow?", a:"Yes. Starter tier is 1–2 seats at $497/month. Upgrade to Growth or Pro whenever you need more. Month-to-month, no re-installation fees." },
      { q:"Do you sign NDAs before the intro call?", a:"Happy to. Email legal@mammoth.dev and we'll turn it around same-day." },
    ]},
    { name:'Pricing & billing', icon:'receipt', items:[
      { q:"How much does it cost?", a:"$4,995 one-time setup + $497–$2,500/month. Growth ($1,500/mo) fits most 5-person firms. Full breakdown on the pricing page." },
      { q:"What's included in the setup fee?", a:"Full install on your stack, CRM + email integration, 3 custom workflows, security review, first live automation in 72 hours, and 14 days of white-glove onboarding." },
      { q:"What if we go over our token limit?", a:"Top-up packs: $100, $250, $500. Applied instantly, never expire. Most firms never buy one in year one." },
      { q:"Do you lock us into a contract?", a:"No. Month-to-month. Cancel anytime. Keep everything — the integrations, the prompts, the training materials. Yours." },
      { q:"Is there a money-back guarantee?", a:"30 days. If we fail to deliver what we promised, full refund. We've refunded one firm in 2 years — and then they came back 3 months later." },
    ]},
    { name:'Tools & integrations', icon:'link', items:[
      { q:"Which AI providers do you use?", a:"All of them. OpenAI, Anthropic, Google, Meta. We pick the best model for each job and swap when better ones ship. You pay us one bill; we handle the 7 underneath." },
      { q:"Do you work with QuickBooks / Salesforce / HubSpot?", a:"Yes, plus Xero, Zoho, Gmail, Outlook, Redtail, Wealthbox, Agency Zoom, AMS360, Applied Epic, and 40+ more. If yours isn't on the list, we probably can still do it — ask." },
      { q:"What if we switch CRM later?", a:"We reconnect. Your prompts, workflows, and training stay. Only the connector changes. No re-install fee." },
      { q:"Can you keep tools we already use (like ChatGPT Teams)?", a:"Yes. If it's working, we keep it and build around it. We consolidate and fill gaps, not replace what works." },
    ]},
    { name:'Security & privacy', icon:'shield', items:[
      { q:"Where does our data go?", a:"Through our router to the model provider you're using for that task. No training on your data — contractually, with every provider. We can share the DPAs." },
      { q:"Are you SOC 2 compliant?", a:"SOC 2 Type I complete. Type II in audit as of 2026. Happy to share the report under NDA." },
      { q:"What about IRS Pub 4557, FINRA, state insurance compliance?", a:"We know these and design around them. Audit trails, access controls, data retention — all covered. Full detail on the intro call or ask security@mammoth.dev." },
      { q:"What happens to our data if we cancel?", a:"We export everything to you in the format you want (JSON, CSV, PDF) and delete our copies within 30 days. You sign off that the export is clean." },
    ]},
    { name:'Support & ongoing', icon:'chat', items:[
      { q:"What's the response time when something breaks?", a:"2 business hours on Starter, 1 hour on Growth, 30 minutes on Pro. Real human, not a ticket queue." },
      { q:"Do new AI models mean more cost?", a:"No. Model upgrades are included. When GPT-5 ships, we swap it in for you. You don't re-buy anything." },
      { q:"What if our needs change mid-year?", a:"Upgrade or downgrade tiers anytime. No re-install fee for tier changes." },
    ]},
  ];
  return (
    <div className="m-root">
      <Header current="FAQ" />

      <section className="m-section" style={{paddingTop:56, paddingBottom:24}}>
        <div className="m-container" style={{textAlign:'center', maxWidth:780}}>
          <StampBadge>FAQ</StampBadge>
          <h1 style={{marginTop:20, marginBottom:16, textWrap:'balance'}}>
            Everything people ask, <Underline>answered.</Underline>
          </h1>
          <p className="lead">Can't find yours? Bring it to the intro call — no answer too dumb.</p>
          <div style={{marginTop:24}}>
            <a href="/book" className="m-btn m-btn-gold m-btn-lg">Book intro · 15 min {Ico.arrow(18,'currentColor')}</a>
          </div>
        </div>
      </section>

      {/* Quick-answer cards */}
      <section className="m-section-sm">
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {[
              { n:'$4,995', l:'Setup fee' },
              { n:'$1,500', l:'Growth plan / mo' },
              { n:'< 2 wks', l:'Setup time' },
              { n:'30 days', l:'Money-back window' },
            ].map((s, i) => (
              <div key={i} style={{padding:'20px 24px', background:'var(--cream-2)', borderRadius:14, border:'1.5px solid var(--mist-2)', textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-head)', fontSize:28, fontWeight:800, color:'var(--russet)', letterSpacing:'-0.02em'}}>{s.n}</div>
                <div style={{fontSize:13, color:'var(--charcoal-soft)', marginTop:4}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {groups.map((g, i) => (
        <section key={i} className={'m-section-sm' + (i % 2 === 0 ? ' m-section-alt' : '')}>
          <div className="m-container" style={{maxWidth:860}}>
            <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:24}}>
              <div style={{width:44, height:44, borderRadius:12, background:'var(--russet)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                {Ico[g.icon](22, 'var(--cream)')}
              </div>
              <h2 style={{margin:0}}>{g.name}</h2>
            </div>
            <FAQ items={g.items} />
          </div>
        </section>
      ))}

      {/* Still-have-questions card */}
      <section className="m-section">
        <div className="m-container" style={{maxWidth:720}}>
          <div style={{padding:40, background:'var(--russet)', borderRadius:20, color:'var(--cream)', textAlign:'center', position:'relative'}}>
            <div style={{position:'absolute', top:-16, left:'50%', transform:'translateX(-50%)', background:'var(--gold)', color:'var(--charcoal)', padding:'6px 16px', borderRadius:999, fontFamily:'JetBrains Mono, monospace', fontSize:11, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase'}}>Still wondering?</div>
            <h3 style={{color:'var(--cream)', marginTop:8, marginBottom:12}}>Bring every question to the call.</h3>
            <p style={{color:'var(--mist-2)', marginBottom:24, maxWidth:480, margin:'0 auto 24px'}}>15 minutes. No pitch. We'll tell you honestly if we can help — and if we can't, we'll point you somewhere that can.</p>
            <a href="/book" className="m-btn m-btn-gold m-btn-lg">Book intro {Ico.arrow(18,'currentColor')}</a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

function LearnPage() {
  const guides = [
    { tag:'Guide', t:'The 5-person firm AI stack (2026)', who:'All industries', mins:'8 min read', featured:true },
    { tag:'Guide', t:'ChatGPT Teams vs managed AI: the honest breakdown', who:'All industries', mins:'6 min read' },
    { tag:'Guide', t:'How to integrate AI with QuickBooks (without breaking it)', who:'Accountants', mins:'10 min read' },
    { tag:'Video', t:'Inbox triage setup walkthrough', who:'All industries', mins:'12 min watch' },
    { tag:'Template', t:'10 prompts for accounting client emails', who:'Accountants', mins:'Free download' },
    { tag:'Template', t:'Insurance renewal outreach prompt pack', who:'Insurance', mins:'Free download' },
    { tag:'Compare', t:'Redtail vs Wealthbox with AI overlay', who:'Advisors', mins:'7 min read' },
    { tag:'Guide', t:"What managed AI actually costs a small firm (real numbers)", who:'All industries', mins:'5 min read' },
    { tag:'Video', t:'Meeting-note automation for RIAs', who:'Advisors', mins:'9 min watch' },
  ];
  const tagMeta = (t) => ({
    Video: { bg:'var(--teal-soft)', c:'var(--teal)', ic:'play' },
    Template: { bg:'rgba(212,162,74,0.18)', c:'var(--gold-deep)', ic:'download' },
    Compare: { bg:'rgba(139,90,60,0.12)', c:'var(--russet)', ic:'scale' },
    Guide: { bg:'var(--mist)', c:'var(--charcoal-soft)', ic:'book' },
  })[t];
  const featured = guides.find(g => g.featured);

  return (
    <div className="m-root">
      <Header current="Learn" />

      <section className="m-section" style={{paddingTop:56, paddingBottom:32}}>
        <div className="m-container" style={{textAlign:'center', maxWidth:780}}>
          <StampBadge color="var(--teal)">
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
              {Ico.book(14, 'var(--teal)')} Free training
            </span>
          </StampBadge>
          <h1 style={{marginTop:20, marginBottom:16, textWrap:'balance'}}>
            Learn AI the way your team <Underline>actually learns.</Underline>
          </h1>
          <p className="lead">Short guides. Real walkthroughs. Prompt packs you can steal today. No sign-up wall, no drip campaign.</p>
        </div>
      </section>

      {/* Featured guide */}
      <section className="m-section-sm">
        <div className="m-container">
          <a href="/learn" style={{textDecoration:'none', display:'block'}}>
            <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:0, background:'var(--white)', borderRadius:20, overflow:'hidden', border:'1.5px solid var(--mist-2)', boxShadow:'6px 6px 0 var(--russet)'}}>
              <div style={{padding:40}}>
                <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', background:'var(--gold)', color:'var(--charcoal)', borderRadius:999, fontFamily:'JetBrains Mono, monospace', fontSize:11, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:20}}>
                  {Ico.spark(13, 'var(--charcoal)')} Featured guide
                </div>
                <h2 style={{marginBottom:16, fontSize:32}}>{featured.t}</h2>
                <p style={{color:'var(--charcoal-soft)', marginBottom:24, fontSize:16, lineHeight:1.6}}>
                  The exact stack we install at most 5-person firms in 2026. What goes where, why, and what it costs. No product placement, no affiliate links.
                </p>
                <div style={{display:'flex', gap:16, alignItems:'center'}}>
                  <span className="m-btn m-btn-russet">Read guide {Ico.arrow(16,'currentColor')}</span>
                  <span style={{fontSize:13, color:'var(--charcoal-soft)'}}>{featured.mins}</span>
                </div>
              </div>
              <div style={{background:'var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', padding:40, position:'relative'}}>
                <div style={{position:'absolute', inset:0, opacity:0.15, backgroundImage:'repeating-linear-gradient(45deg, var(--cream) 0 1px, transparent 1px 14px)'}}/>
                <div style={{textAlign:'center', color:'var(--cream)', position:'relative'}}>
                  {Ico.stack(120, 'var(--gold)')}
                  <div style={{fontFamily:'Caveat, cursive', fontSize:22, marginTop:12, color:'var(--gold)'}}>the 2026 stack →</div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </section>

      {/* Filter + grid */}
      <section className="m-section">
        <div className="m-container">
          <div style={{display:'flex', gap:12, marginBottom:32, flexWrap:'wrap', alignItems:'center'}}>
            <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--charcoal-soft)', letterSpacing:'0.12em', textTransform:'uppercase', marginRight:8}}>Filter</div>
            {['All','Guides','Videos','Templates','Comparisons'].map((f, i) => (
              <button key={i} className={'m-btn ' + (i===0 ? 'm-btn-russet' : 'm-btn-ghost')} style={{padding:'10px 18px', fontSize:14}}>{f}</button>
            ))}
          </div>
          <div className="m-grid m-grid-3">
            {guides.filter(g => !g.featured).map((g, i) => {
              const m = tagMeta(g.tag);
              return (
                <a key={i} href="/learn" style={{textDecoration:'none'}}>
                  <div className="m-card m-card-lift" style={{padding:0, overflow:'hidden'}}>
                    <div style={{aspectRatio:'16/9', background:m.bg, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
                      <div style={{color:m.c, opacity:0.85}}>{Ico[m.ic](56, m.c)}</div>
                      <div style={{position:'absolute', top:12, left:12, padding:'5px 10px', background:'var(--white)', borderRadius:999, fontFamily:'JetBrains Mono, monospace', fontSize:10, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:m.c, border:`1px solid ${m.c}`}}>{g.tag}</div>
                    </div>
                    <div style={{padding:22}}>
                      <h4 style={{marginBottom:10, color:'var(--charcoal)', lineHeight:1.3}}>{g.t}</h4>
                      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:13, color:'var(--charcoal-soft)'}}>
                        <span>For: {g.who}</span>
                        <span style={{fontFamily:'JetBrains Mono, monospace'}}>{g.mins}</span>
                      </div>
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Prompt pack signup */}
      <section className="m-section m-section-mist">
        <div className="m-container" style={{maxWidth:720}}>
          <div style={{padding:40, background:'var(--white)', borderRadius:20, border:'1.5px solid var(--mist-2)', textAlign:'center', boxShadow:'6px 6px 0 var(--gold)'}}>
            <div style={{width:56, height:56, borderRadius:14, background:'var(--gold)', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:20}}>
              {Ico.download(28, 'var(--charcoal)')}
            </div>
            <h2 style={{marginBottom:12}}>Free prompt pack, zero strings.</h2>
            <p className="lead" style={{marginBottom:28}}>Pick your industry. We'll email you 10 battle-tested prompts we've actually deployed at real firms.</p>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1.3fr auto', gap:10, maxWidth:560, margin:'0 auto'}}>
              <select className="m-select"><option>Your industry…</option><option>Accounting</option><option>Insurance</option><option>Advisory</option></select>
              <input className="m-input" type="email" placeholder="you@firm.com" />
              <button className="m-btn m-btn-gold">Send it</button>
            </div>
            <p style={{marginTop:14, fontSize:13, color:'var(--charcoal-soft)'}}>One email. Unsubscribe anytime. No drip sequence, no sales call.</p>
          </div>
        </div>
      </section>

      <CTABand heading="Ready to see it in action?" sub="15 minutes. We'll walk through your use case live — no generic demo." />
      <Footer />
    </div>
  );
}

// Open Google Calendar booking in a centered popup window
function openBooking(e) {
  if (e) e.preventDefault();
  const url = 'https://calendar.app.google/4VYPcnBNKh1Ue1WKA';
  const w = 720, h = 780;
  const left = window.screenX + (window.outerWidth - w) / 2;
  const top = window.screenY + (window.outerHeight - h) / 2;
  const win = window.open(url, 'mammoth_booking', `width=${w},height=${h},left=${left},top=${top},noopener=yes,noreferrer=yes`);
  if (!win) window.location.href = url;
}

// ─── Branded booking card — pretty UI that opens Google booking on click
function BookingCard() {
  // Generate next 5 weekdays as date chips
  const days = React.useMemo(() => {
    const arr = [];
    const d = new Date();
    while (arr.length < 5) {
      d.setDate(d.getDate() + 1);
      const dow = d.getDay();
      if (dow !== 0 && dow !== 6) {
        arr.push({
          dow: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][dow],
          day: d.getDate(),
          month: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()],
        });
      }
    }
    return arr;
  }, []);

  const [selected, setSelected] = React.useState(0);
  const slots = ['9:00a', '10:30a', '1:00p', '2:30p', '4:00p'];

  return (
    <div className="m-card" style={{padding:0, boxShadow:'8px 8px 0 var(--russet)', overflow:'hidden', borderRadius:24, border:'1.5px solid var(--russet)', background:'var(--white)'}}>
      {/* Header bar */}
      <div style={{padding:'20px 28px', borderBottom:'1.5px dashed var(--russet)', background:'linear-gradient(180deg, var(--cream-2) 0%, var(--white) 100%)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--russet)', letterSpacing:'0.12em', textTransform:'uppercase', fontWeight:700, marginBottom:4}}>15-min intro · Google Meet</div>
          <h3 style={{margin:0, fontSize:'1.4rem', color:'var(--charcoal)'}}>Pick a time that works</h3>
        </div>
        <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', background:'rgba(74,155,142,0.12)', borderRadius:999, border:'1.5px solid var(--teal)'}}>
          <span style={{width:8, height:8, borderRadius:'50%', background:'var(--teal)'}} />
          <span style={{fontSize:12, color:'var(--teal)', fontWeight:700, fontFamily:'var(--font-head)'}}>Kodi is available</span>
        </div>
      </div>

      {/* Date strip */}
      <div style={{padding:'24px 28px 16px'}}>
        <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--charcoal-soft)', letterSpacing:'0.1em', textTransform:'uppercase', fontWeight:700, marginBottom:12}}>Next 5 weekdays</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:8}}>
          {days.map((d, i) => (
            <button
              key={i}
              onClick={() => setSelected(i)}
              style={{
                padding:'12px 8px', border: selected === i ? '2px solid var(--russet)' : '1.5px solid var(--mist-2)',
                background: selected === i ? 'var(--cream-2)' : 'var(--white)',
                borderRadius:12, cursor:'pointer', textAlign:'center',
                transition:'all 0.15s', fontFamily:'var(--font-head)',
                boxShadow: selected === i ? '0 4px 0 var(--russet)' : 'none',
                transform: selected === i ? 'translateY(-2px)' : 'none',
              }}
            >
              <div style={{fontSize:11, color:'var(--charcoal-soft)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:700, marginBottom:4}}>{d.dow}</div>
              <div style={{fontSize:24, color:'var(--charcoal)', fontWeight:800, lineHeight:1}}>{d.day}</div>
              <div style={{fontSize:11, color:'var(--russet)', marginTop:4, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em'}}>{d.month}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Time slots */}
      <div style={{padding:'8px 28px 20px'}}>
        <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--charcoal-soft)', letterSpacing:'0.1em', textTransform:'uppercase', fontWeight:700, marginBottom:12}}>
          {days[selected].dow}, {days[selected].month} {days[selected].day} · times in your timezone
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:8}}>
          {slots.map((t, i) => (
            <button
              key={i}
              onClick={openBooking}
              style={{
                padding:'14px 6px', border:'1.5px solid var(--russet)',
                background:'var(--white)', color:'var(--russet)',
                borderRadius:10, cursor:'pointer',
                fontFamily:'JetBrains Mono, monospace', fontWeight:700, fontSize:13,
                transition:'all 0.15s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--russet)'; e.currentTarget.style.color = 'var(--cream)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--white)'; e.currentTarget.style.color = 'var(--russet)'; }}
            >
              {t}
            </button>
          ))}
        </div>
      </div>

      {/* Big CTA */}
      <div style={{padding:'8px 28px 24px'}}>
        <button
          onClick={openBooking}
          className="m-btn m-btn-gold m-btn-lg"
          style={{justifyContent:'center', width:'100%', cursor:'pointer', border:'none'}}
        >
          See all available times {Ico.arrow(18, 'currentColor')}
        </button>
      </div>

      {/* Trust footer */}
      <div style={{padding:'14px 28px', borderTop:'1.5px solid var(--mist)', background:'var(--cream-2)', display:'flex', flexWrap:'wrap', justifyContent:'center', alignItems:'center', gap:18, fontSize:12, color:'var(--charcoal-soft)'}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(12, 'var(--teal)')} Google Meet auto-link</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(12, 'var(--teal)')} Reschedule 1 click</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(12, 'var(--teal)')} No drip email</span>
      </div>
    </div>
  );
}

function BookPage() {
  return (
    <div className="m-root">
      <Header current="Book" />

      <section className="m-section" style={{paddingTop:56}}>
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:56, alignItems:'start'}}>
            {/* Left — promise */}
            <div>
              <StampBadge color="var(--gold)">
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
                  {Ico.clock(14, 'var(--gold-deep)')} 15 minutes
                </span>
              </StampBadge>
              <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance'}}>
                Book a 15-minute intro.
              </h1>
              <p className="lead" style={{marginBottom:32}}>
                We listen first. No pitch, no slide deck, no trying to close you on the call.
              </p>

              <div style={{padding:24, background:'var(--cream-2)', borderRadius:16, marginBottom:24, border:'1.5px dashed var(--russet)'}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--russet)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:16}}>What happens on the call</div>
                <ul className="m-checklist">
                  {[
                    "You tell us what's eating your week",
                    "We tell you if we can help — honestly",
                    "If we can't, we point you somewhere that can",
                    "If we can, we send a scoped proposal within 24 hours",
                  ].map((t, i) => (
                    <li key={i}><span className="m-check">{Ico.check(11, 'white')}</span><span>{t}</span></li>
                  ))}
                </ul>
              </div>

              <div style={{padding:20, background:'var(--white)', borderRadius:16, display:'flex', gap:16, alignItems:'center', border:'1.5px solid var(--mist-2)'}}>
                <div style={{width:56, height:56, borderRadius:'50%', background:'var(--russet)', color:'var(--cream)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontWeight:800, fontSize:24, flexShrink:0}}>K</div>
                <div style={{flex:1}}>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:700, color:'var(--charcoal)'}}>Kodi</div>
                  <div style={{fontSize:13, color:'var(--charcoal-soft)'}}>Founder · Answers every intro call personally</div>
                </div>
                <div style={{color:'var(--gold)', fontSize:14, letterSpacing:'0.1em'}}>★★★★★</div>
              </div>

              <div style={{marginTop:24, display:'flex', gap:20, flexWrap:'wrap', fontSize:13, color:'var(--charcoal-soft)'}}>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.shield(15, 'var(--teal)')} No phone number needed</span>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.shield(15, 'var(--teal)')} No drip email</span>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.shield(15, 'var(--teal)')} Cancel with 1 click</span>
              </div>
            </div>

            {/* Right — Branded booking card (opens Google Calendar in popup) */}
            <BookingCard />
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="m-section-sm m-section-mist">
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
            {[
              { i:'clock', t:'15 minutes', s:"That's it. No 'discovery' call + follow-up." },
              { i:'shield', t:'No pitch', s:"We listen. You decide." },
              { i:'phone', t:'Real person', s:'Kodi, the founder, every time.' },
              { i:'check', t:'Quick answer', s:"Yes, no, or 'go talk to them' — on the call." },
            ].map((v, i) => (
              <div key={i} style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                <div style={{width:40, height:40, borderRadius:10, background:'var(--white)', border:'1.5px solid var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  {Ico[v.i](20, 'var(--russet)')}
                </div>
                <div>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:800, color:'var(--charcoal)', marginBottom:4}}>{v.t}</div>
                  <div style={{fontSize:13, color:'var(--charcoal-soft)'}}>{v.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { AboutPage, FAQPage, LearnPage, BookPage });