const { useState: usePS, useEffect: usePE } = React;
const { Button: PBtn, Dialog: PDialog, Input: PInput } = window.IOptusDesignSystem_ff608d;
const PI = window.IOptusIcons;
const PLOGO = 'assets/logos/';
const PIOPTUS = 'https://ioptus.com/';

function usePReveal() {
  usePE(() => {
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.12 });
    document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}
const goP = (id) => (e) => { if (e) e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); };

let _openP = null;
const openPDemo = () => _openP && _openP();
function PDemoModal({ product, blurb, uses }) {
  const blank = { name: '', email: '', phone: '', org: '', uses: [] };
  const [open, setOpen] = usePS(false); const [f, setF] = usePS(blank); const [err, setErr] = usePS({}); const [sent, setSent] = usePS(false);
  usePE(() => { _openP = () => { setF(blank); setErr({}); setSent(false); setOpen(true); }; }, []);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const tog = (u) => setF({ ...f, uses: f.uses.includes(u) ? f.uses.filter((x) => x !== u) : [...f.uses, u] });
  const submit = (e) => { e.preventDefault(); const n = {}; if (!f.name.trim()) n.name = 'Please enter your name'; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) n.email = 'Please enter a valid email address'; setErr(n); if (!Object.keys(n).length) { window.__sendForm("demo", f).then(() => setSent(true)).catch((er) => setErr({ email: er.message })); } };
  const close = () => setOpen(false);
  if (sent) return <PDialog open={open} onClose={close} title="Demo requested" width={480} footer={<PBtn onClick={close}>Done</PBtn>}><p style={{ fontSize: 15.5, color: 'var(--p600)', lineHeight: 1.6 }}>Thanks, {f.name.split(' ')[0]}. We’ll email <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--p900)' }}>{f.email}</span> within one working day to arrange your {product} demo.</p></PDialog>;
  return (
    <PDialog open={open} onClose={close} title={'Book ' + (product === 'Empient' ? 'an' : 'an') + ' ' + product + ' demo'} width={520} footer={<React.Fragment><PBtn variant="ghost" onClick={close}>Cancel</PBtn><PBtn form="p-demo-form" type="submit" iconRight={<PI.ChevronRight size={17} />}>Request demo</PBtn></React.Fragment>}>
      <form id="p-demo-form" onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <p style={{ fontSize: 14.5, color: 'var(--p500)', lineHeight: 1.55, marginTop: -4 }}>{blurb}</p>
        <PInput label="Name" required value={f.name} onChange={set('name')} error={err.name} autoComplete="name" />
        <PInput label="Email" type="email" required value={f.email} onChange={set('email')} error={err.email} autoComplete="email" />
        <PInput label="Phone" type="tel" value={f.phone} onChange={set('phone')} helper="Optional" autoComplete="tel" />
        <PInput label="Organisation" value={f.org} onChange={set('org')} helper="Optional" autoComplete="organization" />
        <div>
          <span style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)', marginBottom: 8 }}>What are you interested in?</span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {uses.map((u) => { const a = f.uses.includes(u); return <button key={u} type="button" aria-pressed={a} onClick={() => tog(u)} style={{ cursor: 'pointer', padding: '8px 14px', borderRadius: 999, border: '1.5px solid ' + (a ? 'var(--p500)' : 'var(--border-default)'), background: a ? 'var(--p50)' : '#fff', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 13.5, color: a ? 'var(--p900)' : 'var(--p600)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>{a && <PI.Check size={14} />}{u}</button>; })}
          </div>
        </div>
        <p style={{ fontSize: 12.5, color: 'var(--p400)', lineHeight: 1.5 }}>By requesting a demo you agree to us contacting you about your enquiry. See our <a href="https://ioptus.com/privacy-notice">privacy notice</a>.</p>
      </form>
    </PDialog>
  );
}

const PNAV_CSS = `
.pnavbar{height:80px}
.pnavlogo{height:38px;width:auto;display:block}
.pnavburger,.pnavdrawer{display:none}
@media (max-width:980px){
  .pnavbar{height:64px;gap:10px}
  .pnavlogo{height:28px}
  .pnavburger{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 10px;margin-right:-10px;border:0;border-radius:10px;background:transparent;color:var(--p700);font-family:var(--font-display);font-weight:500;font-size:13.5px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
  .pnavburger:hover,.pnavburger[aria-expanded=true]{background:var(--p50)}
  .pnavdrawer{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--p100);box-shadow:0 24px 40px -24px rgba(34,31,54,.35);padding:4px 0 20px;animation:pnavdrop .18s cubic-bezier(0.2,0,0,1)}
  .pnavdrawer a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--p700)!important;text-decoration:none;border-bottom:1px solid var(--p100)}
  .pnavdrawer a[aria-current=page]{color:var(--p900)!important;font-weight:600}
  .pnavcta{padding-top:18px}
}
@media (max-width:560px){.pnavdemo{display:none}}
@keyframes pnavdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pnavdrawer{animation:none}}
`;
function PNavBurgerIcon({ open }) {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {open ? <path d="M18 6 6 18M6 6l12 12" /> : <path d="M4 7h16M4 12h16M4 17h16" />}
    </svg>
  );
}
function usePNavDrawer(ref, open, setOpen) {
  usePE(() => {
    if (!open) return;
    const key = (e) => { if (e.key === 'Escape') setOpen(false); };
    const click = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const resize = () => { if (window.innerWidth > 980) setOpen(false); };
    document.addEventListener('keydown', key); document.addEventListener('click', click); window.addEventListener('resize', resize);
    return () => { document.removeEventListener('keydown', key); document.removeEventListener('click', click); window.removeEventListener('resize', resize); };
  }, [open]);
}
function PNav({ logo, links }) {
  const [open, setOpen] = usePS(false);
  const ref = React.useRef(null);
  usePNavDrawer(ref, open, setOpen);
  const pick = (id) => (e) => { setOpen(false); goP(id)(e); };
  return (
    <header className="pnav" ref={ref}>
      <style>{PNAV_CSS}</style>
      <div className="wrap pnavbar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ display: 'flex' }}><img className="pnavlogo" src={PLOGO + logo + '.png'} alt={logo} /></a>
          <a href={PIOPTUS} className="endorse">An <img src={PLOGO + 'iOptus.png'} alt="iOptus" /> product</a>
        </div>
        <nav className="navlinks" style={{ display: 'flex', gap: 30 }}>{links.map(([l, id]) => <a key={id} href={'#' + id} onClick={goP(id)} style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15 }}>{l}</a>)}</nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div className="pnavdemo"><PBtn size="sm" variant="secondary" iconRight={<PI.ChevronRight size={16} />} onClick={openPDemo}>Book a demo</PBtn></div>
          <button type="button" className="pnavburger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} aria-controls="mobile-nav" onClick={() => setOpen(!open)}><PNavBurgerIcon open={open} /><span>Menu</span></button>
        </div>
      </div>
      {open && (
        <div id="mobile-nav" className="pnavdrawer">
          <nav className="wrap" aria-label="Site">
            {links.map(([l, id]) => <a key={id} href={'#' + id} onClick={pick(id)}>{l}<PI.ChevronRight size={18} color="var(--p300)" /></a>)}
            <div className="pnavcta"><PBtn fullWidth variant="secondary" iconRight={<PI.ChevronRight size={17} />} onClick={() => { setOpen(false); openPDemo(); }}>Book a demo</PBtn></div>
          </nav>
        </div>
      )}
    </header>
  );
}

function PCta({ title, copy, secondary }) {
  return (
    <section style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div className="reveal dark" style={{ borderRadius: 28, background: 'linear-gradient(135deg, var(--purple-600), var(--purple-800))', padding: 'clamp(36px,5vw,64px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <h2 style={{ fontSize: 'clamp(28px,3.4vw,42px)', fontWeight: 700 }}>{title}</h2>
            <p style={{ fontSize: 17, color: 'var(--p200)', marginTop: 14, lineHeight: 1.6 }}>{copy}</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <PBtn size="lg" variant="secondary" iconRight={<PI.ChevronRight size={19} />} onClick={openPDemo}>Book a demo</PBtn>
            {secondary && <PBtn size="lg" variant="ghost" style={{ color: '#fff' }} onClick={goP(secondary[1])}>{secondary[0]}</PBtn>}
          </div>
        </div>
      </div>
    </section>
  );
}

function PFooter({ logo }) {
  return (
    <footer style={{ borderTop: '1px solid var(--p100)', padding: '36px 0 40px' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <img src={PLOGO + logo + '.png'} alt={logo} style={{ height: 28 }} />
          <a href={PIOPTUS} className="logolink">An <img src={PLOGO + 'iOptus.png'} alt="iOptus" style={{ height: 16 }} /> product</a>
        </div>
        <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap', fontSize: 13 }}>
          {[['Privacy', 'https://ioptus.com/privacy-notice'], ['Terms', 'https://ioptus.com/terms-and-conditions'], ['Cookies', 'https://ioptus.com/cookie-policy'], ['Contact', 'https://ioptus.com/contact']].map(([l, h]) => <a key={l} href={h} style={{ color: 'var(--p500)' }}>{l}</a>)}<a href="#" onClick={(e) => { e.preventDefault(); window.openCookieSettings && window.openCookieSettings(); }} style={{ color: 'var(--p500)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/></svg>Cookie settings</a>
        </div>
      </div>
      <div className="wrap"><p style={{ fontSize: 12.5, color: 'var(--p400)', marginTop: 18 }}>© 2026 Optus Homes Ltd (T/A iOptus). Registered in England &amp; Wales, no. 12429269.</p></div>
    </footer>
  );
}

function Shot({ id, label, src, ratio, browser, dark }) {
  if (browser) return <div className={'bshot' + (dark ? ' dk' : '')}><div className="bbar"><i style={{ background: '#ff5f57' }}></i><i style={{ background: '#febc2e' }}></i><i style={{ background: '#28c840' }}></i><span className="burl">{browser}</span></div><div className="bin" style={ratio ? { aspectRatio: ratio } : undefined}><image-slot id={id} shape="rect" placeholder={label} src={src} fit={src ? 'contain' : undefined}></image-slot></div></div>;
  return <div className="shot"><div className="in" style={ratio ? { aspectRatio: ratio } : undefined}><image-slot id={id} shape="rect" placeholder={label} src={src} fit={src ? 'contain' : undefined}></image-slot></div></div>;
}

Object.assign(window, { usePReveal, goP, openPDemo, PDemoModal, PNav, PCta, PFooter, Shot, PBtn, PI, PLOGO });