/* How It Works + Use Cases — conversion-optimized rewrite */

function HowItWorksPage() {
  const steps = [
    {
      n:1, icon:'phone', title:'Intro call · 15 minutes', timeline:'Day 0',
      body:"We listen first. You tell us what's annoying you. We tell you if we can help — and if we can't, who could.",
      you:['15 minutes on your calendar', "Honesty about what's broken"],
      us:['No pitch', 'No slide deck', 'A straight answer']
    },
    {
      n:2, icon:'wrench', title:'We set it up', timeline:'Day 1–10',
      body:"We install everything, connect your CRM and email, configure it for your workflows, and run end-to-end tests before handing you anything.",
      you:['Admin access to your CRM + email', 'A few hours of availability over 2 weeks', 'Bank account for one-bill setup'],
      us:['Full install on your stack', 'CRM + email integrations', 'First automation live by Day 3', 'QA + security review']
    },
    {
      n:3, icon:'teach', title:'Your team gets trained', timeline:'Day 10–14',
      body:"3 one-on-one sessions with you, 7 group sessions with your team. Real humans, real workflows, real questions. Not a Loom video.",
      you:['Your team on a calendar, twice', 'Willingness to try new habits'],
      us:['3 one-on-one sessions (Growth)', '7 live group sessions', 'Prompt library tuned to your firm', 'Recorded sessions + runbook']
    },
    {
      n:4, icon:'shield', title:'We manage it forever', timeline:'Month 1 → Ongoing',
      body:"New models ship. APIs change. Things break. You never hear about it — except when we ship something new to make your team faster.",
      you:['Pay one monthly bill', 'Tell us when something feels off'],
      us:['Monitoring + uptime', 'Model upgrades as they ship', 'Quarterly workflow reviews', 'One-bill billing across providers']
    },
  ];
  return (
    <div className="m-root">
      <Header current="How It Works" />
      <section className="m-section" style={{paddingTop:56, paddingBottom:24}}>
        <div className="m-container" style={{textAlign:'center', maxWidth:780}}>
          <StampBadge color="var(--teal)"><Ico.wrench s={14} c="var(--teal)"/> How it works</StampBadge>
          <h1 style={{marginTop:20, marginBottom:16, textWrap:'balance'}}>
            From first call to <Underline>fully running</Underline> in under 2 weeks.
          </h1>
          <p className="lead">Four steps. No mystery. Here's every part, spelled out.</p>
        </div>
      </section>

      {/* Timeline strip */}
      <section className="m-section-sm">
        <div className="m-container">
          <div style={{background:'var(--white)', borderRadius:20, padding:'28px 32px', border:'1.5px solid var(--mist-2)'}}>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20, position:'relative'}}>
              <div style={{position:'absolute', top:24, left:'12%', right:'12%', height:2, background:'repeating-linear-gradient(90deg, var(--russet) 0 6px, transparent 6px 12px)'}}/>
              {[
                { l:'Day 1', s:'Intro call', i:'phone' },
                { l:'Day 3', s:'Quick win live', i:'spark' },
                { l:'Day 14', s:'Fully running', i:'check' },
                { l:'Ongoing', s:'Managed forever', i:'shield' },
              ].map((t, i) => (
                <div key={i} style={{textAlign:'center', position:'relative'}}>
                  <div style={{width:48, height:48, borderRadius:'50%', background:'var(--russet)', color:'var(--cream)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 10px', border:'4px solid var(--white)'}}>
                    {Ico[t.i](22, 'var(--cream)')}
                  </div>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:800, color:'var(--russet)', fontSize:16}}>{t.l}</div>
                  <div style={{color:'var(--charcoal-soft)', fontSize:13}}>{t.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Guarantee strip */}
      <section className="m-section-sm">
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {[
              { t:'30-day money-back', d:'Full refund if we fail to deliver.' },
              { t:'72-hour quick-win', d:'One automation live within 3 days.' },
              { t:'Cancel anytime', d:'Month-to-month. Keep everything.' },
            ].map((g, i) => (
              <div key={i} style={{padding:'18px 22px', background:'var(--cream-2)', borderRadius:14, display:'flex', alignItems:'center', gap:14, border:'1.5px dashed var(--russet)'}}>
                <div style={{color:'var(--russet)', flexShrink:0}}>{Ico.shield(24, 'var(--russet)')}</div>
                <div>
                  <div style={{fontFamily:'var(--font-head)', fontWeight:800, color:'var(--charcoal)', fontSize:15}}>{g.t}</div>
                  <div style={{fontSize:13, color:'var(--charcoal-soft)'}}>{g.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Steps */}
      {steps.map((s, i) => (
        <section key={i} className={'m-section' + (i % 2 === 1 ? ' m-section-alt' : '')}>
          <div className="m-container">
            <div style={{display:'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.3fr' : '1.3fr 1fr', gap:56, alignItems:'center'}}>
              {i % 2 === 0 && (
                <div style={{textAlign:'center'}}>
                  <div style={{width:160, height:160, borderRadius:32, background:'var(--cream-2)', border:'1.5px solid var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto', boxShadow:'6px 6px 0 var(--russet)'}}>
                    {Ico[s.icon](72, 'var(--russet)')}
                  </div>
                  <div style={{marginTop:20, display:'inline-flex', gap:10, alignItems:'center', padding:'8px 16px', background:'var(--white)', borderRadius:999, border:'1.5px solid var(--mist-2)'}}>
                    <span style={{width:28, height:28, borderRadius:'50%', background:'var(--russet)', color:'var(--cream)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontWeight:800, fontSize:14}}>{s.n}</span>
                    <span style={{fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:'var(--russet)', fontSize:13}}>{s.timeline}</span>
                  </div>
                </div>
              )}
              <div>
                <StampBadge>Step {s.n}</StampBadge>
                <h2 style={{marginTop:14, marginBottom:16}}>{s.title}</h2>
                <p className="lead" style={{marginBottom:28}}>{s.body}</p>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
                  <div style={{padding:20, background:'var(--teal-soft)', borderRadius:12, borderLeft:'3px solid var(--teal)'}}>
                    <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--teal)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:10}}>What we handle</div>
                    <ul className="m-checklist">
                      {s.us.map((it, j) => (
                        <li key={j} style={{fontSize:14}}><span className="m-check" style={{width:18, height:18, background:'var(--teal)'}}>{Ico.check(10, 'white')}</span><span>{it}</span></li>
                      ))}
                    </ul>
                  </div>
                  <div style={{padding:20, background:'rgba(212,162,74,0.08)', borderRadius:12, borderLeft:'3px solid var(--gold)'}}>
                    <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--gold-deep)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:10}}>What you bring</div>
                    <ul className="m-checklist">
                      {s.you.map((it, j) => (
                        <li key={j} style={{fontSize:14}}><span className="m-check" style={{width:18, height:18, background:'var(--gold)', color:'var(--charcoal)'}}>{Ico.check(10, 'var(--charcoal)')}</span><span>{it}</span></li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
              {i % 2 === 1 && (
                <div style={{textAlign:'center'}}>
                  <div style={{width:160, height:160, borderRadius:32, background:'var(--cream-2)', border:'1.5px solid var(--russet)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto', boxShadow:'6px 6px 0 var(--russet)'}}>
                    {Ico[s.icon](72, 'var(--russet)')}
                  </div>
                  <div style={{marginTop:20, display:'inline-flex', gap:10, alignItems:'center', padding:'8px 16px', background:'var(--white)', borderRadius:999, border:'1.5px solid var(--mist-2)'}}>
                    <span style={{width:28, height:28, borderRadius:'50%', background:'var(--russet)', color:'var(--cream)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontWeight:800, fontSize:14}}>{s.n}</span>
                    <span style={{fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:'var(--russet)', fontSize:13}}>{s.timeline}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>
      ))}

      <section className="m-section m-section-mist">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:36}}>
            <StampBadge>Common questions</StampBadge>
            <h2 style={{marginTop:16}}>About the process</h2>
          </div>
          <FAQ items={[
            { q:"What if our CRM is something unusual?", a:"We've connected to 20+ CRMs. If yours is exotic, we'll tell you on the intro call — and if we can't do it, we'll point you to someone who can." },
            { q:"Do we have to switch AI tools we already use?", a:"No. If ChatGPT Teams is already working for your team, we keep it and add to it. We consolidate and fill gaps, we don't replace what works." },
            { q:"What happens if a new AI model comes out next year?", a:"We swap it in. That's what ongoing updates are for. You don't re-buy anything or re-train your team from scratch." },
            { q:"Can we start small and grow?", a:"Yes. Starter tier is 1–2 seats, upgrade to Growth or Pro whenever you need more." },
          ]} />
        </div>
      </section>

      <CTABand />
      <Footer />
    </div>
  );
}

function UseCasePage({ industry }) {
  const data = {
    accountants: {
      iconName:'calc', name:'Accountants', chip:'For CPAs + bookkeeping firms',
      h1:'Managed AI for small accounting firms.',
      sub:"Tax season shouldn't feel like a hostage situation. Here's how we fix that.",
      pains:[
        { t:'Email tsunami during filing season', d:'Client docs, questions, IRS letters. All at once.' },
        { t:'Manual data entry into QuickBooks', d:"Hours of typing that could be 10 seconds of review." },
        { t:"Billable hours that aren't billable", d:'Writing status updates nobody reads.' },
      ],
      fixes:[
        { t:'Inbox triage + drafts', d:'AI reads the email, sorts it, drafts a reply in your voice. You approve or edit.' },
        { t:'Document-to-QuickBooks', d:'Upload a receipt or bank statement. We extract + post to the right ledger.' },
        { t:'Client update automation', d:'Weekly status emails auto-drafted from your work logs.' },
      ],
      stats:[
        { n:'14 hrs/wk', l:'Median hours saved per firm' },
        { n:'3 days', l:'Faster month-end close' },
        { n:'$3,400', l:'Median monthly savings' },
      ],
      quote:{ text:"Our busy season used to mean 70-hour weeks. This year, two partners took real vacations. That's the win. I stopped counting dollars.", name:'Maya Ashford, CPA', firm:'Ashford CPA · 4 partners · Growth plan' },
    },
    'insurance-agencies': {
      iconName:'shield', name:'Insurance agencies', chip:'For independent agencies',
      h1:'Managed AI for small insurance agencies.',
      sub:"Renewals, quotes, claims. We automate the typing so you can sell.",
      pains:[
        { t:'Renewals falling through the cracks', d:"30-day reminders buried in someone's head." },
        { t:'Quote requests sitting in the inbox', d:'Friday afternoon = lost quotes by Monday.' },
        { t:'Claims-status calls eating your day', d:'"Any update on mine?" × 40 clients.' },
      ],
      fixes:[
        { t:'Renewal autopilot', d:'AI flags renewals 45 days out, drafts outreach, tracks responses.' },
        { t:'Quote drafter', d:'Request in → comparison email out, pre-approved by you.' },
        { t:'Claims-status replies', d:'Clients ask "any update?" — AI pulls status + drafts reply.' },
      ],
      stats:[
        { n:'12 hrs/wk', l:'Median hours saved per agency' },
        { n:'+18%', l:'Renewal retention lift' },
        { n:'$2,800', l:'Median monthly savings' },
      ],
      quote:{ text:"Renewal retention went from 84% to 91% in a year. That's six figures in our pocket. The bill from Mammoth pays itself in renewals alone.", name:'Dan Kellerman', firm:'Kellerman Insurance · 7-person agency · Pro plan' },
    },
    advisors: {
      iconName:'chart', name:'Financial advisors', chip:'For RIAs + advisors',
      h1:'Managed AI for financial advisors.',
      sub:"Meeting notes, CRM updates, prep docs. Done before you leave the call.",
      pains:[
        { t:'Meeting notes nobody has time to write', d:'Scribbles that never make it to the CRM.' },
        { t:'Pre-meeting prep eating Sunday nights', d:'Pulling account summaries for every client.' },
        { t:'Compliance paperwork after every interaction', d:'Notes, disclosures, follow-ups.' },
      ],
      fixes:[
        { t:'Meeting-note autopilot', d:'AI listens (with consent), writes notes, updates CRM, drafts follow-ups.' },
        { t:'Pre-meeting brief', d:"Every morning: one page per client you're meeting. Accounts, recent comms, agenda." },
        { t:'Compliance capture', d:"Every interaction logged + tagged per your firm's policy." },
      ],
      stats:[
        { n:'16 hrs/wk', l:'Median hours saved per advisor' },
        { n:'2×', l:'Meeting capacity' },
        { n:'$4,100', l:'Median monthly savings' },
      ],
      quote:{ text:"I used to spend Sunday nights prepping for Monday meetings. Now I don't. The brief is in my inbox at 7am. My family got Sundays back.", name:'Jen Northline', firm:'Northline Advisors · 6-person RIA · Growth plan' },
    },
  };
  const d = data[industry];
  return (
    <div className="m-root">
      <Header current="Use Cases" />

      {/* Hero */}
      <section className="m-section" style={{paddingTop:56, paddingBottom:48}}>
        <div className="m-container">
          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
            <div>
              <StampBadge color="var(--teal)">{d.chip}</StampBadge>
              <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance'}}>{d.h1}</h1>
              <p className="lead" style={{marginBottom:28, maxWidth:520}}>{d.sub}</p>
              <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 your savings</a>
              </div>
              <div style={{marginTop:24, display:'flex', gap:18, flexWrap:'wrap', color:'var(--charcoal-soft)', fontSize:14}}>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(15, 'var(--teal)')} No pitch</span>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(15, 'var(--teal)')} Cancel anytime</span>
                <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(15, 'var(--teal)')} 15 min max</span>
              </div>
            </div>
            <div style={{position:'relative'}}>
              <div style={{aspectRatio:'1/1', background:'var(--white)', borderRadius:24, border:'1.5px solid var(--mist-2)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'8px 8px 0 var(--russet)'}}>
                <div style={{color:'var(--russet)'}}>{Ico[d.iconName](160, 'var(--russet)')}</div>
              </div>
              <div style={{position:'absolute', bottom:-12, right:-8, background:'#FFF5BB', padding:'10px 14px', transform:'rotate(3deg)', boxShadow:'2px 4px 12px rgba(0,0,0,0.1)', fontFamily:'Caveat, cursive', fontSize:17, color:'var(--charcoal)', lineHeight:1.3, maxWidth:200}}>
                ← Your firm, faster.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pains */}
      <section className="m-section m-section-alt">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge>Sound familiar?</StampBadge>
            <h2 style={{marginTop:16}}>Three things eating your week</h2>
          </div>
          <div className="m-grid m-grid-3">
            {d.pains.map((p, i) => (
              <div key={i} className="m-card" style={{borderTop:'3px solid var(--russet)'}}>
                <div style={{width:48, height:48, borderRadius:12, background:'rgba(184, 92, 60, 0.1)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16, color:'#B85C3C'}}>
                  {Ico.x(24, '#B85C3C')}
                </div>
                <h4 style={{marginBottom:8}}>{p.t}</h4>
                <p style={{fontSize:15}}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fixes */}
      <section className="m-section">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge color="var(--teal)">What we install</StampBadge>
            <h2 style={{marginTop:16}}>Three things that fix those three things</h2>
          </div>
          <div className="m-grid m-grid-3">
            {d.fixes.map((f, i) => (
              <div key={i} className="m-card m-card-lift" style={{borderTop:'3px solid var(--teal)'}}>
                <div style={{width:48, height:48, borderRadius:12, background:'var(--teal-soft)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16}}>
                  {Ico.check(24, 'var(--teal)')}
                </div>
                <h4 style={{marginBottom:8}}>{f.t}</h4>
                <p style={{fontSize:15}}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="m-section m-section-russet">
        <div className="m-container">
          <div style={{textAlign:'center', marginBottom:40}}>
            <StampBadge color="var(--gold)">Real results</StampBadge>
            <h2 style={{marginTop:16, color:'var(--cream)'}}>From firms like yours</h2>
          </div>
          <div className="m-grid m-grid-3" style={{marginBottom:40}}>
            {d.stats.map((s, i) => (
              <div key={i} style={{textAlign:'center', padding:28, background:'rgba(255,253,249,0.06)', borderRadius:'var(--radius-lg)', borderTop:'3px solid var(--gold)'}}>
                <div style={{fontFamily:'var(--font-head)', fontSize:56, fontWeight:800, color:'var(--gold)', letterSpacing:'-0.03em', lineHeight:1}}>{s.n}</div>
                <div style={{marginTop:12, color:'var(--mist-2)', fontFamily:'var(--font-head)', fontWeight:600}}>{s.l}</div>
              </div>
            ))}
          </div>

          {/* Quote */}
          <div style={{maxWidth:760, margin:'0 auto', padding:'32px 40px', background:'rgba(255,253,249,0.04)', borderRadius:20, borderLeft:'3px solid var(--gold)'}}>
            <p style={{fontSize:20, lineHeight:1.5, fontFamily:'var(--font-head)', fontWeight:600, color:'var(--cream)', marginBottom:20}}>"{d.quote.text}"</p>
            <div style={{display:'flex', alignItems:'center', gap:14}}>
              <div style={{width:44, height:44, borderRadius:'50%', background:'var(--gold)', color:'var(--charcoal)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontWeight:800}}>{d.quote.name.split(' ').map(x=>x[0]).join('').slice(0,2)}</div>
              <div>
                <div style={{fontFamily:'var(--font-head)', fontWeight:700, color:'var(--cream)'}}>{d.quote.name}</div>
                <div style={{color:'var(--mist-2)', fontSize:13}}>{d.quote.firm}</div>
              </div>
              <div style={{marginLeft:'auto', color:'var(--gold)', letterSpacing:'0.1em'}}>★★★★★</div>
            </div>
          </div>
        </div>
      </section>

      <CTABand heading={`Ready to run ${d.name.toLowerCase()} without the grind?`} />
      <Footer />
    </div>
  );
}

Object.assign(window, { HowItWorksPage, UseCasePage });
