const { useState: useSt, useEffect: useEf } = React;
const { Button: EBtn, Dialog: EDialog, Input: EInput } = window.IOptusDesignSystem_ff608d;
const EI = window.IOptusIcons;
const ELOGO = 'assets/logos/';
const IOPTUS = 'https://ioptus.com/';

function useRevealE() {
  useEf(() => {
    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();
  }, []);
}

let _openE = null;
const openEchoDemo = () => _openE && _openE();
function EchoDemoModal() {
  const blank = { name: '', email: '', phone: '', org: '', uses: [] };
  const [open, setOpen] = useSt(false); const [f, setF] = useSt(blank); const [err, setErr] = useSt({}); const [sent, setSent] = useSt(false);
  useEf(() => { _openE = () => { 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 <EDialog open={open} onClose={close} title="Demo requested" width={480} footer={<EBtn onClick={close}>Done</EBtn>}><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 a demo built around your use case.</p></EDialog>;
  return (
    <EDialog open={open} onClose={close} title="Book an OptusEcho demo" width={520} footer={<React.Fragment><EBtn variant="ghost" onClick={close}>Cancel</EBtn><EBtn form="echo-demo-form" type="submit" iconRight={<EI.ChevronRight size={17} />}>Request demo</EBtn></React.Fragment>}>
      <form id="echo-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 }}>Tell us a little about your calls and we’ll bring an agent built for them.</p>
        <EInput label="Name" required value={f.name} onChange={set('name')} error={err.name} autoComplete="name" />
        <EInput label="Email" type="email" required value={f.email} onChange={set('email')} error={err.email} autoComplete="email" />
        <EInput label="Phone" type="tel" value={f.phone} onChange={set('phone')} helper="Optional" autoComplete="tel" />
        <EInput 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' }}>
            {['Inbound calls', 'Outbound calls', 'Website widget', 'Not sure yet'].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 && <EI.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>
    </EDialog>
  );
}

const go = (id) => (e) => { if (e) e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); };

const ENAV_CSS = `
.enavbar{height:80px}
.enavlogo{height:38px;width:auto;display:block}
.enavburger,.enavdrawer{display:none}
@media (max-width:980px){
  .enavbar{height:64px;gap:10px}
  .enavlogo{height:28px}
  .enavburger{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}
  .enavburger:hover,.enavburger[aria-expanded=true]{background:var(--p50)}
  .enavdrawer{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:enavdrop .18s cubic-bezier(0.2,0,0,1)}
  .enavdrawer 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)}
  .enavdrawer a[aria-current=page]{color:var(--p900)!important;font-weight:600}
  .enavcta{padding-top:18px}
}
@media (max-width:560px){.enavdemo{display:none}}
@keyframes enavdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.enavdrawer{animation:none}}
`;
function ENavBurgerIcon({ 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 useENavDrawer(ref, open, setOpen) {
  useEf(() => {
    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 ENav() {
  const links = [['Live demo', 'demo'], ['Features', 'features'], ['System agnostic', 'agnostic'], ['How we build', 'build'], ['Partner', 'partner']];
  const [open, setOpen] = useSt(false);
  const ref = React.useRef(null);
  useENavDrawer(ref, open, setOpen);
  const pick = (id) => (e) => { setOpen(false); go(id)(e); };
  return (
    <React.Fragment>
      <style>{ENAV_CSS}</style>
      <header className="enav" ref={ref} style={{ position: 'sticky', top: 0, zIndex: 60, background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--p100)' }}>
        <div className="wrap enavbar" 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="enavlogo" src={ELOGO + 'OptusEcho.png'} alt="OptusEcho" /></a>
            <a href="https://ioptus.com/" className="endorse">An <img src={ELOGO + '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={go(id)} style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15 }}>{l}</a>)}</nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <div className="enavdemo"><EBtn size="sm" variant="secondary" iconRight={<EI.ChevronRight size={16} />} onClick={openEchoDemo}>Book a demo</EBtn></div>
            <button type="button" className="enavburger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} aria-controls="mobile-nav" onClick={() => setOpen(!open)}><ENavBurgerIcon open={open} /><span>Menu</span></button>
          </div>
        </div>
        {open && (
          <div id="mobile-nav" className="enavdrawer">
            <nav className="wrap" aria-label="Site">
              {links.map(([l, id]) => <a key={id} href={'#' + id} onClick={pick(id)}>{l}<EI.ChevronRight size={18} color="var(--p300)" /></a>)}
              <div className="enavcta"><EBtn fullWidth variant="secondary" iconRight={<EI.ChevronRight size={17} />} onClick={() => { setOpen(false); openEchoDemo(); }}>Book a demo</EBtn></div>
            </nav>
          </div>
        )}
      </header>
      <EchoDemoModal />
    </React.Fragment>
  );
}

function EHero() {
  return (
    <section id="demo" className="dark" style={{ position: 'relative', overflow: 'hidden', padding: '72px 0 96px' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: -200, right: -160, width: 720, height: 720, borderRadius: '50%', background: 'radial-gradient(circle, rgba(88,168,232,0.16), transparent 65%)', pointerEvents: 'none' }} />
      <div className="wrap egrid" style={{ position: 'relative' }}>
        <div className="reveal in">
          <h1 style={{ fontSize: 'clamp(40px,5vw,66px)', fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.035em' }}>Voice agents built for business.</h1>
          <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'var(--p200)', marginTop: 22, maxWidth: 480 }}>OptusEcho voice agents are built around your organisation: answering inbound calls, making outbound calls and deployable in-app or on your website. Every agent and deployment is bespoke, connecting with systems you already use and built on the best-fit AI for the job.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Answers 24/7, in the caller’s language', 'Takes real actions in your systems', 'Hands over to a person with full context'].map((t) => <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 15.5, color: '#fff' }}><EI.Check size={16} color="var(--blue-300)" />{t}</li>)}
          </ul>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <EBtn size="lg" variant="secondary" iconRight={<EI.ChevronRight size={19} />} onClick={openEchoDemo}>Book a demo</EBtn>
            <EBtn size="lg" variant="ghost" style={{ color: '#fff' }} onClick={go('features')}>See features</EBtn>
          </div>
        </div>
        <div className="reveal in" style={{ transitionDelay: '120ms' }}>
          <EchoDemo />
        </div>
      </div>
    </section>
  );
}

function Features() {
  const F = [
    { ic: 'PhoneCall', t: 'Inbound call handling', d: 'Every call answered at the first ring, day or night, with no queue and no voicemail.', b: ['Understands why someone is calling and resolves it', 'Books, logs and updates records during the call', 'Instant language switching, local accents', 'Warm transfer to your team with full context'] },
    { ic: 'Send', t: 'Outbound calling', d: 'Campaigns that would take a team weeks, completed in days, with every outcome recorded.', b: ['Satisfaction surveys and feedback calls', 'Appointment reminders and confirmations', 'Payment and renewal follow-ups', 'Respects call windows, retries and opt-outs'] },
    { ic: 'Code', t: 'Website widget', d: 'The same agent on your website, so visitors can talk or type without picking up the phone.', b: ['Added with one line of code', 'Voice or text, on desktop and mobile', 'Styled to match your brand', 'Shares history with your phone agent'] },
  ];
  return (
    <section id="features" style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 44 }}>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,46px)', fontWeight: 700 }}>One agent, wherever your customers reach you.</h2>
        </div>
        <div className="feat3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {F.map((f, i) => { const Ic = EI[f.ic]; return (
            <article key={f.t} className="fcard reveal" style={{ transitionDelay: i * 80 + 'ms' }}>
              <span className="icbox"><Ic size={21} /></span>
              <h3 style={{ fontSize: 21, fontWeight: 600, marginTop: 6 }}>{f.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--p500)', lineHeight: 1.6 }}>{f.d}</p>
              <ul>{f.b.map((x) => <li key={x}><EI.Check size={15} color="var(--blue-500)" style={{ marginTop: 3, flexShrink: 0 }} />{x}</li>)}</ul>
              {f.ic === 'Code' && <button type="button" onClick={() => document.querySelector('.widget').focus()} style={{ marginTop: 'auto', alignSelf: 'flex-start', cursor: 'pointer', border: 'none', background: 'none', padding: 0, fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 14, color: 'var(--p600)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>There’s one in the corner of this page <EI.ChevronRight size={15} /></button>}
            </article>); })}
        </div>
        <a href="#agnostic" onClick={go('agnostic')} className="reveal" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginTop: 20, borderRadius: 22, background: 'linear-gradient(135deg, var(--purple-600), var(--purple-800))', padding: '30px 34px', color: '#fff' }}>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
            <span className="icbox" style={{ background: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.18)', color: '#fff', flexShrink: 0 }}><EI.Layers size={21} /></span>
            <div>
              <h3 style={{ fontSize: 22, fontWeight: 600, color: '#fff' }}>System agnostic, by design</h3>
              <p style={{ fontSize: 15, color: 'var(--p200)', marginTop: 6, maxWidth: 620 }}>We connect to the software you already run, and build every agent on the AI and telephony that best fit your use case.</p>
            </div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>How it works <EI.ChevronRight size={17} /></span>
        </a>
      </div>
    </section>
  );
}

const INTEGRATIONS = [['Twilio', 'Telephony & SMS'], ['SendGrid', 'Email'], ['Calendly', 'Scheduling'], ['Cal.com', 'Scheduling'], ['OptusApp', 'Tenant Self-serve App'], ['Empient', 'All-in-one HMS, CRM and AMS']];
const LAYERS = [['Telephony', 'Phone'], ['Speech-to-text (ASR)', 'Mic'], ['Language model (LLM)', 'Zap'], ['Text-to-speech (TTS)', 'Activity'], ['Your systems', 'Grid']];
const USECASES = {
  'After-hours support': ['Local numbers in each country you serve, overflowing from your main line', 'Tuned for regional accents and noisy lines', 'Strong reasoning for triage and escalation', 'A calm, natural voice matched to your brand', 'Helpdesk, Cal.com, Twilio SMS'],
  'Multilingual front desk': ['Local numbers that replace the old phone menu', 'Detects and switches language mid-call', 'A multilingual model grounded in your policies', 'Native-sounding voices for each language', 'Your CRM, SendGrid email'],
  'Outbound surveys at scale': ['High-volume outbound lines with call windows', 'Fast, cost-efficient transcription at volume', 'A lightweight, low-latency model for short scripts', 'One consistent voice, optimised for cost', 'Survey platform, results written back'],
};

function Agnostic() {
  const [uc, setUc] = useSt(Object.keys(USECASES)[0]);
  return (
    <section id="agnostic" className="dark" style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 700, marginBottom: 48 }}>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,46px)', fontWeight: 700 }}>Agnostic in both directions.</h2>
          <p style={{ fontSize: 17.5, color: 'var(--p200)', marginTop: 18, lineHeight: 1.6 }}>We don’t ask you to change your software, and we don’t lock you into one AI vendor. Every agent is built bespoke, with the right tools for the job.</p>
        </div>
        <div className="agrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 28, alignItems: 'start' }}>
          <div className="reveal">
            <p className="kick" style={{ color: 'var(--blue-300)', marginBottom: 12 }}>01 · Your software</p>
            <h3 style={{ fontSize: 24, fontWeight: 600 }}>We integrate with what you already use.</h3>
            <p style={{ fontSize: 15.5, color: 'var(--p200)', marginTop: 12, lineHeight: 1.6 }}>If you already run a third-party system, we’ll connect to it. The agent reads and writes to it during the call, so nothing is entered twice afterwards.</p>
            <p className="kick" style={{ margin: '26px 0 12px' }}>Integrations we’ve built</p>
            <div className="igrid">
              {INTEGRATIONS.map(([n, c]) => <div key={n} className="itile"><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: '#fff' }}>{n}</div><div style={{ fontSize: 13, color: 'var(--p300)', marginTop: 4 }}>{c}</div></div>)}
              <div className="itile next" style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 14 }}><EI.Plus size={18} color="var(--blue-300)" /><div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15.5, color: '#fff' }}>Your system next</div><div style={{ fontSize: 13, color: 'var(--p300)', marginTop: 3 }}>CRM, helpdesk, ecommerce, patient or booking software</div></div></div>
            </div>
          </div>
          <div className="reveal" style={{ transitionDelay: '100ms', borderRadius: 22, border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.03)', padding: 26 }}>
            <p className="kick" style={{ color: 'var(--blue-300)', marginBottom: 12 }}>02 · Your AI stack</p>
            <h3 style={{ fontSize: 24, fontWeight: 600 }}>Best-fit AI and telephony, chosen for each client.</h3>
            <p style={{ fontSize: 15.5, color: 'var(--p200)', marginTop: 12, lineHeight: 1.6 }}>We pick each layer for your use case, weighing accuracy, latency, cost, languages and where data is processed. When a better model arrives, your agent can move to it.</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '22px 0 16px' }} role="group" aria-label="Example use case">
              {Object.keys(USECASES).map((k) => <button key={k} type="button" className="ucbtn" aria-pressed={uc === k} onClick={() => setUc(k)}>{k}</button>)}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {LAYERS.map(([l, ic], i) => { const Ic = EI[ic]; return (
                <div key={l} className="layer">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Ic size={16} color="var(--blue-300)" /><span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--p200)' }}>{l}</span></div>
                  <div key={uc} className="fadein" style={{ fontSize: 14.5, color: '#fff' }}>{USECASES[uc][i]}</div>
                </div>); })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Build() {
  const S = [['Discover', 'We listen to your requirements, and to your real calls. We map how your team handles them today.'], ['Build', 'We design the agent, its voice and its integrations around your processes.'], ['Free Trial', 'Test internally with your team, or try it out with some of your live customers.'], ['Go live & tune', 'We monitor every call and keep improving the agent after launch.']];
  return (
    <section id="build" style={{ padding: '96px 0', background: 'var(--p50)', borderBottom: '1px solid var(--p100)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 44 }}>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,46px)', fontWeight: 700 }}>No templates. No shortcuts. Every agent is built for you.</h2>
        </div>
        <ol className="steps" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {S.map(([t, d], i) => (
            <li key={t} className="reveal" style={{ transitionDelay: i * 70 + 'ms', borderTop: '2px solid ' + (i === 0 ? 'var(--blue-400)' : 'var(--p200)'), paddingTop: 20 }}>
              <span className="tick" style={{ fontSize: 13, color: 'var(--p400)' }}>{String(i + 1).padStart(2, '0')}</span>
              <h3 style={{ fontSize: 20, fontWeight: 600, marginTop: 10 }}>{t}</h3>
              <p style={{ fontSize: 15, color: 'var(--p500)', marginTop: 8, lineHeight: 1.6 }}>{d}</p>
            </li>))}
        </ol>
      </div>
    </section>
  );
}

function Partner() {
  const W = [
    { ic: 'Users', t: 'Work directly with us', d: 'We build, run and look after your agents for you, from first call to ongoing tuning.' },
    { ic: 'Send', t: 'Resell OptusEcho', d: 'Offer OptusEcho to your own clients under our name. We handle the build and support, you keep the relationship.' },
    { ic: 'Layers', t: 'White label it', d: 'Sell the platform as your own, with your brand, your pricing and your customers. We stay in the background.' },
  ];
  return (
    <section id="partner" style={{ padding: '96px 0 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 44 }}>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,46px)', fontWeight: 700 }}>Work with us your way.</h2>
          <p style={{ fontSize: 17.5, color: 'var(--p500)', marginTop: 18, lineHeight: 1.6 }}>We’re easy and flexible. Choose the arrangement that suits your business, and change it as you grow.</p>
        </div>
        <div className="feat3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {W.map((w, i) => { const Ic = EI[w.ic] || EI.Check; return (
            <article key={w.t} className="fcard reveal" style={{ transitionDelay: i * 80 + 'ms' }}>
              <span className="icbox"><Ic size={21} /></span>
              <h3 style={{ fontSize: 21, fontWeight: 600, marginTop: 6 }}>{w.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--p500)', lineHeight: 1.6 }}>{w.d}</p>
            </article>); })}
        </div>
      </div>
    </section>
  );
}

function ECta() {
  return (
    <section style={{ padding: '48px 0 96px' }}>
      <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 }}>Hear it on your own calls.</h2>
            <p style={{ fontSize: 17, color: 'var(--p200)', marginTop: 14, lineHeight: 1.6 }}>Tell us what your phones deal with and we’ll show you an agent built for it.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <EBtn size="lg" variant="secondary" iconRight={<EI.ChevronRight size={19} />} onClick={openEchoDemo}>Book a demo</EBtn>
            <EBtn size="lg" variant="ghost" style={{ color: '#fff' }} onClick={go('demo')}>Try the live demo</EBtn>
          </div>
        </div>
      </div>
    </section>
  );
}

function EFooter() {
  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={ELOGO + 'OptusEcho.png'} alt="OptusEcho" style={{ height: 28 }} />
          <a href={IOPTUS} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--p500)', borderLeft: '1px solid var(--p100)', paddingLeft: 18 }}>An <img src={ELOGO + '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 Widget() {
  const [show, setShow] = useSt(false);
  useEf(() => { const el = document.getElementById('demo'); if (!el) return; const io = new IntersectionObserver(([e]) => setShow(!e.isIntersecting), { threshold: 0.05 }); io.observe(el); return () => io.disconnect(); }, []);
  return <button type="button" className="widget" aria-hidden={!show} tabIndex={show ? 0 : -1} style={{ opacity: show ? 1 : 0, pointerEvents: show ? 'auto' : 'none', transform: show ? 'none' : 'translateY(12px)' }} aria-label="Talk to OptusEcho" onClick={() => { go('demo')(); setTimeout(() => window.dispatchEvent(new Event('echo:start')), 500); }}><span className="wo"><EI.Mic size={17} color="#fff" /></span><span className="wl">Talk to OptusEcho</span></button>;
}

function EApp() {
  useRevealE();
  return (<React.Fragment><ENav /><main><EHero /><Features /><Agnostic /><Build /><Partner /><ECta /></main><EFooter /><Widget /></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<EApp />);