// BuildAI × Studio — 10 feature landing pages
// Harvey-style centered hero + Liquid Brokers pastel mesh.
// Each feature renders as a marketing-surface front-door, not a dashboard.
// Serif headline with two-tone treatment, pastel mesh behind, a feature-specific
// centerpiece (composer, canvas, CO draft, invoice, etc.), and floating frosted
// cards with live stats peeking in from the edges.

const S = {
  stage: '#efeae3',
  canvas: '#ffffff',
  ink:   '#0f0f0f',
  ink2:  '#4a4a46',
  ink3:  '#8a8882',
  ink4:  '#c9c6bf',
  line:  '#ebe7de',
  line2: '#f2efe7',
  sans:  '"Inter Tight", -apple-system, sans-serif',
  serif: '"Instrument Serif", Georgia, serif',
  mono:  '"JetBrains Mono", ui-monospace, monospace',
};

// Per-feature accent + mesh palette
const FEATURES = {
  comms:     { accent: '#E8FF47', ink: '#9aa822', soft: 'rgba(232,255,71,0.5)',   mesh: ['195,210,255', '230,240,180', '215,230,245', '245,220,210', '225,220,245'] },
  co:        { accent: '#FF6B35', ink: '#c85322', soft: 'rgba(255,107,53,0.42)',  mesh: ['255,220,195', '255,200,170', '245,220,210', '230,200,240', '225,220,245'] },
  invoice:   { accent: '#00D4AA', ink: '#1b8e76', soft: 'rgba(0,212,170,0.42)',   mesh: ['200,240,225', '195,230,245', '215,230,245', '230,240,200', '225,220,245'] },
  cost:      { accent: '#7B61FF', ink: '#5a44d6', soft: 'rgba(123,97,255,0.42)',  mesh: ['215,210,250', '230,210,240', '205,220,250', '245,220,210', '225,235,225'] },
  daily:     { accent: '#FFB800', ink: '#b88400', soft: 'rgba(255,184,0,0.42)',   mesh: ['250,225,180', '245,220,210', '215,230,245', '230,240,200', '235,220,245'] },
  crew:      { accent: '#FF4D6D', ink: '#c8334e', soft: 'rgba(255,77,109,0.42)',  mesh: ['255,210,220', '245,220,210', '230,210,240', '205,220,250', '235,235,210'] },
  schedule:  { accent: '#00B4D8', ink: '#1179a0', soft: 'rgba(0,180,216,0.42)',   mesh: ['200,230,245', '215,230,245', '195,210,255', '230,240,200', '245,220,230'] },
  estimate:  { accent: '#9EFF8A', ink: '#5ba04a', soft: 'rgba(158,255,138,0.5)',  mesh: ['220,245,205', '205,240,220', '230,240,200', '215,230,245', '245,230,210'] },
  accounting:{ accent: '#E8D5B0', ink: '#8a7340', soft: 'rgba(232,213,176,0.55)', mesh: ['245,230,205', '235,225,195', '215,230,245', '230,210,240', '245,220,210'] },
  portal:    { accent: '#C084FC', ink: '#8d52d6', soft: 'rgba(192,132,252,0.42)', mesh: ['230,210,245', '215,195,245', '230,210,240', '245,220,230', '215,230,245'] },
};

// ── Generic shell ────────────────────────────────────────────
function StudioShell({ feature, children }) {
  const f = FEATURES[feature];
  return (
    <div style={{
      width: '100%', height: '100%', background: S.stage,
      fontFamily: S.sans, color: S.ink, fontSize: 13,
      padding: 18, position: 'relative', overflow: 'hidden',
      letterSpacing: '-0.005em',
    }}>
      <div style={{
        width: '100%', height: '100%', background: S.canvas,
        borderRadius: 24, position: 'relative', overflow: 'hidden',
        boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04)',
      }}>
        <StudioMesh mesh={f.mesh} />
        <StudioNav feature={feature} />
        {children}
      </div>
    </div>
  );
}

function StudioMesh({ mesh }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(900px 520px at 50% 58%, rgba(${mesh[0]},0.55), rgba(${mesh[0]},0) 62%),
        radial-gradient(720px 460px at 74% 68%, rgba(${mesh[1]},0.45), rgba(${mesh[1]},0) 64%),
        radial-gradient(680px 420px at 28% 46%, rgba(${mesh[2]},0.50), rgba(${mesh[2]},0) 66%),
        radial-gradient(520px 380px at 82% 30%, rgba(${mesh[3]},0.38), rgba(${mesh[3]},0) 66%),
        radial-gradient(620px 440px at 18% 78%, rgba(${mesh[4]},0.40), rgba(${mesh[4]},0) 64%)
      `,
    }} />
  );
}

function StudioNav({ feature }) {
  const nav = [
    'Comms', 'Change Orders', 'Invoicing', 'Costs',
    'Daily Logs', 'Crew', 'Schedule', 'Estimates',
  ];
  const label = {
    comms: 'Comms', co: 'Change Orders', invoice: 'Invoicing', cost: 'Costs',
    daily: 'Daily Logs', crew: 'Crew', schedule: 'Schedule',
    estimate: 'Estimates', accounting: 'Accounting', portal: 'Client Portal',
  }[feature];
  return (
    <div style={{
      position: 'relative', zIndex: 2,
      display: 'flex', alignItems: 'center',
      padding: '22px 36px',
    }}>
      <div style={{ fontFamily: S.serif, fontSize: 22, letterSpacing: '-0.01em' }}>BuildAI</div>

      <div style={{
        marginLeft: 40, display: 'flex', alignItems: 'center', gap: 22,
        fontSize: 12.5, color: S.ink2, fontWeight: 500,
      }}>
        {nav.map(n => (
          <span key={n} style={{
            color: n === label ? S.ink : S.ink2,
            fontWeight: n === label ? 600 : 500,
            borderBottom: n === label ? `1.5px solid ${S.ink}` : '1.5px solid transparent',
            paddingBottom: 2,
          }}>{n}</span>
        ))}
      </div>

      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ fontSize: 12.5, color: S.ink2, fontWeight: 500 }}>Sign in</div>
        <div style={{
          padding: '8px 16px', background: S.ink, color: '#fff',
          borderRadius: 999, fontSize: 12, fontWeight: 500,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          Book a demo
          <span style={{
            width: 16, height: 16, borderRadius: '50%', background: '#fff',
            color: S.ink, display: 'grid', placeItems: 'center', fontSize: 10,
          }}>→</span>
        </div>
      </div>
    </div>
  );
}

// Common hero block — eyebrow pill, serif headline with colored span, sub
function StudioHero({ eyebrow, before, colored, after, sub, accent, accentInk, children, topOffset = 28 }) {
  return (
    <div style={{
      position: 'relative', zIndex: 2, padding: `${topOffset}px 36px 0`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 12px 5px 6px',
        background: 'rgba(255,255,255,0.65)', backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.7)',
        borderRadius: 999, fontSize: 11, color: S.ink2, fontWeight: 500,
        boxShadow: '0 1px 2px rgba(0,0,0,0.03)', marginBottom: 22,
      }}>
        <span style={{
          padding: '2px 8px', background: accent, color: accentInk,
          borderRadius: 999, fontSize: 10, letterSpacing: '0.06em', fontWeight: 600,
        }}>{eyebrow.tag}</span>
        {eyebrow.text} &nbsp;·&nbsp; <span style={{ color: S.ink, textDecoration: 'underline', textUnderlineOffset: 2 }}>{eyebrow.link || 'See it work'}</span>
      </div>

      <div style={{
        fontFamily: S.serif, fontSize: 52, lineHeight: 1.04,
        letterSpacing: '-0.022em', maxWidth: 940, fontWeight: 400,
      }}>
        <span style={{ color: S.ink }}>{before}</span>{' '}
        <span style={{ color: accentInk, fontStyle: 'italic' }}>{colored}</span>{after && <>{' '}<span style={{ color: S.ink3 }}>{after}</span></>}
      </div>

      {sub && (
        <div style={{ marginTop: 18, fontSize: 14, color: S.ink2, maxWidth: 560, lineHeight: 1.55 }}>
          {sub}
        </div>
      )}

      {children}
    </div>
  );
}

// Frosted card primitive
function Frost({ style, children, blur = 14, opacity = 0.7 }) {
  return (
    <div style={{
      background: `rgba(255,255,255,${opacity})`,
      backdropFilter: `blur(${blur}px)`,
      border: '1px solid rgba(255,255,255,0.8)',
      borderRadius: 16,
      boxShadow: '0 12px 38px rgba(40,40,80,0.10), 0 2px 6px rgba(40,40,80,0.05)',
      ...style,
    }}>{children}</div>
  );
}

// ═════════════════════════════════════════════════════════════
// 01 · Unified Comms Hub
// ═════════════════════════════════════════════════════════════
function StudioComms() {
  const f = FEATURES.comms;
  return (
    <StudioShell feature="comms">
      <StudioHero
        accent={f.accent} accentInk="#3a4410"
        eyebrow={{ tag: 'COMMS', text: 'One inbox. SMS · email · voicemail — replied.' }}
        before="Every client text"
        colored="already has a reply."
        after="You just tap send."
        sub="BuildAI reads every message, tags it to the right job, figures out intent, and writes the reply with full context already in it."
      >
        {/* Inbox preview — 3 rows */}
        <Frost style={{
          marginTop: 30, width: 760, padding: '14px 6px', textAlign: 'left', zIndex: 3, position: 'relative',
        }} opacity={0.85} blur={18}>
          {[
            { from: 'Sarah Johnson', job: 'Johnson Kitchen', jobC: '#E8FF47',
              prev: "can we also add the pergola while you're here? willing to pay extra obviously",
              intent: 'CHANGE REQUEST', intentC: '#FF6B35', t: '2m', draft: true },
            { from: 'ABC Supply · Ron', job: 'Harborview Blk B', jobC: '#7B61FF',
              prev: "Rebar #4 order ready for pickup — 40 bundles. Confirm Friday AM delivery window?",
              intent: 'SCHEDULE', intentC: '#00B4D8', t: '14m', draft: true },
            { from: 'Calloway Co · Accounting', job: 'Calloway TI', jobC: '#00D4AA',
              prev: "Wire transfer confirmation — $28,400 · Milestone 2 paid · Ref #CW-2209",
              intent: 'PAYMENT', intentC: '#00D4AA', t: '2h', draft: false },
          ].map((m, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '4px 200px 1fr 130px 50px',
              gap: 14, padding: '12px 16px', alignItems: 'center',
              borderTop: i ? `1px solid ${S.line2}` : 'none',
            }}>
              <span style={{ width: 4, height: 36, background: m.jobC, borderRadius: 2 }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, color: S.ink }}>{m.from}</div>
                <div style={{ fontSize: 10, fontFamily: S.mono, color: S.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 2 }}>
                  {m.job}
                </div>
              </div>
              <div style={{ fontSize: 12.5, color: S.ink2, lineHeight: 1.4,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{m.prev}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start' }}>
                <span style={{
                  fontFamily: S.mono, fontSize: 9, letterSpacing: '0.1em',
                  color: m.intentC, fontWeight: 600,
                }}>● {m.intent}</span>
                {m.draft && <span style={{
                  fontSize: 10, color: f.ink, fontWeight: 600,
                  padding: '2px 8px', background: 'rgba(232,255,71,0.35)', borderRadius: 999,
                }}>AI Draft ready</span>}
              </div>
              <div style={{ textAlign: 'right', fontFamily: S.mono, fontSize: 10.5, color: S.ink3 }}>{m.t}</div>
            </div>
          ))}
        </Frost>
      </StudioHero>

      {/* Floating card — bottom-left: "drafts ready" */}
      <Frost style={{ position: 'absolute', left: 30, bottom: 46, zIndex: 4, width: 248, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: f.ink }} />
          6 drafts waiting on you
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 26, letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 8, color: S.ink }}>
          Clear your inbox in <span style={{ fontStyle: 'italic' }}>under 3 min.</span>
        </div>
        <div style={{ fontSize: 11, color: S.ink2, lineHeight: 1.5 }}>
          Average owner reads 28 messages and sends 19 replies a day. BuildAI drafts all of them.
        </div>
      </Frost>

      {/* Floating card — bottom-right: "scope change" */}
      <Frost style={{ position: 'absolute', right: 30, bottom: 46, zIndex: 4, width: 260, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: '#c85322', letterSpacing: '0.14em', marginBottom: 8 }}>
          ● SCOPE CHANGE DETECTED
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 18, color: S.ink, lineHeight: 1.3, marginBottom: 12 }}>
          "pergola" isn't in the Johnson scope. Start a Change Order?
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ padding: '6px 12px', background: S.ink, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 500 }}>+ Create CO-003</div>
          <div style={{ padding: '6px 12px', border: `1px solid ${S.line}`, color: S.ink2, borderRadius: 999, fontSize: 11, fontWeight: 500 }}>Ignore</div>
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 02 · Change Order Agent
// ═════════════════════════════════════════════════════════════
function StudioCO() {
  const f = FEATURES.co;
  return (
    <StudioShell feature="co">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'CO', text: 'Voice-to-CO in 40 seconds.' }}
        before="Describe the change."
        colored="We price it, draft it, send it."
        sub="Tap the mic, say what you found. BuildAI matches it to past jobs, writes a professional change order, and collects the e-signature."
      >
        {/* Voice capture card */}
        <div style={{
          marginTop: 30, width: 720, zIndex: 3, position: 'relative',
          display: 'grid', gridTemplateColumns: '260px 1fr', gap: 20,
          textAlign: 'left',
        }}>
          {/* Mic + waveform */}
          <Frost style={{ padding: 22, textAlign: 'center' }} opacity={0.85}>
            <div style={{
              width: 110, height: 110, borderRadius: '50%',
              background: f.accent, margin: '0 auto 14px', position: 'relative',
              display: 'grid', placeItems: 'center',
              boxShadow: `0 0 0 10px rgba(255,107,53,0.12), 0 0 0 22px rgba(255,107,53,0.06)`,
            }}>
              <div style={{ fontSize: 34, color: '#fff' }}>◉</div>
            </div>
            <div style={{ fontFamily: S.mono, fontSize: 10, color: f.ink, letterSpacing: '0.12em', marginBottom: 6 }}>
              ● RECORDING · 00:23
            </div>
            <div style={{ display: 'flex', gap: 2, justifyContent: 'center', alignItems: 'center', height: 28 }}>
              {[8,14,20,12,26,18,22,10,16,24,14,20,8,18,12,22,16,10,24,14,18,20,12,8,16,22].map((h, i) => (
                <div key={i} style={{ width: 2, height: h, background: f.accent, borderRadius: 1, opacity: 0.6 + (i%3)*0.15 }} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: S.ink3, marginTop: 10, fontStyle: 'italic' }}>
              "…found rot under the bathroom subfloor, about 40 square feet…"
            </div>
          </Frost>

          {/* AI draft preview */}
          <Frost style={{ padding: 18 }} opacity={0.9}>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 8 }}>
              ● CO-011 · DRAFTED FROM VOICE
            </div>
            <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink, lineHeight: 1.2, marginBottom: 10 }}>
              Subfloor Replacement — Bathroom
            </div>
            <div style={{ fontSize: 12, color: S.ink2, lineHeight: 1.55, marginBottom: 12 }}>
              Remove and replace approx. 40 sqft of water-damaged subfloor beneath the bathroom tile prior to new tile install. Includes haul-away and joist inspection.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 12 }}>
              {[
                ['Qty', '40 sqft'],
                ['Unit', '$18.00'],
                ['Markup', '20%'],
              ].map(([l, v]) => (
                <div key={l}>
                  <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em', marginBottom: 3 }}>{l}</div>
                  <div style={{ fontFamily: S.mono, fontSize: 16, color: S.ink, fontWeight: 500 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{
              padding: '10px 12px', background: `rgba(255,107,53,0.08)`,
              borderRadius: 10, fontSize: 11, color: S.ink2, marginBottom: 12,
            }}>
              <span style={{ color: f.ink, fontWeight: 600 }}>Based on 3 similar past jobs</span> · range $16.50–$19.25/sqft
            </div>
            <div style={{ display: 'flex', alignItems: 'center', paddingTop: 10, borderTop: `1px solid ${S.line2}` }}>
              <div>
                <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em' }}>TOTAL</div>
                <div style={{ fontFamily: S.serif, fontSize: 26, color: S.ink, letterSpacing: '-0.01em' }}>$864.00</div>
              </div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                <div style={{ padding: '8px 12px', border: `1px solid ${S.line}`, color: S.ink2, borderRadius: 999, fontSize: 11, fontWeight: 500 }}>Preview PDF</div>
                <div style={{ padding: '8px 14px', background: f.accent, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>
                  Send for e-sign →
                </div>
              </div>
            </div>
          </Frost>
        </div>
      </StudioHero>

      <Frost style={{ position: 'absolute', left: 30, bottom: 46, zIndex: 4, width: 250, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>This month via COs</div>
        <div style={{ fontFamily: S.serif, fontSize: 34, color: S.ink, lineHeight: 1 }}>
          +$18,240
        </div>
        <div style={{ fontSize: 11, color: S.ink2, marginTop: 8, lineHeight: 1.5 }}>
          <b style={{ color: f.ink }}>14 COs</b> approved · 3 pending · 0 declined
        </div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 46, zIndex: 4, width: 260, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 10 }}>
          ● AUTO-REMINDER SENT · 48H
        </div>
        <div style={{ fontSize: 12, color: S.ink2, lineHeight: 1.5 }}>
          <b style={{ color: S.ink }}>CO-009</b> (Pike Bath · $1,240) unsigned 2 days. I sent a warm nudge to David — logged on the CO card.
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 03 · Invoicing + A/R
// ═════════════════════════════════════════════════════════════
function StudioInvoice() {
  const f = FEATURES.invoice;
  return (
    <StudioShell feature="invoice">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'A/R', text: 'Milestone reached → invoice sent → paid.' }}
        before="You finish the work."
        colored="The invoice sends itself."
        sub="Mark a milestone complete and BuildAI generates a clean invoice, sends it, and collects — following up on a schedule you set once."
      >
        <div style={{
          marginTop: 28, width: 820, zIndex: 3, position: 'relative',
          display: 'grid', gridTemplateColumns: '1fr 280px', gap: 18, textAlign: 'left',
        }}>
          {/* Live invoice preview */}
          <Frost style={{ padding: 0, overflow: 'hidden' }} opacity={0.96}>
            <div style={{ padding: '18px 22px 14px', borderBottom: `1px solid ${S.line2}`, display: 'flex', alignItems: 'baseline' }}>
              <div>
                <div style={{ fontFamily: S.serif, fontSize: 20, color: S.ink }}>Calloway Construction</div>
                <div style={{ fontSize: 11, color: S.ink3, marginTop: 2 }}>INV #1142 · Johnson Kitchen Remodel</div>
              </div>
              <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.12em' }}>ISSUED</div>
                <div style={{ fontFamily: S.mono, fontSize: 13, color: S.ink }}>APR 21, 2026</div>
              </div>
            </div>
            <div style={{ padding: '14px 22px' }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 60px 80px 80px',
                fontFamily: S.mono, fontSize: 9, color: S.ink3,
                letterSpacing: '0.08em', paddingBottom: 8, borderBottom: `1px solid ${S.line2}`,
              }}>
                <span>DESCRIPTION</span>
                <span style={{ textAlign: 'right' }}>QTY</span>
                <span style={{ textAlign: 'right' }}>RATE</span>
                <span style={{ textAlign: 'right' }}>TOTAL</span>
              </div>
              {[
                ['Rough-In milestone · contract',  '1',  '$10,400', '$10,400'],
                ['CO-002 · brushed brass outlets', '14', '$42.00',  '$588'],
                ['CO-003 · pergola add-on deposit','1',  '$1,400',  '$1,400'],
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 60px 80px 80px',
                  fontSize: 12, padding: '10px 0', borderBottom: `1px solid ${S.line2}`,
                }}>
                  <span style={{ color: S.ink }}>{r[0]}</span>
                  <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink2 }}>{r[1]}</span>
                  <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink2 }}>{r[2]}</span>
                  <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink }}>{r[3]}</span>
                </div>
              ))}
              <div style={{ display: 'flex', padding: '12px 0 4px', alignItems: 'baseline' }}>
                <div style={{ fontSize: 11, color: S.ink3 }}>Net 14 · ACH, card or check</div>
                <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                  <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.12em' }}>DUE</div>
                  <div style={{ fontFamily: S.serif, fontSize: 32, color: S.ink }}>$12,388.00</div>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
                <div style={{ padding: '8px 16px', background: f.accent, color: '#fff', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
                  Send to Sarah now →
                </div>
              </div>
            </div>
          </Frost>

          {/* Milestone progress */}
          <Frost style={{ padding: 18 }} opacity={0.88}>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 10 }}>
              ● TRIGGERED BY MILESTONE
            </div>
            <div style={{ fontFamily: S.serif, fontSize: 18, color: S.ink, lineHeight: 1.3, marginBottom: 14 }}>
              Rough-In was marked complete 4 minutes ago.
            </div>
            {['Deposit', 'Rough-In', 'Cabinet Install', 'Final'].map((m, i) => (
              <div key={m} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0',
                borderTop: i ? `1px solid ${S.line2}` : 'none', fontSize: 12,
              }}>
                <span style={{
                  width: 14, height: 14, borderRadius: '50%',
                  background: i < 2 ? f.accent : '#fff',
                  border: i < 2 ? 'none' : `1.5px solid ${S.line}`,
                  display: 'grid', placeItems: 'center',
                  color: '#fff', fontSize: 9, fontWeight: 700,
                }}>{i < 2 ? '✓' : ''}</span>
                <span style={{ flex: 1, color: i < 2 ? S.ink : S.ink3, fontWeight: i === 1 ? 600 : 400 }}>{m}</span>
                <span style={{ fontFamily: S.mono, fontSize: 10, color: S.ink3 }}>
                  {['$4.2k', '$12.4k', '$28.0k', '$39.6k'][i]}
                </span>
              </div>
            ))}
          </Frost>
        </div>
      </StudioHero>

      {/* A/R aging card */}
      <Frost style={{ position: 'absolute', left: 30, bottom: 42, zIndex: 4, width: 300, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>Outstanding receivables</div>
        <div style={{ fontFamily: S.serif, fontSize: 30, color: S.ink, lineHeight: 1 }}>$84,220</div>
        <div style={{ display: 'flex', marginTop: 12, height: 6, borderRadius: 3, overflow: 'hidden', gap: 1 }}>
          <div style={{ flex: 54, background: '#00D4AA' }} />
          <div style={{ flex: 22, background: '#FFB800' }} />
          <div style={{ flex: 14, background: '#FF6B35' }} />
          <div style={{ flex: 10, background: '#FF4D6D' }} />
        </div>
        <div style={{ display: 'flex', marginTop: 8, fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.06em' }}>
          <span style={{ flex: 1 }}>CURRENT</span><span style={{ flex: 1, textAlign: 'center' }}>1–30</span><span style={{ flex: 1, textAlign: 'center' }}>31–60</span><span style={{ flex: 1, textAlign: 'right' }}>60+</span>
        </div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 42, zIndex: 4, width: 260, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● COLLECTION SEQUENCE
        </div>
        {['Day 14 · gentle nudge (auto)', 'Day 30 · firmer reminder (auto)', 'Day 45 · final notice (your approval)'].map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 8, padding: '6px 0', fontSize: 11.5, color: S.ink2 }}>
            <span style={{ fontFamily: S.mono, color: S.ink3 }}>0{i+1}</span>{s}
          </div>
        ))}
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 04 · Job Cost Tracker
// ═════════════════════════════════════════════════════════════
function StudioCost() {
  const f = FEATURES.cost;
  return (
    <StudioShell feature="cost">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'COSTS', text: 'Snap a receipt. It posts itself.' }}
        before="Every receipt,"
        colored="categorized and booked"
        after="to the right job."
        sub="Photo or email forward — BuildAI extracts line items, tags the job, and syncs to QuickBooks in three seconds. No manual entry, ever."
      >
        <div style={{
          marginTop: 28, width: 780, zIndex: 3, position: 'relative',
          display: 'grid', gridTemplateColumns: '300px 1fr', gap: 18, textAlign: 'left',
        }}>
          {/* Receipt photo */}
          <Frost style={{ padding: 14, position: 'relative' }} opacity={0.92}>
            <div style={{
              aspectRatio: '3 / 4',
              background: `linear-gradient(180deg, #f7f3ea 0%, #ede6d5 100%)`,
              borderRadius: 10, position: 'relative', overflow: 'hidden',
              padding: 14, fontFamily: S.mono, fontSize: 9, color: '#6a6050',
              lineHeight: 1.6,
            }}>
              <div style={{ fontFamily: S.mono, fontSize: 13, color: '#3a3228', letterSpacing: '0.2em', marginBottom: 4, fontWeight: 700 }}>
                HOME DEPOT
              </div>
              <div style={{ fontSize: 8 }}>#4412 · PORTLAND ME</div>
              <div style={{ fontSize: 8, marginBottom: 12 }}>04/21/26 · 07:12AM</div>
              {[
                ['2×4×8 SPF #2', '× 24', '$190.80'],
                ['7/16 OSB SHEATH', '× 8', '$198.40'],
                ['GALV 16d COMMON', '× 5', '$62.50'],
                ['LIQUID NAILS', '× 4', '$31.96'],
                ['HEAVY POLY 4MIL', '× 1', '$42.00'],
              ].map(([a, b, c], i) => (
                <div key={i} style={{ display: 'flex', margin: '2px 0', fontSize: 9 }}>
                  <span style={{ flex: 1 }}>{a}</span><span style={{ width: 36 }}>{b}</span><span style={{ width: 54, textAlign: 'right' }}>{c}</span>
                </div>
              ))}
              <div style={{ borderTop: '1px dashed #a8a090', margin: '10px 0 4px' }} />
              <div style={{ display: 'flex', fontSize: 11, fontWeight: 700, color: '#3a3228' }}>
                <span style={{ flex: 1 }}>TOTAL</span><span>$525.66</span>
              </div>
              {/* Scan overlay */}
              <div style={{
                position: 'absolute', left: 0, right: 0, top: '56%', height: 2,
                background: `linear-gradient(90deg, transparent, ${f.accent}, transparent)`,
                boxShadow: `0 0 12px ${f.accent}`,
              }} />
            </div>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', textAlign: 'center', marginTop: 10 }}>
              ● EXTRACTING · 94% CONFIDENCE
            </div>
          </Frost>

          {/* Extracted data */}
          <Frost style={{ padding: 18 }} opacity={0.92}>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 8 }}>
              ● POSTED TO QUICKBOOKS · 3.1s
            </div>
            <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink, letterSpacing: '-0.01em', marginBottom: 4 }}>
              Home Depot — $525.66
            </div>
            <div style={{ fontSize: 12, color: S.ink2, marginBottom: 14 }}>
              5 line items · Materials · <b style={{ color: f.ink }}>Johnson Kitchen</b> (auto-matched)
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 70px', fontSize: 11.5, color: S.ink2 }}>
              {[
                ['2×4×8 SPF #2 lumber', '24', '$190.80'],
                ['7/16 OSB sheathing', '8', '$198.40'],
                ['Galv 16d common nails', '5', '$62.50'],
                ['Liquid Nails adhesive', '4', '$31.96'],
                ['Heavy poly 4mil', '1', '$42.00'],
              ].map((r, i) => (
                <React.Fragment key={i}>
                  <span style={{ padding: '8px 0', borderTop: i ? `1px solid ${S.line2}` : `1px solid ${S.line2}` }}>{r[0]}</span>
                  <span style={{ padding: '8px 0', borderTop: `1px solid ${S.line2}`, fontFamily: S.mono, textAlign: 'right' }}>{r[1]}</span>
                  <span style={{ padding: '8px 0', borderTop: `1px solid ${S.line2}`, fontFamily: S.mono, textAlign: 'right', color: S.ink }}>{r[2]}</span>
                </React.Fragment>
              ))}
            </div>
          </Frost>
        </div>
      </StudioHero>

      {/* Labor over budget */}
      <Frost style={{ position: 'absolute', left: 30, bottom: 42, zIndex: 4, width: 282, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: '#b88400', letterSpacing: '0.14em', marginBottom: 8 }}>
          ● LABOR TRENDING OVER
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink, lineHeight: 1.2, marginBottom: 10 }}>
          Johnson Kitchen — labor <span style={{ fontStyle: 'italic', color: '#b88400' }}>+15%</span>
        </div>
        <div style={{ height: 4, background: S.line2, borderRadius: 2, position: 'relative', marginBottom: 10 }}>
          <div style={{ position: 'absolute', inset: 0, width: '76%', background: '#FFB800', borderRadius: 2 }} />
          <div style={{ position: 'absolute', top: -3, left: '60%', width: 2, height: 10, background: S.ink }} />
        </div>
        <div style={{ fontSize: 11, color: S.ink2, lineHeight: 1.5 }}>
          Projected final: <b>+$900 over estimate.</b> Want to review?
        </div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 42, zIndex: 4, width: 240, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>This week · auto-posted</div>
        <div style={{ fontFamily: S.serif, fontSize: 32, color: S.ink, lineHeight: 1 }}>
          <span style={{ color: f.ink }}>47</span> receipts
        </div>
        <div style={{ fontSize: 11, color: S.ink2, marginTop: 8, lineHeight: 1.5 }}>
          $8,240 across 6 jobs · 0 duplicates, 2 flagged for low-confidence review.
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 05 · Daily Log Agent
// ═════════════════════════════════════════════════════════════
function StudioDaily() {
  const f = FEATURES.daily;
  return (
    <StudioShell feature="daily">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'LOGS', text: '30-second voice memo → formal daily log.' }}
        before="Talk for 30 seconds."
        colored="We write the log."
        sub="Voice memo plus photos, and BuildAI produces a formal site log, a friendly homeowner update, and a flagged issues list — every evening."
      >
        <div style={{
          marginTop: 28, width: 760, zIndex: 3, position: 'relative',
          display: 'grid', gridTemplateColumns: '240px 1fr', gap: 18, textAlign: 'left',
        }}>
          {/* Voice + photos */}
          <Frost style={{ padding: 18, textAlign: 'center' }} opacity={0.9}>
            <div style={{
              width: 92, height: 92, borderRadius: '50%',
              background: f.accent, margin: '8px auto 14px',
              display: 'grid', placeItems: 'center', color: '#fff', fontSize: 28,
              boxShadow: `0 0 0 10px rgba(255,184,0,0.15), 0 0 0 22px rgba(255,184,0,0.07)`,
            }}>◉</div>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.12em', marginBottom: 10 }}>
              ● 00:34 · PROCESSING
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
              {['#8fa68c','#a89888','#7a8a99','#9e8fa8','#b8a88f','#8a9fa0'].map((c, i) => (
                <div key={i} style={{ aspectRatio: '1/1', background: c, borderRadius: 6 }} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: S.ink3, marginTop: 10 }}>6 photos · auto-stamped</div>
          </Frost>

          {/* AI log draft */}
          <Frost style={{ padding: 18 }} opacity={0.92}>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 8 }}>
              ● DAILY LOG · APR 21 · HARBORVIEW BLK B
            </div>
            <div style={{ fontFamily: S.serif, fontSize: 18, color: S.ink, lineHeight: 1.35, marginBottom: 10 }}>
              Framing complete on second floor. Water damage at Window 3 flagged.
            </div>
            <div style={{ fontSize: 12, color: S.ink2, lineHeight: 1.6, marginBottom: 12 }}>
              Mike and Jake on site 7:04–3:48. Weather 62°F, light overcast. Second-floor framing finished 4 days ahead of the rev-D schedule. Inspector K. Oduya confirmed Thursday 09:00 for rough framing.
            </div>
            <div style={{
              padding: '10px 12px', background: `rgba(255,77,109,0.08)`,
              borderLeft: `2.5px solid #FF4D6D`, borderRadius: 4,
              fontSize: 11.5, color: S.ink2, marginBottom: 10,
            }}>
              <b style={{ color: '#c8334e' }}>⚑ Flagged</b> — Water damage at Window 3 (NW corner). Document and address before drywall.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ padding: '7px 12px', border: `1px solid ${S.line}`, color: S.ink2, borderRadius: 999, fontSize: 11, fontWeight: 500 }}>
                Edit formal log
              </div>
              <div style={{ padding: '7px 12px', background: S.ink, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 500 }}>
                Send homeowner update ↑
              </div>
            </div>
          </Frost>
        </div>
      </StudioHero>

      {/* Homeowner message */}
      <Frost style={{ position: 'absolute', left: 30, bottom: 44, zIndex: 4, width: 270, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● HOMEOWNER UPDATE · DRAFTED
        </div>
        <div style={{
          padding: '10px 12px', background: S.ink, color: '#fff',
          borderRadius: 14, fontSize: 12, lineHeight: 1.5, marginBottom: 8,
        }}>
          Great progress today — second floor framing is done! Found a small water issue at one window, addressing before drywall. Pictures attached 📎
        </div>
        <div style={{ fontSize: 10, color: S.ink3, fontStyle: 'italic' }}>Matches your past tone · 2 photos attached</div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 44, zIndex: 4, width: 250, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>Dispute-proof paper trail</div>
        <div style={{ fontFamily: S.serif, fontSize: 26, color: S.ink, lineHeight: 1.15 }}>
          <span style={{ color: f.ink, fontStyle: 'italic' }}>84 days</span> documented,<br />every photo GPS-stamped.
        </div>
        <div style={{ fontSize: 11, color: S.ink2, marginTop: 10 }}>
          Export entire project as PDF · 1 click.
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 06 · Crew & Sub Manager
// ═════════════════════════════════════════════════════════════
function StudioCrew() {
  const f = FEATURES.crew;
  return (
    <StudioShell feature="crew">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'CREW', text: "Crew texts 'IN JOHNSON' — we do the rest." }}
        before="Timesheets,"
        colored="without the timesheets."
        sub="Crew checks in by SMS. BuildAI tags the job, books labor cost, flags conflicts and expired certs, and exports clean payroll on Friday."
      >
        <div style={{
          marginTop: 26, width: 780, zIndex: 3, position: 'relative',
          textAlign: 'left',
        }}>
          <Frost style={{ padding: 16 }} opacity={0.88}>
            <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 14 }}>
              <div style={{ fontFamily: S.mono, fontSize: 10, color: f.ink, letterSpacing: '0.12em' }}>
                ● ON SITE NOW · 11 / 14
              </div>
              <div style={{ marginLeft: 'auto', fontSize: 11, color: S.ink3 }}>
                7:04 AM · Apr 21
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { n: 'Mike Torres',   r: 'Tile Setter',    st: 'IN · Johnson',    c: '#1b8e76', tag: '✓' },
                { n: 'Jake Ruiz',     r: 'Framer',         st: 'IN · Johnson',    c: '#1b8e76', tag: '✓' },
                { n: 'Dan Okafor',    r: 'Electrician',    st: 'Available',       c: '#8a8882', tag: '○' },
                { n: 'Lea Chen',      r: 'Painter',        st: 'IN · Smith Bath', c: '#1b8e76', tag: '✓' },
                { n: 'Ron Bauer',     r: 'Plumber',        st: 'EXP · Insurance', c: '#b88400', tag: '⚠' },
                { n: 'Tim Voss',      r: 'Concrete',       st: 'IN · Harborview', c: '#1b8e76', tag: '✓' },
                { n: 'Marco Silva',   r: 'Tile',           st: 'CONFLICT · Tue',  c: '#c8334e', tag: '⚑' },
                { n: 'Ana Park',      r: 'Laborer',        st: 'OUT · called out',c: '#8a8882', tag: '○' },
              ].map((c, i) => (
                <div key={i} style={{
                  background: '#fff', border: `1px solid ${S.line}`, borderRadius: 12,
                  padding: 12, fontSize: 11,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <div style={{
                      width: 26, height: 26, borderRadius: '50%',
                      background: ['#c7a98e','#8da8c4','#b89dbf','#a4b99a','#d6b0a6','#8fa8a8','#b5a8d1','#c8b8a0'][i],
                      color: '#fff', fontFamily: S.mono, fontSize: 10, fontWeight: 600,
                      display: 'grid', placeItems: 'center',
                    }}>{c.n.split(' ').map(x=>x[0]).join('')}</div>
                    <div style={{ flex: 1, overflow: 'hidden' }}>
                      <div style={{ fontSize: 12, color: S.ink, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.n}</div>
                      <div style={{ fontSize: 10, color: S.ink3, fontFamily: S.mono, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{c.r}</div>
                    </div>
                    <span style={{ color: c.c, fontSize: 12 }}>{c.tag}</span>
                  </div>
                  <div style={{
                    fontSize: 10, color: c.c, fontFamily: S.mono, letterSpacing: '0.05em',
                  }}>{c.st}</div>
                </div>
              ))}
            </div>
          </Frost>
        </div>
      </StudioHero>

      {/* SMS demo */}
      <Frost style={{ position: 'absolute', left: 30, bottom: 42, zIndex: 4, width: 268, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 10 }}>
          ● SMS CHECK-IN · 7:04 AM
        </div>
        <div style={{ padding: '8px 12px', background: '#e8e4dc', color: S.ink, borderRadius: '14px 14px 14px 2px', fontSize: 12, marginBottom: 6, maxWidth: '80%' }}>
          IN JOHNSON
        </div>
        <div style={{ padding: '8px 12px', background: S.ink, color: '#fff', borderRadius: '14px 14px 2px 14px', fontSize: 12, marginLeft: 'auto', maxWidth: '82%' }}>
          Got you, Mike. Clocked in to Johnson Kitchen. Have a good one.
        </div>
        <div style={{ fontSize: 10, color: S.ink3, marginTop: 10, fontStyle: 'italic', fontFamily: S.mono, letterSpacing: '0.04em' }}>
          GPS tag: 43.65°N 70.26°W · matches site
        </div>
      </Frost>

      {/* Conflict card */}
      <Frost style={{ position: 'absolute', right: 30, bottom: 42, zIndex: 4, width: 258, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● SCHEDULING CONFLICT
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 16, color: S.ink, lineHeight: 1.3, marginBottom: 10 }}>
          Marco is booked on two jobs <span style={{ fontStyle: 'italic', color: f.ink }}>Tue Apr 29.</span>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ padding: '6px 10px', border: `1px solid ${S.line}`, color: S.ink2, borderRadius: 999, fontSize: 11 }}>Split crew</div>
          <div style={{ padding: '6px 10px', background: S.ink, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 500 }}>Resolve</div>
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 07 · Schedule & Planning
// ═════════════════════════════════════════════════════════════
function StudioSchedule() {
  const f = FEATURES.schedule;
  return (
    <StudioShell feature="schedule">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'SCHEDULE', text: 'Conflicts caught before they cost you.' }}
        before="One schedule,"
        colored="every job, every crew."
        sub="Drag a bar and BuildAI checks crew, materials, weather and permits in real time — then proposes the fix before you hit save."
      >
        <div style={{ marginTop: 26, width: 830, zIndex: 3, position: 'relative', textAlign: 'left' }}>
          <Frost style={{ padding: 18 }} opacity={0.9}>
            <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 14 }}>
              <div style={{ fontFamily: S.mono, fontSize: 10, color: f.ink, letterSpacing: '0.12em' }}>
                ● WEEK OF APR 27 – MAY 03
              </div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, fontSize: 11, color: S.ink3 }}>
                {['Gantt','Day','Map'].map((t, i) => (
                  <span key={t} style={{
                    padding: '3px 10px', borderRadius: 999,
                    background: i === 0 ? S.ink : 'transparent',
                    color: i === 0 ? '#fff' : S.ink3,
                    border: i === 0 ? 'none' : `1px solid ${S.line}`,
                  }}>{t}</span>
                ))}
              </div>
            </div>

            {/* Day header */}
            <div style={{
              display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)',
              fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em',
              paddingBottom: 8, borderBottom: `1px solid ${S.line2}`,
            }}>
              <span>PROJECT</span>
              {['M 27','T 28','W 29','T 30','F 01','S 02','S 03'].map(d => (
                <span key={d} style={{ textAlign: 'center' }}>{d}</span>
              ))}
            </div>

            {[
              { n: 'Johnson Kitchen', c: '#E8FF47', bars: [[0,3,'Tile set'], [3,2,'Backsplash']] },
              { n: 'Pike Bath',       c: '#7B61FF', bars: [[1,2,'Plumbing rough'], [4,2,'Inspect']] },
              { n: 'Harborview Blk B',c: '#00B4D8', bars: [[0,5,'Framing L2'], [5,2,'MEP coord']] },
              { n: 'Smith Bath',      c: '#FF6B35', bars: [[2,3,'Demo + prep'], [5,2,'Rough in']] },
              { n: 'Calloway Office', c: '#00D4AA', bars: [[0,2,'Final walk'],[3,1,'Punch']] },
            ].map((row, ri) => (
              <div key={row.n} style={{
                display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)',
                padding: '10px 0', borderBottom: ri < 4 ? `1px solid ${S.line2}` : 'none',
                fontSize: 12, alignItems: 'center', position: 'relative',
              }}>
                <span style={{ color: S.ink, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: row.c }} />
                  {row.n}
                </span>
                <div style={{ gridColumn: '2 / -1', position: 'relative', height: 22 }}>
                  {row.bars.map((b, i) => (
                    <div key={i} style={{
                      position: 'absolute',
                      left: `${(b[0]/7)*100}%`, width: `calc(${(b[1]/7)*100}% - 2px)`,
                      top: 0, bottom: 0, background: row.c, opacity: 0.85,
                      borderRadius: 4, fontSize: 10, color: '#1a1a1a', fontWeight: 600,
                      display: 'flex', alignItems: 'center', paddingLeft: 8,
                      overflow: 'hidden', whiteSpace: 'nowrap',
                    }}>{b[2]}</div>
                  ))}
                  {/* conflict overlay on row 1 day 2 */}
                  {ri === 1 && (
                    <div style={{
                      position: 'absolute', left: `${(2/7)*100}%`, width: `${(1/7)*100}%`,
                      top: -5, bottom: -5,
                      background: `repeating-linear-gradient(45deg, rgba(255,77,109,0.35), rgba(255,77,109,0.35) 4px, transparent 4px, transparent 8px)`,
                      border: `1px dashed #FF4D6D`, borderRadius: 4,
                    }} />
                  )}
                </div>
              </div>
            ))}
          </Frost>
        </div>
      </StudioHero>

      <Frost style={{ position: 'absolute', left: 30, bottom: 38, zIndex: 4, width: 280, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: '#c8334e', letterSpacing: '0.14em', marginBottom: 8 }}>
          ● CREW CONFLICT · TUE APR 29
        </div>
        <div style={{ fontSize: 12.5, color: S.ink2, lineHeight: 1.55, marginBottom: 10 }}>
          <b style={{ color: S.ink }}>Mike and Jake</b> are needed at both Johnson and Smith that morning.
        </div>
        <div style={{ fontSize: 11.5, color: S.ink, fontStyle: 'italic', borderTop: `1px solid ${S.line2}`, paddingTop: 10 }}>
          Suggest: split crew, slip Smith by 1 day, no schedule impact downstream.
        </div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 38, zIndex: 4, width: 240, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● 6:30 AM TOMORROW
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink, lineHeight: 1.2, marginBottom: 8 }}>
          Dispatch to 4 crew members?
        </div>
        <div style={{ fontSize: 11, color: S.ink2, lineHeight: 1.55, fontStyle: 'italic' }}>
          "Mike — Johnson, 7AM, 123 Oak St. Tile backsplash + grout. Materials on site."
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 08 · Estimate & Bid Builder
// ═════════════════════════════════════════════════════════════
function StudioEstimate() {
  const f = FEATURES.estimate;
  return (
    <StudioShell feature="estimate">
      <StudioHero
        accent={f.accent} accentInk="#3f6031"
        eyebrow={{ tag: 'BIDS', text: 'Win more bids in a fraction of the time.' }}
        before="Three sentences in."
        colored="A priced, polished proposal out."
        sub="BuildAI drafts line items from your cost history, flags low-confidence numbers, and formats everything as a proposal your client can e-sign."
      >
        <div style={{ marginTop: 26, width: 820, zIndex: 3, position: 'relative', textAlign: 'left' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 14 }}>
            {/* scope prompt */}
            <Frost style={{ padding: 16 }} opacity={0.9}>
              <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 8 }}>
                ● YOUR SCOPE · 3 SENTENCES
              </div>
              <div style={{ fontSize: 12.5, color: S.ink2, lineHeight: 1.55, fontStyle: 'italic' }}>
                "Full kitchen remodel, 140 sqft. Keep existing footprint, new cabinets and quartz counters, tile floor, backsplash, can lights. Budget range she mentioned was $28–34K."
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {['kitchen','remodel','demolition','cabinets','quartz','tile','paint'].map(t => (
                  <span key={t} style={{
                    padding: '3px 9px', background: `rgba(158,255,138,0.3)`, color: f.ink,
                    fontFamily: S.mono, fontSize: 9, letterSpacing: '0.08em', borderRadius: 999,
                  }}>{t}</span>
                ))}
              </div>
            </Frost>

            {/* Line item grid */}
            <Frost style={{ padding: 0, overflow: 'hidden' }} opacity={0.94}>
              <div style={{ padding: '10px 16px', borderBottom: `1px solid ${S.line2}`, display: 'flex', alignItems: 'baseline' }}>
                <div style={{ fontFamily: S.serif, fontSize: 17, color: S.ink }}>Johnson Kitchen — Proposal</div>
                <div style={{ marginLeft: 'auto', fontFamily: S.mono, fontSize: 10, color: S.ink3 }}>14 line items · drafted 0:41</div>
              </div>
              <div style={{ padding: '10px 16px' }}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '1fr 50px 60px 70px',
                  fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.08em',
                  paddingBottom: 6, borderBottom: `1px solid ${S.line2}`,
                }}>
                  <span>LINE ITEM</span>
                  <span style={{ textAlign: 'right' }}>QTY</span>
                  <span style={{ textAlign: 'right' }}>UNIT</span>
                  <span style={{ textAlign: 'right' }}>TOTAL</span>
                </div>
                {[
                  ['Demo · existing cabinets + flooring', '1', '$1,200', '$1,200', false],
                  ['Cabinets · shaker maple (delivered)', '22', '$380', '$8,360', false],
                  ['Quartz counters · 3cm (install)', '48 sqft', '$88', '$4,224', false],
                  ['Tile · floor (incl. backer + mortar)', '140 sqft', '$14', '$1,960', true],
                  ['Backsplash · ceramic subway', '28 sqft', '$22', '$616', false],
                  ['Can lights · 6× LED 4" w/ dimmer', '6', '$190', '$1,140', false],
                  ['Paint · walls, trim, ceiling', '1 lot', '$820', '$820', false],
                  ['Labor · 18 working days', '18', '$1,050', '$18,900', false],
                ].map((r, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '1fr 50px 60px 70px',
                    fontSize: 11.5, padding: '7px 0',
                    borderBottom: `1px solid ${S.line2}`, alignItems: 'center',
                  }}>
                    <span style={{ color: S.ink, display: 'flex', alignItems: 'center', gap: 8 }}>
                      {r[0]}
                      {r[4] && <span style={{
                        padding: '1px 6px', background: 'rgba(255,107,53,0.15)', color: '#c85322',
                        borderRadius: 999, fontFamily: S.mono, fontSize: 8, letterSpacing: '0.08em',
                      }}>VERIFY</span>}
                    </span>
                    <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink2 }}>{r[1]}</span>
                    <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink2 }}>{r[2]}</span>
                    <span style={{ textAlign: 'right', fontFamily: S.mono, color: S.ink }}>{r[3]}</span>
                  </div>
                ))}
                <div style={{ display: 'flex', alignItems: 'baseline', padding: '10px 0 0' }}>
                  <div style={{ fontSize: 11, color: S.ink3 }}>+22% markup · final clean · exclusions attached</div>
                  <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                    <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em' }}>PROPOSAL TOTAL</div>
                    <div style={{ fontFamily: S.serif, fontSize: 28, color: S.ink }}>$31,240</div>
                  </div>
                </div>
              </div>
            </Frost>
          </div>
        </div>
      </StudioHero>

      <Frost style={{ position: 'absolute', left: 30, bottom: 42, zIndex: 4, width: 270, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>Pipeline · active</div>
        <div style={{ fontFamily: S.serif, fontSize: 30, color: S.ink, lineHeight: 1 }}>$184,000</div>
        <div style={{ display: 'flex', marginTop: 12, gap: 6, fontSize: 10, color: S.ink3, fontFamily: S.mono, letterSpacing: '0.04em' }}>
          {[['Draft', 2],['Sent', 5],['Viewed', 3],['Signed', 2]].map(([l, n], i) => (
            <div key={l} style={{ flex: 1 }}>
              <div style={{ height: 3, background: i < 3 ? `${f.accent}` : f.ink, opacity: 0.35 + (i*0.2), borderRadius: 2 }} />
              <div style={{ marginTop: 6 }}>{l}</div>
              <div style={{ fontFamily: S.mono, color: S.ink, fontSize: 13 }}>{n}</div>
            </div>
          ))}
        </div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 42, zIndex: 4, width: 260, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● VIEWED 4× · UNSIGNED 5D
        </div>
        <div style={{ fontSize: 12.5, color: S.ink2, lineHeight: 1.55, marginBottom: 8 }}>
          Sarah opened the $28K proposal four times. Want a warm check-in drafted?
        </div>
        <div style={{ padding: '6px 10px', background: S.ink, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 500, display: 'inline-block' }}>
          Draft nudge →
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 09 · Accounting & Reporting
// ═════════════════════════════════════════════════════════════
function StudioAccounting() {
  const f = FEATURES.accounting;
  return (
    <StudioShell feature="accounting">
      <StudioHero
        accent={f.accent} accentInk="#6a5632"
        eyebrow={{ tag: 'MONDAY BRIEF', text: "Your week, in plain English." }}
        before="No more spreadsheets."
        colored="Just Monday mornings."
        sub="QuickBooks-synced, job-level profitability. Every Monday at 7 AM, BuildAI writes you a paragraph about where the money actually went."
      >
        <div style={{ marginTop: 26, width: 780, zIndex: 3, position: 'relative', textAlign: 'left' }}>
          <Frost style={{ padding: 20 }} opacity={0.9}>
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 10 }}>
              ● MONDAY · APR 21 · 07:00
            </div>
            <div style={{ fontFamily: S.serif, fontSize: 24, color: S.ink, lineHeight: 1.3, letterSpacing: '-0.01em', marginBottom: 14 }}>
              Last week you invoiced <span style={{ fontStyle: 'italic', color: f.ink }}>$22,400</span>, collected <span style={{ fontStyle: 'italic', color: f.ink }}>$18,000</span>, and spent $9,200 — a decent week, but Johnson Kitchen is trending to a <span style={{ fontStyle: 'italic', color: '#c85322' }}>18% margin against a 25% target.</span>
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
              paddingTop: 14, borderTop: `1px solid ${S.line2}`,
            }}>
              {[
                ['Revenue · MTD', '$82,120', '+14% MoM'],
                ['Cash in bank', '$146,880', 'after Apr payroll'],
                ['Outstanding A/R', '$84,220', '$12.4k > 30d'],
              ].map(([l, v, sub]) => (
                <div key={l}>
                  <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em', marginBottom: 4 }}>{l}</div>
                  <div style={{ fontFamily: S.serif, fontSize: 24, color: S.ink, letterSpacing: '-0.01em' }}>{v}</div>
                  <div style={{ fontSize: 11, color: S.ink3, marginTop: 2 }}>{sub}</div>
                </div>
              ))}
            </div>

            {/* 6-mo bars */}
            <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${S.line2}` }}>
              <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.1em', marginBottom: 10 }}>
                REVENUE · LAST 6 MONTHS
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', height: 70 }}>
                {[42,52,38,61,74,82].map((v, i) => (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: '100%', height: v, background: i === 5 ? S.ink : f.accent, borderRadius: 2 }} />
                    <span style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3 }}>
                      {['Nov','Dec','Jan','Feb','Mar','Apr'][i]}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </Frost>
        </div>
      </StudioHero>

      <Frost style={{ position: 'absolute', left: 30, bottom: 42, zIndex: 4, width: 260, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● JOB PROFITABILITY · ACTIVE
        </div>
        {[
          { n: 'Calloway Office TI', m: '28.4%', c: '#1b8e76' },
          { n: 'Harborview Blk B',   m: '24.1%', c: '#1b8e76' },
          { n: 'Smith Bath',         m: '21.0%', c: '#b88400' },
          { n: 'Johnson Kitchen',    m: '18.2%', c: '#c85322' },
        ].map((j, i) => (
          <div key={j.n} style={{
            display: 'flex', padding: '7px 0', fontSize: 12,
            borderTop: i ? `1px solid ${S.line2}` : 'none', alignItems: 'center',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: j.c, marginRight: 10 }} />
            <span style={{ flex: 1, color: S.ink2 }}>{j.n}</span>
            <span style={{ fontFamily: S.mono, fontSize: 12, color: j.c, fontWeight: 500 }}>{j.m}</span>
          </div>
        ))}
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 42, zIndex: 4, width: 240, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● TAX RESERVE SUGGESTION
        </div>
        <div style={{ fontFamily: S.serif, fontSize: 28, color: S.ink, lineHeight: 1 }}>
          Set aside $4,200
        </div>
        <div style={{ fontSize: 11, color: S.ink2, marginTop: 8, lineHeight: 1.5 }}>
          this week toward your Q2 estimate. Transfer now?
        </div>
      </Frost>
    </StudioShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 10 · Client Portal
// ═════════════════════════════════════════════════════════════
function StudioPortal() {
  const f = FEATURES.portal;
  return (
    <StudioShell feature="portal">
      <StudioHero
        accent={f.accent} accentInk="#fff"
        eyebrow={{ tag: 'HOMEOWNER VIEW', text: 'A link. Not a login.' }}
        before="Your client checks in"
        colored="instead of calling you."
        sub="One private link — daily photos, pending approvals, invoices to pay, selections to make. Every tap updates the job on your side automatically."
      >
        <div style={{ marginTop: 26, width: 840, zIndex: 3, position: 'relative', textAlign: 'left' }}>
          <Frost style={{ padding: 20 }} opacity={0.94}>
            <div style={{ display: 'flex', alignItems: 'baseline', borderBottom: `1px solid ${S.line2}`, paddingBottom: 14, marginBottom: 14 }}>
              <div>
                <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink }}>Johnson Kitchen Remodel</div>
                <div style={{ fontSize: 11, color: S.ink3 }}>Shared with Sarah · 142 Oak St · Portland</div>
              </div>
              <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.12em' }}>EST. COMPLETE</div>
                <div style={{ fontFamily: S.mono, fontSize: 14, color: S.ink }}>MAY 22</div>
              </div>
            </div>

            {/* progress bar */}
            <div style={{ fontSize: 11, color: S.ink3, marginBottom: 6, display: 'flex' }}>
              <span>67% complete</span><span style={{ marginLeft: 'auto', fontFamily: S.mono }}>3 of 4 milestones</span>
            </div>
            <div style={{ height: 6, borderRadius: 3, background: S.line2, overflow: 'hidden', marginBottom: 18 }}>
              <div style={{ height: '100%', width: '67%', background: f.accent }} />
            </div>

            {/* Photos */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 18 }}>
              {[0,1,2,3,4,5].map(i => (
                <div key={i}>
                  <div style={{ aspectRatio: '1/1', background: ['#8fa68c','#a89888','#7a8a99','#9e8fa8','#b8a88f','#8a9fa0'][i], borderRadius: 8 }} />
                  <div style={{ fontFamily: S.mono, fontSize: 8, color: S.ink3, marginTop: 4, letterSpacing: '0.08em' }}>
                    APR {21 - i}
                  </div>
                </div>
              ))}
            </div>

            {/* Action items */}
            <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.14em', marginBottom: 10 }}>
              ● NEEDS YOUR APPROVAL · 2 ITEMS
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div style={{ padding: 14, border: `1.5px solid ${f.accent}`, borderRadius: 12, background: `rgba(192,132,252,0.07)` }}>
                <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.1em', marginBottom: 4 }}>CHANGE ORDER · CO-003</div>
                <div style={{ fontSize: 13, color: S.ink, lineHeight: 1.3, marginBottom: 6 }}>Subfloor replacement — 40 sqft</div>
                <div style={{ display: 'flex', alignItems: 'baseline' }}>
                  <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink }}>$864</div>
                  <div style={{ marginLeft: 'auto', padding: '5px 12px', background: f.accent, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>
                    Approve & e-sign
                  </div>
                </div>
              </div>
              <div style={{ padding: 14, border: `1.5px solid ${f.accent}`, borderRadius: 12, background: `rgba(192,132,252,0.07)` }}>
                <div style={{ fontFamily: S.mono, fontSize: 9, color: f.ink, letterSpacing: '0.1em', marginBottom: 4 }}>INVOICE · MILESTONE 2</div>
                <div style={{ fontSize: 13, color: S.ink, lineHeight: 1.3, marginBottom: 6 }}>Rough-In complete</div>
                <div style={{ display: 'flex', alignItems: 'baseline' }}>
                  <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink }}>$12,400</div>
                  <div style={{ marginLeft: 'auto', padding: '5px 12px', background: f.accent, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>
                    Pay by ACH
                  </div>
                </div>
              </div>
            </div>
          </Frost>
        </div>
      </StudioHero>

      <Frost style={{ position: 'absolute', left: 30, bottom: 40, zIndex: 4, width: 250, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: S.ink2, marginBottom: 6 }}>Last night · 9:02 PM</div>
        <div style={{ fontFamily: S.serif, fontSize: 22, color: S.ink, lineHeight: 1.2 }}>
          Sarah approved <span style={{ fontStyle: 'italic', color: f.ink }}>CO-003</span> and paid <span style={{ fontStyle: 'italic', color: f.ink }}>$12,400</span> in 4 minutes.
        </div>
        <div style={{ fontSize: 11, color: S.ink3, marginTop: 8 }}>You got three push notifications and woke up to a cleared AR.</div>
      </Frost>

      <Frost style={{ position: 'absolute', right: 30, bottom: 40, zIndex: 4, width: 238, padding: '14px 16px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 9, color: S.ink3, letterSpacing: '0.14em', marginBottom: 8 }}>
          ● DOCUMENT LIBRARY
        </div>
        {['Contract (signed)', '2 approved Change Orders', 'Building permit · HB-4412', 'Cabinet warranty'].map((d, i) => (
          <div key={d} style={{ display: 'flex', padding: '6px 0', fontSize: 12, color: S.ink2, borderTop: i ? `1px solid ${S.line2}` : 'none' }}>
            <span>{d}</span>
            <span style={{ marginLeft: 'auto', color: S.ink3, fontFamily: S.mono, fontSize: 11 }}>PDF</span>
          </div>
        ))}
      </Frost>
    </StudioShell>
  );
}

Object.assign(window, {
  StudioComms, StudioCO, StudioInvoice, StudioCost, StudioDaily,
  StudioCrew, StudioSchedule, StudioEstimate, StudioAccounting, StudioPortal,
});