// direction-a-extras.jsx — new chapters added on the second pass
// (Customer-branded app, end-of-day ritual, ROI calculator, single-tier pricing
// with competitor comparison). Same visual language as direction-a.jsx — uses the
// DA token object & helpers exposed there.

// Pricing — single source of truth lives in pricing-constants.js.
const P = window.WERKD_PRICING || { owner: 99, seat: 59, ownerAnnual: 999, seatAnnual: 599, trialDays: 14, annual: 1188 };

// White-label customer PWA mock — "Mike's Plumbing" branded
function BrandedCustomerApp({ width = 320, theme = 'light' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: '#fff',
      fontFamily: 'var(--font-ui)',
      paddingTop: 56,
    }}>
      {/* Status bar */}
      <div style={{
        position: 'absolute', top: 14, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 600, color: '#0a0a0b',
      }}>
        <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
        <div style={{ display: 'flex', gap: 5 }}>
          <Icon name="signal" size={15} color="#0a0a0b" strokeWidth={2.5}/>
          <Icon name="wifi" size={15} color="#0a0a0b" strokeWidth={2.5}/>
          <Icon name="battery" size={20} color="#0a0a0b" strokeWidth={2.5}/>
        </div>
      </div>

      {/* Branded header — Mike's Plumbing */}
      <div style={{
        padding: '14px 18px 16px',
        background: '#157a5c',
        color: '#fff',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 8,
            background: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#157a5c', fontWeight: 800, fontSize: 17,
          }}>M</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>Mike's Plumbing</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 1 }}>San Antonio · 24/7 emergency</div>
          </div>
          <button style={{
            padding: '6px 10px',
            background: 'rgba(255,255,255,0.18)',
            border: '1px solid rgba(255,255,255,0.3)',
            borderRadius: 6,
            color: '#fff', fontSize: 11, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 5,
          }}><Icon name="message-square" size={12} color="#fff"/>Text</button>
        </div>
      </div>

      {/* Next visit card */}
      <div style={{ padding: '14px' }}>
        <div style={{
          background: '#fff', border: '1px solid #e0dcd0', borderRadius: 14,
          padding: '14px',
        }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#157a5c', letterSpacing: '0.14em' }}>
            NEXT VISIT · TOMORROW 10:30 AM
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4, color: '#0a0a0b' }}>
            Smart thermostat install
          </div>
          <div style={{ fontSize: 12, color: '#5a5a60', marginTop: 4, lineHeight: 1.4 }}>
            Eli will be there between 10:30 and 11:15. You'll get an "on my way" heads-up 15 min ahead.
          </div>
          <div style={{
            marginTop: 10, padding: '8px 0 0',
            borderTop: '1px solid #e0dcd0',
            display: 'flex', gap: 10,
          }}>
            <button style={{
              flex: 1, padding: '8px',
              background: '#157a5c', border: 'none',
              color: '#fff', fontSize: 12, fontWeight: 700,
              borderRadius: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}><Icon name="message-square" size={13} color="#fff"/>Text Mike's Plumbing</button>
          </div>
        </div>

        {/* Outstanding invoice */}
        <div style={{
          marginTop: 12,
          background: '#fff8ec', border: '1px solid #f0d8a8',
          borderRadius: 12, padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: '#ffe1ad', color: '#a8650a',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 13,
          }}>$</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: '#0a0a0b' }}>Invoice #1042 · $420</div>
            <div style={{ fontSize: 11, color: '#5a5a60' }}>Due Friday · Card or bank transfer</div>
          </div>
          <button style={{
            padding: '8px 14px',
            background: '#0a0a0b', color: '#fff', border: 'none',
            borderRadius: 6, fontSize: 11.5, fontWeight: 700,
          }}>Pay now</button>
        </div>

        {/* History */}
        <div style={{ marginTop: 18 }}>
          <div style={{
            fontSize: 10, fontWeight: 700, color: '#8a8a90', letterSpacing: '0.14em',
            padding: '0 4px 8px',
          }}>YOUR HISTORY WITH MIKE'S</div>
          {[
            { d: 'Mar 8', t: 'Thermostat install', a: '$420' },
            { d: 'Jan 14', t: 'Drain clear', a: '$185' },
            { d: 'Nov 2', t: 'HVAC tune-up', a: '$189' },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 4px',
              borderBottom: '1px solid #f0eee9',
            }}>
              <span style={{ width: 40, fontSize: 11, color: '#8a8a90', fontWeight: 600 }}>{r.d}</span>
              <span style={{ flex: 1, fontSize: 13, color: '#0a0a0b' }}>{r.t}</span>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: '#1b9e4b', fontVariantNumeric: 'tabular-nums' }}>{r.a}</span>
            </div>
          ))}
        </div>

        {/* CTA — review request (portal surfaces review requests) */}
        <button style={{
          marginTop: 14, width: '100%', padding: '12px',
          background: '#157a5c', color: '#fff', border: 'none',
          borderRadius: 8, fontSize: 13, fontWeight: 700,
        }}>Leave a review</button>

        {/* Powered-by-Werkd footer */}
        <div style={{
          marginTop: 14, padding: '8px 0',
          fontSize: 10, color: '#8a8a90', textAlign: 'center',
          letterSpacing: '0.06em',
        }}>
          Powered by werkd<span style={{ color: DA.brand }}>.</span>
        </div>
      </div>

      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 5, left: '50%', transform: 'translateX(-50%)',
        width: 110, height: 4, borderRadius: 2,
        background: 'rgba(0,0,0,0.4)',
      }}/>
    </div>
  );
}

// CUSTOMER APP chapter — your customers get a Mike's Plumbing app
function ACustomerApp() {
  const DA = window.DA;
  const m = window.useIsMobile();
  return (
    <section id="customers" style={{ background: DA.bgAlt, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 40 : 64, maxWidth: 920 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 24 }}>
            FOR YOUR CUSTOMERS
          </div>
          <Reveal>
          <h2 style={{
            fontSize: m ? 44 : 88, fontWeight: 800, letterSpacing: '-0.05em',
            margin: 0, paddingBottom: '0.28em', color: DA.ink, lineHeight: 1.0, textWrap: 'balance',
          }}>
            Your customers get<br/>
            <span style={{ color: DA.brand }}>a branded portal<span>.</span></span>
          </h2>
        </Reveal>
          <p style={{
            fontSize: m ? 19 : 22, lineHeight: 1.4, color: DA.text2,
            margin: 0, maxWidth: 720, fontWeight: 400, textWrap: 'pretty',
          }}>
            Your logo. Your name leads. They track their jobs, pay invoices, and text <em>you</em> — through an app they save to their home screen, no app-store download. <strong style={{ color: DA.ink, fontWeight: 600 }}>Werkd stays in the background.</strong>
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 36 : 80, alignItems: 'center' }}>
          <div style={{ order: m ? 2 : 0 }}>
            <div style={{
              display: 'flex', gap: 18, padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
            }}>
              <div style={{ width: 32, flexShrink: 0, fontSize: 14, fontWeight: 800, color: DA.brand, fontFamily: 'var(--font-mono)' }}>01</div>
              <div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>Your brand leads</div>
                <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                  Your logo and name greet customers at the top of every screen. Werkd shows up only as a small "Powered by" line in the footer.
                </div>
              </div>
            </div>
            <div style={{
              display: 'flex', gap: 18, padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
            }}>
              <div style={{ width: 32, flexShrink: 0, fontSize: 14, fontWeight: 800, color: DA.brand, fontFamily: 'var(--font-mono)' }}>02</div>
              <div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>Approve &amp; book from a link</div>
                <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                  Send a quote and your customer can review it, approve, pick a time, and pay a deposit if you ask — all from a link, no app to download. Confirmed jobs land on your calendar.
                </div>
              </div>
            </div>
            <div style={{
              display: 'flex', gap: 18, padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
              borderBottom: `1px solid ${DA.hairline}`,
            }}>
              <div style={{ width: 32, flexShrink: 0, fontSize: 14, fontWeight: 800, color: DA.brand, fontFamily: 'var(--font-mono)' }}>03</div>
              <div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>Pay through Stripe</div>
                <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                  Invoice arrives. They tap. Stripe takes card or bank transfer, lands the funds in <em>your</em> bank — not werkd's. Standard Stripe fees apply; werkd doesn't take a cut.
                </div>
              </div>
            </div>

            {/* Competitor jab */}
            <div style={{
              marginTop: 28,
              padding: '16px 18px',
              background: '#fff',
              border: `1px solid ${DA.hairline}`,
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 8,
                background: DA.bgAlt,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: DA.brand, fontWeight: 800, fontSize: 13,
                fontFamily: 'var(--font-mono)',
              }}>$0</div>
              <div style={{ fontSize: 14, color: DA.text2, lineHeight: 1.4 }}>
                <strong style={{ color: DA.ink, fontWeight: 700 }}>Costs nothing extra.</strong> The usual stack of separate tools runs $200–$500/mo for similar — and none of it carries your brand. Yours ships at the base tier.
              </div>
            </div>

            {/* Texting ROI — own number, no SMS bill (Werkd drafts, you send) */}
            <div style={{
              marginTop: 14,
              padding: '16px 18px',
              background: '#fff',
              border: `1px solid ${DA.hairline}`,
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 8, flexShrink: 0,
                background: DA.bgAlt,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: DA.brand,
              }}>
                <Icon name="message-square" size={20} color={DA.brand}/>
              </div>
              <div style={{ fontSize: 14, color: DA.text2, lineHeight: 1.4 }}>
                <strong style={{ color: DA.ink, fontWeight: 700 }}>Texts come from your number — no SMS bill.</strong> Werkd writes the message for you; you send it from your own phone's texting app, in one tap, like any other text. No second number to buy, no setup, no monthly texting fee — and because it's <em>your</em> number, customers actually open it.
              </div>
            </div>
          </div>

          {/* Phone */}
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', order: m ? 1 : 0 }}>
            <div style={{
              position: 'absolute', top: 40, left: '50%', transform: 'translate(-50%, 0)',
              width: 380, height: 380,
              background: 'radial-gradient(circle, rgba(29,79,139,0.10) 0%, rgba(29,79,139,0) 70%)',
              pointerEvents: 'none',
            }}/>
            <div style={{ position: 'relative' }}>
              <PhoneFrame width={320} theme="light">
                <BrandedCustomerApp/>
              </PhoneFrame>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ROI CALCULATOR — interactive, port of the mockup
function AROICalculator() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const TRADE_DEFAULTS = {
    plumbing:    { avg: 420, billable: 125, label: 'Plumbing' },
    hvac:        { avg: 580, billable: 135, label: 'HVAC' },
    electrical:  { avg: 380, billable: 115, label: 'Electrical' },
    cleaning:    { avg: 180, billable: 65,  label: 'Cleaning' },
    landscaping: { avg: 320, billable: 75,  label: 'Landscape' },
    other:       { avg: 350, billable: 100, label: 'Service' },
  };

  const [trade, setTrade] = React.useState('plumbing');
  const [jobs, setJobs] = React.useState(10);
  const [avg, setAvg] = React.useState(420);
  const [admin, setAdmin] = React.useState(7);

  const onTrade = (t) => {
    setTrade(t);
    setAvg(TRADE_DEFAULTS[t].avg);
  };

  const billable = TRADE_DEFAULTS[trade].billable;
  const annualJobs = jobs * 50;
  const hoursReclaimed = admin * 0.70 * 50;
  const timeValue = hoursReclaimed * billable;
  const lateQuotedJobs = annualJobs * 0.40;
  const extraJobsFromQuoteSpeed = lateQuotedJobs * 0.225;
  const leadValue = extraJobsFromQuoteSpeed * avg;
  const annualRevenue = annualJobs * avg;
  const stuckInInvoices = annualRevenue * 0.11;
  const chaseValue = stuckInInvoices * 0.50;
  const adminOffset = 47460 * 0.20;
  const gross = timeValue + leadValue + chaseValue + adminOffset;
  const net = gross - P.annual;
  // Tangible, believable co-stats shown beside the dollar figure.
  const hrsPerWeek = Math.round(admin * 0.70);
  const jobsPerMonth = Math.round(extraJobsFromQuoteSpeed / 12);
  const fmt = (n) => '$' + Math.round(n).toLocaleString('en-US');

  const Field = ({ label, val, children, hint }) => (
    <div style={{ marginBottom: 22 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontSize: 14, fontWeight: 600, color: DA.ink, marginBottom: 8,
      }}>
        <span>{label}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 15, color: DA.brand,
        }}>{val}</span>
      </div>
      {children}
      {hint && <div style={{ fontSize: 12, color: DA.text3, marginTop: 6 }}>{hint}</div>}
    </div>
  );

  const Slider = ({ value, onChange, min, max, step = 1 }) => (
    <input
      type="range" min={min} max={max} step={step} value={value}
      onChange={(e) => onChange(+e.target.value)}
      style={{
        width: '100%', height: 6, background: DA.hairline,
        borderRadius: 100, appearance: 'none',
        WebkitAppearance: 'none',
      }}
      className="roi-slider"
    />
  );

  return (
    <section id="roi" style={{ background: DA.bg, padding: m ? '64px 16px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <style>{`
        .roi-slider::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none;
          width: 22px; height: 22px; border-radius: 50%;
          background: ${DA.brand};
          box-shadow: 0 4px 12px rgba(211, 84, 0, 0.35);
          cursor: pointer; border: 3px solid #fff;
        }
        .roi-slider::-moz-range-thumb {
          width: 22px; height: 22px; border-radius: 50%;
          background: ${DA.brand}; border: 3px solid #fff;
          box-shadow: 0 4px 12px rgba(211, 84, 0, 0.35); cursor: pointer;
        }
        .roi-slider:focus-visible {
          outline: 3px solid ${DA.brand}; outline-offset: 3px; border-radius: 100px;
        }
        .roi-trade-btn {
          background: #fff; border: 1px solid ${DA.hairline}; border-radius: 8px;
          padding: 10px 8px;
          font: 600 13px var(--font-ui); color: ${DA.ink};
          cursor: pointer; transition: all .15s;
        }
        .roi-trade-btn:hover { border-color: ${DA.hairlineSoft || '#b8b1a0'}; }
        .roi-trade-btn.active {
          background: rgba(211, 84, 0, 0.08);
          border-color: ${DA.brand}; color: ${DA.brand};
        }
      `}</style>

      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 16 }}>
            DO THE MATH
          </div>
          <Reveal>
          <h2 style={{
            fontSize: m ? 40 : 88, fontWeight: 800, letterSpacing: '-0.045em',
            margin: '0 0 16px', color: DA.ink, lineHeight: 0.96, textWrap: 'balance',
          }}>
            See what werkd is worth<br/>to your shop<span style={{ color: DA.brand }}>.</span>
          </h2>
        </Reveal>
          <p style={{
            fontSize: m ? 15 : 18, lineHeight: 1.5, color: DA.text2,
            margin: '0 auto', maxWidth: 540, fontWeight: 400,
          }}>
            Three sliders. Real industry numbers. Move them around — the math updates as you go.
          </p>
        </div>

        {/* Sourced industry proof — recovers the credibility the standalone Stats section carried */}
        <div style={{
          display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: 0,
          borderTop: `1px solid ${DA.hairline}`, borderBottom: `1px solid ${DA.hairline}`,
          maxWidth: 900, margin: m ? '0 auto 32px' : '0 auto 48px',
        }}>
          {[
            { to: 7, suffix: 'hrs', l: 'a week lost to paperwork by solo trades', src: 'Powered Now survey' },
            { to: 25, prefix: '+', suffix: '%', l: 'more quotes won when sent same-day', src: 'WebFX 2026' },
            { to: 11, suffix: '%', l: 'of revenue stuck in late invoices', src: 'Clockify 2025' },
          ].map((s, i) => (
            <Reveal key={i} delay={i * 90}>
              <div style={{
                padding: m ? '22px 4px' : `30px 28px 30px ${i === 0 ? 0 : 28}px`,
                borderRight: !m && i < 2 ? `1px solid ${DA.hairline}` : 'none',
                borderTop: m && i > 0 ? `1px solid ${DA.hairline}` : 'none',
                height: '100%',
              }}>
                <div style={{
                  fontSize: m ? 44 : 58, fontWeight: 800, letterSpacing: '-0.045em',
                  color: DA.brand, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                }}>
                  <Counter to={s.to} prefix={s.prefix || ''} suffix={s.suffix} startDelay={i * 160}/>
                </div>
                <div style={{ fontSize: 13.5, color: DA.ink, fontWeight: 600, marginTop: 12, lineHeight: 1.4, maxWidth: 240 }}>{s.l}</div>
                <div style={{ fontSize: 11, color: DA.text3, marginTop: 5, letterSpacing: '0.04em' }}>{s.src}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: m ? '1fr' : '5fr 7fr', gap: m ? 20 : 28,
          background: '#fff', border: `1px solid ${DA.hairline}`,
          borderRadius: 16, padding: m ? 18 : 32,
          boxShadow: '0 24px 60px rgba(0,0,0,0.08)',
        }}>
          {/* Inputs */}
          <div>
            <div style={{
              fontSize: 13, fontWeight: 700, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: DA.text3, marginBottom: 18,
            }}>About your business</div>

            <Field label="Your trade" val={TRADE_DEFAULTS[trade].label} hint="Used to pick a realistic average job value.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                {Object.entries(TRADE_DEFAULTS).map(([k, v]) => (
                  <button key={k}
                          className={`roi-trade-btn ${trade === k ? 'active' : ''}`}
                          onClick={() => onTrade(k)}>{v.label}</button>
                ))}
              </div>
            </Field>

            <Field label="Jobs per week" val={jobs} hint="Solo trade average is 8–15.">
              <Slider value={jobs} onChange={setJobs} min={2} max={40}/>
            </Field>

            <Field label="Average job value" val={'$' + avg} hint="Residential service-call median runs $300–$600.">
              <Slider value={avg} onChange={setAvg} min={100} max={2000} step={10}/>
            </Field>

            <Field label="Hours/week on paperwork" val={admin + ' hrs'} hint="Powered Now survey average: 7 hrs/wk for solo trades.">
              <Slider value={admin} onChange={setAdmin} min={2} max={20}/>
            </Field>
          </div>

          {/* Results */}
          <div style={{
            background: 'linear-gradient(180deg, #fbfaf6 0%, #fff 100%)',
            border: `1px solid ${DA.hairline}`,
            borderRadius: 12, padding: 28,
          }}>
            <div style={{
              fontSize: 13, fontWeight: 700, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: DA.text3, marginBottom: 18,
            }}>Your estimated annual ROI with werkd</div>

            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 72, fontWeight: 800,
              color: DA.ink, letterSpacing: '-0.03em', lineHeight: 1,
              fontVariantNumeric: 'tabular-nums',
            }}>
              <span style={{ fontSize: '0.55em', color: DA.text2, marginRight: 4, verticalAlign: 'top', position: 'relative', top: '0.35em' }}>$</span>
              {Math.round(net).toLocaleString('en-US')}
            </div>
            <div style={{ fontSize: 15, color: DA.text2, margin: '8px 0 10px' }}>
              estimated per year, back in your business
            </div>
            <div style={{
              fontSize: 13.5, fontWeight: 700, color: DA.brand,
              margin: '0 0 24px', letterSpacing: '0.01em',
            }}>
              ≈ {hrsPerWeek} hrs a week off the clock · {jobsPerMonth} more jobs a month
            </div>

            <div style={{ paddingTop: 22, borderTop: `1px solid ${DA.hairline}`, display: 'grid', gap: 14 }}>
              {[
                { l: 'Hours saved on admin', d: 'Valued at your billable rate when you fill it with paid work.', a: fmt(timeValue), pos: true },
                { l: 'Extra jobs won from same-day quoting', d: 'Quotes sent within 24 hrs close 20–30% more.', a: fmt(leadValue), pos: true },
                { l: 'Recovered from chased invoices', d: '11% of small-biz revenue stuck in late payments.', a: fmt(chaseValue), pos: true },
                { l: 'Saved vs. hiring an office admin', d: 'BLS median $47,460/yr — partial offset.', a: fmt(adminOffset), pos: true },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '8px 0',
                }}>
                  <div style={{ flex: 1, paddingRight: 16 }}>
                    <div style={{ fontSize: 14, color: DA.ink, fontWeight: 500 }}>{r.l}</div>
                    <div style={{ fontSize: 12, color: DA.text3, marginTop: 2 }}>{r.d}</div>
                  </div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontWeight: 700,
                    fontSize: 17, color: '#1b9e4b', fontVariantNumeric: 'tabular-nums',
                  }}>{r.a}</div>
                </div>
              ))}
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '12px 0', borderTop: `1px solid ${DA.hairline}`,
              }}>
                <div style={{ fontSize: 14, color: DA.text2 }}>Less werkd subscription</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 17,
                  color: DA.ink, fontVariantNumeric: 'tabular-nums',
                }}>{'−$' + P.annual.toLocaleString()}</div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              <button type="button" onClick={() => window.openEarlyAccess()} style={{
                flex: 1, padding: '14px', background: DA.brand, color: '#fff',
                border: 'none', borderRadius: 6, textAlign: 'center',
                fontSize: 14, fontWeight: 800, fontFamily: DA.font,
                cursor: 'pointer',
              }}>Request early access</button>
              <button style={{
                flex: 1, padding: '14px', background: '#fff', color: DA.ink,
                border: `1px solid ${DA.hairline}`, borderRadius: 6,
                fontSize: 14, fontWeight: 700,
                cursor: 'pointer',
              }}>See how it works</button>
            </div>

            <div style={{
              marginTop: 24, padding: '14px 16px',
              background: '#eaf1ff', borderRadius: 8,
              fontSize: 12.5, color: '#1a4ea8', lineHeight: 1.5,
            }}>
              <strong>How we calculated this:</strong> hours saved valued at your trade's billable rate, counted only when you put that reclaimed time back into paid work (werkd absorbs ~70% of admin time — the rest you spend tapping approve). Quote-speed uplift assumes 40% of quotes currently go late, werkd captures the 22.5% close-rate lift. Invoice recovery: half of the 11% of revenue typically stuck in late payments. Admin offset: 20% of the $47,460 BLS median. All numbers conservative.
            </div>

            <div style={{
              marginTop: 12, fontSize: 11, color: DA.text3, lineHeight: 1.6,
            }}>
              Sources: BLS · WebFX 2026 Home Services Benchmarks · Clockify 2025 · Powered Now · Jobber 2026 Home Service Trends
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// NEW PRICING — single tier with competitor comparison table
function APricingV2() {
  const DA = window.DA;
  const m = window.useIsMobile();

  const competitors = [
    { name: 'Werkd.', price: '$' + P.owner, priceSub: '/mo + $' + P.seat + '/tech', featured: true,
      features: { core: '✓', ratecard: '✓ 217 jobs', dispatch: '✓', portal: '✓ branded', voice: '✓ included', photo: '✓ included', books: '✓ organized monthly', payments: 'no werkd cut', api: '✓ included' } },
    { name: 'Competitors', price: '$300+', priceSub: '/mo', sub: 'scheduling + invoicing + books + booking + texting',
      features: { core: 'several apps', ratecard: 'build your own', dispatch: '✓', portal: '+ extra', voice: 'add-on', photo: '—', books: 'separate tool', payments: 'markup', api: 'add-on' } },
    { name: 'Hire an admin', price: '$3,955', priceSub: '/mo', sub: '$47,460/yr — BLS 2024',
      features: { core: '—', ratecard: '—', dispatch: '—', portal: '—', voice: '—', photo: '—', books: '✓', payments: '—', api: '—' } },
  ];

  const rows = [
    { key: 'core', label: 'Today · jobs · scheduling · CRM' },
    { key: 'ratecard', label: 'Preloaded rate card — 17 trades, priced' },
    { key: 'dispatch', label: 'Crew dispatch & GPS' },
    { key: 'portal', label: 'Customer portal' },
    { key: 'voice', label: 'AI voice / chat / quick job' },
    { key: 'photo', label: 'Photo Diagnosis' },
    { key: 'books', label: 'Books, mileage, tax-ready profit & loss' },
    { key: 'payments', label: 'Stripe payments' },
    { key: 'api', label: 'QuickBooks & spreadsheet export' },
  ];

  return (
    <section id="pricing" style={{ background: DA.bg, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 40 : 64 }}>
          <Reveal>
          <h2 style={{
            fontSize: m ? 56 : 128, fontWeight: 800, letterSpacing: '-0.055em',
            margin: '0 0 20px', color: DA.ink, lineHeight: 0.92,
          }}>Pricing<span style={{ color: DA.brand }}>.</span></h2>
        </Reveal>
          <p style={{
            fontSize: m ? 17 : 22, lineHeight: 1.4, color: DA.text2,
            margin: '0 auto', maxWidth: 640, fontWeight: 400, textWrap: 'pretty',
          }}>
            {'One owner, $' + P.owner + '/mo — everything included, no feature add-ons. Add crew (techs and other non-admin users) at $' + P.seat + '/mo each. Free for ' + P.trialDays + ' days, no card. Cancel anytime — no contract.'}
          </p>
        </div>

        {/* Hero price card */}
        <div style={{
          margin: '0 auto 56px', maxWidth: 760,
          padding: m ? '36px 24px' : '48px 40px',
          background: DA.ink, color: '#fff',
          borderRadius: 20, textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse at top, rgba(238,145,71,0.18), transparent 70%)',
            pointerEvents: 'none',
          }}/>
          <div style={{ position: 'relative' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              border: '1px solid rgba(238,145,71,0.4)',
              background: 'rgba(238,145,71,0.1)',
              fontSize: 11, color: DA.brandLight, fontWeight: 800, letterSpacing: '0.14em',
              marginBottom: 24,
            }}>EVERYTHING INCLUDED · COMING SOON.</div>

            <div style={{
              fontSize: m ? 88 : 128, fontWeight: 800,
              letterSpacing: '-0.055em', lineHeight: 1,
              fontVariantNumeric: 'tabular-nums',
            }}>
              {'$' + P.owner}<span style={{ fontSize: 28, fontWeight: 500, color: 'rgba(255,255,255,0.6)', marginLeft: 8, letterSpacing: '0.01em' }}>/mo</span>
            </div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.55)', marginTop: 8, letterSpacing: '0.04em' }}>
              Billed monthly. Cancel anytime. <span style={{ color: 'rgba(255,255,255,0.8)' }}>{'+ $' + P.seat + '/mo per extra tech.'}</span>
            </div>

            <div style={{
              marginTop: 20, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.14)',
              display: 'inline-flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', justifyContent: 'center',
            }}>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.02em' }}>Prefer annual?</span>
              <span style={{ fontSize: 22, fontWeight: 800, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{'$' + P.ownerAnnual}</span>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{'/yr owner — save $' + (P.annual - P.ownerAnnual)}</span>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.35)' }}>+</span>
              <span style={{ fontSize: 22, fontWeight: 800, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{'$' + P.seatAnnual}</span>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{'/yr per tech — save $' + (P.seat * 12 - P.seatAnnual) + '/seat'}</span>
            </div>

            <div style={{
              marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap',
            }}>
              <button type="button" onClick={() => window.openEarlyAccess()} style={{
                padding: '16px 32px', background: DA.brandLight, color: DA.ink, textAlign: 'center',
                border: 'none', borderRadius: 6, fontSize: 16, fontWeight: 800, fontFamily: DA.font,
                cursor: 'pointer',
              }}>Request early access</button>
              <button style={{
                padding: '16px 32px', background: 'transparent', color: '#fff',
                border: '1px solid rgba(255,255,255,0.3)',
                borderRadius: 6, fontSize: 16, fontWeight: 600,
                cursor: 'pointer',
              }} onClick={() => window.location.href=WERKD_URLS.contact}>Questions? Email us</button>
            </div>

            <div style={{
              marginTop: 24,
              fontSize: 13, color: 'rgba(255,255,255,0.7)', fontWeight: 500,
            }}>
              Pays for itself with one extra $400 job per month. Industry median: ~3 of those a week.
            </div>
          </div>
        </div>

        {/* AI included, not metered by credit */}
        <Reveal>
        <div style={{
          margin: '0 auto 56px', maxWidth: 720, textAlign: 'center',
          paddingTop: m ? 4 : 8,
        }}>
          <h3 style={{
            fontSize: m ? 24 : 34, fontWeight: 800, letterSpacing: '-0.03em',
            margin: '0 0 14px', color: DA.ink, lineHeight: 1.08, textWrap: 'balance',
          }}>AI that's included — not sold by the credit<span style={{ color: DA.brand }}>.</span></h3>
          <p style={{
            fontSize: m ? 16 : 19, lineHeight: 1.5, color: DA.text2,
            margin: '0 auto', maxWidth: 600, fontWeight: 400, textWrap: 'pretty',
          }}>
            No credits to buy, nothing that expires on the 20th, no per-quote charges. Diagnosis, quoting, voice, reminders — all part of the $99, used the way a working day actually uses them.
          </p>
          <p style={{
            fontSize: 12.5, color: DA.text3, margin: '12px 0 0', fontWeight: 500, letterSpacing: '0.01em',
          }}>
            Fair-use limits apply.
          </p>
        </div>
        </Reveal>

        {/* Comparison table */}
        <div style={{ marginBottom: 16 }}>
          <div style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '0.18em',
            color: DA.text3, textAlign: 'center', marginBottom: 16,
          }}>HOW IT STACKS UP</div>
          <h3 style={{
            fontSize: m ? 26 : 36, fontWeight: 700, letterSpacing: '-0.025em',
            margin: m ? '0 0 8px' : '0 0 36px', color: DA.ink, textAlign: 'center', lineHeight: 1.1,
          }}>Same job. Less money. No add-ons<span style={{ color: DA.brand }}>.</span></h3>
          {m && <div style={{ fontSize: 11, color: DA.text3, textAlign: 'center', marginBottom: 20, letterSpacing: '0.04em' }}>Swipe the table sideways to compare →</div>}
        </div>

        <div style={{ overflowX: m ? 'auto' : 'visible', WebkitOverflowScrolling: 'touch', borderRadius: 16, border: m ? `1px solid ${DA.hairline}` : 'none' }}>
        <div style={{
          border: m ? 'none' : `1px solid ${DA.hairline}`, borderRadius: m ? 0 : 16, overflow: 'hidden',
          background: '#fff', minWidth: m ? 640 : 'auto',
        }}>
          {/* Header row */}
          <div style={{
            display: 'grid', gridTemplateColumns: `1.6fr repeat(${competitors.length}, 1fr)`,
            borderBottom: `1px solid ${DA.hairline}`,
          }}>
            <div style={{ padding: '24px 20px', fontSize: 11, fontWeight: 700, color: DA.text3,
                          letterSpacing: '0.14em', display: 'flex', alignItems: 'flex-end' }}>
              CAPABILITY
            </div>
            {competitors.map((c, i) => (
              <div key={i} style={{
                padding: '20px 16px',
                background: c.featured ? DA.ink : DA.bgAlt,
                color: c.featured ? '#fff' : DA.ink,
                position: 'relative',
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: c.featured ? DA.brandLight : DA.text2, marginBottom: 6 }}>
                  {c.name}
                </div>
                <div style={{
                  fontSize: 28, fontWeight: 800, letterSpacing: '-0.03em',
                  lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                }}>
                  {c.price}<span style={{ fontSize: 12, fontWeight: 500, opacity: 0.6, marginLeft: 3 }}>{c.priceSub}</span>
                </div>
                {c.sub && (
                  <div style={{
                    fontSize: 10.5, marginTop: 6,
                    color: c.featured ? 'rgba(255,255,255,0.5)' : DA.text3,
                    fontStyle: 'italic',
                  }}>{c.sub}</div>
                )}
              </div>
            ))}
          </div>

          {/* Rows */}
          {rows.map((row, ri) => (
            <Slide key={ri} delay={ri * 110} from="up" distance={12}>
            <div style={{
              display: 'grid', gridTemplateColumns: `1.6fr repeat(${competitors.length}, 1fr)`,
              borderBottom: ri < rows.length - 1 ? `1px solid ${DA.hairline}` : 'none',
            }}>
              <div style={{
                padding: '18px 20px', fontSize: 14, fontWeight: 500, color: DA.ink,
                display: 'flex', alignItems: 'center',
              }}>{row.label}</div>
              {competitors.map((c, ci) => {
                const v = c.features[row.key];
                const isCheck = v === '✓';
                const isDash = v === '—';
                const startsCheck = typeof v === 'string' && v.charAt(0) === '✓';
                // Orange is reserved for Werkd's column only — competitors' "yes"
                // reads neutral gray so the table wins at a glance.
                const txtColor = isDash ? DA.text3 : startsCheck ? (c.featured ? DA.brandLight : DA.text2) : DA.ink;
                return (
                  <div key={ci} style={{
                    padding: '18px 16px',
                    background: c.featured ? 'rgba(238,145,71,0.05)' : '#fff',
                    fontSize: 13, fontWeight: 600,
                    color: txtColor,
                    display: 'flex', alignItems: 'center',
                  }}>
                    {isCheck ? <Icon name="check-circle" size={18} color={c.featured ? DA.brandLight : DA.text3} strokeWidth={2.25}/> : v}
                  </div>
                );
              })}
            </div>
            </Slide>
          ))}
        </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 24, fontSize: 12.5, color: DA.text3, lineHeight: 1.6 }}>
          “Competitors” reflects the typical mix of separate tools — scheduling/dispatch, invoicing, bookkeeping, online booking, and customer texting — which commonly totals $300–$500+/mo once AI add-ons are included. Admin “hire” line uses the BLS May 2024 median annual wage of $47,460 (~$3,955/mo before payroll tax and benefits). Sources cited in the calculator above.
        </div>
        <div style={{ textAlign: 'center', marginTop: 18 }}>
          <a href="real-cost-of-ai.html" style={{ fontSize: 13.5, fontWeight: 700, color: DA.brand, textDecoration: 'none' }}>
            Read the full pricing comparison, verified against every vendor's own pricing page →
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ACustomerApp, AROICalculator, APricingV2, BrandedCustomerApp });