// About hero visual: Plano HQ with lines out to the DFW cities we serve. Positions are projected from real coordinates.
const DFW = [['Plano', -96.70, 33.02, 'r'], ['Frisco', -96.82, 33.15, 'l'], ['McKinney', -96.62, 33.20, 'r'], ['Allen', -96.67, 33.10, 'r'], ['Richardson', -96.73, 32.95, 'r'], ['Dallas', -96.80, 32.78, 'r'], ['Arlington', -97.11, 32.74, 'b'], ['Fort Worth', -97.33, 32.75, 'b']];
const dfwXY = (lon, lat) => [40 + (lon + 97.4) / 0.9 * 440, 40 + (33.25 - lat) / 0.6 * 330];
function DfwMap() {
  const [hx, hy] = dfwXY(DFW[0][1], DFW[0][2]);
  return <div className="dfw reveal">
    <div className="dfw-copy"><p className="caption">Local since 2008</p><h2 className="dfw-title">Headquartered in {HQ}. Serving all of DFW.</h2>
      <ul className="dfw-facts">{[['Building2', HQ + ', Texas', 'Our team, our support desk and our network operations'], ['Headphones', '24/7', 'Real people answering, not an offshore script'], ['Activity', UPTIME, 'Uptime on redundant infrastructure']].map(([ic, t, b]) => <li key={t}><span className="dfw-ic" aria-hidden="true"><DS.Icon name={ic} size={18} /></span><span><strong className="num">{t}</strong><span>{b}</span></span></li>)}</ul></div>
    <svg className="dfw-map" viewBox="0 0 520 410" role="img" aria-label={'Map of the Dallas Fort Worth area showing our ' + HQ + ' headquarters and the cities we serve'}>
      {[85, 211, 338].map((r, n) => <circle key={r} className="dfw-ring" cx={hx} cy={hy} r={r} style={{ '--n': n }} />)}
      {DFW.slice(1).map(([c, lon, lat], n) => { const [x, y] = dfwXY(lon, lat); return <line key={c} className="dfw-spoke" x1={hx} y1={hy} x2={x} y2={y} pathLength="1" style={{ '--n': n }} />; })}
      {DFW.map(([c, lon, lat, side], n) => { const [x, y] = dfwXY(lon, lat); const hq = n === 0; const lx = side === 'l' ? x - 12 : side === 'b' ? x : x + 12, ly = side === 'b' ? y + 24 : y + 5;
        return <g key={c} className={'dfw-city' + (hq ? ' is-hq' : '')} style={{ '--n': n }}>{hq && <circle cx={x} cy={y} r="16" className="dfw-halo" />}<circle cx={x} cy={y} r={hq ? 7 : 4.5} /><text x={lx} y={ly} textAnchor={side === 'l' ? 'end' : side === 'b' ? 'middle' : 'start'}>{hq ? c + ' HQ' : c}</text></g>; })}
    </svg>
  </div>;
}
const WHAT = [['Bot', 'AI receptionist', '24/7 call answering, appointment booking and call routing. Never miss a customer again.', 'home', 'See AI receptionist'], ['Cloud', 'Business VoIP', 'Cloud hosted phone systems that scale with your business. Works on any device, anywhere.', 'phone', 'See business VoIP'], ['Smartphone', 'Mobile integration', 'Your business line on your cell phone, on the cellular network. Clear everywhere you have signal.', 'phone', 'See mobile integration'], ['Globe', 'Carrier solutions', 'Switch migration, network expansion and infrastructure services for ILECs and CLECs.', 'carriers', 'See carrier solutions']];
const VALUES = [['Always on', UPTIME + ' uptime on redundant infrastructure across multiple data centers. Your calls keep flowing and our support team keeps answering.'], ['Local expertise', 'Based in ' + HQ + ', Texas, serving DFW since 2008. When you call support you get a real person who understands your market, not a script.'], ['AI built in', 'We build AI into the foundation of the phone system instead of bolting it on, so every business gets the same tools from day one.'], ['Customer success', 'White glove setup, custom AI training and real human support when you need it. Your success is our success.']];
const CITIES = ['Dallas', 'Plano', 'Frisco', 'McKinney', 'Allen', 'Richardson', 'Arlington', 'Fort Worth'];
function AboutScreen({ onContact, go }) {
  return <>
    <section className="hero on-navy" aria-labelledby="hero-title" style={{ textAlign: 'center' }}><div className="grid-lines" aria-hidden="true"></div><Container>
      <div className="reveal" style={{ maxWidth: 860, margin: '0 auto' }}><h1 id="hero-title" className="display" style={{ fontSize: 48 }}>Business phone systems from DFW, with AI built in.</h1><p className="lead" style={{ margin: '20px auto 0' }}>Every business deserves the same communication tools the big companies have. From AI receptionists to carrier infrastructure, we modernize how companies connect with their customers.</p><div className="btn-row" style={{ marginTop: 32, justifyContent: 'center' }}><CallButton size="lg" /><DS.Button size="lg" variant="secondary" onDark onClick={onContact}>Book a free demo</DS.Button></div></div>
      <div style={{ maxWidth: 1040, margin: '56px auto 0' }}><DfwMap /></div>
    </Container></section>
    <Section labelledBy="story-title"><div className="split" style={{ gridTemplateColumns: '1fr 1.4fr', alignItems: 'start' }}>
      <div className="reveal"><h2 id="story-title">Serving DFW businesses since 2008.</h2></div>
      <div className="reveal" style={{ display: 'grid', gap: 18 }}>
        <p>OneCloud Networks was built on a simple belief: every business deserves the same communication tools the big companies have, regardless of size. We started in the heart of DFW, serving local businesses with reliable, cloud hosted VoIP phone systems that work the way you need them to.</p>
        <p>We saw the frustration businesses faced with missed calls, long hold times and outdated phone systems. So we introduced AI receptionists that answer every call 24/7, book appointments and route calls intelligently without a human in between. Suddenly small businesses could compete like enterprises.</p>
        <p>Today we serve small and medium sized businesses across DFW and nationwide. We also help ILECs and CLECs with switch migrations, infrastructure expansion and network integration, all with Texas based support.</p>
      </div>
    </div></Section>
    <Section tone="subtle" labelledBy="what-title"><Head id="what-title" title="Four ways we keep you connected" lead="From AI call answering to carrier infrastructure, we handle the full range of business communications." />
      <div className="grid cols-4">{WHAT.map(([ic, t, b, k, l], n) => <div key={t} className="card link reveal"><Tile icon={ic} /><h3 style={{ margin: '16px 0 8px' }}>{t}</h3><p className="small">{b}</p><a href={pathFor(k)} onClick={e => { e.preventDefault(); go(k); }} style={{ display: 'inline-block', marginTop: 14, fontWeight: 700, fontSize: 15, color: 'var(--oc-blue)' }}>{l}</a></div>)}</div>
    </Section>
    <Section labelledBy="values-title"><Head id="values-title" title="What we stand for" /><div className="two-col-list reveal">{VALUES.map(([t, b]) => <div key={t}><h3>{t}</h3><p className="small">{b}</p></div>)}</div></Section>
    <Section tone="subtle" labelledBy="area-title"><Head id="area-title" center title="Serving businesses across DFW" lead={'Based in ' + HQ + ', we support companies throughout the Dallas Fort Worth area and beyond.'} /><div className="chips reveal" style={{ justifyContent: 'center' }}>{CITIES.map(c => <span className="chip" key={c}>{c}</span>)}</div></Section>
  </>;
}
function NotFound({ go }) {
  return <Section labelledBy="nf-title"><div className="reveal" style={{ maxWidth: 560, margin: '0 auto', textAlign: 'center', padding: '64px 0' }}><p className="caption" style={{ fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--oc-blue)' }}>404</p><h1 id="nf-title" style={{ marginTop: 12 }}>We can't find that page.</h1><p className="lead" style={{ margin: '16px auto 0' }}>Call us and a real person will point you the right way, or jump to one of the main pages.</p><div style={{ marginTop: 28 }}><CallButton size="lg" /></div><nav aria-label="Main pages" style={{ display: 'flex', gap: 20, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>{[['home', 'AI receptionist'], ['phone', 'Phone systems'], ['about', 'About']].map(([k, l]) => <a key={k} href={pathFor(k)} onClick={e => { e.preventDefault(); go(k); }} style={{ fontWeight: 600 }}>{l}</a>)}</nav></div></Section>;
}
Object.assign(window, { AboutScreen, NotFound });