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>
  );
}

function PNav({ logo, links }) {
  return (
    <header className="pnav">
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 80, 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 src={PLOGO + logo + '.png'} alt={logo} style={{ height: 38 }} /></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>
        <PBtn size="sm" variant="secondary" iconRight={<PI.ChevronRight size={16} />} onClick={openPDemo}>Book a demo</PBtn>
      </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 });