// direction-a-extras2.jsx — Smart Scheduling, Completion Intelligence,
// and EOD "operator" line. Loaded after direction-a-extras.jsx.

// Smart-slots screen — what the customer sees when booking from a quote.
// Reflects /api/book/smart-slots: route-aware, density-aware, day-fit slots
// chosen by Werkd, not raw calendar gaps.
function SmartSlotsScreen({ theme = 'light' }) {
  const isDark = theme === 'dark';
  const C = isDark ? {
    bg: '#181714', surface: '#22201c',
    text: '#f5f5f7', text2: '#a8a8b0', text3: '#8a8a92',
    hairline: '#38322b',
    brand: '#ff5c00', success: '#3cc26d',
    brandMuted: 'rgba(255,92,0,0.14)',
  } : {
    bg: '#f8f4ed', surface: '#fffdfa',
    text: '#171717', text2: '#6f7177', text3: '#9a9ca3',
    hairline: '#e3d8c9',
    brand: '#c4502a', success: '#16a34a',
    brandMuted: 'rgba(196,80,42,0.10)',
  };

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, paddingTop: 56, color: C.text, fontFamily: 'var(--font-ui)' }}>
      {/* Status bar */}
      <div style={{
        position: 'absolute', top: 14, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 600, color: C.text,
      }}>
        <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
        <div style={{ display: 'flex', gap: 5 }}>
          <Icon name="signal" size={15} color={C.text} strokeWidth={2.5}/>
          <Icon name="wifi" size={15} color={C.text} strokeWidth={2.5}/>
          <Icon name="battery" size={20} color={C.text} strokeWidth={2.5}/>
        </div>
      </div>

      {/* Header */}
      <div style={{ padding: '14px 18px 10px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: C.brand, letterSpacing: '0.14em' }}>
          QUOTE #1042 · APPROVED
        </div>
        <div style={{ fontSize: 19, fontWeight: 700, marginTop: 4, letterSpacing: '-0.015em' }}>
          Book when it suits you
        </div>
        <div style={{ fontSize: 12.5, color: C.text3, marginTop: 4 }}>
          Just the times that fit our schedule this week — pick whatever works for you.
        </div>
      </div>

      {/* Day picker */}
      <div style={{
        padding: '8px 14px 12px',
        display: 'flex', gap: 6, overflow: 'hidden',
      }}>
        {[
          { d: 'TUE', n: '24', active: false },
          { d: 'WED', n: '25', active: true },
          { d: 'THU', n: '26', active: false },
          { d: 'FRI', n: '27', active: false },
        ].map((d, i) => (
          <div key={i} style={{
            flex: 1,
            padding: '8px 4px',
            border: `1px solid ${d.active ? C.brand : C.hairline}`,
            background: d.active ? C.brandMuted : 'transparent',
            borderRadius: 10,
            textAlign: 'center',
          }}>
            <div style={{
              fontSize: 9.5, fontWeight: 700,
              color: d.active ? C.brand : C.text3,
              letterSpacing: '0.12em',
            }}>{d.d}</div>
            <div style={{
              fontSize: 17, fontWeight: 700, marginTop: 2,
              color: d.active ? C.brand : C.text,
              fontVariantNumeric: 'tabular-nums',
            }}>{d.n}</div>
          </div>
        ))}
      </div>

      {/* Smart slots */}
      <div style={{ padding: '0 14px' }}>
        <div style={{
          fontSize: 10, fontWeight: 700, color: C.text3, letterSpacing: '0.14em',
          padding: '8px 4px 6px',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <svg width={11} height={7} viewBox="0 0 64 40" fill="none">
            <path d="M2 20L10 20L17 36L28 4L36 36L47 4L54 20L62 20"
                  stroke={C.brand} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          PICKED BY WERKD · WED MAY 25
        </div>
        {[
          { time: '8:30 — 10:00 AM', label: 'Best fit', sub: 'On route between Parker & Russell jobs', best: true },
          { time: '11:15 AM — 12:30 PM', label: 'Open window', sub: 'After Parker wraps' },
          { time: '2:00 — 3:30 PM', label: 'Late open', sub: 'No travel — Russell within 6 mi' },
        ].map((slot, i) => (
          <Slide key={i} delay={700 + i * 240} from="left" distance={24}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 14px',
            background: slot.best ? C.brandMuted : 'transparent',
            border: `1px solid ${slot.best ? C.brand + '55' : C.hairline}`,
            borderRadius: 12,
            marginBottom: 8,
            cursor: 'pointer',
          }}>
            <div style={{
              width: 4, alignSelf: 'stretch',
              background: slot.best ? C.brand : 'transparent',
              borderRadius: 4,
            }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 8,
                marginBottom: 2,
              }}>
                <span style={{
                  fontSize: 14, fontWeight: 700, color: C.text,
                  letterSpacing: '-0.01em',
                }}>{slot.time}</span>
                {slot.best && (
                  <span style={{
                    fontSize: 10, fontWeight: 700, color: C.brand,
                    letterSpacing: '0.1em',
                  }}>{slot.label.toUpperCase()}</span>
                )}
              </div>
              <div style={{ fontSize: 11.5, color: C.text3, lineHeight: 1.4 }}>
                {slot.sub}
              </div>
            </div>
            {slot.best ? (
              <Icon name="check-circle" size={18} color={C.brand} strokeWidth={2}/>
            ) : (
              <Icon name="chevron-right" size={14} color={C.text3} strokeWidth={2}/>
            )}
          </div>
          </Slide>
        ))}

        <div style={{
          marginTop: 6,
          padding: '10px 12px',
          background: C.surface,
          border: `1px dashed ${C.hairline}`,
          borderRadius: 10,
          fontSize: 11.5, color: C.text2,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Icon name="check-circle" size={13} color={C.text3} strokeWidth={2}/>
          Other times aren't shown — Eli's day is already full.
        </div>

        <button style={{
          marginTop: 12, width: '100%', padding: '12px',
          background: C.brand, color: isDark ? '#0c0d0f' : '#f6f2ea', border: 'none',
          borderRadius: 8, fontSize: 13, fontWeight: 700,
          cursor: 'pointer',
        }}>Confirm 8:30 AM Wed →</button>
      </div>

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

// SMART SCHEDULING chapter — deliberately a quieter, supporting beat: no
// eyebrow label, smaller headline, tighter padding than the flagship
// chapters (Why Werkd, Money, Pricing) so the page reads as major/minor
// rather than 12 equally-loud sections.
function ASmartScheduling() {
  const DA = window.DA;
  const m = window.useIsMobile();
  return (
    <section style={{ background: DA.bg, padding: m ? '56px 20px' : '96px 40px', fontFamily: DA.font }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 32 : 56 }}>
          <Reveal>
          <h2 style={{
            fontSize: m ? 34 : 56, fontWeight: 800, letterSpacing: '-0.03em',
            margin: 0, paddingBottom: '0.15em', color: DA.ink, lineHeight: 1.08, textWrap: 'balance',
          }}>
            Customers book when it suits <span style={{ color: DA.brand }}>you<ADot/></span>
          </h2>
        </Reveal>
          <p style={{
            fontSize: m ? 16 : 18, lineHeight: 1.5, color: DA.text2,
            margin: '14px 0 0', maxWidth: 640, fontWeight: 400, textWrap: 'pretty',
          }}>
            Not raw calendar gaps. Slots picked by werkd — based on your route, your existing jobs, your work hours, and how dense the day already is.
          </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={{
              padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
            }}>
              <div style={{
                display: 'flex', gap: 18,
              }}>
                <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' }}>Route-aware</div>
                  <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                    Werkd offers windows that sit on or near your route that day. No detours, no doubling back across town.
                  </div>
                </div>
              </div>
            </div>
            <div style={{
              padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
            }}>
              <div style={{
                display: 'flex', gap: 18,
              }}>
                <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' }}>Density-aware</div>
                  <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                    Already have 6 jobs Tuesday? Werkd quietly hides Tuesday. No exploding days, no double-booked afternoons.
                  </div>
                </div>
              </div>
            </div>
            <div style={{
              padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
            }}>
              <div style={{
                display: 'flex', gap: 18,
              }}>
                <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' }}>Workday-aware</div>
                  <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                    No 6 AM emergencies offered for routine jobs. No Saturdays if you don't work Saturdays. Your rules, enforced quietly.
                  </div>
                </div>
              </div>
            </div>
            <div style={{
              padding: '20px 0',
              borderTop: `1px solid ${DA.hairline}`,
              borderBottom: `1px solid ${DA.hairline}`,
            }}>
              <div style={{
                display: 'flex', gap: 18,
              }}>
                <div style={{ width: 32, flexShrink: 0, fontSize: 14, fontWeight: 800, color: DA.brand, fontFamily: 'var(--font-mono)' }}>04</div>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>You confirm</div>
                  <div style={{ fontSize: 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
                    A new request lands on your dispatch board for your tap. Nothing customer-facing auto-confirms without you in the loop.
                  </div>
                </div>
              </div>
            </div>

            <div style={{
              marginTop: 32, padding: '20px 24px',
              background: '#fff',
              border: `1px solid ${DA.hairline}`,
              borderRadius: 12,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 8,
              }}>WHY THIS IS DIFFERENT</div>
              <div style={{ fontSize: 15, color: DA.text, lineHeight: 1.55, textWrap: 'pretty' }}>
                Generic booking tools show every open calendar slot. Werkd shows the slots that protect your route, your day, and your sanity — because it actually knows what the rest of your day looks like.
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'center', order: m ? 1 : 0 }}>
            <PhoneFrame width={340} theme="light">
              <SmartSlotsScreen theme="light"/>
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>
  );
}

// COMPLETION INTELLIGENCE — what Werkd surfaces when a job ends. Opens with
// the payoff stat instead of eyebrow+headline+lede, as a second way (besides
// ASmartScheduling's quieter treatment) to break the section-opener pattern.
function ACompletionIntelligence() {
  const DA = window.DA;
  const m = window.useIsMobile();
  return (
    <section style={{ background: DA.bgAlt, padding: m ? '64px 20px' : '120px 40px', fontFamily: DA.font }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 36 : 56, maxWidth: 760 }}>
          <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <span style={{ fontSize: m ? 46 : 84, fontWeight: 800, letterSpacing: '-0.03em', color: DA.brand, lineHeight: 1 }}>~90 sec<ADot/></span>
            <span style={{ fontSize: m ? 17 : 22, fontWeight: 600, color: DA.text2 }}>from “done” to dispatched</span>
          </div>
        </Reveal>
          <h2 style={{
            fontSize: m ? 27 : 42, fontWeight: 800, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: DA.ink, lineHeight: 1.2, textWrap: 'balance',
          }}>
            When the job ends, werkd already knows what's next.
          </h2>
          <p style={{
            fontSize: m ? 15 : 17, lineHeight: 1.5, color: DA.text2,
            margin: '12px 0 0', fontWeight: 400, textWrap: 'pretty',
          }}>
            Most apps think a job's done when you tap "complete." Werkd walks you through what still has to happen before the money is clean — because it's been there before.
          </p>
        </div>

        {/* The completion checklist visual */}
        <div style={{
          background: '#fff',
          border: `1px solid ${DA.hairline}`,
          borderRadius: 16,
          overflow: 'hidden',
        }}>
          <div style={{
            padding: '16px 24px',
            borderBottom: `1px solid ${DA.hairline}`,
            background: DA.bg,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontSize: 12, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em',
            flexWrap: 'wrap', gap: 6,
          }}>
            <span>JOB · ARIA RUSSELL · THERMOSTAT INSTALL</span>
            <span style={{ color: DA.brand }}>JUST MARKED COMPLETE · 4:51 PM</span>
          </div>
          {[
            { n: '01', t: 'Confirm work performed',
              d: 'Match the actual scope to the quote. Werkd flags additions for a change-order.', state: 'done' },
            { n: '02', t: 'Capture changes',
              d: 'Added smart sensor in master bedroom. Werkd drafts a $48 change line for the invoice.', state: 'done' },
            { n: '03', t: 'Photos & signature',
              d: 'Before/after photos saved. Customer signed on glass. Stored on the customer record.', state: 'done' },
            { n: '04', t: 'Invoice drafted',
              d: 'Labor + parts + change-order rolled in. Werkd suggests a 5% loyalty discount — repeat customer.', state: 'ready' },
            { n: '05', t: 'Payment link',
              d: 'Stripe checkout link ready. Card or bank transfer. Net-15 terms applied from customer record.', state: 'ready' },
            { n: '06', t: 'Review request',
              d: 'Google review SMS drafted for tomorrow morning — customers respond 3× better to next-day asks.', state: 'queued' },
            { n: '07', t: 'Closeout',
              d: 'Customer marked active. Suggested next-touch: HVAC tune-up in 11 months. Werkd will remind you.', state: 'queued' },
          ].map((step, i) => (
            <Slide key={i} delay={i * 140} from="up" distance={10}>
            <div style={{
              display: 'grid', gridTemplateColumns: m ? '22px 1fr' : 'auto auto 1fr auto',
              gap: m ? 12 : 18,
              padding: m ? '16px 16px' : '20px 24px',
              borderBottom: i < 6 ? `1px solid ${DA.hairline}` : 'none',
              alignItems: 'flex-start',
            }}>
              {!m && <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 800,
                color: DA.text3, paddingTop: 1,
              }}>{step.n}</div>}
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: step.state === 'done' ? DA.brand : step.state === 'ready' ? '#fff' : 'transparent',
                border: step.state === 'done' ? `2px solid ${DA.brand}` :
                        step.state === 'ready' ? `2px solid ${DA.brand}` :
                        `2px solid ${DA.hairline}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                marginTop: 1,
              }}>
                {step.state === 'done' && (
                  <Icon name="check-circle" size={14} color="#fff" strokeWidth={3}/>
                )}
              </div>
              <div>
                <div style={{ fontSize: m ? 15 : 16, fontWeight: 700, color: DA.ink, letterSpacing: '-0.005em' }}>{step.t}</div>
                <div style={{ fontSize: m ? 13 : 14, color: DA.text2, marginTop: 4, lineHeight: 1.5, textWrap: 'pretty' }}>{step.d}</div>
              </div>
              <div style={{
                fontSize: 10.5, fontWeight: 800, letterSpacing: '0.14em',
                color: step.state === 'done' ? DA.brand :
                       step.state === 'ready' ? DA.brand :
                       DA.text3,
                background: step.state === 'done' ? 'transparent' :
                            step.state === 'ready' ? DA.brand + '15' :
                            DA.hairline,
                padding: '4px 8px', borderRadius: 999,
                whiteSpace: 'nowrap',
                alignSelf: 'flex-start',
                justifySelf: m ? 'start' : 'auto',
                gridColumn: m ? '2' : 'auto',
                marginTop: m ? 8 : 0,
              }}>{step.state === 'done' ? 'DONE' : step.state === 'ready' ? 'READY' : 'QUEUED'}</div>
            </div>
            </Slide>
          ))}
          <div style={{
            padding: '14px 24px',
            background: DA.bg,
            borderTop: `1px solid ${DA.hairline}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontSize: 13, fontWeight: 600, flexWrap: 'wrap', gap: 6,
          }}>
            <span style={{ color: DA.text2 }}>Net effect: nothing falls through. The money is clean.</span>
            <span style={{ color: DA.brand, fontSize: 12, fontWeight: 700, letterSpacing: '0.06em' }}>~ 90 seconds from "done" to dispatched</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ASmartScheduling, ACompletionIntelligence, SmartSlotsScreen });