const AI = window.PI;
const ORBIT_L = [
  { ic: 'Wrench', t: 'Report a repair', d: 'Describe the problem, add photos and pick an appointment slot in under two minutes.' },
  { ic: 'Wallet', t: 'Pay rent and see your balance', d: 'Check what’s due, pay securely and download statements whenever you need them.' },
  { ic: 'Message', t: 'Message your housing officer', d: 'A direct line to the person who looks after your home, with the full history kept in one place.' },
];
const ORBIT_R = [
  { ic: 'Calendar', t: 'Track appointments', d: 'See when your repair or visit is booked, and reschedule if the time no longer works.' },
  { ic: 'FileText', t: 'Your tenancy, to hand', d: 'Tenancy agreement, letters and documents, always available and always up to date.' },
  { ic: 'Bell', t: 'Updates as they happen', d: 'Notifications when a repair is booked, a payment clears or your officer replies.' },
];

function AHero() {
  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(212,90,72,0.22), 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' }}>Everything about your home, in one app.</h1>
          <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'var(--p200)', marginTop: 22, maxWidth: 500 }}>OptusApp is a self-serve app for UK & EU social housing tenants. Report repairs, pay rent and talk to your housing officer without waiting on the phone.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Repairs, rent, messages and documents in one place', 'Published under your name, in your colours', 'Native to Empient, and open to other housing systems'].map((t) => <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 15.5, color: 'var(--p100)' }}><AI.Check size={16} color="var(--coral-400)" />{t}</li>)}
          </ul>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <PBtn size="lg" variant="secondary" iconRight={<AI.ChevronRight size={19} />} onClick={openPDemo}>Book a demo</PBtn>
            <PBtn size="lg" variant="ghost" style={{ color: '#fff' }} onClick={goP('features')}>See features</PBtn>
          </div>
        </div>
        <div className="reveal in" style={{ transitionDelay: '120ms', display: 'flex', justifyContent: 'center' }}><div className="phone"><div className="scr"><image-slot id="app-hero-screen" src="assets/app/home.jpg" fit="contain" shape="rect" placeholder="App home screen"></image-slot></div></div></div>
      </div>
    </section>
  );
}

function AFeatures() {
  const Feat = ({ f }) => { const Ic = AI[f.ic]; return <div className="ofeat reveal"><span className="icbox"><Ic size={21} /></span><div><h3>{f.t}</h3><p>{f.d}</p></div></div>; };
  return (
    <section id="features" 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, margin: '0 auto', textAlign: 'center' }}><h2 className="h2">Everything a tenant needs, in their pocket.</h2></div>
        <div className="orbit">
          <div className="ocol left">{ORBIT_L.map((f) => <Feat key={f.t} f={f} />)}</div>
          <div className="phone reveal" style={{ transitionDelay: '120ms' }}><div className="scr"><image-slot id="app-features-screen" src="assets/app/repairs.jpg" fit="contain" shape="rect" placeholder="App screen"></image-slot></div></div>
          <div className="ocol right">{ORBIT_R.map((f) => <Feat key={f.t} f={f} />)}</div>
        </div>
      </div>
    </section>
  );
}

const DETAIL = [
  { id: 'app-repair', src: 'assets/app/report-repair.jpg', label: 'Report a repair flow', t: 'Repairs reported properly, first time.', p: 'Guided questions capture what your team needs to triage: where the problem is, how urgent it is and what it looks like. No more call-backs to ask for details.', b: ['Photo and video upload from the phone camera', 'Urgency and safety questions built into the flow', 'Appointment booking against real availability', 'Live status from reported to completed'] },
  { id: 'app-rent', src: 'assets/app/rent-history.jpg', label: 'Rent and payments screen', t: 'Rent that’s clear, and easy to pay.', p: 'Tenants see their balance, what’s due and every transaction, then pay in a couple of taps. Arrears conversations start earlier and feel less confrontational.', b: ['Card and open banking payments', 'Downloadable statements', 'Reminders before a payment is due', 'Direct link to money advice and support'] },
  { id: 'app-messages', src: 'assets/app/messages-personal.jpg', label: 'Messages and notifications', t: 'A conversation, not a case number.', p: 'Messages go straight to the housing officer, with the full history kept alongside the tenancy so nothing is lost between teams.', b: ['Two-way messaging with attachments', 'Push notifications for every update', 'Broadcast notices to a block, estate or scheme', 'Read receipts so tenants know they’ve been heard'] },
  { id: 'app-asb', src: 'assets/app/report-asb.jpg', label: 'Antisocial behaviour report flow', t: 'Antisocial behaviour reporting, made safe and simple.', p: 'Tenants can report antisocial behaviour privately, as it happens, with the detail your ASB team needs to act. Every report is logged against the tenancy and kept up to date as the case moves on.', b: ['Guided reporting by type, time and location', 'Photo, video and audio evidence from the phone', 'Option to report anonymously', 'Case updates and an incident diary for the tenant'] },
];
function ADetail() {
  const [h, setH] = React.useState(null);
  return (
    <section id="detail" style={{ padding: '96px 0', overflow: 'hidden' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 40 }}><h2 className="h2">Built around the moments that matter.</h2></div>
        <div className="vg-fan reveal" onMouseLeave={() => setH(null)}>{DETAIL.map((r, n) => (
          <div key={r.id} className={'vg-ph' + (h === n ? ' on' : '')} style={{ '--r': [-8, -3, 3, 8][n] + 'deg', '--y': [28, 0, 0, 28][n] + 'px', zIndex: h === n ? 10 : [1, 3, 3, 1][n] }} onMouseEnter={() => setH(n)}>
            <div className="phone" style={{ width: 230 }}><div className="scr"><image-slot id={r.id} src={r.src} fit="contain" shape="rect" placeholder={r.label}></image-slot></div></div>
          </div>))}</div>
        <div className="vg-cols reveal" onMouseLeave={() => setH(null)}>{DETAIL.map((r, n) => (
          <div key={r.id} className={'vg-col' + (h === n ? ' on' : '')} onMouseEnter={() => setH(n)}>
            <span className="vg-num">{String(n + 1).padStart(2, '0')}</span><h3>{r.t}</h3>
            <ul className="vg-ticks">{r.b.map((x) => <li key={x}><AI.Check size={15} color="var(--coral-500)" style={{ marginTop: 3, flexShrink: 0 }} />{x}</li>)}</ul>
          </div>))}</div>
      </div>
    </section>
  );
}

const INTEG = [
  ['Wallet', 'Payments', ['AllPay', 'Pay360', 'PayPoint']],
  ['Users', 'CRM and housing management', ['Dynamics', 'MIS', 'MRI']],
  ['Wrench', 'Repairs scheduling', ['FLS', 'DRS', 'ROCC']],
];
function AInteg() {
  return (
    <section id="integrations" style={{ padding: '88px 0', background: 'var(--p50)', borderTop: '1px solid var(--p100)' }}>
      <div className="wrap hero2 integ" style={{ alignItems: 'center' }}>
        <div className="reveal">
          <h2 className="h2">Connected to the systems you already run.</h2>
          <p className="lede">Repairs, payments and messages from the app go straight into your existing systems. These are some of the integrations we’ve already built.</p>
          <div style={{ marginTop: 28 }}><PBtn variant="primary" iconRight={<AI.ChevronRight size={17} />} onClick={openPDemo}>Ask about your system</PBtn></div>
        </div>
        <div className="reveal" style={{ transitionDelay: '100ms', background: '#fff', border: '1px solid var(--p100)', borderRadius: 22, boxShadow: 'var(--shadow-md)', overflow: 'hidden' }}>
          {INTEG.map(([ic, t, names]) => { const Ic = AI[ic]; return (
            <div key={t} className="irow">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Ic size={18} color="var(--coral-500)" /><span style={{ fontSize: 14, fontWeight: 600, color: 'var(--p600)', lineHeight: 1.3 }}>{t}</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 8 }}>{names.map((n) => <div key={n} className="iname">{n}</div>)}</div>
            </div>); })}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 22px', background: 'linear-gradient(135deg, var(--purple-600), var(--purple-800))', color: '#fff' }}>
            <AI.Plus size={18} color="var(--coral-300)" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>And many more.</span>
            <span style={{ fontSize: 14.5, color: 'var(--p200)' }}>We can integrate into any system.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const TEAM = [
  ['Activity', 'Fewer inbound calls', 'Routine contact moves to self-serve, so your contact centre has time for the calls that need a person.'],
  ['Home', 'Your brand, your app', 'Published under your name in the App Store and Google Play, with your colours and your tone of voice.'],
  ['Layers', 'Works with your housing system', 'Native to Empient, and connected to other housing management systems through our API.'],
  ['Globe', 'Accessible to every tenant', 'WCAG 2.2 AA, large text, screen-reader support and translation into the languages your tenants speak.'],
  ['Lock', 'Secure by default', 'UK & EU-hosted, encrypted, with biometric sign-in and no personal data stored on the device.'],
  ['TrendingUp', 'Insight you can act on', 'See what tenants report, pay and ask about, by scheme or estate, in a live dashboard.'],
];
function ATeam() {
  return (
    <section id="teams" className="dark" style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div className="hero2" style={{ alignItems: 'start' }}>
          <div className="reveal">
            <h2 className="h2">For housing teams, not just tenants.</h2>
            <p className="lede">OptusApp is designed to move everyday contact online without leaving anyone behind, and to give your team a clearer picture of what tenants need.</p>
            <div className="reveal" style={{ marginTop: 32 }}><Shot id="app-dashboard" label="Housing team dashboard screenshot" src="assets/app/console.png" ratio="1919/946" browser="The OptusApp Console" dark /></div>
          </div>
          <div className="grid2 reveal" style={{ transitionDelay: '100ms' }}>
            {TEAM.map(([ic, t, d]) => { const Ic = AI[ic]; return <div key={t} className="tile"><span className="icbox"><Ic size={20} /></span><h3>{t}</h3><p>{d}</p></div>; })}
          </div>
        </div>
      </div>
    </section>
  );
}

function AApp() {
  usePReveal();
  return (<React.Fragment>
    <PNav logo="OptusApp" links={[['Features', 'features'], ['In detail', 'detail'], ['Integrations', 'integrations'], ['For teams', 'teams']]} />
    <PDemoModal product="OptusApp" blurb="Tell us a little about your organisation and we’ll show you the app with your branding on it." uses={['Tenant app', 'Repairs', 'Rent & payments', 'Messaging', 'Not sure yet']} />
    <main><AHero /><AFeatures /><ADetail /><AInteg /><ATeam /><PCta title="See OptusApp with your name on it." copy="We’ll walk you through the app, the team dashboard and how it connects to your housing system." secondary={['See features', 'features']} /></main>
    <PFooter logo="OptusApp" />
  </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<AApp />);