const MI = window.PI;
function MHero() {
  return (
    <section id="top" className="dark" style={{ padding: '72px 0 96px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: -260, right: -200, width: 800, height: 800, borderRadius: '50%', background: 'radial-gradient(circle, rgba(240,190,60,0.18), transparent 62%)', pointerEvents: 'none' }} />
      <div className="wrap hero2" style={{ position: 'relative' }}>
        <div className="reveal in">
          <h1 style={{ fontSize: 'clamp(38px,4.8vw,60px)', fontWeight: 700, lineHeight: 1.04, letterSpacing: '-0.035em' }}>One system for your whole housing operation.</h1>
          <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'var(--p200)', marginTop: 22, maxWidth: 500 }}>Empient brings housing management, asset management and CRM into a single platform, so every team works from the same record of every home and every customer.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Tenancies, repairs, assets and cases in one place', 'Built for UK & EU social housing and its regulation', 'Connected to OptusApp and OptusEcho out of the box'].map((t) => <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 15.5, color: 'var(--p100)' }}><MI.Check size={16} color="var(--yellow-400)" />{t}</li>)}
          </ul>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <PBtn size="lg" variant="secondary" iconRight={<MI.ChevronRight size={19} />} onClick={openPDemo}>Book a demo</PBtn>
            <PBtn size="lg" variant="ghost" style={{ color: '#fff' }} onClick={goP('modules')}>Explore modules</PBtn>
          </div>
        </div>
        <div className="reveal in" style={{ transitionDelay: '120ms' }}><Shot id="emp-hero" label="Empient dashboard screenshot" browser="Empient" dark src="assets/empient/dashboard.png" ratio="2508/1433" /></div>
      </div>
    </section>
  );
}

const MODULES = [
  { ic: 'Home', t: 'Housing management', d: 'The tenancy lifecycle from application to end of tenancy.', b: ['Applications, allocations and lettings', 'Tenancy records and household changes', 'Voids and re-let tracking', 'Estate and scheme management'] },
  { ic: 'Wrench', t: 'Repairs and maintenance', d: 'Responsive repairs, scheduled and tracked to completion.', b: ['Diagnosis and priority rules', 'Appointment scheduling and operative diaries', 'Contractor portals and variations', 'SLA and satisfaction tracking'] },
  { ic: 'Building', t: 'Asset management', d: 'A living record of every home and its components.', b: ['Stock condition and component data', 'Compliance: gas, electrical, fire, asbestos', 'Planned and cyclical works programmes', 'Decent Homes and energy performance'] },
  { ic: 'Users', t: 'CRM and customer service', d: 'One view of every customer and every contact.', b: ['Contacts, cases and complaints', 'Vulnerability and support flags', 'Omnichannel contact history', 'Housing Ombudsman code timelines'] },
  { ic: 'Wallet', t: 'Rents and arrears', d: 'Accounts, charges and arrears workflows in one ledger.', b: ['Rent accounts and service charges', 'Payment and Universal Credit reconciliation', 'Arrears stages and escalation', 'Money advice case management'] },
  { ic: 'TrendingUp', t: 'Reporting and insight', d: 'Dashboards and returns without exporting to spreadsheets.', b: ['Role-based dashboards', 'Tenant Satisfaction Measures', 'Regulatory returns and board packs', 'Open data access for BI tools'] },
];
function Modules() {
  return (
    <section id="modules" style={{ padding: '96px 0', background: 'var(--p50)', borderTop: '1px solid var(--p100)', borderBottom: '1px solid var(--p100)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 44 }}><h2 className="h2">Every module, on the same record.</h2><p className="lede">Start with what you need most and add modules as you go. Because they share one data model, there’s nothing to sync and nothing entered twice.</p></div>
        <div className="grid3">
          {MODULES.map((m, i) => { const Ic = MI[m.ic]; return (
            <article key={m.t} className="fcard reveal" style={{ transitionDelay: (i % 3) * 80 + 'ms' }}>
              <span className="icbox"><Ic size={21} /></span>
              <h3 style={{ fontSize: 21, fontWeight: 600, marginTop: 6 }}>{m.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--p500)', lineHeight: 1.6 }}>{m.d}</p>
              <ul>{m.b.map((x) => <li key={x}><MI.Check size={15} color="var(--yellow-600)" style={{ marginTop: 3, flexShrink: 0 }} />{x}</li>)}</ul>
            </article>); })}
        </div>
      </div>
    </section>
  );
}

const MDETAIL = [
  { id: 'emp-360', src: 'assets/empient/tenant.png', label: 'Customer 360 view', t: 'The whole story of a customer, on one screen.', p: 'Tenancy, rent, repairs, cases and every contact, side by side. Whoever picks up the phone sees the same thing as the housing officer, the income team and the surveyor.', b: ['Timeline of every interaction across channels', 'Vulnerability and reasonable adjustment flags up front', 'Household members, contacts and consent', 'Open actions across every team'] },
  { id: 'emp-compliance', src: 'assets/empient/assets.png', label: 'Compliance and asset view', t: 'Compliance you can prove, not just track.', p: 'Every home’s safety certificates, components and inspections in one record, with the evidence attached. Due dates drive work orders automatically.', b: ['Gas, electrical, fire, water, lift and asbestos', 'Certificates and photos stored against the asset', 'Automatic work orders before expiry', 'Board-ready compliance dashboards'] },
  { id: 'emp-workflow', src: 'assets/empient/cases.png', label: 'Workflow builder', t: 'Workflows that fit how your teams actually work.', p: 'Configure stages, tasks, SLAs and escalations without a developer. Complaints, arrears, ASB and lettings all run on the same engine.', b: ['Drag-and-drop stage and task design', 'SLA timers with Ombudsman and regulator deadlines', 'Automatic letters, emails, SMS and app notifications', 'Audit trail on every change'] },
];
function MDetail() {
  return (
    <section id="detail" style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 64 }}><h2 className="h2">In detail.</h2></div>
        <div className="rows">
          {MDETAIL.map((r, i) => (
            <div key={r.id} className={'row reveal' + (i % 2 ? ' flip' : '')}>
              <div className="txt">
                <h3>{r.t}</h3><p>{r.p}</p>
                <ul>{r.b.map((x) => <li key={x}><MI.Check size={15} color="var(--yellow-600)" style={{ marginTop: 3, flexShrink: 0 }} />{x}</li>)}</ul>
              </div>
              <Shot id={r.id} label={r.label} browser="Empient" dark src={r.src} ratio="2508/1433" />
            </div>))}
        </div>
      </div>
    </section>
  );
}

const AIQ = [
  { q: 'Which homes are most at risk of damp and mould this winter?', k: 'Predictive', stat: '142 homes', sub: 'flagged high risk across 3 schemes', bars: [['Poor EPC and solid walls', 86], ['Previous damp reports', 71], ['Overcrowding indicators', 54]], note: 'Based on stock condition, repairs history and household data. Suggested: prioritise pre-winter inspections at Hollybush and Rowan Court.' },
  { q: 'Which tenants are likely to fall into arrears next month?', k: 'Predictive', stat: '63 accounts', sub: 'with a rising arrears risk score', bars: [['Missed or partial payments', 78], ['UC assessment period changes', 62], ['Recent open repairs', 31]], note: 'Early-help contact recommended for 27 accounts. Draft messages ready to send from the arrears workflow.' },
  { q: 'How is sentiment trending in complaints this quarter?', k: 'Sentiment', stat: '+11%', sub: 'more positive than last quarter', bars: [['Repairs communication', 74], ['Time to resolve', 58], ['Staff attitude', 88]], note: 'Analysed across complaints, app messages and OptusEcho call transcripts. Time to resolve remains the main driver of negative sentiment.' },
  { q: 'Show our TSM performance against the sector', k: 'Metrics', stat: '8 of 12', sub: 'measures above sector median', bars: [['Overall satisfaction', 79], ['Repairs satisfaction', 74], ['Complaints handling', 41]], note: 'Complaints handling is in the lower quartile. Board pack section generated and ready to review.' },
  { q: 'Prepare a DSAR response for tenant #T-40218', k: 'DSAR', stat: '1,284 records', sub: 'gathered from 9 modules, with 212 redactions suggested', count: true, bars: [['Third-party names and contact details', 128], ['Other household members’ data', 56], ['Staff notes about third parties', 28]], note: 'Every suggested redaction is highlighted with its reason for an officer to approve or reject. The final pack is exported with an audit trail.' },
];
const AICAP = [
  ['TrendingUp', 'Reporting', 'Ask a question in plain English and get a chart, table or board-ready narrative from live data.'],
  ['Activity', 'Metrics', 'Tenant Satisfaction Measures, KPIs and regulatory returns kept current automatically.'],
  ['Zap', 'Predictive analysis', 'Arrears risk, damp and mould, component failure and void duration, predicted before they happen.'],
  ['Message', 'Sentiment', 'Tone and themes read across complaints, messages, surveys and call transcripts.'],
];
function EmpientAI() {
  const [i, setI] = React.useState(0);
  const a = AIQ[i];
  return (
    <section id="ai" className="dark ai" style={{ padding: '104px 0' }}>
      <div className="glow" aria-hidden="true" style={{ top: -300, right: -250 }} />
      <div className="glow" aria-hidden="true" style={{ bottom: -500, left: -300, opacity: 0.6 }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="hero2" style={{ alignItems: 'center', gap: 'clamp(32px,5vw,72px)' }}>
          <div className="reveal">
            <h2 className="h2" style={{ marginTop: 18 }}>Meet <span className="shine">EmpientAI</span>.</h2>
            <p className="lede">An AI engine built into the platform, not bolted on. Because every module writes to one record, EmpientAI works from data that is clean, complete and current, and gives answers you can act on.</p>
            <div className="pillars">
              <div className="pillar"><h3>Clean data by design</h3><p>One data model across every module. Validated at entry, de-duplicated, and audited, so there is no messy export to clean up first.</p></div>
              <div className="pillar"><h3>An engine tuned for housing</h3><p>Trained on the vocabulary of UK & EU social housing and its regulation, grounded only in your data, hosted in the UK & EU.</p></div>
              <div className="pillar" style={{ gridColumn: '1 / -1' }}><h3>Optional, and as much or as little as you like</h3><p>You don’t have to use AI at all. Empient works fully without it. Switch on only the parts you’re comfortable with, such as reporting and analytics or predictive analysis, and add more whenever you’re ready.</p></div>
            </div>
          </div>
          <div className="aicard reveal" style={{ transitionDelay: '100ms' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}><span className="icbox" style={{ width: 34, height: 34, borderRadius: 10 }}><MI.Zap size={16} /></span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: '#fff' }}>Ask EmpientAI</span><span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: 'var(--p300)' }}>Click a question to try it <MI.ChevronRight size={13} /></span></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }} role="group" aria-label="Example question">
              {AIQ.map((x, n) => <button key={x.q} type="button" className="aiq" aria-pressed={i === n} onClick={() => setI(n)}>{x.q}</button>)}
            </div>
            <div key={i} className="aians fadein" style={{ marginTop: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}><span className="aistat">{a.stat}</span><span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--yellow-300)' }}>{a.k}</span></div>
              <p style={{ fontSize: 14, color: 'var(--p200)', marginTop: 4 }}>{a.sub}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '18px 0' }}>
                {a.bars.map(([l, v], n) => { const w = a.count ? Math.round(v / Math.max(...a.bars.map((b) => b[1])) * 100) : v; return <div key={l}><div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: 'var(--p200)', marginBottom: 5 }}><span>{l}</span><span style={{ fontFamily: 'var(--font-mono)', color: '#fff' }}>{a.count ? v : v + '%'}</span></div><div className="aibar"><i style={{ width: w + '%', animationDelay: n * 90 + 'ms' }} /></div></div>; })}
              </div>
              <p style={{ fontSize: 13.5, color: 'var(--p300)', lineHeight: 1.55, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 14 }}>{a.note}</p>
            </div>
          </div>
        </div>
        <div className="aigrid reveal" style={{ marginTop: 56 }}>
          {AICAP.map(([ic, t, d]) => { const Ic = MI[ic]; return <div key={t} className="aitile"><span className="icbox" style={{ width: 40, height: 40, borderRadius: 11 }}><Ic size={18} /></span><h3>{t}</h3><p>{d}</p></div>; })}
        </div>
      </div>
    </section>
  );
}

function Connected() {
  const C = [
    ['OptusEcho', 'AI voice agents', 'Voice agents read and write Empient records during the call: booking repairs, taking payments and logging contact.'],
    ['OptusApp', 'Tenant self-serve', 'Repairs, payments and messages from the tenant app land straight in Empient, against the right tenancy, with nothing entered twice.'],
  ];
  return (
    <section id="connected" className="light" style={{ padding: '96px 0', background: 'var(--p50)', borderBottom: '1px solid var(--p100)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 44 }}><h2 className="h2">Connected to the rest of the family, and to everything else.</h2><p className="lede">Empient is the system of record. OptusApp and OptusEcho plug in natively, and an open API connects the rest of your stack.</p></div>
        <div className="grid3">
          <div className="tile reveal"><span className="icbox"><MI.Layers size={20} /></span><h3>Open API and integrations</h3><p>Finance, payments and Direct Debit, contractor systems, document management, GIS and Companies House. If it has an API, we’ll connect it.</p></div>
          {C.map(([logo, k, d], i) => <a key={logo} href={__route(logo + '.html')} className="tile reveal" style={{ transitionDelay: (i + 1) * 80 + 'ms', display: 'block' }}><img src={PLOGO + logo + '.png'} alt={logo} style={{ height: 30 }} /><h3>{k}</h3><p>{d}</p><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--p700)' }}>Visit {logo} <MI.ChevronRight size={15} /></span></a>)}
        </div>
      </div>
    </section>
  );
}

function MApp() {
  usePReveal();
  return (<React.Fragment>
    <PNav logo="Empient" links={[['Modules', 'modules'], ['In detail', 'detail'], ['Integrations', 'connected'], ['EmpientAI', 'ai']]} />
    <PDemoModal product="Empient" blurb="Tell us which parts of your operation you’d like to see and we’ll build the demo around them." uses={['Housing management', 'Repairs', 'Asset management', 'CRM', 'Rents & arrears', 'Not sure yet']} />
    <main><MHero /><Modules /><MDetail /><Connected /><EmpientAI /><PCta title="See Empient running your processes." copy="Bring a real workflow and we’ll show you how it looks end to end, from tenant to board report." secondary={['Explore modules', 'modules']} /></main>
    <PFooter logo="Empient" />
  </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<MApp />);