// direction-a-trade-intel.jsx — "Why we're different" chapter.
// Contrasts Werkd's AI-first architecture (a dozen+ specialized systems woven
// into every core workflow) against the industry-standard pattern of AI as a
// single bolted-on chatbot/receptionist add-on. Competitors kept generic per
// spec. Dark section, id="assist" to match nav. Loads after direction-a.jsx
// (uses DA, Reveal, ADot, Icon, Counter, useIsMobile).

// Pricing — single source of truth lives in pricing-constants.js.
const _P = window.WERKD_PRICING || { owner: 99 };

const TI_CONTRAST = {
  addon: {
    label: 'THE INDUSTRY PATTERN',
    sub: 'AI bolted onto the same manual workflow',
    items: [
      'Real AI, where it exists, costs extra — priced as an add-on on top of your subscription',
      'Explains the software back to you — a tour guide, not a worker',
      'Lives in one corner of the app: reception, or a help widget',
      'Everything else — quoting, invoicing, books — still manual',
    ],
  },
  werkd: {
    label: 'werk d. · BUILT IN',
    sub: 'AI woven into the actual work',
    items: [
      `12 AI systems, all included at $${_P.owner}/mo`,
      'Reads the job site and drafts the real number',
      'Runs quietly across quoting, invoicing, follow-ups, and books',
      'Quotes and diagnoses are drafts — yours to approve, edit, or skip',
    ],
  },
};

const TI_CAPS = [
  ['camera', 'Photo Diagnosis', 'Snap the unit or the leak — vision AI drafts a diagnosis and a priced quote, parts and labor included, before you’re back in the truck.'],
  ['mic', 'Composer', 'Say it, type it, or snap a photo. It becomes a scheduled job, a quote, or a logged expense.'],
  ['moon', 'Day Close', 'Every evening, AI drafts invoices for jobs you finished, flags what’s gone overdue, and preps tomorrow.'],
  ['send', 'Payment Chaser', 'Watches every invoice and sends the right reminder on schedule — tone tuned to how overdue it is and how that customer usually pays.'],
  ['inbox', 'The Desk', 'Every morning, AI preps the day’s decisions — reminders drafted, invoices ready to send, follow-ups written. You approve, adjust, or skip. Each card shows its receipt.'],
  ['book-open', 'Price Book that learns', 'Every receipt you snap teaches werkd your real costs — future quotes pull them automatically, no lookup.'],
  ['route', 'Route & Dispatch Check', 'Keeps the day’s drive times tight, and double-checks any reorder against real customer time windows before it’s applied.'],
  ['calendar-clock', 'Seasonal & win-back nudges', 'Surfaces the maintenance visit or the lapsed customer worth a call, right on schedule — not buried in a list.'],
  ['clipboard-list', 'Job Prep', 'Before you arrive, it briefs you on the customer’s history, flags any balance owed, and pulls gate codes or access notes from old jobs.'],
  ['tag', 'Cross-Sell Engine', 'Notices what similar customers usually need next and suggests the add-on while you’re already quoting the job.'],
  ['dollar-sign', 'The Money Brief', 'One line at the top of your money tab: the single most money-relevant loose end today — overdue, unbilled, or going cold — with the action attached. Chase it in two taps.'],
  ['star', 'Review Request', 'Scores each finished job for the best moment to ask, then drafts a personal review request timed to how that customer engages.'],
];

function ATradeIntelligence() {
  const DA = window.DA;
  const m = window.useIsMobile();

  return (
    <section id="intelligence" style={{
      background: DA.ink, color: '#fff',
      padding: m ? '64px 20px' : '140px 40px',
      fontFamily: DA.font, position: 'relative', overflow: 'hidden', scrollMarginTop: 64,
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(80% 60% at 50% 0%, rgba(249,115,22,0.10), transparent 60%)',
      }}/>

      <div style={{ maxWidth: 1120, margin: '0 auto', position: 'relative' }}>
        {/* Header */}
        <div style={{ marginBottom: m ? 32 : 56, maxWidth: 820 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brandLight, letterSpacing: '0.16em', marginBottom: 22 }}>
            WHY WERKD IS DIFFERENT
          </div>
          <Reveal>
            <h2 style={{
              fontSize: m ? 40 : 80, fontWeight: 800, letterSpacing: '-0.04em',
              margin: 0, paddingBottom: '0.12em', lineHeight: 1.0, textWrap: 'balance',
            }}>
              AI-first<ADot dark/> Not <span style={{ color: DA.brandLight }}>AI-bolted-on<ADot dark/></span>
            </h2>
          </Reveal>
          <p style={{
            fontSize: m ? 16 : 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.65)',
            margin: '24px 0 0', fontWeight: 400, textWrap: 'pretty',
          }}>
            Most trade apps added a chatbot for answering calls, called it "AI," and left the actual job — quoting, invoicing, follow-ups, the books — exactly as manual as before.
            Werkd's AI isn't a feature you turn on — it's <strong style={{ color: '#fff', fontWeight: 600 }}>running underneath the whole business</strong>: drafting the quote from a photo, chasing the invoice, watching the books, every single day.
          </p>
        </div>

        {/* Contrast strip */}
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 14 : 20, alignItems: 'stretch' }}>
          {/* Industry pattern */}
          <div style={{
            padding: m ? '20px' : '28px 30px',
            background: 'rgba(255,255,255,0.03)',
            border: '1px dashed rgba(255,255,255,0.22)',
            borderRadius: 16, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>
              {TI_CONTRAST.addon.label}
            </div>
            <div style={{ fontSize: m ? 15 : 16, color: 'rgba(255,255,255,0.75)', fontWeight: 600, marginBottom: 18 }}>
              {TI_CONTRAST.addon.sub}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {TI_CONTRAST.addon.items.map((t, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <Icon name="x" size={15} color="rgba(255,255,255,0.35)" strokeWidth={2.5}/>
                  <span style={{ fontSize: m ? 14 : 14.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.6)', textWrap: 'pretty' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Werkd */}
          <div style={{
            padding: m ? '20px' : '28px 30px',
            background: 'linear-gradient(160deg, rgba(249,115,22,0.14), rgba(249,115,22,0.03))',
            border: `1px solid ${DA.brand}66`,
            borderRadius: 16, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', color: DA.brandLight, marginBottom: 4 }}>
              {TI_CONTRAST.werkd.label}
            </div>
            <div style={{ fontSize: m ? 15 : 16, color: '#fff', fontWeight: 600, marginBottom: 18 }}>
              {TI_CONTRAST.werkd.sub}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {TI_CONTRAST.werkd.items.map((t, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <Icon name="check-circle" size={15} color={DA.brandLight} strokeWidth={2.5}/>
                  <span style={{ fontSize: m ? 14 : 14.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.9)', textWrap: 'pretty' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Capabilities — the AI systems actually running */}
        <div style={{ marginTop: m ? 48 : 88, paddingTop: m ? 36 : 56, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          <div style={{ marginBottom: m ? 28 : 40, display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: 20 }}>
            <div style={{ maxWidth: 640 }}>
              <h3 style={{
                fontSize: m ? 26 : 40, fontWeight: 800, letterSpacing: '-0.03em', margin: 0,
                lineHeight: 1.05, textWrap: 'balance',
              }}>Not one assistant. A dozen<ADot dark/></h3>
              <p style={{ fontSize: m ? 15 : 17, color: 'rgba(255,255,255,0.6)', margin: '14px 0 0', lineHeight: 1.5, textWrap: 'pretty' }}>
                Each one built for a single job — pricing, follow-up, dispatch, the books — working quietly in the background of the app you already use.
              </p>
            </div>
            <div style={{ textAlign: m ? 'left' : 'right', flexShrink: 0 }}>
              <div style={{ fontSize: m ? 44 : 56, fontWeight: 800, letterSpacing: '-0.03em', color: DA.brandLight, lineHeight: 1 }}>
                <Counter to={12} suffix=""/>
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', fontWeight: 600, marginTop: 4 }}>AI systems, all included</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.08)' }}>
            {TI_CAPS.map(([ic, t, d], i) => (
              <div key={i} style={{ background: DA.ink, padding: m ? 20 : 26 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: 'rgba(249,115,22,0.14)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18,
                }}>
                  <Icon name={ic} size={20} color={DA.brandLight} strokeWidth={2}/>
                </div>
                <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6, letterSpacing: '-0.01em' }}>{t}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'rgba(255,255,255,0.6)', textWrap: 'pretty' }}>{d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Trust strip — drafts, never sends */}
        <div style={{
          marginTop: m ? 32 : 48, padding: m ? '20px' : '24px 28px',
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 16, display: 'flex', gap: 16, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10, flexShrink: 0,
            background: 'rgba(249,115,22,0.14)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="shield-check" size={20} color={DA.brandLight} strokeWidth={2}/>
          </div>
          <div>
            <div style={{ fontSize: m ? 16 : 18, fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>
              AI drafts the customer-facing stuff. You approve it.
            </div>
            <div style={{ fontSize: m ? 14 : 15, color: 'rgba(255,255,255,0.65)', marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
              Quotes and diagnoses are drafts you review before anything sends. Payment reminders run on the schedule you set — and any customer can be switched to manual review, where werkd still drafts everything and you approve each send. A full action log means you always know what AI did, and why.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ATradeIntelligence = ATradeIntelligence;