// V3 — Field Notebook
// Warmer off-white, rounded containers, soft shadows.
// Arc-ish sidebar with colored workspace pills.
// AI embedded inline — small "Ask about this" in each card, plus a
// floating daily brief pill.

const v3 = {
  bg: '#f3efe7',        // warm cream
  panel: '#fbf9f4',
  panelSoft: '#f7f3ea',
  ink: '#1a1713',
  ink2: '#5a5248',
  ink3: '#928979',
  ink4: '#c5bcaa',
  line: '#e8e0cf',
  line2: '#efe8d7',
  clay: '#b85c3a',      // warm brick
  claySoft: '#f5e4da',
  moss: '#5a7a3e',
  mossSoft: '#e8efdc',
  sky: '#3f6b8f',       // muted blueprint
  skySoft: '#e0ebf2',
  amber: '#b87c27',
  amberSoft: '#f5ead0',
  sans: '"Inter Tight", -apple-system, sans-serif',
  serif: '"Instrument Serif", Georgia, serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function V3Arc() {
  return (
    <div style={{
      width: '100%', height: '100%', background: v3.bg,
      fontFamily: v3.sans, color: v3.ink, fontSize: 13,
      display: 'grid', gridTemplateColumns: '240px 1fr',
      padding: 10, gap: 10,
      letterSpacing: '-0.005em', position: 'relative',
    }}>
      <V3Sidebar />
      <V3Main />
      <V3FloatingBrief />
    </div>
  );
}

function V3Sidebar() {
  return (
    <div style={{
      background: 'transparent', display: 'flex', flexDirection: 'column',
      padding: '8px 6px', gap: 16,
    }}>
      {/* workspace */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '6px 8px',
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: v3.clay, color: v3.panel,
          display: 'grid', placeItems: 'center',
          fontFamily: v3.serif, fontSize: 18, fontStyle: 'italic',
        }}>C</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Ridgeline</div>
          <div style={{ fontSize: 11, color: v3.ink3 }}>Your workspace</div>
        </div>
        <div style={{ color: v3.ink3, fontSize: 13 }}>⌄</div>
      </div>

      {/* search / ask */}
      <div style={{
        background: v3.panel, borderRadius: 10,
        padding: '10px 12px', border: `1px solid ${v3.line}`,
        boxShadow: '0 1px 0 rgba(160,140,100,0.04)',
      }}>
        <div style={{ fontSize: 11, color: v3.ink3, marginBottom: 6 }}>
          Ask about anything
        </div>
        <div style={{ fontSize: 13, color: v3.ink2, fontStyle: 'italic', fontFamily: v3.serif, fontSize: 15 }}>
          "what changed this week?"
        </div>
      </div>

      {/* pinned */}
      <V3NavSection label="Pinned">
        <V3NavItem dot={v3.clay} label="Harborview Blk B" sub="Framing · Day 84" active />
        <V3NavItem dot={v3.sky}  label="Willow Heights"   sub="Finishes · 92%" />
        <V3NavItem dot={v3.moss} label="Cedar Creek"      sub="Foundations" />
      </V3NavSection>

      {/* spaces */}
      <V3NavSection label="Spaces">
        <V3NavRow icon="◈" label="Home" />
        <V3NavRow icon="▤" label="Projects" badge="12" />
        <V3NavRow icon="◷" label="Schedule" />
        <V3NavRow icon="$" label="Accounting" badge="3" />
        <V3NavRow icon="▭" label="Documents" />
        <V3NavRow icon="⚇" label="Crew" />
        <V3NavRow icon="▢" label="Materials" />
        <V3NavRow icon="☗" label="Client portal" />
      </V3NavSection>

      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10, padding: '8px 8px' }}>
        <div style={{
          width: 26, height: 26, borderRadius: '50%',
          background: '#cbb79a', color: v3.ink, fontSize: 11,
          display: 'grid', placeItems: 'center', fontWeight: 600,
        }}>MR</div>
        <div style={{ flex: 1, fontSize: 12 }}>Marcus Reyes</div>
        <div style={{ color: v3.ink3, fontSize: 14 }}>⚙</div>
      </div>
    </div>
  );
}

function V3NavSection({ label, children }) {
  return (
    <div>
      <div style={{
        fontSize: 10, letterSpacing: '0.08em', color: v3.ink3,
        textTransform: 'uppercase', padding: '0 8px 6px', fontWeight: 500,
      }}>{label}</div>
      {children}
    </div>
  );
}

function V3NavItem({ dot, label, sub, active }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 10px', margin: '1px 0',
      background: active ? v3.panel : 'transparent',
      borderRadius: 8,
      boxShadow: active ? '0 1px 2px rgba(160,140,100,0.08), 0 0 0 1px rgba(160,140,100,0.10)' : 'none',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: dot, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: active ? 500 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
        <div style={{ fontSize: 10, color: v3.ink3 }}>{sub}</div>
      </div>
    </div>
  );
}

function V3NavRow({ icon, label, badge }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '6px 10px', margin: '1px 0', borderRadius: 6,
      color: v3.ink2, fontSize: 13,
    }}>
      <span style={{ width: 16, textAlign: 'center', color: v3.ink3 }}>{icon}</span>
      <span style={{ flex: 1 }}>{label}</span>
      {badge && (
        <span style={{
          fontSize: 10, color: v3.ink3, background: v3.panel,
          padding: '1px 6px', borderRadius: 8, border: `1px solid ${v3.line}`,
        }}>{badge}</span>
      )}
    </div>
  );
}

// ── Main ──────────────────────────────────────────────────────
function V3Main() {
  return (
    <div style={{
      background: v3.panel, borderRadius: 16,
      boxShadow: '0 1px 2px rgba(160,140,100,0.04), 0 0 0 1px rgba(160,140,100,0.10)',
      padding: '22px 26px 24px', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', gap: 18,
    }}>
      {/* hero greeting */}
      <div>
        <div style={{ fontSize: 11, color: v3.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 500 }}>
          Tuesday, April 21 &nbsp;·&nbsp; 54°F, clearing
        </div>
        <div style={{
          fontFamily: v3.serif, fontSize: 32, letterSpacing: '-0.015em',
          lineHeight: 1.1,
        }}>
          Good morning, Marcus. <span style={{ color: v3.ink3, fontStyle: 'italic' }}>Three things need you today.</span>
        </div>
      </div>

      {/* 3-up priority cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        <V3PriorityCard
          tint={v3.claySoft} dot={v3.clay} label="Schedule"
          head="Harborview is 3 days behind on framing"
          sub="I've drafted a recovery plan — 2 framers from the Portland pool, $4.8K, net 0d impact."
          cta="Review plan"
        />
        <V3PriorityCard
          tint={v3.amberSoft} dot={v3.amber} label="Approval"
          head="Brannigan invoice $184,220"
          sub="Approve by 17:00 today to stay on net-30 terms. Matches PO-0338 and receipt."
          cta="Approve"
        />
        <V3PriorityCard
          tint={v3.skySoft} dot={v3.sky} label="Visit"
          head="Cedar Creek inspection · 14:00"
          sub="Framing rough-in. Insp. K. Oduya. I've pulled the punch list from rev D."
          cta="Open brief"
        />
      </div>

      {/* Main 2-up grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 12, flex: 1, minHeight: 0 }}>
        {/* Projects overview */}
        <V3Card title="Projects" sub="4 active · 2 in planning" askable>
          <V3ProjectsList />
        </V3Card>

        {/* Activity timeline */}
        <V3Card title="Today" sub="9 events · since 07:12" askable>
          <V3Timeline />
        </V3Card>
      </div>

      {/* Bottom strip */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.1fr 1fr', gap: 12 }}>
        <V3Card title="Budget health" sub="Across all projects" askable compact>
          <V3BudgetRing />
        </V3Card>
        <V3Card title="Crew on site" sub="41 of 44" askable compact>
          <V3CrewStrip />
        </V3Card>
        <V3Card title="Client portal" sub="2 comments new" askable compact>
          <V3Client />
        </V3Card>
      </div>
    </div>
  );
}

function V3PriorityCard({ tint, dot, label, head, sub, cta }) {
  return (
    <div style={{
      background: tint, borderRadius: 12, padding: '16px 16px 14px',
      display: 'flex', flexDirection: 'column', gap: 10,
      border: `1px solid rgba(160,140,100,0.12)`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: dot }} />
        <span style={{ color: v3.ink2, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>{label}</span>
      </div>
      <div style={{ fontFamily: v3.serif, fontSize: 20, lineHeight: 1.15, letterSpacing: '-0.01em' }}>
        {head}
      </div>
      <div style={{ fontSize: 12, color: v3.ink2, lineHeight: 1.5 }}>{sub}</div>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: 'auto' }}>
        <div style={{
          padding: '5px 12px', background: v3.ink, color: v3.panel,
          fontSize: 11, fontWeight: 500, borderRadius: 14,
        }}>{cta}</div>
        <div style={{ marginLeft: 'auto', fontSize: 11, color: v3.ink3, display: 'flex', alignItems: 'center', gap: 4 }}>
          <span style={{ fontFamily: v3.serif, fontStyle: 'italic' }}>prepared by</span>
          <span style={{
            width: 14, height: 14, borderRadius: 4, background: v3.ink,
            color: v3.panel, display: 'grid', placeItems: 'center', fontSize: 8, fontWeight: 600, fontFamily: v3.mono,
          }}>C</span>
        </div>
      </div>
    </div>
  );
}

function V3Card({ title, sub, askable, compact, children }) {
  return (
    <div style={{
      background: v3.panelSoft, border: `1px solid ${v3.line}`, borderRadius: 12,
      display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden',
    }}>
      <div style={{
        padding: compact ? '10px 14px 8px' : '14px 16px 10px',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>{title}</div>
          {sub && <div style={{ fontSize: 11, color: v3.ink3, marginTop: 2 }}>{sub}</div>}
        </div>
        {askable && (
          <div style={{
            marginLeft: 'auto', fontSize: 11,
            display: 'flex', alignItems: 'center', gap: 5,
            padding: '3px 8px 3px 6px', background: v3.panel,
            border: `1px solid ${v3.line}`, borderRadius: 10,
            color: v3.ink2, fontStyle: 'italic', fontFamily: v3.serif, fontSize: 13,
          }}>
            <span style={{
              width: 14, height: 14, borderRadius: 3, background: v3.clay,
              color: v3.panel, display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 600, fontFamily: v3.sans, fontStyle: 'normal',
            }}>C</span>
            ask
          </div>
        )}
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function V3ProjectsList() {
  const projects = [
    { name: 'Harborview, Blk B',   client: 'Calloway Co',  done: 28, day: 'Day 84 / 312',  trend: '+3d', tone: 'warn' },
    { name: 'Willow Heights',      client: 'Arden LLC',    done: 92, day: 'Day 268 / 290', trend: 'on time' },
    { name: 'Cedar Creek Lofts',   client: 'Meridian RE',  done: 14, day: 'Day 42 / 220',  trend: 'on time' },
    { name: 'Fulton Warehouse',    client: 'Brightline',   done:  6, day: 'Day 12 / 180',  trend: 'kickoff' },
  ];
  return (
    <div style={{ padding: '2px 16px 14px' }}>
      {projects.map((p) => (
        <div key={p.name} style={{
          display: 'grid', gridTemplateColumns: '1.3fr 1.2fr 1fr 80px',
          alignItems: 'center', gap: 12, padding: '11px 0',
          borderTop: `1px solid ${v3.line2}`, fontSize: 12,
        }}>
          <div>
            <div style={{ fontWeight: 500 }}>{p.name}</div>
            <div style={{ fontSize: 11, color: v3.ink3 }}>{p.client}</div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ height: 4, background: v3.line2, borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${p.done}%`, background: v3.clay, borderRadius: 2 }} />
            </div>
            <div style={{ fontSize: 10, color: v3.ink3, marginTop: 4, fontFamily: v3.mono }}>{p.done}%</div>
          </div>
          <div style={{ fontSize: 11, color: v3.ink2 }}>{p.day}</div>
          <div style={{ textAlign: 'right' }}>
            <span style={{
              fontSize: 10, padding: '2px 8px', borderRadius: 10,
              background: p.tone === 'warn' ? v3.amberSoft : v3.mossSoft,
              color: p.tone === 'warn' ? v3.amber : v3.moss,
              fontWeight: 500,
            }}>{p.trend}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function V3Timeline() {
  const items = [
    { t: '09:42', kind: 'rfi',   text: 'RFI-228 answered by Studio North', ai: false },
    { t: '09:18', kind: 'inv',   text: 'Invoice $184,220 from Brannigan',   ai: false },
    { t: '08:55', kind: 'ai',    text: 'Flagged: PO-0338 missing receipt',  ai: true  },
    { t: '08:30', kind: 'co',    text: 'CO-017 opened — Low-E glazing',      ai: false },
    { t: '07:50', kind: 'crew',  text: '41 of 44 crew clocked in',           ai: false },
    { t: '07:12', kind: 'doc',   text: 'Drawings rev D uploaded',            ai: false },
  ];
  const kindColor = { rfi: v3.sky, inv: v3.amber, ai: v3.clay, co: v3.amber, crew: v3.moss, doc: v3.ink3 };
  return (
    <div style={{ padding: '0 16px 14px' }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display: 'flex', gap: 12, padding: '9px 0',
          borderTop: `1px solid ${v3.line2}`,
        }}>
          <span style={{ fontFamily: v3.mono, fontSize: 10, color: v3.ink3, width: 42, flexShrink: 0 }}>{it.t}</span>
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: kindColor[it.kind],
            marginTop: 6, flexShrink: 0,
          }} />
          <span style={{ fontSize: 12, flex: 1, lineHeight: 1.45 }}>
            {it.text}
            {it.ai && (
              <span style={{
                marginLeft: 8, fontSize: 10, padding: '1px 6px',
                background: v3.claySoft, color: v3.clay, borderRadius: 6,
                fontWeight: 500, letterSpacing: '0.03em',
              }}>AI</span>
            )}
          </span>
        </div>
      ))}
    </div>
  );
}

function V3BudgetRing() {
  // Simple conic-style ring
  const spent = 42;
  return (
    <div style={{ padding: '0 14px 14px', display: 'flex', gap: 14, alignItems: 'center' }}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%',
        background: `conic-gradient(${v3.clay} 0 ${spent}%, ${v3.line2} ${spent}% 100%)`,
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <div style={{
          width: 62, height: 62, borderRadius: '50%',
          background: v3.panelSoft, display: 'grid', placeItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: v3.mono, fontSize: 16, fontWeight: 600, textAlign: 'center' }}>{spent}%</div>
            <div style={{ fontSize: 9, color: v3.ink3, textAlign: 'center' }}>spent</div>
          </div>
        </div>
      </div>
      <div style={{ flex: 1, fontSize: 11 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderBottom: `1px solid ${v3.line2}` }}>
          <span style={{ color: v3.ink3 }}>Drawn</span>
          <span style={{ fontFamily: v3.mono }}>$5.27M</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderBottom: `1px solid ${v3.line2}` }}>
          <span style={{ color: v3.ink3 }}>Planned</span>
          <span style={{ fontFamily: v3.mono }}>$12.40M</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
          <span style={{ color: v3.ink3 }}>1 line over</span>
          <span style={{ color: v3.amber }}>Permits 82%</span>
        </div>
      </div>
    </div>
  );
}

function V3CrewStrip() {
  const trades = [
    { n: 'Framers',      on: 14, of: 14, c: v3.clay },
    { n: 'Electricians', on:  6, of:  8, c: v3.sky  },
    { n: 'Plumbers',     on:  4, of:  4, c: v3.moss },
    { n: 'Concrete',     on:  9, of: 10, c: v3.amber},
    { n: 'Laborers',     on:  8, of:  8, c: v3.ink3 },
  ];
  return (
    <div style={{ padding: '0 14px 14px' }}>
      {trades.map((t) => (
        <div key={t.n} style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0',
          fontSize: 12, borderTop: `1px solid ${v3.line2}`,
        }}>
          <span style={{ flex: 1 }}>{t.n}</span>
          <span style={{ display: 'flex', gap: 2 }}>
            {Array.from({ length: t.of }).map((_, i) => (
              <span key={i} style={{
                width: 6, height: 12, borderRadius: 1,
                background: i < t.on ? t.c : v3.line2,
              }} />
            ))}
          </span>
          <span style={{ fontFamily: v3.mono, fontSize: 10, color: v3.ink3, width: 30, textAlign: 'right' }}>
            {t.on}/{t.of}
          </span>
        </div>
      ))}
    </div>
  );
}

function V3Client() {
  return (
    <div style={{ padding: '0 14px 14px', fontSize: 12 }}>
      <div style={{ padding: '8px 0', borderTop: `1px solid ${v3.line2}`, display: 'flex', gap: 8 }}>
        <div style={{
          width: 22, height: 22, borderRadius: '50%',
          background: v3.sky, color: v3.panel,
          display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0,
        }}>RC</div>
        <div style={{ flex: 1, fontSize: 11 }}>
          <div><b>R. Calloway</b> <span style={{ color: v3.ink3 }}>· Harborview</span></div>
          <div style={{ color: v3.ink2, marginTop: 2, fontStyle: 'italic', fontFamily: v3.serif, fontSize: 13 }}>
            "Can we see the upgraded glazing spec by Friday?"
          </div>
        </div>
      </div>
      <div style={{ padding: '8px 0', borderTop: `1px solid ${v3.line2}`, display: 'flex', gap: 8 }}>
        <div style={{
          width: 22, height: 22, borderRadius: '50%',
          background: v3.moss, color: v3.panel,
          display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0,
        }}>AL</div>
        <div style={{ flex: 1, fontSize: 11 }}>
          <div><b>A. Leung</b> <span style={{ color: v3.ink3 }}>· Willow</span></div>
          <div style={{ color: v3.ink2, marginTop: 2, fontStyle: 'italic', fontFamily: v3.serif, fontSize: 13 }}>
            "Punch list looks good — approved."
          </div>
        </div>
      </div>
    </div>
  );
}

function V3FloatingBrief() {
  return (
    <div style={{
      position: 'absolute', bottom: 20, right: 22, width: 320,
      background: v3.ink, color: v3.panel, borderRadius: 14,
      padding: '14px 16px', display: 'flex', gap: 12,
      boxShadow: '0 8px 28px rgba(20,18,14,0.22), 0 2px 6px rgba(20,18,14,0.15)',
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 7, background: v3.clay,
        display: 'grid', placeItems: 'center', flexShrink: 0,
        fontFamily: v3.serif, fontSize: 16, fontStyle: 'italic',
      }}>C</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 10, color: v3.ink4, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4, fontWeight: 500 }}>
          Morning brief · 09:00
        </div>
        <div style={{ fontSize: 12, lineHeight: 1.5, fontFamily: v3.serif, fontSize: 14 }}>
          Harborview needs a decision today. I'll watch the 14:00 inspection and summarize after.
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <div style={{
            padding: '4px 10px', background: v3.panel, color: v3.ink,
            fontSize: 11, fontWeight: 500, borderRadius: 10, fontFamily: v3.sans,
          }}>Continue</div>
          <div style={{
            padding: '4px 10px', background: 'transparent', color: v3.panel,
            fontSize: 11, fontWeight: 500, borderRadius: 10,
            border: `1px solid rgba(251,249,244,0.25)`, fontFamily: v3.sans,
          }}>Dismiss</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { V3Arc });