// 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: 'talent',  name: 'Talent Mapper', blurb: 'Find people across the organisation, explore their project history, access CVs, and build RFP-ready profiles for any engagement.', accent: '#876200' },
  { id: 'carbon',  name: 'CarbonIQ',     blurb: 'Digital MRV platform measuring forest disturbance, land-use transitions, Above-Ground Biomass (AGB), and Soil Organic Carbon (SOC) using advanced geospatial analytics — enabling transparent, scalable carbon project verification.', accent: '#2E6F40' },
];

// CarbonIQ blurb is long — tooltip shown on the ⓘ button instead of truncating the card.
const LONG_BLURB = {
  carbon: 'CarbonIQ is a Digital Monitoring, Reporting, and Verification (DMRV) platform that measures and tracks forest disturbance, land-use transitions, Above-Ground Biomass (AGB), and Soil Organic Carbon (SOC) using advanced geospatial analytics. It streamlines carbon project monitoring and verification, enabling transparent, scalable, and data-driven climate impact assessment.',
};

const AppCard = ({ app, maintenance, setRoute }) => {
  const [tip, setTip] = React.useState(false);
  return (
    <div onClick={() => { if (!maintenance) setRoute(`app-${app.id}`); }} style={{
      padding: 22, borderRadius: 16, position: 'relative',
      background: 'var(--bg-card)', border: '1px solid var(--line)',
      cursor: maintenance ? 'default' : 'pointer', transition: 'all 0.18s',
      opacity: maintenance ? 0.6 : 1,
      display: 'flex', flexDirection: 'column', gap: 16,
    }}
    onMouseEnter={e => { if (maintenance) return; 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 => { if (maintenance) return; 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 style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <h3 style={{ fontSize: 18, fontWeight: 600, margin: 0, color: 'var(--ink)' }}>{app.name}</h3>
          {LONG_BLURB[app.id] && (
            <div style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>
              <button
                onMouseEnter={() => setTip(true)}
                onMouseLeave={() => setTip(false)}
                style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid var(--mute)', background: 'none', cursor: 'default', display: 'grid', placeItems: 'center', color: 'var(--mute)', fontSize: 10, fontWeight: 700, fontFamily: 'inherit', padding: 0 }}>
                i
              </button>
              {tip && (
                <div style={{
                  position: 'absolute', bottom: 'calc(100% + 8px)', left: '50%', transform: 'translateX(-50%)',
                  width: 280, padding: '10px 12px', borderRadius: 10,
                  background: 'var(--ink)', color: 'white', fontSize: 11.5, lineHeight: 1.55,
                  boxShadow: '0 8px 24px rgba(0,0,0,0.18)', zIndex: 50, pointerEvents: 'none',
                }}>
                  {LONG_BLURB[app.id]}
                </div>
              )}
            </div>
          )}
        </div>
        <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>
  );
};

const ScreenApplications = ({ setRoute, maintenance = false }) => (
  <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' }}>
          {maintenance
            ? 'Applications are coming soon.'
            : "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 => (
          <AppCard key={app.id} app={app} maintenance={maintenance} setRoute={setRoute} />
        ))}
      </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 === 'talent' && <><circle cx="9" cy="7" r="3" stroke={color} strokeWidth="1.6"/><path d="M3 20c0-3.3 2.7-6 6-6h0c3.3 0 6 2.7 6 6" stroke={color} strokeWidth="1.6" strokeLinecap="round"/><path d="M16 3.5c1.5.5 2.5 2 2.5 3.5S17.5 10 16 10.5M19 14c2 .8 3.5 2.7 3.5 5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></>}
    {id === 'carbon' && <><path d="M12 3C8 3 5 6.5 5 10.5c0 2.5 1.2 4.7 3 6l1 4h6l1-4c1.8-1.3 3-3.5 3-6C19 6.5 16 3 12 3Z" stroke={color} strokeWidth="1.6"/><path d="M9 14h6" 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: 'var(--bg-card)', 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,
});