// Simple line illustrations of the three phone types (no product photos): 0 entry desk phone, 1 executive touchscreen, 2 cordless DECT
function PhoneArt({ kind }) {
  const line = { fill: '#fff', stroke: 'var(--oc-navy)', strokeWidth: 2.5, strokeLinejoin: 'round' };
  const keys = (x0, y0, dx, dy, r = 2.6) => Array.from({ length: 12 }, (_, i) => <circle key={i} cx={x0 + (i % 3) * dx} cy={y0 + Math.floor(i / 3) * dy} r={r} fill="var(--oc-navy)" opacity=".75" />);
  const desk = (screen) => <>
    <path d="M30 60 L104 60 L112 104 Q113 110 107 110 L27 110 Q21 110 22 104 Z" {...line} />
    <rect x="12" y="44" width="24" height="64" rx="11" {...line} /><rect x="17" y="51" width="14" height="7" rx="3.5" fill="var(--oc-blue-100)" /><rect x="17" y="94" width="14" height="7" rx="3.5" fill="var(--oc-blue-100)" />
    {screen}
  </>;
  const art = [
    desk(<><rect x="50" y="66" width="44" height="15" rx="3" fill="var(--oc-blue-100)" stroke="var(--oc-navy)" strokeWidth="2" /><rect x="55" y="71" width="20" height="2.5" rx="1.2" fill="var(--oc-navy)" opacity=".5" />{keys(60, 88, 12, 6.2, 2.3)}</>),
    desk(<><rect x="46" y="64" width="54" height="30" rx="4" fill="var(--oc-blue)" stroke="var(--oc-navy)" strokeWidth="2" /><rect x="51" y="69" width="13" height="9" rx="2" fill="#fff" opacity=".9" /><rect x="67" y="69" width="13" height="9" rx="2" fill="#fff" opacity=".55" /><rect x="83" y="69" width="12" height="9" rx="2" fill="var(--oc-cyan)" /><rect x="51" y="82" width="44" height="3" rx="1.5" fill="#fff" opacity=".5" />
      <path d="M58 100 h30" stroke="var(--oc-navy)" strokeWidth="2.5" strokeLinecap="round" /></>),
    <>
      <rect x="66" y="78" width="46" height="32" rx="8" {...line} /><circle cx="80" cy="94" r="3" fill="var(--oc-cyan)" /><path d="M89 94 h14" stroke="var(--oc-navy)" strokeWidth="2.5" strokeLinecap="round" />
      <path d="M100 78 v-14" stroke="var(--oc-navy)" strokeWidth="2.5" strokeLinecap="round" />
      <path d="M14 100 Q14 94 20 94 L56 94 Q62 94 62 100 L62 106 Q62 110 58 110 L18 110 Q14 110 14 106 Z" {...line} />
      <rect x="24" y="16" width="28" height="84" rx="11" {...line} /><rect x="29" y="25" width="18" height="18" rx="3" fill="var(--oc-blue)" stroke="var(--oc-navy)" strokeWidth="2" />{keys(31, 52, 7, 7.5, 2.2)}
    </>,
  ][kind];
  return <svg viewBox="0 0 124 124" role="img" aria-label={['Desk phone with a small screen and keypad', 'Executive desk phone with a large color touchscreen', 'Cordless handset in its charger next to the base station'][kind]}>{art}</svg>;
}
const GROUPS = [['Phone', 'Calls', ['Auto attendant and IVR menus that route callers to the right person', 'Call routing by time of day, department or skill, with ring and hunt groups', 'Unlimited domestic calling with local, toll free and vanity numbers', 'Conference bridges with dial in numbers and moderator controls', 'AI receptionist picks up any call your team misses']], ['MessageSquare', 'Messaging', ['Voicemail transcribed and sent to email or SMS', 'Business SMS and texting from your business number', 'Mobile line texting from the phone you already carry', 'Call recording on demand or automatic, stored in the cloud']], ['Lock', 'Security and reliability', ['HD voice, encrypted with SRTP and TLS on every call', UPTIME + ' uptime on redundant data centers', 'Remote provisioning and firmware updates for every desk phone', 'Role based admin permissions and audit friendly call records']]];
const MOBILE = [['Uses your phone\'s own dialer', 'Calls and texts go through the built in dialer and messaging app. Nothing to open, no Wi-Fi needed.'], ['Business and personal stay separate', 'Customers see your business number and name. You know which line is ringing before you answer.'], ['Business texts, too', 'Send and receive SMS from your business number. Customers never see your personal number.'], ['Setup in 5 minutes', 'We send a QR code. You scan it. Your business line is live on your phone.'], ['Real cellular, not an app', 'Calls use the cellular network, so quality holds up anywhere you have signal.']];
const CALLOUTS = [['Live calls and peak hours', 'Active calls, peak call times and total minutes for the whole domain, with CDR export on a schedule.'], ['Users, extensions and queues', 'Add subscribers, assign extensions and build ring all, round robin, linear and cascade queues.'], ['Auto attendant and time of day routing', 'Multi level menus, business hours routing, holiday schedules and failover rules.']];
const PHONES = [['T33G', 'Entry'], ['T54W', 'Executive'], ['W70B and W56H', 'Cordless DECT']];
function PhoneScreen({ onContact }) {
  return <>
    <section className="hero on-navy" aria-labelledby="hero-title"><div className="grid-lines" aria-hidden="true"></div><Container><div className="hero-grid">
      <div className="reveal"><h1 id="hero-title" className="display" style={{ fontSize: 48 }}>Desk phones, cell phones and an AI receptionist, on one system.</h1>
        <p className="lead" style={{ marginTop: 24 }}>Cloud hosted VoIP desk phones, a second business line on your cell phone and an AI receptionist that never misses a call. One provider, one platform.</p>
        <div className="btn-row" style={{ marginTop: 36 }}><CallButton size="lg" /><DS.Button size="lg" variant="secondary" onDark onClick={onContact}>Book a free demo</DS.Button></div></div>
      <div className="reveal"><PortalFrame label="The OneCloud admin portal home screen for the Riverside Dental demo domain"><PortalHome /></PortalFrame></div>
    </div></Container></section>
    <Section id="voip" labelledBy="voip-title"><Head id="voip-title" title="Big company phone features at small business prices." lead="Everything you'd expect from a big company phone system, without the big company price tag." />
      <div className="feature-lists">{GROUPS.map(([ic, t, items], n) => <div key={t} className="reveal" style={{ transitionDelay: n * 50 + 'ms' }}><Tile icon={ic} size={48} /><h3 style={{ marginTop: 16 }}>{t}</h3><ul>{items.map(x => <li key={x}><span className="ico" aria-hidden="true"><DS.Icon name="Check" size={16} strokeWidth={2.5} /></span><span>{x}</span></li>)}</ul></div>)}</div>
    </Section>
    <Section tone="subtle" labelledBy="desk-title"><div className="split desk">
      <div><div className="grid cols-3" style={{ gap: 16 }}>{PHONES.map(([m, tier], n) => <div key={m} className="card reveal" style={{ padding: 16, textAlign: 'center', transitionDelay: n * 50 + 'ms' }}><div className="phone-art"><PhoneArt kind={n} /></div><div style={{ fontWeight: 700, color: 'var(--oc-text-strong)' }}>{m}</div><div className="caption" style={{ marginTop: 4 }}>{tier}</div></div>)}</div>
        <div className="chips" style={{ marginTop: 16 }} aria-label="Phone features">{['HD audio', 'Color display', 'PoE', 'Bluetooth', 'Gigabit', 'DECT cordless'].map(t => <span className="chip" key={t}>{t}</span>)}</div></div>
      <div className="reveal"><h2 id="desk-title">Yealink desk phones, configured before they ship.</h2><p className="lead" style={{ marginTop: 12 }}>Need phones in the office? We deploy Yealink IP phones pre configured and ready to go. Plug in, pick up and start calling.</p>
        <ul className="checks" style={{ marginTop: 24 }}>{['Yealink T series (T33G, T46U, T54W, T57W), from basic to executive', 'Phones arrive provisioned and ready to plug in', 'HD wideband audio with noise cancellation', 'Bluetooth and Wi-Fi on premium models', 'Expansion modules for busy reception desks', 'Same system and numbers as the AI receptionist and mobile line', 'Firmware and configuration handled remotely'].map(l => <Check key={l}>{l}</Check>)}</ul></div>
    </div></Section>
    <Section id="mobile" labelledBy="mobile-title"><Head id="mobile-title" title="Your business line on your cell phone, with no app." lead="Plenty of people never touch a desk phone, but they still want business calls and texts kept separate from personal. We do that on the phone you already carry." />
      <div className="split" style={{ gridTemplateColumns: '2fr 1fr', alignItems: 'start', gap: 32 }}>
        <div className="two-col-list reveal">{MOBILE.map(([t, b]) => <div key={t}><h3 style={{ fontSize: 18 }}>{t}</h3><p className="small">{b}</p></div>)}</div>
        <div className="on-navy reveal" style={{ background: 'var(--oc-navy)', borderRadius: 32, padding: '48px 24px', textAlign: 'center', boxShadow: 'var(--shadow-card)' }} role="img" aria-label="Incoming business call on a cell phone"><div style={{ display: 'flex', justifyContent: 'center', color: 'var(--oc-cyan)' }}><DS.Icon name="Phone" size={40} strokeWidth={1.5} /></div><div style={{ fontWeight: 700, fontSize: 22, marginTop: 12, color: '#fff' }}>Sarah Johnson</div><p className="small" style={{ marginTop: 4 }}>Business line, Riverside Dental</p><DS.Badge tone="cyan" style={{ marginTop: 16 }}>Business call</DS.Badge><div style={{ display: 'flex', justifyContent: 'center', gap: 32, marginTop: 56 }}><span style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--oc-red-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><DS.Icon name="PhoneOff" size={26} /></span><span style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--oc-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><DS.Icon name="Phone" size={26} /></span></div></div>
      </div>
    </Section>
    <Section id="dashboard" tone="subtle" labelledBy="portal-title"><Head id="portal-title" title="Manage every line from one portal." lead="Users, hunt groups, call queues, auto attendants and real time analytics, all from your browser." />
      <div className="split" style={{ gridTemplateColumns: '1.3fr .7fr' }}><div className="reveal"><PortalFrame label="The OneCloud admin portal domain statistics screen"><PortalStats /></PortalFrame></div><div className="callouts reveal">{CALLOUTS.map(([t, b], n) => <div key={t} className="callout"><span className="n num" aria-hidden="true">{n + 1}</span><div><h3 style={{ fontSize: 18 }}>{t}</h3><p className="small" style={{ marginTop: 4 }}>{b}</p></div></div>)}</div></div>
    </Section>
    <Section labelledBy="why-title"><Head id="why-title" title="A Texas phone company, not a reseller." />
      <div className="grid cols-3 reveal">{[['Building2', 'Building business phone systems in ' + HQ + ' since 2008.'], ['RadioTower', 'Real cellular for the mobile line, not a Wi-Fi app.'], ['Handshake', 'White glove setup and a real person when you call support.']].map(([ic, t]) => <div key={t} style={{ display: 'flex', gap: 16, alignItems: 'center' }}><Tile icon={ic} size={48} /><p style={{ fontWeight: 600, color: 'var(--oc-text-strong)' }}>{t}</p></div>)}</div>
    </Section>
  </>;
}
Object.assign(window, { PhoneScreen });