// Theme variations — same dashboard layout rendered across different palettes.
// Lets the user compare visual moods side-by-side.

function themedDashboard(T) {
  return (
    <div style={{
      width: '100%', height: '100%', background: T.bg, color: T.ink,
      fontFamily: T.sans, fontSize: 13, display: 'grid',
      gridTemplateColumns: '220px 1fr 320px', letterSpacing: '-0.005em',
    }}>
      {/* sidebar */}
      <div style={{ background: T.panel, borderRight: `1px solid ${T.line}`, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, background: T.brand, color: T.brandOn, borderRadius: 7, display: 'grid', placeItems: 'center', fontFamily: T.mono, fontSize: 13, fontWeight: 600 }}>C</div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 13 }}>Ridgeline Dev.</div>
            <div style={{ fontSize: 11, color: T.ink3 }}>GC · Portland ME</div>
          </div>
        </div>
        <div style={{ padding: '8px 10px', border: `1px solid ${T.line}`, borderRadius: 6, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: T.ink3 }}>
          <span>⌕</span> Ask anything
          <span style={{ marginLeft: 'auto', fontFamily: T.mono, fontSize: 10, padding: '1px 4px', background: T.line2, borderRadius: 3 }}>⌘K</span>
        </div>
        {[
          ['◈ Home', true], ['▤ Projects'], ['◷ Schedule'], ['$ Accounting'],
          ['⚇ Crew'], ['▢ Materials'], ['▭ Documents'], ['◉ Photos'], ['☗ Client portal'],
        ].map(([n, on], i) => (
          <div key={i} style={{
            padding: '6px 10px', borderRadius: 5, fontSize: 13,
            background: on ? T.brandSoft : 'transparent',
            color: on ? T.brand : T.ink2,
            fontWeight: on ? 500 : 400,
          }}>{n}</div>
        ))}
      </div>

      {/* main */}
      <div style={{ overflow: 'hidden', padding: '22px 26px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, color: T.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 3 }}>Home · Apr 21</div>
          <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', fontFamily: T.serif || T.sans }}>Good morning, Marcus.</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {[['Projects','12','active'],['Revenue','$5.27M','YTD'],['Crew','41','on site'],['Margin','17%','watch','amber']].map(([k,v,s,t],i)=>(
            <div key={i} style={{ padding: 14, background: T.panel, border: `1px solid ${T.line}`, borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: T.ink3 }}>{k}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: t === 'amber' ? T.amber : T.ink, marginTop: 5, fontFamily: T.serif || T.sans }}>{v}</div>
              <div style={{ fontSize: 11, color: T.ink3, marginTop: 2 }}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1 }}>
          <div style={{ padding: 14, background: T.panel, border: `1px solid ${T.line}`, borderRadius: 10 }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>Today on site</div>
            {[
              ['09:42', 'RFI-228 answered'],
              ['09:18', 'Invoice $184K · Brannigan'],
              ['08:55', 'AI flagged PO-0338'],
              ['08:30', 'CO-017 opened'],
              ['07:50', '41 of 44 crew clocked in'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, fontSize: 12, padding: '8px 0', borderTop: i ? `1px solid ${T.line2}` : 'none' }}>
                <span style={{ fontFamily: T.mono, fontSize: 10, color: T.ink3, width: 42 }}>{r[0]}</span>
                <span>{r[1]}</span>
              </div>
            ))}
          </div>
          <div style={{ padding: 14, background: T.panel, border: `1px solid ${T.line}`, borderRadius: 10 }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>Projects</div>
            {[
              ['Harborview Blk B',62,'framing',T.brand],
              ['Willow Heights',92,'finishes',T.accent2 || T.brand],
              ['Cedar Creek',14,'foundations',T.accent3 || T.brand],
              ['Fulton Warehouse',6,'kickoff',T.ink3],
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 50px', gap: 8, padding: '8px 0', borderTop: i ? `1px solid ${T.line2}` : 'none', fontSize: 12, alignItems: 'center' }}>
                <div><div>{r[0]}</div><div style={{ fontSize: 10, color: T.ink3 }}>{r[2]}</div></div>
                <div style={{ height: 6, background: T.line2, borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${r[1]}%`, background: r[3] }} />
                </div>
                <span style={{ fontFamily: T.mono, fontSize: 11, textAlign: 'right' }}>{r[1]}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* AI side */}
      <div style={{ background: T.panel, borderLeft: `1px solid ${T.line}`, padding: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 26, height: 26, borderRadius: 6, background: `linear-gradient(135deg, ${T.brand}, ${T.accent2 || T.brand})`, color: T.brandOn, display: 'grid', placeItems: 'center', fontFamily: T.mono, fontSize: 12, fontWeight: 600 }}>C</div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Contro</div>
          <span style={{ marginLeft: 'auto', fontSize: 10, color: T.ink3 }}>online</span>
        </div>
        <div style={{ padding: 12, background: T.brandSoft, borderRadius: 8, fontSize: 12, lineHeight: 1.55 }}>
          3 things need you today: approve Brannigan <b>$184K</b>, nudge Calloway on <b>CO-017</b>, and review the safety flag from L3 framing.
        </div>
        <div style={{ fontSize: 11, color: T.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>Quick actions</div>
        {['Draft daily report','Review payouts','Summarize RFIs','Forecast cash Q3'].map((q, i) => (
          <div key={i} style={{ padding: '8px 12px', border: `1px solid ${T.line}`, borderRadius: 6, fontSize: 12 }}>{q}</div>
        ))}
        <div style={{ marginTop: 'auto', padding: '10px 12px', background: T.bg, border: `1px solid ${T.line}`, borderRadius: 8, fontSize: 12, color: T.ink3, display: 'flex', gap: 8, alignItems: 'center' }}>
          Ask Contro…
          <span style={{ marginLeft: 'auto', fontSize: 16 }}>↵</span>
        </div>
      </div>
    </div>
  );
}

// Theme palettes
const THEME_NOIR = {
  bg: '#0a0a0c', panel: '#111114', ink: '#f2f2f5', ink2: '#a8a8af', ink3: '#6b6b73',
  line: '#1e1e24', line2: '#17171c',
  brand: '#f2f2f5', brandOn: '#0a0a0c', brandSoft: '#1a1a20',
  accent2: '#b4b4bc', accent3: '#8a8a92', amber: '#e0a84a',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
  serif: '"Instrument Serif", Georgia, serif',
};
const THEME_SAGE = {
  bg: '#f3f4ef', panel: '#fbfbf7', ink: '#1d2321', ink2: '#566a5e', ink3: '#8a9b90',
  line: '#e3e6dc', line2: '#edefe6',
  brand: '#4a6b4f', brandOn: '#fff', brandSoft: '#e4ece0',
  accent2: '#7a8f5c', accent3: '#a8a070', amber: '#b07a2a',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
  serif: '"Instrument Serif", Georgia, serif',
};
const THEME_TERMINAL = {
  bg: '#07090d', panel: '#0d1017', ink: '#d6e1f2', ink2: '#8298b8', ink3: '#4f607a',
  line: '#16202e', line2: '#0f1724',
  brand: '#6ea7ff', brandOn: '#07090d', brandSoft: 'rgba(110,167,255,0.12)',
  accent2: '#8cf0c8', accent3: '#d4af7a', amber: '#e9b464',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
};
const THEME_CLAY = {
  bg: '#f2ebe0', panel: '#fbf6ec', ink: '#2a241d', ink2: '#65584a', ink3: '#968774',
  line: '#e5d9c4', line2: '#ece2cf',
  brand: '#b85c3a', brandOn: '#fff', brandSoft: '#f5dfd2',
  accent2: '#7a6f55', accent3: '#b89a6a', amber: '#b87c27',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
  serif: '"Instrument Serif", Georgia, serif',
};
const THEME_IVORY = {
  bg: '#f8f4ec', panel: '#ffffff', ink: '#1a1a1a', ink2: '#4a4a46', ink3: '#9b968b',
  line: '#eae4d4', line2: '#f1eddf',
  brand: '#1a1a1a', brandOn: '#ffffff', brandSoft: '#ebe7de',
  accent2: '#6d5a3b', accent3: '#b58a4a', amber: '#c08a2a',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
  serif: '"Instrument Serif", Georgia, serif',
};
const THEME_ICE = {
  bg: '#eef2f7', panel: '#ffffff', ink: '#0f172a', ink2: '#475569', ink3: '#94a3b8',
  line: '#dbe3ee', line2: '#e8eef6',
  brand: '#2563eb', brandOn: '#fff', brandSoft: '#e6eeff',
  accent2: '#4f46e5', accent3: '#0891b2', amber: '#d97706',
  sans: '"Inter Tight", sans-serif', mono: '"JetBrains Mono", monospace',
  serif: '"Instrument Serif", Georgia, serif',
};

function ThemeNoir()     { return themedDashboard(THEME_NOIR); }
function ThemeSage()     { return themedDashboard(THEME_SAGE); }
function ThemeTerminal() { return themedDashboard(THEME_TERMINAL); }
function ThemeClay()     { return themedDashboard(THEME_CLAY); }
function ThemeIvory()    { return themedDashboard(THEME_IVORY); }
function ThemeIce()      { return themedDashboard(THEME_ICE); }

Object.assign(window, { ThemeNoir, ThemeSage, ThemeTerminal, ThemeClay, ThemeIvory, ThemeIce });