/* Homepage — MCP / AI IT Department positioning
   Value prop: We connect ALL your tools to ANY model via one MCP. You get an
   AI IT department: pre-installed tools, routed tokens, team training, ongoing
   management. Not ChatGPT-Teams competitor — the layer underneath them all. */

function StampBadge({ children, color = 'var(--russet)' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 14px', border: `1.5px dashed ${color}`,
      borderRadius: 999, color, fontFamily: 'var(--font-head)',
      fontWeight: 700, fontSize: 12, letterSpacing: '0.08em',
      textTransform: 'uppercase', transform: 'rotate(-0.5deg)',
    }}>{children}</div>
  );
}

function Underline({ children, color = 'var(--gold)' }) {
  return (
    <span style={{position:'relative', display:'inline-block'}}>
      {children}
      <svg style={{position:'absolute', bottom:-6, left:0, width:'100%', height:10}} viewBox="0 0 200 10" preserveAspectRatio="none">
        <path d="M2 6 Q 50 2 100 5 T 198 6" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round" />
      </svg>
    </span>
  );
}

/* ─── HERO: Your AI IT Department ─── */
function HomeHero() {
  return (
    <section id="home" className="m-section" style={{paddingTop:56, paddingBottom:56}}>
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:56, alignItems:'center'}}>
          <div>
            <StampBadge color="var(--teal)">
              <span style={{width:6, height:6, borderRadius:'50%', background:'var(--teal)'}}/> Managed AI · 32 firms served
            </StampBadge>
            <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance', fontSize:'clamp(2.2rem, 4.2vw, 3.6rem)'}}>
              Your <Underline>AI IT department.</Underline><br/>
              One connection. <em style={{fontStyle:'normal', color:'var(--russet)'}}>Every tool.</em>
            </h1>
            <p className="lead" style={{marginBottom:24, maxWidth:560}}>
              We wire your email, CRM, QuickBooks, posting tools, image generators — <strong style={{color:'var(--charcoal)'}}>every app your team uses</strong> — into one AI system your team actually uses. Bring Claude, Perplexity, Goose, whatever. We handle the routing, the upkeep, and the training.
            </p>

            {/* Tool-mesh badge strip */}
            <div style={{display:'flex', flexWrap:'wrap', gap:8, marginBottom:28, alignItems:'center'}}>
              <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--charcoal-soft)', letterSpacing:'0.1em', textTransform:'uppercase', marginRight:4}}>pre-installed:</span>
              {['Higgsfield','Nano Banana','Claude','Perplexity','Goose','QuickBooks','HubSpot','Gmail','Outlook','+40 more'].map((n, i) => (
                <span key={i} style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, padding:'3px 9px', background:'var(--white)', border:'1px solid var(--mist-2)', borderRadius:6, color:'var(--charcoal-soft)'}}>{n}</span>
              ))}
            </div>

            {/* Pricing strip */}
            <div style={{display:'inline-flex', flexWrap:'wrap', gap:16, alignItems:'baseline', padding:'14px 20px', background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:16, marginBottom:24}}>
              <div>
                <div style={{fontFamily:'var(--font-head)', fontSize:22, fontWeight:800, color:'var(--charcoal)'}}>$4,995<span style={{fontSize:14, color:'var(--charcoal-soft)', fontWeight:500}}> setup</span></div>
              </div>
              <div style={{width:1, height:24, background:'var(--mist-2)'}}/>
              <div>
                <div style={{fontFamily:'var(--font-head)', fontSize:22, fontWeight:800, color:'var(--charcoal)'}}>$1,500<span style={{fontSize:14, color:'var(--charcoal-soft)', fontWeight:500}}>/mo</span></div>
                <div style={{fontSize:12, color:'var(--teal)', fontFamily:'var(--font-head)', fontWeight:700}}>most 5-person firms</div>
              </div>
              <a href="/pricing" style={{color:'var(--russet)', fontWeight:700, fontSize:14, fontFamily:'var(--font-head)', textDecoration:'none', borderBottom:'1px dashed var(--russet)', paddingBottom:2}}>see all plans</a>
            </div>

            <div className="m-row">
              <a href="/book" className="m-btn m-btn-gold m-btn-lg">Book a 15-min intro {Ico.arrow(18,'currentColor')}</a>
              <a href="/calculator" className="m-btn m-btn-ghost">See what you'd save</a>
            </div>
            <div style={{marginTop:20, display:'flex', alignItems:'center', gap:18, color:'var(--charcoal-soft)', fontSize:14, flexWrap:'wrap'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(16, 'var(--teal)')} No pitch</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(16, 'var(--teal)')} Cancel anytime</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(16, 'var(--teal)')} 15 min max</span>
            </div>
          </div>

          {/* Right: MCP hub diagram */}
          <div style={{position:'relative'}}>
            <MCPHubDiagram />

            {/* Handwritten note */}
            <div style={{position:'absolute', bottom:-18, right:-12, background:'#FFF5BB', padding:'10px 14px', transform:'rotate(3deg)', boxShadow:'2px 4px 12px rgba(0,0,0,0.08)', maxWidth:200, fontFamily:'Caveat, cursive', fontSize:16, color:'var(--charcoal)', lineHeight:1.3}}>
              ← One MCP. Every app. Every model.
            </div>
          </div>
        </div>

        {/* Trust strip */}
        <div style={{marginTop:48, display:'flex', gap:20, alignItems:'center', flexWrap:'wrap', padding:'20px 28px', borderTop:'1px dashed var(--mist-2)', borderBottom:'1px dashed var(--mist-2)'}}>
          <strong style={{fontFamily:'var(--font-head)', color:'var(--russet)', fontSize:14}}>Already running AI for:</strong>
          <div style={{display:'flex', gap:24, flex:1, alignItems:'center', color:'var(--charcoal-soft)', fontFamily:'var(--font-head)', fontWeight:700, fontSize:15, flexWrap:'wrap'}}>
            <span>Ashford CPA</span>
            <span style={{opacity:0.3}}>·</span>
            <span>Northline Advisors</span>
            <span style={{opacity:0.3}}>·</span>
            <span>Kellerman Insurance</span>
            <span style={{opacity:0.3}}>·</span>
            <span>Burke & Co.</span>
            <span style={{opacity:0.3}}>·</span>
            <span style={{color:'var(--teal)'}}>+ 28 more firms</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MCP hub diagram — central mammoth surrounded by orbiting tools */
function MCPHubDiagram() {
  const tools = [
    { t:'Gmail',      i:'mail',    color:'var(--russet)',  angle:-90 },
    { t:'HubSpot',    i:'crm',     color:'var(--teal)',    angle:-45 },
    { t:'QuickBooks', i:'bill',    color:'var(--gold-deep)', angle:0   },
    { t:'Claude',     i:'spark',   color:'#B85C3C',        angle:45  },
    { t:'Higgsfield', i:'eye',     color:'var(--russet)',  angle:90  },
    { t:'Goose',      i:'wrench',  color:'var(--teal)',    angle:135 },
    { t:'Outlook',    i:'mail',    color:'var(--gold-deep)', angle:180 },
    { t:'Perplexity', i:'spark',   color:'#B85C3C',        angle:225 },
  ];
  const R = 150; // orbit radius
  return (
    <div style={{aspectRatio:'1/1', background:'var(--white)', borderRadius:24, border:'1.5px solid var(--mist-2)', padding:24, position:'relative', overflow:'hidden'}}>
      {/* Grid bg */}
      <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(var(--mist) 1px, transparent 1px), linear-gradient(90deg, var(--mist) 1px, transparent 1px)', backgroundSize:'24px 24px', opacity:0.35}}/>

      {/* Orbit rings */}
      <svg style={{position:'absolute', inset:0, width:'100%', height:'100%'}} viewBox="0 0 400 400">
        <circle cx="200" cy="200" r="150" fill="none" stroke="var(--russet)" strokeWidth="1" strokeDasharray="3 5" opacity="0.4"/>
        <circle cx="200" cy="200" r="90"  fill="none" stroke="var(--teal)"   strokeWidth="1" strokeDasharray="3 5" opacity="0.3"/>

        {/* Connection lines from center to each tool */}
        {tools.map((tool, i) => {
          const rad = (tool.angle * Math.PI) / 180;
          const x2 = 200 + R * Math.cos(rad);
          const y2 = 200 + R * Math.sin(rad);
          return (
            <path key={i} d={`M 200 200 L ${x2} ${y2}`} stroke={tool.color} strokeWidth="1.5" strokeDasharray="4 4" opacity="0.5"/>
          );
        })}
      </svg>

      {/* Center: MCP hub */}
      <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%, -50%)', width:128, height:128, borderRadius:'50%', background:'var(--russet)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', color:'var(--cream)', boxShadow:'0 10px 30px rgba(139,90,60,0.3), 0 0 0 8px var(--cream), 0 0 0 10px var(--russet)', zIndex:2}}>
        <MammothMascot size={72} />
        <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:9, letterSpacing:'0.15em', marginTop:2, color:'var(--gold)', fontWeight:700}}>MCP HUB</div>
      </div>

      {/* Tool badges around ring */}
      {tools.map((tool, i) => {
        const rad = (tool.angle * Math.PI) / 180;
        const x = 50 + (R / 4) * Math.cos(rad); // percentages
        const y = 50 + (R / 4) * Math.sin(rad);
        return (
          <div key={i} style={{
            position:'absolute',
            left:`${x}%`, top:`${y}%`,
            transform:'translate(-50%, -50%)',
            background:'var(--white)',
            border:`1.5px solid ${tool.color}`,
            borderRadius:10,
            padding:'6px 10px',
            display:'flex', gap:6, alignItems:'center',
            boxShadow:`2px 2px 0 ${tool.color}`,
            fontFamily:'var(--font-head)', fontWeight:700, fontSize:12,
            color:tool.color,
            zIndex:3,
          }}>
            <span style={{color:tool.color}}>{Ico[tool.i](14, tool.color)}</span>
            <span>{tool.t}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ─── PROBLEM: The chaos we replace ─── */
function HomeProblem() {
  const cards = [
    { i:'puzzle', t:"12 AI logins. 0 integration.",
      d:"ChatGPT on one tab. Claude on another. Nothing talks to QuickBooks. Your team copy-pastes like it's 2019." },
    { i:'bill', t:"Every provider bills you separately.",
      d:"OpenAI. Anthropic. Perplexity. Zapier. Make. Half on personal cards. Month-end is a spreadsheet rodeo." },
    { i:'person', t:"Nobody owns 'the AI thing'.",
      d:"When it breaks, nobody knows why. When a new model ships, nobody updates. You're running an IT department without the department." },
  ];
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 56px'}}>
          <StampBadge>The problem we solve</StampBadge>
          <h2 style={{marginTop:16, marginBottom:12, textWrap:'balance'}}>Small firms need an IT department for AI.<br/>
            <span style={{color:'var(--russet)'}}>Nobody wants to hire one.</span></h2>
          <p className="lead">Three stories we hear every single week.</p>
        </div>
        <div className="m-grid m-grid-3">
          {cards.map((c, i) => (
            <div key={i} className="m-card m-card-lift" style={{borderTop:`3px solid var(--russet)`}}>
              <div style={{width:56, height:56, borderRadius:12, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--russet)', marginBottom:16}}>
                {Ico[c.i](28, 'var(--russet)')}
              </div>
              <h3 style={{marginBottom:8}}>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:48, display:'flex', flexDirection:'column', alignItems:'center', gap:8}}>
          <div style={{fontFamily:'Caveat, cursive', fontSize:22, color:'var(--charcoal-soft)', transform:'rotate(-1deg)'}}>instead, you just...</div>
          <p style={{fontFamily:'var(--font-head)', fontSize:32, fontWeight:800, color:'var(--russet)'}}>Hire us as your AI IT department.</p>
        </div>
      </div>
    </section>
  );
}

/* ─── WHAT YOU GET: re-framed around MCP/tool-mesh ─── */
function HomePackage() {
  const pillars = [
    { i:'plug', t:'We pre-install 40+ tools',
      d:'Claude, Perplexity, Goose, Higgsfield, Nano Banana, QuickBooks, HubSpot, Gmail, Outlook. Pay for usage. We handle the provider relationships.' },
    { i:'link', t:'One MCP connection',
      d:"Your team connects once. AI can now do anything in any app — reply to email, update CRM, pull a report, generate an image, post content. No glue code." },
    { i:'dollar', t:'Cheaper tokens via routing',
      d:'We route simple jobs to cheaper models, complex ones to premium models. You get the quality of top-tier AI at a fraction of the token cost.' },
    { i:'teach', t:'Ongoing training + upgrades',
      d:"New model ships? We swap it in. New tool launches? We add it. Your team learns it in our weekly sessions. No rebuild, no re-learn." },
    { i:'shield', t:'One bill, one throat to choke',
      d:"Every provider, every token, every seat — on one invoice. Something breaks? You call us. We don't transfer you anywhere." },
    { i:'chart', t:'Reporting across every tool',
      d:"One dashboard. Efficiency scores per person, per workflow, per app. See what's working, what isn't, and where hours are actually going." },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <StampBadge>What you actually get</StampBadge>
          <h2 style={{marginTop:16, textWrap:'balance', maxWidth:820, margin:'16px auto 0'}}>
            An <Underline>AI IT department</Underline> — for the price of a junior hire.
          </h2>
          <p className="lead" style={{marginTop:16, maxWidth:640, margin:'16px auto 0'}}>
            Six things a Fortune 500 IT team does. For you. Without hiring anyone.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
          {pillars.map((p, i) => (
            <div key={i} style={{padding:28, background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:'var(--radius-lg)', position:'relative', overflow:'hidden'}}>
              <div style={{width:52, height:52, borderRadius:12, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18, border:'1.5px solid var(--russet)'}}>
                {Ico[p.i](26, 'var(--russet)')}
              </div>
              <h3 style={{marginBottom:10, fontSize:20}}>{p.t}</h3>
              <p style={{fontSize:14, lineHeight:1.55, color:'var(--charcoal-soft)'}}>{p.d}</p>
            </div>
          ))}
        </div>

        <div style={{marginTop:36, textAlign:'center'}}>
          <a href="/pricing" className="m-btn m-btn-russet m-btn-lg">See pricing {Ico.arrow(18,'currentColor')}</a>
          <span style={{marginLeft:16, fontSize:14, color:'var(--charcoal-soft)'}}>from <strong style={{color:'var(--charcoal)'}}>$497/mo</strong></span>
        </div>
      </div>
    </section>
  );
}

/* ─── HOW IT WORKS (short) ─── */
function HomeHowItWorks() {
  const steps = [
    { n:1, i:'phone',  t:'Intro call',           d:'15 minutes. We listen, you ask anything. No pitch.' },
    { n:2, i:'wrench', t:'We wire you up',       d:'Install MCP. Connect your apps. Pre-load your models. Tested end-to-end.' },
    { n:3, i:'teach',  t:'Team gets trained',    d:'3 one-on-ones + 7 group sessions. Real humans, not Looms.' },
    { n:4, i:'shield', t:'We manage it forever', d:'Updates, new tools, new models, support. One bill, every month.' },
  ];
  return (
    <section id="how" className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:56}}>
          <StampBadge>How it works</StampBadge>
          <h2 style={{marginTop:16}}>From first call to fully wired — <span style={{color:'var(--russet)'}}>under 2 weeks.</span></h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          {steps.map((s, i) => (
            <div key={i} className="m-card" style={{position:'relative'}}>
              <div style={{position:'absolute', top:-14, left:20, background:'var(--russet)', color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:800, padding:'4px 12px', borderRadius:999, fontSize:12, letterSpacing:'0.06em'}}>STEP {s.n}</div>
              <div style={{width:48, height:48, borderRadius:12, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16, marginTop:8}}>
                {Ico[s.i](26, 'var(--russet)')}
              </div>
              <h4 style={{marginBottom:8}}>{s.t}</h4>
              <p style={{fontSize:15}}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:36}}>
          <a href="/book" className="m-btn m-btn-gold">Book the 15-min intro {Ico.arrow(16,'currentColor')}</a>
        </div>
      </div>
    </section>
  );
}

/* ─── PRICING (homepage strip) ─── */
function HomePricing() {
  const tiers = [
    { name:'Starter', price:497, seats:'1–2 seats', best:'Solo + 2-person firms', featured:false,
      highlights:['15M tokens/mo routed','MCP + 10 core apps','Group training'] },
    { name:'Growth', price:1500, seats:'5 seats', best:'Most 5-person firms pick this', featured:true,
      highlights:['75M tokens/mo routed','MCP + 40+ apps','3 one-on-one + 7 group','Priority support'] },
    { name:'Pro', price:2500, seats:'6–10 seats', best:'Whole-team rollout', featured:false,
      highlights:['150M tokens/mo routed','MCP + unlimited apps','Unlimited group + 5 one-on-one','White-glove support'] },
  ];
  return (
    <section id="pricing" className="m-section" style={{background:'var(--cream-2)', position:'relative'}}>
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <StampBadge color="var(--gold-deep)">Pricing · no surprises</StampBadge>
          <h2 style={{marginTop:16, marginBottom:12}}>Simple pricing. Everything included.</h2>
          <p className="lead" style={{maxWidth:640, margin:'0 auto'}}>One setup fee. One monthly plan. One invoice covering every AI provider, every tool, every seat.</p>
        </div>

        {/* Setup fee callout */}
        <div style={{background:'var(--charcoal)', color:'var(--cream)', borderRadius:20, padding:'24px 32px', marginBottom:32, display:'flex', alignItems:'center', gap:24, flexWrap:'wrap', border:'2px solid var(--gold)'}}>
          <div style={{display:'flex', alignItems:'center', gap:16}}>
            <div style={{width:48, height:48, borderRadius:12, background:'var(--gold)', display:'flex', alignItems:'center', justifyContent:'center'}}>
              {Ico.wrench(24, 'var(--charcoal)')}
            </div>
            <div>
              <div style={{fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--gold)', letterSpacing:'0.08em', textTransform:'uppercase'}}>One-time setup</div>
              <div style={{fontFamily:'var(--font-head)', fontSize:36, fontWeight:800, color:'var(--cream)'}}>$4,995</div>
            </div>
          </div>
          <div style={{flex:1, minWidth:240, color:'rgba(255,253,249,0.9)', fontSize:15}}>
            MCP install, 40+ app connectors, 3 custom workflows, full security review. <strong style={{color:'var(--cream)'}}>Day-3 quick-win guarantee</strong> — one automation live in 72 hrs or we refund it.
          </div>
        </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 popular</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">{t.seats}</span>
              </div>
              <ul className="m-checklist" style={{gap:10}}>
                {t.highlights.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>
                ))}
              </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>
          ))}
        </div>

        <div style={{marginTop:28, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          {[
            { i:'cal',    t:'Pay one month ahead',      d:'Simple. Predictable.' },
            { i:'dollar', t:'Usage-based token packs',  d:'$100 / $250 / $500 top-ups.' },
            { i:'bill',   t:'One bill, every provider', d:'We pay upstream. You pay us.' },
            { i:'shield', t:'Cancel anytime',           d:'Month-to-month. Keep everything.' },
          ].map((c, i) => (
            <div key={i} style={{padding:'18px 20px', background:'var(--white)', borderRadius:14, display:'flex', gap:12, alignItems:'center'}}>
              <div style={{color:'var(--russet)'}}>{Ico[c.i](22, 'var(--russet)')}</div>
              <div>
                <div style={{fontFamily:'var(--font-head)', fontWeight:700, fontSize:14}}>{c.t}</div>
                <div style={{fontSize:12, color:'var(--charcoal-soft)'}}>{c.d}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{textAlign:'center', marginTop:32}}>
          <a href="/pricing" className="m-btn m-btn-ghost">Full pricing + token details {Ico.arrow(16,'currentColor')}</a>
        </div>
      </div>
    </section>
  );
}

/* ─── HOURS-SAVED TEASER (typeform calc lives on /calculator) ─── */
function HomeCalcTeaser() {
  return (
    <section id="calc" className="m-section">
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:56, alignItems:'center'}}>
          <div>
            <StampBadge color="var(--teal)">Value math</StampBadge>
            <h2 style={{marginTop:16, marginBottom:16}}>
              A 5-person firm gets back <Underline>~2,080 hours/year.</Underline>
            </h2>
            <p className="lead" style={{marginBottom:20}}>
              That's roughly one full-time hire, back in your pocket. Median hours saved across our client base — not a pitch deck number.
            </p>
            <p style={{marginBottom:24, fontSize:15, color:'var(--charcoal-soft)'}}>
              Run the typeform-style calculator. Answer 6 questions. See exactly how many hours you'd save <em>if you'd signed up 12 months ago.</em>
            </p>
            <a href="/calculator" className="m-btn m-btn-gold m-btn-lg">Run my numbers · 60 sec {Ico.arrow(18,'currentColor')}</a>
          </div>

          {/* Value breakdown card */}
          <div style={{padding:36, background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:20, boxShadow:'6px 6px 0 var(--russet)'}}>
            <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--russet)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:8}}>Typical 5-person firm · year one</div>
            <div style={{display:'grid', gap:18}}>
              {[
                { l:'Email + inbox triage',       h:520,  c:'var(--russet)' },
                { l:'CRM updates + notes',        h:416,  c:'var(--teal)' },
                { l:'Invoicing + bookkeeping',    h:364,  c:'var(--gold-deep)' },
                { l:'Content + posting',          h:260,  c:'#B85C3C' },
                { l:'Research + data pulls',      h:312,  c:'var(--russet)' },
                { l:'Client comms + follow-ups',  h:208,  c:'var(--teal)' },
              ].map((row, i) => {
                const pct = (row.h / 600) * 100;
                return (
                  <div key={i}>
                    <div style={{display:'flex', justifyContent:'space-between', marginBottom:6, fontSize:14}}>
                      <span style={{color:'var(--charcoal)'}}>{row.l}</span>
                      <span style={{fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:row.c}}>{row.h} hrs</span>
                    </div>
                    <div style={{height:6, background:'var(--mist)', borderRadius:3, overflow:'hidden'}}>
                      <div style={{width:`${pct}%`, height:'100%', background:row.c, borderRadius:3}}/>
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{marginTop:28, paddingTop:24, borderTop:'1.5px dashed var(--mist-2)', display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div style={{fontFamily:'var(--font-head)', fontWeight:700, color:'var(--charcoal)'}}>Total hours/year</div>
              <div style={{fontFamily:'var(--font-head)', fontSize:36, fontWeight:800, color:'var(--russet)', letterSpacing:'-0.02em'}}>2,080</div>
            </div>
            <div style={{marginTop:8, fontSize:13, color:'var(--charcoal-soft)', textAlign:'right', fontFamily:'Caveat, cursive'}}>
              ≈ 1 full-time employee, recovered.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── REPORTING & EFFICIENCY dashboard section ─── */
function HomeReporting() {
  // Mock efficiency data — per-tool scores
  const tools = [
    { name:'Gmail',      score:92, hours:124, trend:'+18%', i:'mail' },
    { name:'HubSpot',    score:88, hours:98,  trend:'+24%', i:'crm' },
    { name:'QuickBooks', score:81, hours:76,  trend:'+12%', i:'bill' },
    { name:'Claude',     score:94, hours:142, trend:'+31%', i:'spark' },
    { name:'Higgsfield', score:76, hours:42,  trend:'+8%',  i:'eye' },
    { name:'Outlook',    score:85, hours:64,  trend:'+15%', i:'mail' },
  ];
  const team = [
    { name:'Maya A.',   role:'Partner',    score:96, hrs:18.2 },
    { name:'Sam O.',    role:'Senior',     score:91, hrs:16.4 },
    { name:'Priya R.',  role:'Associate',  score:88, hrs:15.1 },
    { name:'Jordan B.', role:'Associate',  score:82, hrs:13.8 },
    { name:'Kodi',   role:'Admin',      score:79, hrs:12.2 },
  ];
  // Trendline points (weekly hours saved across 12 weeks)
  const weeks = [24, 38, 52, 68, 84, 102, 118, 128, 136, 142, 148, 154];
  const maxW = Math.max(...weeks);
  const scoreColor = (s) => s >= 90 ? 'var(--teal)' : s >= 80 ? 'var(--gold-deep)' : '#B85C3C';

  return (
    <section id="reporting" className="m-section">
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.25fr', gap:56, alignItems:'center'}}>
          <div>
            <StampBadge color="var(--teal)">Reporting · included</StampBadge>
            <h2 style={{marginTop:16, marginBottom:16, textWrap:'balance'}}>
              See <Underline>every hour.</Underline> Every tool. Every person.
            </h2>
            <p className="lead" style={{marginBottom:24}}>
              Your AI touches 12 apps. Most firms have no idea which ones are actually paying off. Ours tells you — in one dashboard, weekly.
            </p>
            <ul className="m-checklist" style={{marginBottom:28}}>
              {[
                'Efficiency score per tool (0–100)',
                'Hours saved per person per week',
                'Workflow heatmap — where the wins are',
                'Month-over-month trend by department',
                'Token spend vs. hours recovered ratio',
                'Exportable CSV / PDF for board reviews',
              ].map((t, i) => (
                <li key={i}><span className="m-check">{Ico.check(12, 'white')}</span><span>{t}</span></li>
              ))}
            </ul>
            <div className="m-row">
              <a href="/book" className="m-btn m-btn-russet">See a live demo {Ico.arrow(16,'currentColor')}</a>
              <span style={{fontSize:14, color:'var(--charcoal-soft)'}}>included in all plans</span>
            </div>
          </div>

          {/* Dashboard mock */}
          <div style={{background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:20, padding:28, boxShadow:'6px 6px 0 var(--russet)', position:'relative'}}>
            {/* Header row */}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:20, paddingBottom:16, borderBottom:'1.5px dashed var(--mist-2)'}}>
              <div>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--charcoal-soft)', letterSpacing:'0.1em'}}>EFFICIENCY DASHBOARD · THIS MONTH</div>
                <div style={{fontFamily:'var(--font-head)', fontWeight:800, fontSize:20, color:'var(--charcoal)', marginTop:4}}>546 hrs recovered</div>
              </div>
              <div style={{display:'inline-flex', alignItems:'center', gap:6, padding:'4px 10px', background:'var(--teal-soft)', color:'var(--teal)', borderRadius:999, fontFamily:'JetBrains Mono, monospace', fontSize:11, fontWeight:700}}>
                ▲ +22% MoM
              </div>
            </div>

            {/* Trendline */}
            <div style={{marginBottom:24}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:8, fontSize:11, fontFamily:'JetBrains Mono, monospace', color:'var(--charcoal-soft)', letterSpacing:'0.08em'}}>
                <span>WEEKLY HOURS SAVED · LAST 12 WEEKS</span>
                <span style={{color:'var(--teal)', fontWeight:700}}>{weeks[weeks.length-1]} hrs this week</span>
              </div>
              <svg viewBox="0 0 360 80" style={{width:'100%', height:80}}>
                <defs>
                  <linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--russet)" stopOpacity="0.3"/>
                    <stop offset="100%" stopColor="var(--russet)" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {/* Gridlines */}
                {[0, 20, 40, 60].map(y => (
                  <line key={y} x1="0" x2="360" y1={y} y2={y} stroke="var(--mist)" strokeWidth="0.5"/>
                ))}
                {/* Area */}
                <path
                  d={`M 0 ${80 - (weeks[0] / maxW) * 70} ${weeks.map((w, i) => `L ${(i / (weeks.length - 1)) * 360} ${80 - (w / maxW) * 70}`).join(' ')} L 360 80 L 0 80 Z`}
                  fill="url(#trendFill)"
                />
                {/* Line */}
                <path
                  d={`M 0 ${80 - (weeks[0] / maxW) * 70} ${weeks.map((w, i) => `L ${(i / (weeks.length - 1)) * 360} ${80 - (w / maxW) * 70}`).join(' ')}`}
                  stroke="var(--russet)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"
                />
                {/* Dots */}
                {weeks.map((w, i) => (
                  <circle key={i} cx={(i / (weeks.length - 1)) * 360} cy={80 - (w / maxW) * 70} r="2.5" fill="var(--russet)"/>
                ))}
                {/* Last dot highlighted */}
                <circle cx={360} cy={80 - (weeks[weeks.length-1] / maxW) * 70} r="5" fill="var(--gold)" stroke="var(--russet)" strokeWidth="2"/>
              </svg>
            </div>

            {/* Per-tool efficiency grid */}
            <div style={{marginBottom:20}}>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--charcoal-soft)', letterSpacing:'0.1em', marginBottom:10}}>EFFICIENCY BY TOOL</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                {tools.map((t, i) => (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 10px', background:'var(--cream-2)', borderRadius:8, border:'1px solid var(--mist-2)'}}>
                    <div style={{width:26, height:26, borderRadius:6, background:'var(--white)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                      {Ico[t.i](14, 'var(--russet)')}
                    </div>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontFamily:'var(--font-head)', fontSize:12, fontWeight:700, color:'var(--charcoal)', whiteSpace:'nowrap'}}>{t.name}</div>
                      <div style={{height:4, background:'var(--mist)', borderRadius:2, overflow:'hidden', marginTop:3}}>
                        <div style={{width:`${t.score}%`, height:'100%', background:scoreColor(t.score)}}/>
                      </div>
                    </div>
                    <div style={{textAlign:'right', flexShrink:0}}>
                      <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:13, fontWeight:800, color:scoreColor(t.score)}}>{t.score}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Team scorecard */}
            <div>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--charcoal-soft)', letterSpacing:'0.1em', marginBottom:10}}>TEAM · HOURS SAVED / WEEK</div>
              <div style={{display:'grid', gap:6}}>
                {team.map((p, i) => (
                  <div key={i} style={{display:'grid', gridTemplateColumns:'80px 60px 1fr 50px', gap:10, alignItems:'center', padding:'6px 10px', background:i === 0 ? 'rgba(212,162,74,0.12)' : 'transparent', borderRadius:6, border: i === 0 ? '1px dashed var(--gold-deep)' : '1px solid transparent'}}>
                    <span style={{fontFamily:'var(--font-head)', fontWeight:700, fontSize:13, color:'var(--charcoal)'}}>{p.name}</span>
                    <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--charcoal-soft)'}}>{p.role}</span>
                    <div style={{height:4, background:'var(--mist)', borderRadius:2, overflow:'hidden'}}>
                      <div style={{width:`${p.score}%`, height:'100%', background:scoreColor(p.score)}}/>
                    </div>
                    <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, fontWeight:700, color:'var(--charcoal)', textAlign:'right'}}>{p.hrs} hr</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Stamp corner */}
            <div style={{position:'absolute', top:-10, right:20, padding:'4px 10px', background:'var(--gold)', color:'var(--charcoal)', fontFamily:'JetBrains Mono, monospace', fontSize:10, fontWeight:700, letterSpacing:'0.12em', borderRadius:4, transform:'rotate(-2deg)', boxShadow:'2px 2px 0 var(--russet)'}}>LIVE · WEEK 12</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── SPEED: hour-long tasks → minutes ─── */
function HomeSpeed() {
  const tasks = [
    { task:'Edit a page on your website',       before:90,  after:4,  i:'doc',
      sub:'"Change the hero headline and swap the photo"' },
    { task:'Draft + schedule a social post',    before:60,  after:3,  i:'spark',
      sub:'LinkedIn + Instagram, on-brand, with image' },
    { task:'Write a client follow-up email',    before:25,  after:2,  i:'mail',
      sub:'Pulled from CRM notes, sounds like you' },
    { task:'Generate a monthly report',         before:180, after:8,  i:'chart',
      sub:'QuickBooks pull, formatted PDF, commentary' },
    { task:'Update 12 deals in the CRM',        before:45,  after:3,  i:'crm',
      sub:'From a single conversation recap' },
    { task:'Produce a product image',           before:120, after:5,  i:'eye',
      sub:'Higgsfield / Nano Banana, on-brand, ready to post' },
  ];
  const mins = (n) => n >= 60 ? `${Math.round(n/60*10)/10} hr` : `${n} min`;
  return (
    <section id="speed" className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48, maxWidth:760, margin:'0 auto 48px'}}>
          <StampBadge color="var(--teal)">Speed · the real unlock</StampBadge>
          <h2 style={{marginTop:16, marginBottom:16, textWrap:'balance'}}>
            Hour-long tasks, done in <Underline>minutes.</Underline>
          </h2>
          <p className="lead">
            "Hours saved" is abstract. Here's what actually changes: the tasks that used to eat your afternoon now finish before your coffee cools.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14, marginBottom:32}}>
          {tasks.map((t, i) => {
            const speedup = Math.round(t.before / t.after);
            const barBefore = (t.before / 180) * 100;
            const barAfter = (t.after / 180) * 100;
            return (
              <div key={i} style={{padding:'20px 22px', background:'var(--white)', border:'1.5px solid var(--mist-2)', borderRadius:14, display:'grid', gridTemplateColumns:'44px 1fr auto', gap:14, alignItems:'center'}}>
                <div style={{width:44, height:44, borderRadius:10, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', border:'1.5px solid var(--russet)'}}>
                  {Ico[t.i](22, 'var(--russet)')}
                </div>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:700, fontSize:15, color:'var(--charcoal)', marginBottom:2}}>{t.task}</div>
                  <div style={{fontSize:12, color:'var(--charcoal-soft)', marginBottom:10, fontStyle:'italic'}}>{t.sub}</div>
                  {/* Before / after bars */}
                  <div style={{display:'grid', gap:4}}>
                    <div style={{display:'flex', alignItems:'center', gap:8}}>
                      <span style={{width:44, fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--charcoal-soft)', letterSpacing:'0.08em'}}>BEFORE</span>
                      <div style={{flex:1, height:6, background:'var(--mist)', borderRadius:3, overflow:'hidden'}}>
                        <div style={{width:`${barBefore}%`, height:'100%', background:'var(--charcoal-soft)', borderRadius:3}}/>
                      </div>
                      <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, fontWeight:700, color:'var(--charcoal-soft)', width:58, textAlign:'right'}}>{mins(t.before)}</span>
                    </div>
                    <div style={{display:'flex', alignItems:'center', gap:8}}>
                      <span style={{width:44, fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--teal)', letterSpacing:'0.08em', fontWeight:700}}>AFTER</span>
                      <div style={{flex:1, height:6, background:'var(--mist)', borderRadius:3, overflow:'hidden'}}>
                        <div style={{width:`${Math.max(barAfter, 1)}%`, height:'100%', background:'var(--teal)', borderRadius:3}}/>
                      </div>
                      <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, fontWeight:700, color:'var(--teal)', width:58, textAlign:'right'}}>{mins(t.after)}</span>
                    </div>
                  </div>
                </div>
                <div style={{textAlign:'center', padding:'8px 12px', background:'var(--gold)', borderRadius:10, transform:'rotate(2deg)', boxShadow:'2px 2px 0 var(--russet)'}}>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:800, fontSize:22, color:'var(--charcoal)', lineHeight:1}}>{speedup}×</div>
                  <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:9, color:'var(--charcoal)', letterSpacing:'0.08em', marginTop:2}}>FASTER</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom strip */}
        <div style={{background:'var(--russet)', borderRadius:16, padding:'24px 32px', display:'flex', alignItems:'center', gap:24, flexWrap:'wrap', color:'var(--cream)'}}>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <div style={{width:48, height:48, borderRadius:12, background:'var(--gold)', display:'flex', alignItems:'center', justifyContent:'center'}}>
              {Ico.spark(24, 'var(--charcoal)')}
            </div>
            <div>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--gold)', letterSpacing:'0.1em'}}>MEDIAN SPEED-UP ACROSS ALL CLIENTS</div>
              <div style={{fontFamily:'var(--font-head)', fontSize:28, fontWeight:800}}>Tasks complete 23× faster</div>
            </div>
          </div>
          <div style={{flex:1, minWidth:240, fontSize:14, color:'rgba(255,253,249,0.85)'}}>
            You don't notice the hours. You notice that the website edit you'd been putting off for 3 weeks just… happened. Before lunch.
          </div>
          <a href="/book" className="m-btn m-btn-gold">See it on your stack {Ico.arrow(16,'currentColor')}</a>
        </div>
      </div>
    </section>
  );
}

/* ─── MAINTENANCE: always-on monitoring ─── */
function HomeMaintenance() {
  return (
    <section id="maintenance" className="m-section">
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:56, alignItems:'center'}}>
          {/* Left: pitch */}
          <div>
            <StampBadge color="var(--russet)">Maintenance · the quiet killer</StampBadge>
            <h2 style={{marginTop:16, marginBottom:16, textWrap:'balance'}}>
              MCP breaks. <Underline>A lot.</Underline> So we watch it — every minute.
            </h2>
            <p className="lead" style={{marginBottom:20}}>
              Tokens expire. APIs change. A Google update rotates your OAuth. A provider deprecates a model endpoint on a Tuesday at 2am.
            </p>
            <p style={{marginBottom:28, fontSize:16, color:'var(--charcoal-soft)', lineHeight:1.6}}>
              In a DIY setup, you find out when your AI stops working mid-afternoon and someone has to spend <strong style={{color:'var(--charcoal)'}}>3–4 hours</strong> figuring out which of 12 integrations silently died. In our system, a person named <strong style={{color:'var(--charcoal)'}}>Priya</strong> — or the on-call after her — sees the red light within 60 seconds and has it fixed before you notice.
            </p>

            <div style={{padding:'18px 22px', background:'var(--cream-2)', borderRadius:14, marginBottom:28, border:'1.5px dashed var(--russet)'}}>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--russet)', letterSpacing:'0.1em', marginBottom:8}}>WHY THIS MATTERS</div>
              <p style={{margin:0, fontSize:15}}>
                AI that breaks silently is <em>worse</em> than no AI. Your team keeps clicking. Nothing happens. Trust erodes. We make sure that never happens to you.
              </p>
            </div>

            <div className="m-row">
              <a href="/book" className="m-btn m-btn-russet">See our uptime report {Ico.arrow(16,'currentColor')}</a>
              <span style={{fontSize:14, color:'var(--charcoal-soft)'}}><strong style={{color:'var(--teal)'}}>99.7%</strong> last 90 days</span>
            </div>
          </div>

          {/* Right: live monitor mock */}
          <div style={{background:'var(--charcoal)', borderRadius:20, padding:28, color:'var(--cream)', boxShadow:'6px 6px 0 var(--russet)', position:'relative', overflow:'hidden'}}>
            {/* Terminal grid bg */}
            <div style={{position:'absolute', inset:0, opacity:0.04, backgroundImage:'linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px)', backgroundSize:'100% 20px'}}/>

            <div style={{position:'relative'}}>
              {/* Header */}
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18, paddingBottom:14, borderBottom:'1px solid rgba(255,255,255,0.1)'}}>
                <div style={{display:'flex', gap:6, alignItems:'center'}}>
                  <span style={{width:10, height:10, borderRadius:'50%', background:'var(--teal)', boxShadow:'0 0 8px var(--teal)', animation:'pulse-teal 1.6s ease-in-out infinite'}}/>
                  <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.12em', color:'var(--gold)'}}>ALL SYSTEMS · MONITORING</span>
                </div>
                <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'rgba(255,253,249,0.5)'}}>on-call: Priya R.</span>
              </div>

              {/* Uptime rows */}
              <div style={{display:'grid', gap:8, marginBottom:20}}>
                {[
                  { svc:'Gmail OAuth',           status:'ok',   ms:124, lastCheck:'23s ago' },
                  { svc:'HubSpot API',            status:'ok',   ms:88,  lastCheck:'14s ago' },
                  { svc:'QuickBooks connector',   status:'ok',   ms:312, lastCheck:'47s ago' },
                  { svc:'Claude MCP endpoint',    status:'warn', ms:1840, lastCheck:'8s ago',  note:'Slow — auto-failover armed' },
                  { svc:'Higgsfield image API',   status:'ok',   ms:402, lastCheck:'31s ago' },
                  { svc:'Outlook calendar sync',  status:'ok',   ms:156, lastCheck:'19s ago' },
                  { svc:'Perplexity search',      status:'ok',   ms:278, lastCheck:'12s ago' },
                ].map((r, i) => {
                  const color = r.status === 'ok' ? 'var(--teal)' : r.status === 'warn' ? 'var(--gold)' : '#E85C4C';
                  return (
                    <div key={i} style={{display:'grid', gridTemplateColumns:'12px 1fr auto auto', gap:12, alignItems:'center', fontFamily:'JetBrains Mono, monospace', fontSize:12, padding:'6px 0'}}>
                      <span style={{width:8, height:8, borderRadius:'50%', background:color, boxShadow:`0 0 6px ${color}`}}/>
                      <div>
                        <span style={{color:'var(--cream)'}}>{r.svc}</span>
                        {r.note && <span style={{display:'block', fontSize:10, color:'var(--gold)', marginTop:2}}>↳ {r.note}</span>}
                      </div>
                      <span style={{color:'rgba(255,253,249,0.4)'}}>{r.lastCheck}</span>
                      <span style={{color:r.status === 'ok' ? 'rgba(255,253,249,0.6)' : color, minWidth:56, textAlign:'right', fontWeight:700}}>{r.ms}ms</span>
                    </div>
                  );
                })}
              </div>

              {/* Incident log */}
              <div style={{paddingTop:16, borderTop:'1px solid rgba(255,255,255,0.1)'}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--gold)', letterSpacing:'0.12em', marginBottom:10}}>LAST 7 DAYS · RESOLVED BEFORE CLIENT NOTICED</div>
                <div style={{display:'grid', gap:6, fontFamily:'JetBrains Mono, monospace', fontSize:11}}>
                  {[
                    { t:'Mon 02:14', svc:'Gmail OAuth rotated',      fix:'re-issued · 47s' },
                    { t:'Tue 14:08', svc:'HubSpot rate-limit hit',   fix:'throttled · 18s' },
                    { t:'Thu 09:31', svc:'Claude model deprecated',   fix:'swapped to Sonnet 4.5 · 2m' },
                    { t:'Sat 23:52', svc:'QuickBooks webhook stalled', fix:'restarted · 1m' },
                  ].map((ev, i) => (
                    <div key={i} style={{display:'grid', gridTemplateColumns:'80px 1fr auto', gap:10, color:'rgba(255,253,249,0.7)'}}>
                      <span style={{color:'rgba(255,253,249,0.4)'}}>{ev.t}</span>
                      <span>{ev.svc}</span>
                      <span style={{color:'var(--teal)'}}>✓ {ev.fix}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{position:'absolute', top:-8, right:24, padding:'4px 10px', background:'var(--teal)', color:'var(--charcoal)', fontFamily:'JetBrains Mono, monospace', fontSize:10, fontWeight:700, letterSpacing:'0.12em', borderRadius:4, transform:'rotate(-2deg)', boxShadow:'2px 2px 0 var(--gold)'}}>LIVE · 60s REFRESH</div>
          </div>
        </div>

        <style>{`@keyframes pulse-teal { 0%,100%{opacity:1} 50%{opacity:0.4} }`}</style>
      </div>
    </section>
  );
}

/* ─── USE CASES (unchanged, already good) ─── */
function HomeUseCases() {
  const cards = [
    { i:'calc',   n:'Accountants',         p:'Drowning in email during tax season.', o:'Drafts + triage that actually sound like you.' },
    { i:'shield', n:'Insurance agencies',  p:'Renewals slipping through the cracks.', o:'Every renewal flagged 30 days out — automatically.' },
    { i:'chart',  n:'Financial advisors',  p:'Meeting notes nobody has time to write.', o:'Notes + CRM updates done before you leave the call.' },
  ];
  return (
    <section id="use-cases" className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <StampBadge>Built for you</StampBadge>
          <h2 style={{marginTop:16}}>Built for small firms like yours</h2>
        </div>
        <div className="m-grid m-grid-3">
          {cards.map((c, i) => (
            <div key={i} className="m-card m-card-lift">
              <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
                <div style={{width:48, height:48, borderRadius:12, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  {Ico[c.i](24, 'var(--russet)')}
                </div>
                <h3 style={{marginBottom:0, fontSize:22}}>For {c.n}</h3>
              </div>
              <div style={{padding:14, background:'var(--cream-2)', borderRadius:12, marginBottom:10}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', color:'var(--charcoal-soft)', fontSize:11, marginBottom:4}}>BEFORE</div>
                <p style={{margin:0, fontSize:15}}>{c.p}</p>
              </div>
              <div style={{padding:14, background:'var(--teal-soft)', borderRadius:12, marginBottom:16, borderLeft:'3px solid var(--teal)'}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', color:'var(--teal)', fontSize:11, marginBottom:4}}>AFTER</div>
                <p style={{margin:0, fontSize:15, color:'var(--charcoal)'}}>{c.o}</p>
              </div>
              <a href="/use-cases/accountants" style={{fontFamily:'var(--font-head)', fontWeight:700, color:'var(--russet)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:6}}>See the deep dive {Ico.arrow(14,'currentColor')}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── TESTIMONIAL (reframed) ─── */
function HomeTestimonial() {
  return (
    <section className="m-section m-section-russet">
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:48, alignItems:'center'}}>
          <div style={{textAlign:'center'}}>
            <MammothMascot size={200} style={{filter:'drop-shadow(0 8px 24px rgba(0,0,0,0.2))'}}/>
            <div style={{marginTop:16, fontFamily:'Caveat, cursive', color:'var(--gold)', fontSize:18}}>— your AI IT dept</div>
          </div>
          <div>
            <div style={{fontSize:72, lineHeight:0.5, color:'var(--gold)', fontFamily:'Georgia, serif', marginBottom:16}}>"</div>
            <p style={{fontSize:22, lineHeight:1.45, color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:600}}>
              Before Mammoth, my team had logins to seven AI tools and none of them touched our CRM. Now it's one connection and the thing actually books renewals, drafts emails, and updates HubSpot without anyone opening a tab. <em style={{color:'var(--gold)', fontStyle:'normal'}}>One bill, one phone number, done.</em>
            </p>
            <div style={{marginTop:24, display:'flex', alignItems:'center', gap:12}}>
              <div style={{width:48, height:48, borderRadius:'50%', background:'var(--gold)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--charcoal)', fontFamily:'var(--font-head)', fontWeight:800}}>DK</div>
              <div>
                <div style={{color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:700}}>Dan Kellerman</div>
                <div style={{color:'var(--mist-2)', fontSize:14}}>Kellerman Insurance · 7-person agency · Pro plan</div>
              </div>
              <div style={{marginLeft:'auto', color:'var(--gold)', fontSize:16, letterSpacing:'0.1em'}}>★★★★★</div>
            </div>
            <div style={{marginTop:32, padding:'16px 20px', background:'rgba(255,253,249,0.06)', borderRadius:16, display:'inline-flex', alignItems:'center', gap:12, border:'1px dashed rgba(212,162,74,0.4)'}}>
              {Ico.chart(22, 'var(--gold)')}
              <span style={{color:'var(--cream)', fontFamily:'var(--font-head)', fontWeight:700}}>Powering AI for 32 financial services firms</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function HomeFAQ() {
  const faqs = [
    { q:"What is the AI IT department, exactly?",
      a:"The same thing a 500-person company's IT team does for enterprise software — except for AI, and sized for a 5-person firm. We pick the tools, install them, connect them to your CRM/email/QuickBooks via MCP, train your team, and keep it all running. You just use it." },
    { q:"What's MCP and why does it matter?",
      a:"Model Context Protocol. It's the standard that lets AI actually do things in your apps — send email, update a deal, pull a report — instead of just chatting. Your team connects once; the AI has access to everything. We manage the connections so you don't." },
    { q:"Do I have to use your AI? What if I like Claude/Perplexity/Goose?",
      a:"Use whatever you want. We're model-agnostic. We pre-install Claude, Perplexity, Goose, OpenAI, plus image tools like Higgsfield and Nano Banana. Bring your own, swap, mix — we route to whichever is best (and cheapest) for the job." },
    { q:"How much does it actually cost?",
      a:"$4,995 one-time setup + $497–$2,500/month. The $1,500/month Growth plan fits most 5-person firms and includes 10 training sessions, 75M routed tokens, and MCP access to 40+ apps." },
    { q:"Is this just ChatGPT Teams with extra steps?",
      a:"No. ChatGPT Teams gives you chat windows. We give you a trained team, MCP-connected apps (so AI actually does stuff), a single invoice across all providers, routed tokens at lower cost, and someone to call when something breaks." },
  ];
  return (
    <section id="faq" className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:40}}>
          <StampBadge>Common questions</StampBadge>
          <h2 style={{marginTop:16}}>Things people ask on the intro call</h2>
        </div>
        <FAQ items={faqs} />
        <div style={{textAlign:'center', marginTop:36}}>
          <a href="/faq" className="m-btn m-btn-ghost">See all FAQs {Ico.arrow(16,'currentColor')}</a>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div className="m-root">
      <Header current="Home" />
      <HomeHero />
      <HomeProblem />
      <HomePackage />
      <HomeHowItWorks />
      <HomePricing />
      <HomeCalcTeaser />
      <HomeReporting />
      <HomeSpeed />
      <HomeMaintenance />
      <HomeUseCases />
      <HomeTestimonial />
      <HomeFAQ />
      <CTABand />
      <Footer />
    </div>
  );
}

Object.assign(window, { HomePage, StampBadge, Underline, MCPHubDiagram });