// direction-a-rate-card.jsx — "Loaded for your trade on day one" section.
// The proof that closes the practical buyer: Werkd ships a real, priced rate
// card (217 jobs / 17 trades / 1,556 SKUs) the moment you sign up — vs the
// empty price book every other app hands you. Light section, right after hero.
// Exposes window.ALoadedDayOne.
//
// The Rate Card panel shows ONE trade (Plumber) with ALL 18 of its real jobs,
// grouped by the real in-app categories, filterable by chip — data lifted
// verbatim from src/lib/pricing/taskCatalog.ts (PLUMBING_TASKS).
//
// Loads after direction-a.jsx (uses DA, Reveal, Counter, Icon, ADot, useIsMobile).

// Thin scrollbar for the job list (webkit) — injected once.
(function () {
  if (typeof document === 'undefined' || document.getElementById('rc-scroll-style')) return;
  const s = document.createElement('style');
  s.id = 'rc-scroll-style';
  s.textContent =
    '.rc-scroll::-webkit-scrollbar{width:8px}' +
    '.rc-scroll::-webkit-scrollbar-track{background:transparent}' +
    '.rc-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16);border-radius:8px}' +
    '.rc-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28)}';
  document.head.appendChild(s);
})();

// Real Plumber catalog — all 18 jobs. [name, category, labor, parts, good, best]
const RC_TRADE = 'Plumber';
const RC_JOBS = [
  ['Replace kitchen faucet', 'Faucets & Fixtures', '1–2.5h', 5, 295, 895],
  ['Replace toilet', 'Faucets & Fixtures', '1–2.5h', 5, 300, 1150],
  ['Install garbage disposal', 'Faucets & Fixtures', '1–2.5h', 4, 405, 810],
  ['Toilet Repair / Replace', 'Faucets & Fixtures', '1–2h', 5, 195, 895],
  ['Faucet Repair / Replace', 'Faucets & Fixtures', '0.75–1.75h', 5, 185, 625],
  ['Fixture Install (Sink/Shower)', 'Faucets & Fixtures', '1.5–4h', 8, 325, 1495],
  ['Fix leaking pipe under sink', 'Pipe Repair', '0.5–2h', 5, 185, 525],
  ['Repipe bathroom (rough-in)', 'Pipe Repair', '4–12h', 16, 1800, 4500],
  ['Leak Repair (Pipe)', 'Pipe Repair', '1–4h', 6, 200, 900],
  ['Water Line Repair', 'Pipe Repair', '1.5–6h', 5, 400, 4500],
  ['Sewer Camera Inspection', 'Pipe Repair', '0.5–1.5h', 4, 150, 500],
  ['Unclog main sewer line', 'Drain Cleaning', '1–3h', 4, 250, 625],
  ['Drain Cleaning / Unclog', 'Drain Cleaning', '1–2h', 4, 129, 400],
  ['Replace water heater (standard tank)', 'Water Heaters', '2.5–6h', 8, 1450, 3300],
  ['Tankless Water Heater Install', 'Water Heaters', '4–7h', 7, 2100, 5000],
  ['Repair sump pump', 'Pumps & Drains', '1–3h', 6, 300, 1750],
  ['Install water softener', 'Water Treatment', '2.5–5.5h', 9, 1200, 4200],
  ['Install outdoor hose bib', 'Outdoor Plumbing', '1–2.5h', 6, 250, 625],
];
// Category order (by count) + counts, mirroring the in-app chips.
const RC_CATS = ['Faucets & Fixtures', 'Pipe Repair', 'Drain Cleaning', 'Water Heaters', 'Pumps & Drains', 'Water Treatment', 'Outdoor Plumbing'];

function ALoadedDayOne() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const [cat, setCat] = React.useState('All');

  const fmt = (n) => (n === 0 ? 'Free' : '$' + n.toLocaleString());
  const groups = RC_CATS
    .map((c) => ({ cat: c, items: RC_JOBS.filter((j) => j[1] === c) }))
    .filter((g) => g.items.length);
  const visible = cat === 'All' ? groups : groups.filter((g) => g.cat === cat);

  const chip = (label, count, key) => (
    <button key={key} onClick={() => setCat(key)} style={{
      padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
      fontSize: 12, fontWeight: 600, fontFamily: DA.font, whiteSpace: 'nowrap',
      border: `1px solid ${cat === key ? DA.brandLight + '99' : 'rgba(255,255,255,0.12)'}`,
      background: cat === key ? 'rgba(249,115,22,0.16)' : 'transparent',
      color: cat === key ? '#fff' : 'rgba(255,255,255,0.6)',
      transition: 'all 0.15s',
    }}>{label}{count != null && <span style={{ opacity: 0.55, marginLeft: 5 }}>{count}</span>}</button>
  );

  return (
    <section style={{
      background: DA.bg,
      padding: m ? '64px 20px' : '120px 40px',
      fontFamily: DA.font,
      borderBottom: `1px solid ${DA.hairline}`,
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ marginBottom: m ? 36 : 56, maxWidth: 820 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.16em', marginBottom: 22 }}>
            READY ON DAY ONE
          </div>
          <Reveal>
            <h2 style={{
              fontSize: m ? 38 : 76, fontWeight: 800, letterSpacing: '-0.045em',
              margin: 0, color: DA.ink, lineHeight: 1.0, textWrap: 'balance',
            }}>
              You don't start with<br/>an empty app<ADot/>
            </h2>
          </Reveal>
          <p style={{
            fontSize: m ? 17 : 21, lineHeight: 1.5, color: DA.text2,
            margin: '24px 0 0', fontWeight: 400, textWrap: 'pretty',
          }}>
            Most apps hand you a blank price book and a weekend of data entry. Werkd comes
            <strong style={{ color: DA.ink, fontWeight: 600 }}> loaded for your trade</strong> — real jobs, real parts, Good/Better/Best pricing — the minute you log in.
          </p>
        </div>

        {/* Stat tiles */}
        <div style={{
          display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: 0,
          borderTop: `1px solid ${DA.hairline}`, borderBottom: `1px solid ${DA.hairline}`,
          marginBottom: m ? 40 : 64,
        }}>
          {[
            { to: 17, l: 'Trades modeled', d: 'From plumbing to pressure washing — yours is one of them.' },
            { to: 217, l: 'Jobs, already priced', d: 'Every one with a Good / Better / Best ladder, ready to send.' },
            { to: 1556, l: 'Parts with locked costs', d: 'A real price book behind every line — national-average costs that sharpen to your own prices as you quote.' },
          ].map((s, i) => (
            <Reveal key={i} delay={i * 90}>
              <div style={{
                padding: m ? '30px 4px' : `48px 32px 40px ${i === 0 ? 0 : 32}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 ? 52 : 72, fontWeight: 800, letterSpacing: '-0.05em',
                  color: DA.brand, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                }}>
                  <Counter to={s.to} startDelay={i * 200} duration={2000 + i * 260}/>
                </div>
                <div style={{ fontSize: 16, fontWeight: 700, color: DA.ink, marginTop: 14, letterSpacing: '-0.01em' }}>{s.l}</div>
                <div style={{ fontSize: 13, color: DA.text2, marginTop: 6, lineHeight: 1.5, maxWidth: 280 }}>{s.d}</div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Two-column: copy/templates left, rate-card panel right */}
        <div style={{
          display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1.05fr',
          gap: m ? 32 : 64, alignItems: 'start',
        }}>
          {/* Left — narrative + templates */}
          <div>
            <h3 style={{
              fontSize: m ? 26 : 38, fontWeight: 800, letterSpacing: '-0.03em',
              margin: 0, color: DA.ink, lineHeight: 1.08, textWrap: 'balance',
            }}>
              Your trade's price book,<br/>already in the app<ADot/>
            </h3>
            <p style={{
              fontSize: m ? 15 : 17, lineHeight: 1.6, color: DA.text2,
              margin: '18px 0 0', textWrap: 'pretty',
            }}>
              Here's the plumber's catalog — all 18 common jobs, sorted into the same
              categories you'd reach for on site, each with typical parts, time ranges, and three
              price tiers benchmarked to real market data. Tap one in the New Job flow and the quote fills itself in.
            </p>

            {/* Make it yours — templates */}
            <div style={{
              marginTop: 28, padding: m ? '20px' : '22px 24px',
              background: '#fff', border: `1px solid ${DA.hairline}`, borderRadius: 16,
              display: 'flex', gap: 16, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 11, flexShrink: 0,
                background: 'rgba(249,115,22,0.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="bookmark" size={20} color={DA.brand} strokeWidth={2}/>
              </div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, color: DA.ink, letterSpacing: '-0.01em' }}>Make it yours</div>
                <div style={{ fontSize: 14, color: DA.text2, marginTop: 5, lineHeight: 1.55, textWrap: 'pretty' }}>
                  Tweak a price once and it sticks. Save your own repeat jobs as templates —
                  the second time is one tap.
                </div>
              </div>
            </div>

            {/* Custom / describe-it row */}
            <div style={{
              marginTop: 14, padding: m ? '20px' : '22px 24px',
              background: '#fff', border: `1px dashed ${DA.brand}88`, borderRadius: 16,
              display: 'flex', gap: 16, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 11, flexShrink: 0,
                background: 'rgba(249,115,22,0.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="sparkles" size={20} color={DA.brand} strokeWidth={2}/>
              </div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, color: DA.ink, letterSpacing: '-0.01em' }}>Something custom?</div>
                <div style={{ fontSize: 14, color: DA.text2, marginTop: 5, lineHeight: 1.55, textWrap: 'pretty' }}>
                  Describe it in your own words — werkd fills in the time, parts, and tiers, then you adjust.
                </div>
              </div>
            </div>
          </div>

          {/* Right — the Rate Card app panel (dark, mirrors the real in-app sheet) */}
          <Reveal delay={120}>
            <div style={{
              background: '#0f0f11', borderRadius: 24,
              border: '1px solid rgba(255,255,255,0.08)',
              boxShadow: '0 40px 80px -20px rgba(10,10,11,0.45), 0 0 0 1px rgba(10,10,11,0.04)',
              overflow: 'hidden', position: 'relative',
            }}>
              {/* faint brand glow top-right */}
              <div aria-hidden="true" style={{
                position: 'absolute', top: -60, right: -40, width: 240, height: 240,
                background: 'radial-gradient(circle, rgba(249,115,22,0.18), transparent 70%)',
                pointerEvents: 'none',
              }}/>

              {/* Panel header */}
              <div style={{ padding: m ? '18px 18px 0' : '24px 24px 0', position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Icon name="receipt" size={18} color={DA.brand} strokeWidth={2}/>
                    <span style={{ fontSize: 16, fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>Rate Card</span>
                  </div>
                  <span style={{
                    fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
                    color: DA.brandLight, background: 'rgba(249,115,22,0.14)',
                    padding: '5px 10px', borderRadius: 999,
                  }}>PRELOADED</span>
                </div>

                {/* Active trade + others note */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                  <span style={{
                    padding: '6px 14px', borderRadius: 999, background: DA.brandLight, color: '#fff',
                    fontSize: 13, fontWeight: 700,
                  }}>{RC_TRADE}</span>
                  <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.4)', fontStyle: 'italic' }}>
                    + 16 more trades, all preloaded
                  </span>
                </div>

                {/* Search mock */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '11px 14px', borderRadius: 12,
                  background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)',
                  marginBottom: 12,
                }}>
                  <Icon name="search" size={15} color="rgba(255,255,255,0.4)" strokeWidth={2}/>
                  <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)' }}>Search {RC_JOBS.length} {RC_TRADE} jobs…</span>
                </div>

                {/* Category chips */}
                <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 4 }}>
                  {chip('All', RC_JOBS.length, 'All')}
                  {RC_CATS.map((c) => chip(c, RC_JOBS.filter((j) => j[1] === c).length, c))}
                </div>
              </div>

              {/* Job list (scrolls) */}
              <div className="rc-scroll" style={{
                padding: m ? '6px 18px 18px' : '10px 24px 22px',
                maxHeight: m ? 380 : 432, overflowY: 'auto',
                scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.2) transparent',
              }}>
                {visible.map((group) => (
                  <div key={group.cat}>
                    {/* Category section label */}
                    <div style={{
                      fontSize: 10.5, fontWeight: 800, letterSpacing: '0.14em',
                      color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase',
                      margin: '14px 0 4px',
                    }}>{group.cat}</div>
                    {group.items.map(([name, c, labor, parts, good, best], i) => (
                      <div key={name} style={{
                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        gap: 12, padding: '12px 0',
                        borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.07)',
                      }}>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 14.5, fontWeight: 600, color: '#fff', letterSpacing: '-0.01em' }}>{name}</div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 5 }}>
                            <span style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                              <Icon name="clock" size={11} color="rgba(255,255,255,0.45)" strokeWidth={2}/>{labor}
                            </span>
                            <span style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)' }}>{parts} parts</span>
                            <span style={{
                              fontSize: 9.5, fontWeight: 800, letterSpacing: '0.08em',
                              color: DA.brandLight, background: 'rgba(249,115,22,0.14)',
                              padding: '2px 6px', borderRadius: 5,
                            }}>G/B/B</span>
                          </div>
                        </div>
                        <div style={{ textAlign: 'right', flexShrink: 0 }}>
                          <div style={{ fontSize: 14.5, fontWeight: 700, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>
                            {fmt(good)}
                            <span style={{ color: 'rgba(255,255,255,0.35)', fontWeight: 500 }}> → </span>
                            <span style={{ color: DA.brandLight }}>{fmt(best)}</span>
                          </div>
                          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.06em', marginTop: 2 }}>GOOD → BEST</div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* Wizard strip — ties the rate card to the fast New Job flow */}
        <Reveal delay={80}>
          <div style={{
            marginTop: m ? 40 : 72,
            padding: m ? '28px 22px' : '40px 48px',
            background: DA.ink, borderRadius: 20, color: '#fff',
            display: 'grid', gridTemplateColumns: m ? '1fr' : '1.1fr 1fr',
            gap: m ? 28 : 56, alignItems: 'center', position: 'relative', overflow: 'hidden',
          }}>
            <svg viewBox="0 0 800 200" preserveAspectRatio="none" width="100%" height="100%" aria-hidden="true" focusable="false" style={{
              position: 'absolute', inset: 0, opacity: 0.06, pointerEvents: 'none',
            }}>
              <path d="M0 100 L 150 100 L 200 160 L 300 40 L 400 160 L 500 40 L 580 100 L 800 100"
                    stroke={DA.brandLight} strokeWidth="2" fill="none"/>
            </svg>

            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: DA.brandLight, letterSpacing: '0.16em', marginBottom: 16 }}>
                THE NEW JOB FLOW
              </div>
              <h3 style={{
                fontSize: m ? 26 : 40, fontWeight: 800, letterSpacing: '-0.035em',
                margin: 0, lineHeight: 1.05, textWrap: 'balance',
              }}>
                Tap to scheduled,<br/>in under a minute<ADot dark/>
              </h3>
              <p style={{
                fontSize: m ? 15 : 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)',
                margin: '16px 0 0', maxWidth: 440, textWrap: 'pretty',
              }}>
                The rate card lives inside <strong style={{ color: '#fff', fontWeight: 600 }}>step 2</strong> of the New Job flow.
                Pick a service and the price, parts, and time auto-fill — job created, scheduled,
                and the customer emailed their confirmation before you're out of the driveway.
              </p>
            </div>

            {/* 5-step indicator */}
            <div style={{ position: 'relative' }}>
              {[
                ['Customer', 'Pick or add — name + phone', false],
                ['Service', 'From your Rate Card', true],
                ['Schedule', 'Smart slot + drive time', false],
                ['Review', 'Auto-filled — just confirm', false],
                ['Send', 'Booked + customer emailed', false],
              ].map(([label, sub, hot], i) => (
                <div key={label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', paddingBottom: i < 4 ? 14 : 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', alignSelf: 'stretch' }}>
                    <div style={{
                      width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
                      background: hot ? DA.brandLight : 'rgba(255,255,255,0.08)',
                      border: `1px solid ${hot ? DA.brandLight : 'rgba(255,255,255,0.2)'}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 800, color: hot ? '#fff' : 'rgba(255,255,255,0.7)',
                    }}>{i + 1}</div>
                    {i < 4 && <div style={{ width: 1, flex: 1, minHeight: 14, background: 'rgba(255,255,255,0.14)', marginTop: 2 }}/>}
                  </div>
                  <div style={{ paddingTop: 2 }}>
                    <div style={{
                      fontSize: 15, fontWeight: 700,
                      color: hot ? DA.brandLight : '#fff', letterSpacing: '-0.01em',
                      display: 'flex', alignItems: 'center', gap: 8,
                    }}>
                      {label}
                      {hot && <span style={{
                        fontSize: 9.5, fontWeight: 800, letterSpacing: '0.1em',
                        background: 'rgba(249,115,22,0.18)', color: DA.brandLight,
                        padding: '2px 7px', borderRadius: 5,
                      }}>RATE CARD</span>}
                    </div>
                    <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.ALoadedDayOne = ALoadedDayOne;