// Primus IQ — Applications Screen

const APPS = [
  { id: 'prima',   name: 'PRIMA',     blurb: 'Deep market & literature research engine — searches projects, library, and the firm knowledge graph.', accent: '#7A1C1C' },
  { id: 'rfp',     name: 'RFP Maker', blurb: 'Drafts proposals, cost calculators and storylines from prior winning bids and project artefacts.',     accent: '#876200' },
  { id: 'climate', name: 'ClimateIQ', blurb: 'Sustainability disclosures, scope mapping, TCFD & CSRD drafting, greenwashing-risk scoring.',          accent: '#2E6F40' },
];

const ScreenApplications = ({ setRoute }) => (
  <div style={contentArea}>
    <div className="mobile-p-16" style={{ padding: '40px 48px 40px', maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 28 }}>
        <h1 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: '-0.02em' }}>Applications</h1>
        <p style={{ fontSize: 13, color: 'var(--mute)', margin: '6px 0 0' }}>
          Domain engines that chat with your projects, the library, and the firm's knowledge graph.
        </p>
      </div>

      <div className="pi-grid-3" style={{ gap: 16 }}>
        {APPS.map(app => (
          <div key={app.id} onClick={() => setRoute(`app-${app.id}`)} style={{
            padding: 22, borderRadius: 16,
            background: 'white', border: '1px solid var(--line)',
            cursor: 'pointer', transition: 'all 0.18s',
            display: 'flex', flexDirection: 'column', gap: 16,
          }}
          onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 10px 24px rgba(60,30,20,0.08)'; e.currentTarget.style.borderColor = app.accent + '30'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
          onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: app.accent + '14', color: app.accent,
              display: 'grid', placeItems: 'center',
            }}>
              <AppIcon id={app.id} color={app.accent}/>
            </div>
            <div>
              <h3 style={{ fontSize: 18, fontWeight: 600, margin: 0, color: 'var(--ink)' }}>{app.name}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--mute)', margin: '6px 0 0' }}>{app.blurb}</p>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: app.accent, fontWeight: 600 }}>
              Open {app.name}
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/></svg>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const AppIcon = ({ id, color }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    {id === 'prima'   && <><circle cx="11" cy="11" r="6.5" stroke={color} strokeWidth="1.6"/><path d="M20 20l-3.5-3.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></>}
    {id === 'rfp'     && <><path d="M5 4h10l4 4v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" stroke={color} strokeWidth="1.6"/><path d="M14 4v5h5M8 13h8M8 16h5" stroke={color} strokeWidth="1.6"/></>}
    {id === 'climate' && <><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4Z" stroke={color} strokeWidth="1.6"/><path d="M8.5 12l2.5 2.5L15.5 9.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></>}
  </svg>
);

const ScreenAppDetail = ({ appId, setRoute }) => {
  const app = APPS.find(a => a.id === appId) || APPS[0];
  return (
    <div style={contentArea}>
      <div className="mobile-p-16" style={{ padding: '40px 48px 40px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--mute)', marginBottom: 22 }}>
          <button onClick={() => setRoute('apps')} style={crumbBtn}>Applications</button>
          <span>/</span>
          <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{app.name}</span>
        </div>

        <div className="mobile-stack" style={{
          padding: 28, borderRadius: 18,
          background: `linear-gradient(135deg, ${app.accent}0C 0%, transparent 70%)`,
          border: `1px solid ${app.accent}25`,
          display: 'flex', alignItems: 'center', gap: 20, marginBottom: 24,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: app.accent, color: 'white',
            display: 'grid', placeItems: 'center',
          }}>
            <AppIcon id={app.id} color="white" />
          </div>
          <div style={{ flex: 1 }}>
            <h1 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: '-0.01em', lineHeight: 1.1 }}>{app.name}</h1>
            <p style={{ fontSize: 13, color: 'var(--mute)', margin: '4px 0 0', maxWidth: 540, lineHeight: 1.5 }}>{app.blurb}</p>
          </div>
          <button className="btn-primary" onClick={() => setRoute('chat')}>Start a new chat →</button>
        </div>

        <div style={{ fontSize: 11, color: 'var(--mute)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>
          Recent {app.name} chats
        </div>
        <div style={{ background: 'white', borderRadius: 14, border: '1px solid var(--line)', overflow: 'hidden' }}>
          {[
            { t: 'GCC fintech IPO scan · 2021–2026', when: '2h ago' },
            { t: 'Renewables capex benchmarking',     when: '1d ago' },
            { t: 'TCFD gap analysis · portfolio co.', when: '4d ago' },
          ].map((c, i, arr) => (
            <div key={c.t} style={{
              padding: '12px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none', cursor: 'pointer',
              transition: 'background 0.12s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-soft)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{ fontSize: 14, color: 'var(--ink)' }}>{c.t}</span>
              <span style={{ fontSize: 12, color: 'var(--mute)' }}>{c.when}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {
  APPS,
  ScreenApplications,
  AppIcon,
  ScreenAppDetail,
});