// direction-a-demos.jsx — Live, interactive demos powered by window.claude.complete
// All three demos mirror the actual shape of the product's AI flows:
//   - PhotoQuoteDemo:    mirrors src/lib/ai/photoDiagnosis.ts (DIAGNOSIS_PROMPT)
//   - SmartSlotsDemo:    mirrors src/app/api/book/smart-slots — pure JS, no AI
//   - QuickJobDemo:      text → parsed-job, mirrors quick-job parsing flow

// ─── 1. Photo → Quote demo ─────────────────────────────────────
// We can't send actual images to window.claude.complete, so we pass a
// detailed text DESCRIPTION of the scene. Claude returns the same
// JSON shape the real product uses. Each click = fresh generation.

// SVG fallback content for each scenario — rendered both as React thumbnails
// AND as image-slot `src` fallback (via data URL) so the preview area looks
// good out-of-the-box and is overridable when the user drops a real photo.
const SVG_FALLBACKS = {
  capacitor: `<svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="280" fill="#f3f1ec"/>
    <rect x="20" y="40" width="360" height="220" rx="12" stroke="#5a5a60" stroke-width="3" fill="#e8e4d8"/>
    <circle cx="200" cy="150" r="72" stroke="#5a5a60" stroke-width="3" fill="#d9d4c6"/>
    <g stroke="#5a5a60" stroke-width="2.5">
      ${Array.from({length:6},(_,i)=>{const a=(i/6)*Math.PI*2; return `<line x1="200" y1="150" x2="${200+Math.cos(a)*64}" y2="${150+Math.sin(a)*64}"/>`}).join('')}
    </g>
    <ellipse cx="310" cy="95" rx="28" ry="12" fill="#F97316" opacity="0.9"/>
    <rect x="282" y="95" width="56" height="64" fill="#F97316" opacity="0.9"/>
    <ellipse cx="310" cy="159" rx="28" ry="8" fill="#d35400"/>
    <path d="M 296 159 Q 288 184 296 200" stroke="#7a4a1c" stroke-width="3.5" fill="none" stroke-linecap="round"/>
    <circle cx="296" cy="204" r="6" fill="#7a4a1c"/>
    <text x="200" y="252" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#5a5a60">Illustration — drop a real photo to replace</text>
  </svg>`,
  valve: `<svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="280" fill="#f3f1ec"/>
    <rect x="0" y="200" width="400" height="80" fill="#e5dac4"/>
    <ellipse cx="200" cy="230" rx="84" ry="20" fill="#aaa080" opacity="0.45"/>
    <rect x="184" y="20" width="32" height="120" fill="#c47a35"/>
    <rect x="156" y="120" width="88" height="68" rx="4" fill="#7a8088"/>
    <rect x="192" y="88" width="16" height="40" fill="#7a8088"/>
    <ellipse cx="200" cy="84" rx="28" ry="8" fill="#b04444"/>
    <rect x="230" y="136" width="100" height="28" fill="#c47a35"/>
    <circle cx="200" cy="196" r="6" fill="#5BA4E6"/>
    <circle cx="200" cy="210" r="4" fill="#5BA4E6" opacity="0.7"/>
    <text x="200" y="262" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#5a5a60">Illustration — drop a real photo to replace</text>
  </svg>`,
  panel: `<svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="280" fill="#f3f1ec"/>
    <rect x="40" y="20" width="320" height="240" rx="6" stroke="#5a5a60" stroke-width="3" fill="#e7e3d8"/>
    ${Array.from({length:8},(_,i)=>{const isProblem=i===7; const y=40+i*24; return `
      <rect x="64" y="${y}" width="120" height="18" fill="${isProblem?'#F97316':'#7a8088'}" opacity="${isProblem?1:0.8}"/>
      <rect x="216" y="${y}" width="120" height="18" fill="#7a8088" opacity="0.8"/>
      <rect x="112" y="${y+4}" width="24" height="10" fill="${isProblem?'#fff':'#c9c4b8'}" rx="2"/>
      <rect x="264" y="${y+4}" width="24" height="10" fill="#c9c4b8" rx="2"/>`}).join('')}
    <path d="M 50 220 Q 40 210 60 200" stroke="#5BA4E6" stroke-width="3" fill="none"/>
    <path d="M 50 232 Q 36 226 60 216" stroke="#c47a35" stroke-width="3" fill="none"/>
    <circle cx="66" cy="226" r="6" stroke="#F97316" stroke-width="3" fill="none"/>
    <text x="200" y="270" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#5a5a60">Illustration — drop a real photo to replace</text>
  </svg>`,
};

function svgFallbackUrl(kind) {
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(SVG_FALLBACKS[kind] || '');
}

const PHOTO_SCENARIOS = [
  {
    id: 'capacitor',
    label: 'AC condenser, bulged capacitor',
    trade: 'HVAC',
    photo: (window.__resources && window.__resources.dxCapacitor) || 'assets/dx-capacitor.jpg',
    desc: 'Outdoor AC condenser unit, top panel removed. The dual-run capacitor (round metal can) shows a clearly bulged top and dark brown residue weeping from the seam. Brand: GE, 45/5 µF, 370V. Surrounding wires are intact, fan blades show no damage. Unit appears 8-10 years old based on weathering.',
    // Placeholder SVG illustration
    svg: 'capacitor',
  },
  {
    id: 'valve',
    label: 'Leaking shutoff valve under sink',
    trade: 'Plumbing',
    photo: (window.__resources && window.__resources.dxValve) || 'assets/dx-valve.jpg',
    desc: 'Under-sink shutoff valve, 1/2 inch copper supply. Visible mineral buildup and active drip at the packing nut. Compression fitting in place. Surrounding cabinet floor shows water staining ~6 inches in diameter around the valve. P-trap and supply lines otherwise intact.',
    svg: 'valve',
  },
  {
    id: 'panel',
    label: 'Electrical panel, double-tapped breaker',
    trade: 'Electrical',
    photo: (window.__resources && window.__resources.dxPanel) || 'assets/dx-panel.jpg',
    desc: 'Residential 200A main panel, cover removed. Bottom-right breaker has two wires connected to a single terminal (double-tap) — a 14 AWG and a 12 AWG. No signs of charring. Panel brand: Square D QO. Bus bars appear clean. Adjacent breakers correctly landed single-conductor.',
    svg: 'panel',
  },
];

// Pre-written, on-brand results used when the live model isn't reachable
// (e.g. on the deployed static site, where window.claude doesn't exist). Same
// JSON shape the real Photo Diagnosis flow returns, one per sample photo.
const PHOTO_FALLBACKS = {
  capacitor: {
    diagnosis: 'The dual-run capacitor appears to show a bulged top with dark residue weeping from the seam, consistent with a capacitor that is failing or has failed. The surrounding condenser components appear intact.',
    category: 'hvac', attentionLevel: 'prompt',
    customerSummary: 'A small part in your AC unit looks worn and is the likely reason it isn’t cooling well. It’s a common, quick replacement.',
    possibleRepair: 'Replace dual-run capacitor',
    parts: [{ name: 'Dual-run capacitor, 45/5 µF 370V', qty: 1, unit: 'each', estimatedCost: 24 }],
    laborHours: 0.75, hourlyRate: 125, totalEstimate: 125,
  },
  valve: {
    diagnosis: 'The shutoff valve appears to show mineral buildup and an active drip at the packing nut, consistent with worn valve packing. Staining on the cabinet floor suggests the drip has been ongoing.',
    category: 'plumbing', attentionLevel: 'prompt',
    customerSummary: 'The shutoff valve under your sink is dripping and showing its age. Replacing it stops the leak and gives you a reliable shutoff.',
    possibleRepair: 'Replace 1/2" shutoff valve',
    parts: [
      { name: '1/2" compression shutoff valve', qty: 1, unit: 'each', estimatedCost: 12 },
      { name: 'Braided supply line', qty: 1, unit: 'each', estimatedCost: 8 },
    ],
    laborHours: 1.0, hourlyRate: 110, totalEstimate: 136,
  },
  panel: {
    diagnosis: 'The bottom-right breaker appears to show two wires landed on a single terminal (a double-tap), with no visible charring. Many breakers aren’t listed for more than one conductor at a terminal.',
    category: 'electrical', attentionLevel: 'safety_review_recommended',
    customerSummary: 'Two wires are sharing one breaker slot, which isn’t ideal. Adding a breaker so each wire has its own spot tidies it up safely.',
    possibleRepair: 'Add breaker, separate double-tap',
    parts: [{ name: 'Single-pole 15A breaker (Square D)', qty: 1, unit: 'each', estimatedCost: 9 }],
    laborHours: 1.0, hourlyRate: 135, totalEstimate: 147,
  },
};

function PhotoSvgIllustration({ kind, color = '#5a5a60' }) {
  // Simple line-art representations — placeholders the user can replace
  // with real jobsite photos.
  if (kind === 'capacitor') {
    return (
      <svg viewBox="0 0 200 140" fill="none" width="100%" height="100%">
        <rect x="10" y="20" width="180" height="110" rx="6" stroke={color} strokeWidth="2" fill="#f3f1ec"/>
        {/* condenser fan grille */}
        <circle cx="100" cy="75" r="36" stroke={color} strokeWidth="2" fill="none"/>
        {Array.from({ length: 6 }).map((_, i) => {
          const a = (i / 6) * Math.PI * 2;
          return <line key={i} x1="100" y1="75" x2={100 + Math.cos(a) * 32} y2={75 + Math.sin(a) * 32} stroke={color} strokeWidth="1.5"/>;
        })}
        {/* capacitor */}
        <ellipse cx="155" cy="48" rx="14" ry="6" fill="#F97316" opacity="0.85"/>
        <rect x="141" y="48" width="28" height="32" fill="#F97316" opacity="0.85"/>
        <ellipse cx="155" cy="80" rx="14" ry="4" fill="#d35400"/>
        {/* drip */}
        <path d="M 148 80 Q 144 92 148 100" stroke="#7a4a1c" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <circle cx="148" cy="102" r="3" fill="#7a4a1c"/>
      </svg>
    );
  }
  if (kind === 'valve') {
    return (
      <svg viewBox="0 0 200 140" fill="none" width="100%" height="100%">
        {/* cabinet floor */}
        <rect x="0" y="100" width="200" height="40" fill="#e5dac4"/>
        {/* water stain */}
        <ellipse cx="100" cy="115" rx="42" ry="10" fill="#aaa080" opacity="0.4"/>
        {/* pipe vertical */}
        <rect x="92" y="10" width="16" height="60" fill="#c47a35"/>
        {/* valve body */}
        <rect x="78" y="60" width="44" height="34" rx="3" fill="#7a8088"/>
        {/* handle */}
        <rect x="96" y="44" width="8" height="20" fill="#7a8088"/>
        <ellipse cx="100" cy="42" rx="14" ry="4" fill="#b04444"/>
        {/* outlet */}
        <rect x="115" y="68" width="50" height="14" fill="#c47a35"/>
        {/* drip */}
        <circle cx="100" cy="98" r="3" fill="#5BA4E6"/>
        <circle cx="100" cy="105" r="2" fill="#5BA4E6" opacity="0.7"/>
      </svg>
    );
  }
  if (kind === 'panel') {
    return (
      <svg viewBox="0 0 200 140" fill="none" width="100%" height="100%">
        <rect x="20" y="10" width="160" height="120" rx="3" stroke={color} strokeWidth="2" fill="#e7e3d8"/>
        {/* breakers — two columns */}
        {Array.from({ length: 8 }).map((_, i) => {
          const row = i;
          const isProblem = i === 7;
          return (
            <g key={i}>
              <rect x="32" y={20 + row * 12} width="60" height="9" fill={isProblem ? '#F97316' : '#7a8088'} opacity={isProblem ? 1 : 0.8}/>
              <rect x="108" y={20 + row * 12} width="60" height="9" fill="#7a8088" opacity="0.8"/>
              <rect x="56" y={22 + row * 12} width="12" height="5" fill={isProblem ? '#fff' : '#c9c4b8'} rx="1"/>
              <rect x="132" y={22 + row * 12} width="12" height="5" fill="#c9c4b8" rx="1"/>
            </g>
          );
        })}
        {/* double-tap indicator wires */}
        <path d="M 25 110 Q 20 105 30 100" stroke="#5BA4E6" strokeWidth="1.5" fill="none"/>
        <path d="M 25 116 Q 18 113 30 108" stroke="#c47a35" strokeWidth="1.5" fill="none"/>
        <circle cx="33" cy="113" r="3" stroke="#F97316" strokeWidth="2" fill="none"/>
      </svg>
    );
  }
  return null;
}

function PhotoQuoteDemo() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const [selected, setSelected] = React.useState(PHOTO_SCENARIOS[0]);
  const [state, setState] = React.useState('idle'); // idle | analyzing | done | error
  const [stage, setStage] = React.useState(0); // 0..3 for analyzing sub-states
  const [result, setResult] = React.useState(null);

  const ANALYZE_STAGES = [
    'Analyzing photo…',
    'Identifying components…',
    'Checking trade context…',
    'Drafting quote…',
  ];

  const run = async () => {
    setState('analyzing');
    setStage(0);
    setResult(null);

    // Visible stage progression while the call is in flight
    const stageTimers = [
      setTimeout(() => setStage(1), 900),
      setTimeout(() => setStage(2), 2000),
      setTimeout(() => setStage(3), 3400),
    ];

    try {
      const prompt = `You are an expert field service diagnostician helping a licensed tradesperson assess a photo. The photo description below is what a ${selected.trade.toLowerCase()} tradesperson sees on-site.

PHOTO DESCRIPTION:
${selected.desc}

Return ONLY valid JSON (no markdown, no code fences):
{
  "diagnosis": "Observational description of what appears in the photo and the likely issue (2-3 sentences). Use observational language: 'appears to show', 'consistent with', 'may indicate'.",
  "category": "plumbing" | "electrical" | "hvac" | "general",
  "attentionLevel": "routine" | "prompt" | "safety_review_recommended",
  "customerSummary": "Plain-language summary for the homeowner — no jargon (1-2 sentences). Do not assert damage or danger.",
  "possibleRepair": "Most likely repair scope (short — 4-8 words, e.g. 'Replace dual-run capacitor')",
  "parts": [
    { "name": "Part name (trade-standard)", "qty": 1, "unit": "each", "estimatedCost": 38 }
  ],
  "laborHours": 1.0,
  "hourlyRate": 125,
  "totalEstimate": 178
}

Rules:
- Use observational language; never assert damage, danger, or urgency
- Do NOT use words: "emergency", "critical", "urgent", "must", "required", "immediately", "hazard"
- 1-3 parts max for this demo, with realistic wholesale costs
- totalEstimate = (laborHours * hourlyRate) + sum(parts.qty * parts.estimatedCost * 1.30)`;

      const raw = (window.claude && typeof window.claude.complete === 'function')
        ? await window.claude.complete(prompt) : null;
      let parsed = null;
      if (raw != null) {
        try {
          let s = raw.trim();
          if (s.startsWith('```')) s = s.replace(/^```(?:json)?\s*/, '').replace(/\s*```$/, '');
          parsed = JSON.parse(s);
        } catch { parsed = null; }
      }

      // No live model (deployed static site) or a bad/failed response: fall back
      // to the pre-written result so the demo always works. Let the analyzing
      // animation finish first so it still feels live.
      if (!parsed) {
        await new Promise(r => setTimeout(r, 3800));
        parsed = PHOTO_FALLBACKS[selected.id] || PHOTO_FALLBACKS.capacitor;
      } else {
        await new Promise(r => setTimeout(r, 400));
      }
      stageTimers.forEach(clearTimeout);
      setResult(parsed);
      setState('done');
    } catch (e) {
      // Absolute last resort — still show a result rather than an error.
      stageTimers.forEach(clearTimeout);
      setResult(PHOTO_FALLBACKS[selected.id] || PHOTO_FALLBACKS.capacitor);
      setState('done');
    }
  };

  const reset = () => { setState('idle'); setResult(null); };

  return (
    <div style={{
      background: '#fff',
      border: `1px solid ${DA.hairline}`,
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 24px 48px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        padding: '14px 24px',
        background: DA.bg,
        borderBottom: `1px solid ${DA.hairline}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 11, fontWeight: 700, color: DA.brand, letterSpacing: '0.18em',
        }}>
          <span style={{
            display: 'inline-block', width: 7, height: 7, borderRadius: '50%',
            background: DA.brand,
          }} className="w-dot-pulse"/>
          LIVE DEMO · TRY IT
        </div>
        <div style={{ fontSize: 11, color: DA.text3, letterSpacing: '0.06em' }}>
          Powered by werkd's real Photo Diagnosis flow
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 0 }}>
        {/* LEFT — image picker */}
        <div style={{ padding: m ? '24px 18px' : '32px 28px', borderRight: m ? 'none' : `1px solid ${DA.hairline}`, borderBottom: m ? `1px solid ${DA.hairline}` : 'none' }}>
          <div style={{
            fontSize: 12, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 14,
          }}>1 · PICK A JOBSITE PHOTO</div>

          <div style={{
            background: DA.bg,
            border: `1px solid ${DA.hairline}`,
            borderRadius: 12,
            marginBottom: 18,
            aspectRatio: '4 / 3',
            position: 'relative',
            overflow: 'hidden',
          }}>
            {/* Curated jobsite photo for the selected scenario — read-only.
                No visitor upload: the example photos reliably produce a strong
                diagnosis, which a random dropped image wouldn't guarantee. */}
            <div style={{
              position: 'absolute', inset: 0,
              background: `#fff url(${selected.photo}) center/cover no-repeat`,
            }}/>
            <div style={{
              position: 'absolute', bottom: 10, left: 14, zIndex: 2,
              padding: '4px 8px', background: 'rgba(255,255,255,0.95)',
              borderRadius: 4, fontSize: 10, fontWeight: 700, color: DA.text2,
              letterSpacing: '0.06em',
              pointerEvents: 'none',
            }}>{selected.trade.toUpperCase()}</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {PHOTO_SCENARIOS.map((s) => (
              <button
                key={s.id}
                onClick={() => { setSelected(s); reset(); }}
                style={{
                  padding: 0,
                  background: `#fff url(${s.photo}) center/cover no-repeat`,
                  border: selected.id === s.id ? `2px solid ${DA.brand}` : `1px solid ${DA.hairline}`,
                  borderRadius: 8,
                  cursor: 'pointer',
                  aspectRatio: '4 / 3',
                  overflow: 'hidden',
                  transition: 'border-color 0.15s',
                }}
                aria-label={s.label}
              />
            ))}
          </div>
          <div style={{ fontSize: 10.5, color: DA.text3, marginTop: 8, letterSpacing: '0.01em' }}>
            Illustrative examples, not live customer jobs.
          </div>

          <button
            onClick={run}
            disabled={state === 'analyzing'}
            className="w-shimmer"
            style={{
              width: '100%', marginTop: 18, padding: '14px',
              background: state === 'analyzing' ? DA.text3 : DA.brand,
              color: '#fff', border: 'none', borderRadius: 6,
              fontSize: 14, fontWeight: 800, letterSpacing: '0.04em',
              cursor: state === 'analyzing' ? 'wait' : 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
            {state === 'analyzing' ? <>
              <span style={{
                width: 14, height: 14, borderRadius: '50%',
                border: '2px solid rgba(255,255,255,0.4)',
                borderTopColor: '#fff',
                animation: 'w-spin 0.8s linear infinite',
                display: 'inline-block',
              }}/>
              Analyzing…
            </> : state === 'done' ? 'Try another photo →' : <>
              <Icon name="camera" size={16} color="#fff" strokeWidth={2.5}/>
              Diagnose & draft quote
            </>}
          </button>

          {state === 'done' && (
            <button onClick={reset} style={{
              width: '100%', marginTop: 8, padding: '10px',
              background: 'transparent', color: DA.text2, border: `1px solid ${DA.hairline}`,
              borderRadius: 6, fontSize: 13, fontWeight: 600, cursor: 'pointer',
            }}>Reset</button>
          )}
        </div>

        {/* RIGHT — output */}
        <div style={{ padding: m ? '24px 18px' : '32px 28px', minHeight: m ? 0 : 480 }}>
          <div style={{
            fontSize: 12, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 14,
          }}>2 · WERKD'S DRAFT</div>

          {state === 'idle' && (
            <div style={{
              padding: '48px 24px',
              border: `1px dashed ${DA.hairline}`,
              borderRadius: 12,
              textAlign: 'center',
              color: DA.text3,
              fontSize: 14, lineHeight: 1.6,
            }}>
              <Icon name="camera" size={24} color={DA.text3} strokeWidth={1.5}/>
              <div style={{ marginTop: 10 }}>
                Pick a photo and tap <strong style={{ color: DA.text2 }}>Diagnose & draft quote</strong> to see werkd in action.
              </div>
            </div>
          )}

          {state === 'analyzing' && (
            <div style={{
              padding: '32px 24px',
              background: DA.bg,
              borderRadius: 12,
            }}>
              {ANALYZE_STAGES.map((label, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 0',
                  borderBottom: i < ANALYZE_STAGES.length - 1 ? `1px solid ${DA.hairline}` : 'none',
                  opacity: i <= stage ? 1 : 0.35,
                  transition: 'opacity 0.3s ease',
                }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: i < stage ? DA.brand : 'transparent',
                    border: `2px solid ${i <= stage ? DA.brand : DA.hairline}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {i < stage ? <Icon name="check-circle" size={11} color="#fff" strokeWidth={3.5}/> :
                     i === stage ? <span style={{
                       width: 8, height: 8, borderRadius: '50%', background: DA.brand,
                       animation: 'w-pulse-fast 0.9s ease-in-out infinite',
                     }}/> : null}
                  </div>
                  <span style={{
                    fontSize: 14, color: i <= stage ? DA.ink : DA.text3,
                    fontWeight: i === stage ? 600 : 500,
                  }}>{label}</span>
                </div>
              ))}
            </div>
          )}

          {state === 'error' && (
            <div style={{
              padding: '20px',
              background: '#fff5f5', border: `1px solid #f0c4c4`,
              borderRadius: 10, color: '#a13a3a',
              fontSize: 13.5, lineHeight: 1.5,
            }}>
              Couldn't reach the model. <button onClick={run} style={{
                background: 'none', border: 'none', color: '#a13a3a', fontWeight: 700,
                textDecoration: 'underline', cursor: 'pointer', padding: 0,
              }}>Try again</button>.
            </div>
          )}

          {state === 'done' && result && (
            <div style={{ animation: 'w-fade-in 0.7s ease' }}>
              {/* Diagnosis card */}
              <div style={{
                padding: '14px 16px',
                background: DA.bg, borderRadius: 10,
                border: `1px solid ${DA.hairline}`,
                marginBottom: 12,
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6,
                  fontSize: 10, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em',
                }}>
                  <svg width={11} height={7} viewBox="0 0 64 40" fill="none">
                    <path d="M2 20L10 20L17 36L28 4L36 36L47 4L54 20L62 20"
                          stroke={DA.brand} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  LIKELY DIAGNOSIS · {(result.category || 'general').toUpperCase()}
                </div>
                <div style={{ fontSize: 13.5, color: DA.ink, lineHeight: 1.5, fontWeight: 500 }}>
                  {result.diagnosis}
                </div>
                <div style={{
                  marginTop: 10, padding: '8px 10px',
                  background: '#fff', border: `1px solid ${DA.hairline}`,
                  borderRadius: 6,
                  fontSize: 12, color: DA.text2, fontStyle: 'italic', lineHeight: 1.45,
                }}>
                  <strong style={{ color: DA.text, fontStyle: 'normal' }}>For the customer:</strong> {result.customerSummary}
                </div>
              </div>

              {/* Recommended repair */}
              <div style={{
                fontSize: 12, fontWeight: 700, color: DA.text3,
                letterSpacing: '0.14em', marginBottom: 8,
              }}>SUGGESTED REPAIR</div>
              <div style={{
                padding: '10px 14px', background: '#fff',
                border: `1px solid ${DA.brand}33`, borderRadius: 8,
                fontSize: 14, color: DA.ink, fontWeight: 600,
                marginBottom: 14,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Icon name="wrench" size={14} color={DA.brand} strokeWidth={2.5}/>
                {result.possibleRepair}
              </div>

              {/* Quote lines */}
              <div style={{
                fontSize: 12, fontWeight: 700, color: DA.text3,
                letterSpacing: '0.14em', marginBottom: 8,
              }}>DRAFT QUOTE</div>
              <div style={{
                background: '#fff', border: `1px solid ${DA.hairline}`,
                borderRadius: 10, overflow: 'hidden',
              }}>
                {(result.parts || []).map((p, i) => (
                  <div key={i} style={{
                    display: 'flex', justifyContent: 'space-between',
                    padding: '10px 14px',
                    borderBottom: `1px solid ${DA.hairline}`,
                    fontSize: 13,
                  }}>
                    <span style={{ color: DA.text }}>{p.name} <span style={{ color: DA.text3 }}>× {p.qty}</span></span>
                    <span style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>${(p.qty * p.estimatedCost * 1.3).toFixed(2)}</span>
                  </div>
                ))}
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '10px 14px',
                  borderBottom: `1px solid ${DA.hairline}`,
                  fontSize: 13,
                }}>
                  <span style={{ color: DA.text }}>Labor ({result.laborHours} hrs @ ${result.hourlyRate}/hr)</span>
                  <span style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>${(result.laborHours * result.hourlyRate).toFixed(2)}</span>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '12px 14px',
                  background: DA.bg,
                  fontSize: 14, fontWeight: 700,
                }}>
                  <span>Total estimate</span>
                  <span style={{ color: DA.brand, fontSize: 18, fontVariantNumeric: 'tabular-nums' }}>${result.totalEstimate}</span>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                <button style={{
                  flex: 1, padding: '12px',
                  background: DA.brand, color: '#fff', border: 'none', borderRadius: 6,
                  fontSize: 13, fontWeight: 700, cursor: 'pointer',
                }}>Review & send →</button>
                <button style={{
                  padding: '12px 14px',
                  background: 'transparent', color: DA.text,
                  border: `1px solid ${DA.hairline}`, borderRadius: 6,
                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
                }}>Edit</button>
              </div>

              <div style={{
                marginTop: 14, fontSize: 11, color: DA.text3, lineHeight: 1.5,
                fontStyle: 'italic',
              }}>
                Demo output. Generated live by Claude using the same prompt structure as werkd's shipped Photo Diagnosis flow. You always review before anything goes to the customer.
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── 2. Smart Slots booking demo ───────────────────────────────

function SmartSlotsDemo() {
  const DA = window.DA;
  // Each day's `existingJobs` + Werkd's picked `slots` are coherent:
  // Werkd's windows never overlap the existing jobs (that's the whole point —
  // the route protects itself).
  // `mins` = start time in minutes from midnight, used for timeline sorting.
  const DAYS = [
    {
      d: 'TUE', n: '24',
      slots: [
        { time: '12:15 — 1:45 PM', mins: 735, label: 'Best fit', sub: 'After Parker, before Okafor · on route', best: true },
        { time: '3:30 — 5:00 PM', mins: 930, label: 'Late open', sub: 'End of day · on route home' },
      ],
      existingJobs: [
        { time: '8:30 AM', mins: 510, name: 'Rob Vance', desc: 'Faucet swap', amt: '$165' },
        { time: '10:00 AM', mins: 600, name: 'Tom Parker', desc: 'Water-heater swap', amt: '$1,240' },
        { time: '2:00 PM', mins: 840, name: 'Grace Okafor', desc: 'Toilet replace', amt: '$420' },
      ],
    },
    {
      d: 'WED', n: '25',
      slots: [
        { time: '9:00 — 10:15 AM', mins: 540, label: 'Best fit', sub: 'On route between Chen & Delgado', best: true },
        { time: '11:30 AM — 12:45 PM', mins: 690, label: 'Open window', sub: 'After Delgado, before Parker · on route' },
        { time: '4:45 — 6:00 PM', mins: 1005, label: 'Late open', sub: 'End of day · on route home' },
      ],
      existingJobs: [
        { time: '8:00 AM', mins: 480, name: 'Mike Chen', desc: 'Drain clear', amt: '$185' },
        { time: '10:30 AM', mins: 630, name: 'Sarah Delgado', desc: 'Faucet swap', amt: '$165' },
        { time: '1:00 PM', mins: 780, name: 'Tom Parker', desc: 'Water-heater swap', amt: '$1,240' },
        { time: '3:30 PM', mins: 930, name: 'Dave Wilson', desc: 'Outlet repair', amt: '$140' },
      ],
    },
    {
      d: 'THU', n: '26',
      slots: [
        { time: '4:00 — 5:00 PM', mins: 960, label: 'Best fit', sub: 'After Roberts · on the way home', best: true },
      ],
      existingJobs: [
        { time: '9:00 AM', mins: 540, name: 'Priya Patel', desc: 'HVAC seasonal tune-up', amt: '$189' },
        { time: '10:30 AM', mins: 630, name: 'Karen Hines', desc: 'Filter swap', amt: '$60' },
        { time: '1:30 PM', mins: 810, name: 'Dan Roberts', desc: 'Kitchen drain clear', amt: '$185' },
      ],
    },
    {
      d: 'FRI', n: '27',
      slots: [
        { time: '10:30 AM — 12:00 PM', mins: 630, label: 'Best fit', sub: 'After Nguyen, before Chen · on route', best: true },
        { time: '1:30 — 2:45 PM', mins: 810, label: 'Open window', sub: 'After Chen, before Barnes · on route' },
      ],
      existingJobs: [
        { time: '9:00 AM', mins: 540, name: 'Linh Nguyen', desc: 'Disposal install', amt: '$210' },
        { time: '12:30 PM', mins: 750, name: 'Mike Chen', desc: 'Drain clear', amt: '$185' },
        { time: '3:00 PM', mins: 900, name: 'Ed Barnes', desc: 'Hose bib replace', amt: '$165' },
      ],
    },
  ];
  const [dayIdx, setDayIdx] = React.useState(1);
  const [picked, setPicked] = React.useState(null); // null | slot
  const [confirmed, setConfirmed] = React.useState(false);
  const m = window.useIsMobile();

  // Reset confirmation when day changes
  React.useEffect(() => { setPicked(null); setConfirmed(false); }, [dayIdx]);

  const day = DAYS[dayIdx];

  // Build the dispatcher timeline: existing jobs + (optionally) the just-booked
  // appointment, sorted by start time. Pull the "8:30 AM" label out of the
  // picked slot's "8:30 — 10:00 AM" string for display.
  const timelineRows = React.useMemo(() => {
    const rows = day.existingJobs.map((j) => ({ ...j, kind: 'existing' }));
    if (picked && confirmed) {
      // Pluck start time + AM/PM out of "8:30 — 10:00 AM"
      const m = picked.time.match(/^(\d{1,2}:\d{2})\s*[—-]\s*\d{1,2}:\d{2}\s*(AM|PM)/);
      const startLabel = m ? `${m[1]} ${m[2]}` : picked.time.split(/\s*[—-]\s*/)[0];
      rows.push({
        time: startLabel,
        mins: picked.mins,
        name: 'Aria Russell',
        desc: 'Smart thermostat (new)',
        amt: '$420',
        kind: 'justBooked',
      });
    }
    return rows.sort((a, b) => a.mins - b.mins);
  }, [day, picked, confirmed]);

  return (
    <div style={{
      background: '#fff',
      border: `1px solid ${DA.hairline}`,
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 24px 48px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        padding: '14px 24px',
        background: DA.bg,
        borderBottom: `1px solid ${DA.hairline}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 11, fontWeight: 700, color: DA.brand, letterSpacing: '0.18em',
        }}>
          <span style={{
            display: 'inline-block', width: 7, height: 7, borderRadius: '50%',
            background: DA.brand,
          }} className="w-dot-pulse"/>
          LIVE DEMO · BOOK A TIME
        </div>
        <div style={{ fontSize: 11, color: DA.text3, letterSpacing: '0.06em' }}>
          You are Aria — Quote #1042 just landed in your inbox
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.2fr 1fr', gap: 0 }}>
        {/* LEFT — booking flow */}
        <div style={{ padding: m ? '24px 18px' : '32px 32px', borderRight: m ? 'none' : `1px solid ${DA.hairline}`, borderBottom: m ? `1px solid ${DA.hairline}` : 'none' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em' }}>
            QUOTE #1042 · APPROVED — PICK A TIME
          </div>
          <div style={{ fontSize: 21, fontWeight: 800, marginTop: 6, color: DA.ink, letterSpacing: '-0.015em' }}>
            Smart thermostat install
          </div>
          <div style={{ fontSize: 13, color: DA.text2, marginTop: 4 }}>
            Eli picked the windows that fit his route this week.
          </div>

          {/* Day picker */}
          <div style={{ display: 'flex', gap: 8, margin: '20px 0' }}>
            {DAYS.map((d, i) => (
              <button key={i}
                onClick={() => setDayIdx(i)}
                style={{
                  flex: 1, padding: '10px 6px',
                  background: i === dayIdx ? '#fff' : 'transparent',
                  border: `1px solid ${i === dayIdx ? DA.brand : DA.hairline}`,
                  borderRadius: 10,
                  cursor: 'pointer', textAlign: 'center',
                  transition: 'border-color 0.15s, background 0.15s',
                  boxShadow: i === dayIdx ? '0 2px 8px rgba(249,115,22,0.18)' : 'none',
                }}>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', color: i === dayIdx ? DA.brand : DA.text3 }}>{d.d}</div>
                <div style={{ fontSize: 18, fontWeight: 800, marginTop: 2, color: i === dayIdx ? DA.brand : DA.text, fontVariantNumeric: 'tabular-nums' }}>{d.n}</div>
                <div style={{
                  marginTop: 4, height: 4,
                  display: 'flex', justifyContent: 'center', gap: 2,
                }}>
                  {Array.from({ length: Math.min(d.slots.length, 3) }).map((_, j) => (
                    <span key={j} style={{ width: 4, height: 4, borderRadius: '50%', background: i === dayIdx ? DA.brand : DA.hairline }}/>
                  ))}
                </div>
              </button>
            ))}
          </div>

          {/* Slots */}
          <div style={{ fontSize: 11, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 10, 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={DA.brand} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            PICKED BY WERKD · {day.d} {day.n}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {day.slots.map((slot, i) => {
              const isPicked = picked?.time === slot.time;
              return (
                <button key={i}
                  onClick={() => setPicked(slot)}
                  style={{
                    padding: '12px 14px',
                    background: isPicked ? '#fff' : (slot.best ? 'rgba(249,115,22,0.06)' : 'transparent'),
                    border: `${isPicked ? '2' : '1'}px solid ${isPicked ? DA.brand : slot.best ? `${DA.brand}55` : DA.hairline}`,
                    borderRadius: 12,
                    textAlign: 'left',
                    cursor: 'pointer',
                    display: 'flex', alignItems: 'center', gap: 12,
                    transition: 'transform 0.15s, border-color 0.15s, background 0.15s',
                    transform: isPicked ? 'translateX(2px)' : 'translateX(0)',
                  }}>
                  <div style={{
                    width: 4, alignSelf: 'stretch',
                    background: slot.best ? DA.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: DA.text }}>{slot.time}</span>
                      {slot.best && (
                        <span style={{ fontSize: 10, fontWeight: 700, color: DA.brand, letterSpacing: '0.1em' }}>BEST FIT</span>
                      )}
                    </div>
                    <div style={{ fontSize: 12, color: DA.text3, lineHeight: 1.4 }}>{slot.sub}</div>
                  </div>
                  <Icon name={isPicked ? 'check-circle' : 'chevron-right'} size={isPicked ? 18 : 14}
                        color={isPicked ? DA.brand : DA.text3} strokeWidth={2}/>
                </button>
              );
            })}
          </div>

          <div style={{
            marginTop: 12,
            padding: '8px 12px',
            background: DA.bg,
            border: `1px dashed ${DA.hairline}`,
            borderRadius: 8,
            fontSize: 11.5, color: DA.text2,
          }}>
            Other times aren't shown — Eli's day is already full or off-route.
          </div>

          <button
            onClick={() => setConfirmed(true)}
            disabled={!picked || confirmed}
            style={{
              width: '100%', marginTop: 16, padding: '14px',
              background: confirmed ? '#3cc26d' : picked ? DA.brand : DA.hairline,
              color: '#fff', border: 'none', borderRadius: 8,
              fontSize: 14, fontWeight: 800, letterSpacing: '0.04em',
              cursor: picked && !confirmed ? 'pointer' : 'default',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              transition: 'background 0.2s',
            }}>
            {confirmed ? <>
              <Icon name="check-circle" size={16} color="#fff" strokeWidth={2.5}/>
              Booked — Eli is on it
            </> : picked ? `Confirm ${picked.time}` : 'Pick a time above'}
          </button>
        </div>

        {/* RIGHT — Eli's view (the dispatcher's reaction) */}
        <div style={{ padding: m ? '24px 18px' : '32px 32px', background: DA.bg }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 14 }}>
            ELI'S DISPATCH BOARD — {day.d} {day.n}
          </div>

          {/* Timeline */}
          <div style={{ position: 'relative', paddingLeft: 18 }}>
            <div style={{ position: 'absolute', left: 11, top: 20, bottom: 32, width: 2, background: DA.hairline }}/>
            {timelineRows.map((row, i) => (
              <div key={`${row.kind}-${row.mins}-${i}`} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '10px 0',
                animation: row.kind === 'justBooked' ? 'w-slide-in-left 0.5s ease' : 'none',
              }}>
                <div style={{
                  marginLeft: -12, marginTop: 5,
                  width: 12, height: 12, borderRadius: '50%',
                  position: 'relative', zIndex: 1,
                  background: row.kind === 'justBooked' ? DA.brand : '#fff',
                  border: `2px solid ${row.kind === 'justBooked' ? DA.brand : DA.hairline}`,
                  boxShadow: row.kind === 'justBooked' ? `0 0 0 4px rgba(249,115,22,0.15)` : 'none',
                  flexShrink: 0,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    marginBottom: 2, gap: 8,
                  }}>
                    <span style={{
                      fontSize: 13.5, fontWeight: 700,
                      color: row.kind === 'justBooked' ? DA.brand : DA.ink,
                    }}>
                      {row.time} — {row.name}
                      {row.kind === 'justBooked' && (
                        <span style={{
                          marginLeft: 8, fontSize: 9.5, fontWeight: 700,
                          color: DA.brand, letterSpacing: '0.12em',
                          padding: '2px 6px', background: 'rgba(249,115,22,0.15)',
                          borderRadius: 4,
                        }}>NEEDS OK</span>
                      )}
                    </span>
                    <span style={{
                      fontSize: 12.5, color: '#1b9e4b', fontWeight: 700,
                      fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap',
                    }}>{row.amt}</span>
                  </div>
                  <div style={{ fontSize: 12, color: DA.text3 }}>{row.desc}</div>
                </div>
              </div>
            ))}
          </div>

          {confirmed && (
            <div style={{
              marginTop: 16, padding: '12px 14px',
              background: '#e6f7ec', border: `1px solid #3cc26d44`,
              borderRadius: 8, fontSize: 13, color: '#1b9e4b',
              animation: 'w-fade-in 0.7s ease',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <Icon name="check-circle" size={16} color="#1b9e4b" strokeWidth={2.5}/>
              <span><strong>Booked.</strong> It lands on Eli's board for his OK. Once he accepts, Aria's confirmed — and gets an "on my way" heads-up the morning of: a portal push if she's added it to her phone, or a text from Eli's own phone.</span>
            </div>
          )}

          {!confirmed && (
            <div style={{
              marginTop: 16, padding: '12px 14px',
              background: '#fff', border: `1px dashed ${DA.hairline}`,
              borderRadius: 8, fontSize: 12.5, color: DA.text3, lineHeight: 1.5,
            }}>
              Pick a time on the left — watch it slot into Eli's day.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── 3. Quick Job text → parsed job demo ───────────────────────

const EXAMPLE_JOB_REQUESTS = [
  'Tom Parker water heater swap Tuesday at 9',
  'Aria Russell needs the AC looked at — sometime Friday afternoon',
  'Roberta Diaz, leaky toilet, asap if I can',
  'New customer Tim at 412 Oak — frayed wire in the panel, this week',
];

function quickJobFallback(input) {
  const PRESETS = {
    'Tom Parker water heater swap Tuesday at 9': { customer: 'Tom Parker', isNewCustomer: false, service: 'Water heater swap', trade: 'plumbing', preferredWindow: 'Tuesday at 9:00 AM', urgency: 'routine', estimatedDurationHours: 3.0, addressGiven: null, confidence: 'high', needsClarification: null },
    'Aria Russell needs the AC looked at — sometime Friday afternoon': { customer: 'Aria Russell', isNewCustomer: false, service: 'AC inspection / diagnostic', trade: 'hvac', preferredWindow: 'Friday afternoon', urgency: 'routine', estimatedDurationHours: 1.0, addressGiven: null, confidence: 'medium', needsClarification: 'Is the unit not cooling or making a noise? Helps bring the right parts.' },
    'Roberta Diaz, leaky toilet, asap if I can': { customer: 'Roberta Diaz', isNewCustomer: false, service: 'Leaking toilet repair', trade: 'plumbing', preferredWindow: 'This week — ASAP', urgency: 'prompt', estimatedDurationHours: 1.5, addressGiven: null, confidence: 'high', needsClarification: null },
    'New customer Tim at 412 Oak — frayed wire in the panel, this week': { customer: 'Tim', isNewCustomer: true, service: 'Frayed wire in panel — repair', trade: 'electrical', preferredWindow: 'This week', urgency: 'safety_review_recommended', estimatedDurationHours: 1.5, addressGiven: '412 Oak', confidence: 'medium', needsClarification: 'I’d confirm whether the panel shows any heat or smell before scheduling.' },
  };
  const key = (input || '').trim();
  if (PRESETS[key]) return PRESETS[key];

  // Best-effort heuristic parse for anything the visitor types themselves.
  const text = key.toLowerCase();
  const trade = /(water heater|leak|toilet|drain|faucet|pipe|valve|sink|sewer)/.test(text) ? 'plumbing'
    : /(\bac\b|a\/c|furnace|hvac|thermostat|cooling|condenser|heat pump)/.test(text) ? 'hvac'
    : /(wire|panel|outlet|breaker|electric|gfci|fixture|circuit)/.test(text) ? 'electrical' : 'general';
  const isNew = /new customer|new client/.test(text);
  const nameMatch = key.match(/[A-Z][a-z]+(?:\s[A-Z][a-z]+)?/);
  const customer = nameMatch ? nameMatch[0] : 'New customer';
  const dayMatch = key.match(/\b(mon|tues|wednes|thurs|fri|satur|sun)day\b/i);
  const partOfDay = /afternoon/.test(text) ? ' afternoon' : /morning/.test(text) ? ' morning' : /evening/.test(text) ? ' evening' : '';
  const asap = /asap|today|right away|emergency|as soon/.test(text);
  const preferredWindow = asap ? 'This week — ASAP'
    : dayMatch ? (dayMatch[0][0].toUpperCase() + dayMatch[0].slice(1).toLowerCase() + partOfDay)
    : /this week/.test(text) ? 'This week'
    : partOfDay ? partOfDay.trim().replace(/^./, (c) => c.toUpperCase()) : 'To be scheduled';
  const addrMatch = key.match(/\b\d{2,5}\s+[A-Z][a-z]+/);
  const dur = trade === 'plumbing' ? 1.5 : trade === 'electrical' ? 1.5 : trade === 'hvac' ? 1.0 : 1.0;
  const urgency = /frayed wire|spark|burning|smell|gas|exposed/.test(text) ? 'safety_review_recommended' : asap ? 'prompt' : 'routine';
  return {
    customer, isNewCustomer: isNew,
    service: key.length > 42 ? key.slice(0, 42).trim() + '…' : (key || 'New job'),
    trade, preferredWindow, urgency, estimatedDurationHours: dur,
    addressGiven: addrMatch ? addrMatch[0] : null, confidence: 'medium',
    needsClarification: 'I’d confirm the exact time and scope before locking it in.',
  };
}

function QuickJobDemo() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const [input, setInput] = React.useState(EXAMPLE_JOB_REQUESTS[0]);
  const [state, setState] = React.useState('idle');
  const [result, setResult] = React.useState(null);

  const run = async () => {
    if (!input.trim()) return;
    setState('parsing');
    setResult(null);

    const prompt = `You are Werkd, an AI scheduling assistant for tradespeople. Parse the request below into a structured job draft.

REQUEST: "${input}"

Return ONLY valid JSON (no markdown, no code fences):
{
  "customer": "Customer name (or 'New customer' if not given)",
  "isNewCustomer": true | false,
  "service": "Short service description (4-8 words)",
  "trade": "plumbing" | "electrical" | "hvac" | "general",
  "preferredWindow": "Plain-language day/time (e.g. 'Tuesday at 9:00 AM', 'Friday afternoon', 'This week — ASAP')",
  "urgency": "routine" | "prompt" | "safety_review_recommended",
  "estimatedDurationHours": 1.5,
  "addressGiven": "Address if mentioned, else null",
  "confidence": "high" | "medium" | "low",
  "needsClarification": "Optional — one sentence on what you'd ask before scheduling (or null)"
}

Rules:
- Match the requester's exact day/time language — do not invent a specific time if they said "afternoon"
- estimatedDurationHours: realistic for the trade and scope (0.5 to 6.0)
- If anything is genuinely ambiguous, set confidence: "low" and surface it in needsClarification
- Never use words: "emergency", "critical", "urgent", "must", "required", "immediately"`;

    try {
      const raw = (window.claude && typeof window.claude.complete === 'function')
        ? await window.claude.complete(prompt) : null;
      let parsed = null;
      if (raw != null) {
        try {
          let s = raw.trim();
          if (s.startsWith('```')) s = s.replace(/^```(?:json)?\s*/, '').replace(/\s*```$/, '');
          parsed = JSON.parse(s);
        } catch { parsed = null; }
      }
      if (!parsed) {
        await new Promise(r => setTimeout(r, 1100));
        parsed = quickJobFallback(input);
      } else {
        await new Promise(r => setTimeout(r, 300));
      }
      setResult(parsed);
      setState('done');
    } catch {
      setResult(quickJobFallback(input));
      setState('done');
    }
  };

  return (
    <div style={{
      background: '#fff',
      border: `1px solid ${DA.hairline}`,
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 24px 48px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        padding: '14px 24px',
        background: DA.bg,
        borderBottom: `1px solid ${DA.hairline}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 11, fontWeight: 700, color: DA.brand, letterSpacing: '0.18em',
        }}>
          <span style={{
            display: 'inline-block', width: 7, height: 7, borderRadius: '50%',
            background: DA.brand,
          }} className="w-dot-pulse"/>
          LIVE DEMO · QUICK JOB
        </div>
        <div style={{ fontSize: 11, color: DA.text3, letterSpacing: '0.06em' }}>
          Type it the way you'd say it
        </div>
      </div>

      <div style={{ padding: m ? '24px 18px' : '32px 32px' }}>
        <div style={{
          fontSize: 12, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 10,
        }}>1 · DICTATE OR TYPE THE JOB</div>

        <div style={{ position: 'relative' }}>
          <input
            value={input}
            onChange={(e) => { setInput(e.target.value); setResult(null); setState('idle'); }}
            onKeyDown={(e) => e.key === 'Enter' && run()}
            placeholder="e.g. Tom Parker, water heater swap, Tuesday at 9"
            style={{
              width: '100%',
              padding: '14px 56px 14px 18px',
              fontSize: 15,
              fontFamily: 'var(--font-ui)',
              background: '#fff',
              border: `1px solid ${DA.hairline}`,
              borderRadius: 10,
              color: DA.text,
            }}
          />
          <button onClick={run} disabled={state === 'parsing' || !input.trim()}
            style={{
              position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)',
              padding: '8px 14px',
              background: DA.brand, color: '#fff',
              border: 'none', borderRadius: 6,
              fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
              cursor: state === 'parsing' || !input.trim() ? 'default' : 'pointer',
              opacity: state === 'parsing' || !input.trim() ? 0.5 : 1,
              display: 'flex', alignItems: 'center', gap: 4,
            }}>
            {state === 'parsing' ? '...' : 'Parse →'}
          </button>
        </div>

        <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
          {EXAMPLE_JOB_REQUESTS.map((ex, i) => (
            <button key={i} onClick={() => { setInput(ex); setResult(null); setState('idle'); }}
              style={{
                padding: '6px 12px',
                background: 'transparent', color: DA.text2,
                border: `1px solid ${DA.hairline}`, borderRadius: 999,
                fontSize: 12, fontWeight: 500, cursor: 'pointer',
                fontStyle: 'italic',
                transition: 'background 0.15s, color 0.15s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = DA.bg; e.currentTarget.style.color = DA.text; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = DA.text2; }}>
              {ex}
            </button>
          ))}
        </div>

        {state === 'parsing' && (
          <div style={{
            marginTop: 24, padding: '14px 18px',
            background: DA.bg, borderRadius: 10,
            display: 'flex', alignItems: 'center', gap: 12,
            fontSize: 13.5, color: DA.text2,
          }}>
            <span style={{
              width: 14, height: 14, borderRadius: '50%',
              border: `2px solid ${DA.hairline}`,
              borderTopColor: DA.brand,
              animation: 'w-spin 0.8s linear infinite',
              display: 'inline-block',
            }}/>
            Parsing — werkd is matching this to your customer list, schedule, and trade rates…
          </div>
        )}

        {state === 'error' && (
          <div style={{
            marginTop: 24, padding: '14px 18px',
            background: '#fff5f5', border: `1px solid #f0c4c4`,
            borderRadius: 10, color: '#a13a3a', fontSize: 13,
          }}>
            Couldn't parse. <button onClick={run} style={{
              background: 'none', border: 'none', color: '#a13a3a', fontWeight: 700,
              textDecoration: 'underline', cursor: 'pointer', padding: 0,
            }}>Try again</button>.
          </div>
        )}

        {state === 'done' && result && (
          <div style={{ marginTop: 24, animation: 'w-fade-in 0.7s ease' }}>
            <div style={{
              fontSize: 12, fontWeight: 700, color: DA.text3, letterSpacing: '0.14em', marginBottom: 10,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              2 · WERKD'S JOB DRAFT
              <span style={{
                padding: '2px 8px', borderRadius: 999,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
                background: result.confidence === 'high' ? '#e6f7ec' : result.confidence === 'medium' ? '#fdf4e0' : '#fce7e7',
                color: result.confidence === 'high' ? '#1b9e4b' : result.confidence === 'medium' ? '#a8650a' : '#a13a3a',
              }}>{result.confidence?.toUpperCase()} CONFIDENCE</span>
            </div>

            <div style={{
              background: '#fff',
              border: `1px solid ${DA.hairline}`,
              borderRadius: 12,
              overflow: 'hidden',
            }}>
              {/* Card header */}
              <div style={{
                padding: '16px 20px',
                background: DA.bg, borderBottom: `1px solid ${DA.hairline}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16,
              }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ fontSize: 17, fontWeight: 800, color: DA.ink, letterSpacing: '-0.01em' }}>{result.customer}</span>
                    {result.isNewCustomer && (
                      <span style={{
                        padding: '2px 6px', borderRadius: 4,
                        background: DA.brand, color: '#fff',
                        fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em',
                      }}>NEW</span>
                    )}
                  </div>
                  <div style={{ fontSize: 13, color: DA.text2 }}>{result.service}</div>
                </div>
                <div style={{
                  padding: '4px 10px', borderRadius: 999,
                  background: result.trade === 'plumbing' ? '#dceafd' : result.trade === 'electrical' ? '#fff2c4' : result.trade === 'hvac' ? '#d8eedb' : '#ebebee',
                  color: result.trade === 'plumbing' ? '#1f5cad' : result.trade === 'electrical' ? '#a8650a' : result.trade === 'hvac' ? '#1b9e4b' : '#5a5a60',
                  fontSize: 10, fontWeight: 800, letterSpacing: '0.14em',
                }}>{result.trade?.toUpperCase()}</div>
              </div>

              {/* Card body */}
              <div style={{ padding: '16px 20px' }}>
                {[
                  { l: 'Preferred window', v: result.preferredWindow, icon: 'clock' },
                  { l: 'Estimated duration', v: `${result.estimatedDurationHours} hrs`, icon: 'briefcase' },
                  result.addressGiven ? { l: 'Address', v: result.addressGiven, icon: 'map-pin' } : null,
                  { l: 'Attention level',
                    v: result.urgency === 'routine' ? 'Routine' :
                       result.urgency === 'prompt' ? 'Recommend prompt review' :
                       result.urgency === 'safety_review_recommended' ? 'In-person safety review recommended' :
                       result.urgency,
                    icon: 'alert-circle' },
                ].filter(Boolean).map((row, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '8px 0',
                    borderBottom: i < 3 ? `1px solid ${DA.hairline}` : 'none',
                  }}>
                    <Icon name={row.icon} size={14} color={DA.text3} strokeWidth={2}/>
                    <span style={{ fontSize: 12.5, color: DA.text3, width: 140 }}>{row.l}</span>
                    <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600, color: DA.ink }}>{row.v}</span>
                  </div>
                ))}
              </div>

              {/* Clarification */}
              {result.needsClarification && (
                <div style={{
                  padding: '12px 20px',
                  background: '#fdf4e0', borderTop: `1px solid #f0d8a8`,
                  fontSize: 13, color: '#a8650a',
                  display: 'flex', gap: 8,
                }}>
                  <Icon name="alert-circle" size={15} color="#a8650a" strokeWidth={2}/>
                  <span><strong>Werkd will ask first:</strong> {result.needsClarification}</span>
                </div>
              )}
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <button style={{
                flex: 1, padding: '12px',
                background: DA.brand, color: '#fff', border: 'none', borderRadius: 6,
                fontSize: 13, fontWeight: 700, cursor: 'pointer',
              }}>Review & confirm →</button>
              <button style={{
                padding: '12px 14px',
                background: 'transparent', color: DA.text,
                border: `1px solid ${DA.hairline}`, borderRadius: 6,
                fontSize: 13, fontWeight: 600, cursor: 'pointer',
              }}>Edit</button>
            </div>

            <div style={{
              marginTop: 14, fontSize: 11, color: DA.text3, lineHeight: 1.5,
              fontStyle: 'italic',
            }}>
              Demo output. Generated live by Claude. In the real app this parses your voice or text into a job draft that you review before it goes on the schedule.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── 4. Ask Werkd demo ────────────────────────────────────────────
// Mirrors src/components/v2/AskPanel.tsx — a real Claude-powered Q&A surface
// with tool-use against the business's actual data (customers, invoices,
// jobs). Same four starter prompts as the real panel. These are VERBATIM real
// output captured from the production app (July 2026), word-for-word, not a
// paraphrase or a live API call — see the ask() handler below, which renders
// this text directly rather than calling window.claude.complete(). A live call
// would almost always succeed and paraphrase the answer, which defeats the
// point of showing exactly what the real app says. Note: this breaks from the
// shared Aria Russell/Mike Chen/Dave Wilson thread used in demos 1-3, since
// accuracy to real output matters more here than cross-demo narrative continuity.
const ASK_FALLBACKS = {
  'Who owes me money right now?': `Outstanding: $7,938 (11 invoices)

OVERDUE (pay these first):

Maria Hernandez: $420 (INV-1005, 22 days late)
Karen Mitchell: $149 (INV-1008, 17 days late)
SENT, NOT YET DUE:

Pinecrest Apartments: $1,340 (due July 15)
Rosa Delgado: $198 (due July 20)
Karen Mitchell: $171 (due July 21)
Sandra Liu: $630 (due Aug 2)
Brenda Carlson: $134 (due Aug 2)
DRAFTS (ready to send):

Frank Mueller: $4,505 (due July 24)
Greg Sanderson: $391 (due July 20)
Sandra Liu: $0 (draft only)

Want me to help you chase down the overdue ones, or send those drafts out?`,
  'How much have I made this month?': `July so far:

Collected: $407.55 (INV-1015, Brenda Carlson)
Outstanding: $764.05 (2 invoices sent, unpaid)
Sandra Liu — $629.99
Brenda Carlson — $134.06
Total billed: $1,171.60

It's only July 5th, but those two outstanding invoices are due Aug 1. Want me to send a reminder to Sandra or Brenda?`,
  'What jobs do I have coming up?': `Coming up this week:

Mon, Jul 6

9:30 AM — Brenda Carlson, smart thermostat install (Roy) — $295
11:00 AM — Pinecrest Apartments, RTU filter service Bldgs A & B (Ogden) — $620
Tue, Jul 7

9:45 AM — Greg Sanderson, whole-house humidifier install (Farmington) — $1,025
Total scheduled: $1,940

Also flagging — Greg Sanderson (Jul 2) and Maria Hernandez (Jul 4) show as scheduled but those dates have passed. Want me to pull those up to mark complete and invoice?`,
  'Any quotes expiring soon?': `One quote expiring soon:

Greg Sanderson — Mini-split (garage workshop)

$3,300 | Expires Jul 11 (6 days)
Status: Sent Jun 20
Want me to follow up with Greg, or push the expiration date?`,
};
const ASK_SUGGESTIONS = Object.keys(ASK_FALLBACKS);

function AskWerkdDemo() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const [asked, setAsked] = React.useState(null);
  const [state, setState] = React.useState('idle'); // idle | thinking | done
  const [answer, setAnswer] = React.useState('');

  const ask = async (q) => {
    setAsked(q);
    setState('thinking');
    setAnswer('');
    // Render the captured real-app output directly — no live API call. These 4
    // answers are verbatim production output (see ASK_FALLBACKS above); a live
    // window.claude.complete() call would almost always succeed and paraphrase
    // them, which defeats the point of showing real, word-for-word output.
    setTimeout(() => {
      setAnswer(ASK_FALLBACKS[q]);
      setState('done');
    }, 650);
  };

  // Tiny **bold** renderer — skips pulling in a markdown lib for one demo.
  const renderBold = (text) => {
    const parts = text.split(/(\*\*[^*]+\*\*)/g);
    return parts.map((p, i) => (p.startsWith('**') && p.endsWith('**'))
      ? <strong key={i} style={{ color: DA.ink, fontWeight: 700 }}>{p.slice(2, -2)}</strong>
      : <React.Fragment key={i}>{p}</React.Fragment>);
  };

  return (
    <div style={{
      background: '#fff', border: `1px solid ${DA.hairline}`, borderRadius: 16,
      padding: m ? 18 : 28,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <div style={{
          width: 34, height: 34, borderRadius: '50%', background: DA.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width={18} height={11} viewBox="0 0 64 40" fill="none">
            <path d="M2 20L10 20L17 36L28 4L36 36L47 4L54 20L62 20" stroke={DA.brandLight} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <span style={{ fontSize: 15, fontWeight: 700, color: DA.ink }}>Ask werkd</span>
      </div>

      {!asked ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ fontSize: 13.5, color: DA.text2, marginBottom: 4 }}>Ask anything about your business. Try one:</div>
          {ASK_SUGGESTIONS.map((q) => (
            <button key={q} onClick={() => ask(q)} style={{
              textAlign: 'left', padding: '13px 16px', borderRadius: 10,
              border: `1px solid ${DA.hairline}`, background: DA.bgAlt,
              color: DA.ink, fontSize: 14, fontWeight: 500, cursor: 'pointer',
            }}>{q}</button>
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ alignSelf: 'flex-end', maxWidth: '85%', background: DA.brand, color: '#fff', borderRadius: '14px 14px 4px 14px', padding: '10px 15px', fontSize: 14, fontWeight: 500 }}>
            {asked}
          </div>
          <div style={{ alignSelf: 'flex-start', maxWidth: '92%', background: DA.bgAlt, border: `1px solid ${DA.hairline}`, borderRadius: '14px 14px 14px 4px', padding: '13px 16px', fontSize: 14.5, lineHeight: 1.55, color: DA.text, whiteSpace: 'pre-wrap' }}>
            {state === 'thinking' ? (
              <span style={{ display: 'inline-flex', gap: 4 }}>
                {[0, 1, 2].map((i) => (
                  <span key={i} className="w-pulse-fast" style={{ width: 6, height: 6, borderRadius: 6, background: DA.text3, animationDelay: (i * 0.15) + 's' }}/>
                ))}
              </span>
            ) : renderBold(answer)}
          </div>
          {state === 'done' && (
            <button onClick={() => { setAsked(null); setAnswer(''); setState('idle'); }} style={{
              alignSelf: 'flex-start', marginTop: 4, background: 'none', border: 'none',
              color: DA.brand, fontSize: 13, fontWeight: 700, cursor: 'pointer', padding: 0,
            }}>← Ask something else</button>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Wrapper section that introduces the demos ─────────────────

function ALiveDemos() {
  const DA = window.DA;
  const m = window.useIsMobile();
  return (
    <section id="assist" style={{ background: DA.bgAlt, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <style>{`
        @keyframes w-spin { to { transform: rotate(360deg); } }
        @keyframes w-pulse-fast {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.7); }
        }
        @keyframes w-fade-in {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .w-photo-fade-in { animation: w-fade-in 0.7s ease; }
        @keyframes w-slide-in-left {
          from { opacity: 0; transform: translateX(-12px); }
          to { opacity: 1; transform: translateX(0); }
        }
      `}</style>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <Reveal>
        <div style={{ textAlign: 'center', marginBottom: m ? 44 : 80 }}>
          <div style={{
            fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 24,
          }}>TRY IT LIVE</div>
          <h2 style={{
            fontSize: m ? 40 : 88, fontWeight: 800, letterSpacing: '-0.045em',
            margin: '0 0 20px', color: DA.ink, lineHeight: 0.96, textWrap: 'balance',
          }}>
            What werkd does.<br/>
            <span style={{ color: DA.brand }}>Try them yourself.</span>
          </h2>
          <p style={{
            fontSize: m ? 16 : 19, lineHeight: 1.5, color: DA.text2,
            margin: '0 auto', maxWidth: 640, fontWeight: 400, textWrap: 'pretty',
          }}>
            These are the same AI flows that run inside werkd — diagnose a photo, book a smart slot, dictate a quick job, or ask a real question about your business.
          </p>
        </div>
        </Reveal>

        {/* FAB callout — every demo below lives behind the same ⊕, which is
            easy to miss as its own idea while you're focused on what it does. */}
        <Reveal delay={40}>
        <div style={{
          margin: m ? '0 0 40px' : '0 0 64px',
          padding: m ? '20px' : '24px 28px',
          background: '#fff', border: `1px solid ${DA.hairline}`, borderRadius: 16,
          display: 'flex', gap: 16, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%', flexShrink: 0,
            background: DA.brand, display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 0 1px ${DA.brand}33`,
          }}>
            <svg width={24} height={15} viewBox="0 0 64 40" fill="none">
              <path d="M2 20L10 20L17 36L28 4L36 36L47 4L54 20L62 20" stroke="#fff" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <div style={{ fontSize: m ? 16 : 18, fontWeight: 700, color: DA.ink, letterSpacing: '-0.01em' }}>
              One button. Every input.
            </div>
            <div style={{ fontSize: m ? 14 : 15, color: DA.text2, marginTop: 6, lineHeight: 1.55, textWrap: 'pretty' }}>
              Voice, photo, or text — every demo below lives behind the same ⊕. It's sized up for gloves, sits where your thumb already rests, and carries werkd's own pulse mark instead of a generic plus. One tap, and it's listening for whatever you throw at it.
            </div>
          </div>
        </div>
        </Reveal>

        <Reveal delay={80}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          flexDirection: m ? 'column' : 'row', gap: m ? 8 : 0,
          marginBottom: 16, paddingBottom: 14, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em' }}>DEMO 01</div>
            <h3 style={{
              fontSize: m ? 28 : 36, fontWeight: 800, letterSpacing: '-0.025em',
              margin: '6px 0 0', color: DA.ink, lineHeight: 1.05,
            }}>Photo → Quote</h3>
          </div>
          <div style={{ fontSize: 13, color: DA.text2, maxWidth: m ? '100%' : 400, textAlign: m ? 'left' : 'right', lineHeight: 1.5 }}>
            Pick a photo. Werkd suggests a diagnosis and drafts a quote. You review before anything goes out.
          </div>
        </div>
        </Reveal>

        <PhotoQuoteDemo/>

        <div style={{ height: 80 }}/>

        <Reveal delay={80}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          flexDirection: m ? 'column' : 'row', gap: m ? 8 : 0,
          marginBottom: 16, paddingBottom: 14, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em' }}>DEMO 02</div>
            <h3 style={{
              fontSize: m ? 28 : 36, fontWeight: 800, letterSpacing: '-0.025em',
              margin: '6px 0 0', color: DA.ink, lineHeight: 1.05,
            }}>Book a smart slot</h3>
          </div>
          <div style={{ fontSize: 13, color: DA.text2, maxWidth: m ? '100%' : 400, textAlign: m ? 'left' : 'right', lineHeight: 1.5 }}>
            You're the customer. Approve the quote, pick a time from werkd's route-aware windows, watch it slot into Eli's day.
          </div>
        </div>
        </Reveal>

        <SmartSlotsDemo/>

        <div style={{ height: 80 }}/>

        <Reveal delay={80}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          flexDirection: m ? 'column' : 'row', gap: m ? 8 : 0,
          marginBottom: 16, paddingBottom: 14, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em' }}>DEMO 03</div>
            <h3 style={{
              fontSize: m ? 26 : 36, fontWeight: 800, letterSpacing: '-0.025em',
              margin: '6px 0 0', color: DA.ink, lineHeight: 1.05,
            }}>Quick job — say it, save it</h3>
          </div>
          <div style={{ fontSize: 13, color: DA.text2, maxWidth: m ? '100%' : 400, textAlign: m ? 'left' : 'right', lineHeight: 1.5 }}>
            Type the job the way you'd say it out loud. Werkd turns it into a structured draft you can confirm in one tap.
          </div>
        </div>
        </Reveal>

        <QuickJobDemo/>

        <div style={{ height: 80 }}/>

        <Reveal delay={80}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          flexDirection: m ? 'column' : 'row', gap: m ? 8 : 0,
          marginBottom: 16, paddingBottom: 14, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em' }}>DEMO 04</div>
            <h3 style={{
              fontSize: m ? 26 : 36, fontWeight: 800, letterSpacing: '-0.025em',
              margin: '6px 0 0', color: DA.ink, lineHeight: 1.05,
            }}>Ask werkd anything</h3>
          </div>
          <div style={{ fontSize: 13, color: DA.text2, maxWidth: m ? '100%' : 400, textAlign: m ? 'left' : 'right', lineHeight: 1.5 }}>
            Not a script — real tool-use against your actual customers, invoices, and jobs. Ask a follow-up and it remembers the thread.
          </div>
        </div>
        </Reveal>

        <AskWerkdDemo/>
      </div>
    </section>
  );
}

Object.assign(window, { ALiveDemos, PhotoQuoteDemo, SmartSlotsDemo, QuickJobDemo, AskWerkdDemo });
