const CAR_STAGES = [['Legacy TDM switch', 'Aging hardware, limited capacity, shrinking vendor support.'], ['Phased OneCloud migration', 'Cut over in stages, planned for zero downtime.'], ['Modern VoIP platform', 'Room to grow, modern subscriber features, ready for fiber.']];
const CAR_REASONS = [['Switch vendors are consolidating', 'Acquisitions and exits are ending support and new hardware sales for some platforms.'], ['Aging hardware costs more each year', 'Maintenance costs rise and replacement parts get harder to find.'], ['FCC and NECA changes', 'Regulatory changes can affect network performance requirements and reimbursement.'], ['Subscribers expect modern features', 'Mobile integration, call recording, conferencing and self-service portals.'], ['Fiber and broadband build-outs', 'FTTH projects, including USDA ReConnect and state grants, put new load on older switches.'], ['Support windows are closing', 'Sunset dates and a shrinking parts supply leave less time to plan.']];
const CAR_STEPS = [['Assess', "We review your switch's capacity, condition and traffic, and the risks of waiting."], ['Evaluate', 'We map your goals and model the financial and regulatory impact of each option.'], ['Design and build', 'A phased plan that duplicates your call flows exactly and keeps PSTN interconnection working.'], ['Support', 'After cutover: re-cabling, LATA compliance, FCC filings and NECA settlement continuity.']];
const CAR_HANDLE = [['Hardware re-cabling', 'The full physical move from copper to IP connectivity.'], ['Call flow duplication', 'Your existing routing rebuilt on VoIP, with no change for subscribers.'], ['PSTN interoperability', 'Interconnection kept working during and after the migration.'], ['LATA compliance and FCC filings', 'The regulatory paperwork and documentation, prepared and filed.'], ['NECA settlement continuity', 'Settlement revenue keeps flowing through the transition.'], ['Revenue impact analysis', 'A business case modeled before you commit to anything.']];
const CAR_WHY = [['Support you can reach', 'A dedicated account manager, 24/7 NOC monitoring and direct access to our engineers.'], ['A platform for growth', 'VoIP that supports your fiber, USDA ReConnect and broadband projects.'], ['Rural experience', 'We know large, sparsely populated territories, NECA pooling and what it means to be the only local provider.']];
const SALES_EMAIL = 'sales@onecloudnetworks.com';

function CarrierForm() {
  const [v, setV] = React.useState({ name: '', company: '', email: '', phone: '', msg: '' }); const [err, setErr] = React.useState({});
  const [busy, setBusy] = React.useState(false); const [sent, setSent] = React.useState(false);
  const set = k => ev => setV(s => ({ ...s, [k]: ev.target.value }));
  const submit = ev => { ev.preventDefault(); const e = {}; if (!v.name.trim()) e.name = 'Enter your name'; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v.email)) e.email = 'Enter a valid email address'; if (v.phone && v.phone.replace(/\D/g, '').length !== 10) e.phone = 'Enter a 10-digit phone number'; setErr(e); if (Object.keys(e).length) return; setBusy(true); sendForm('Website: carrier inquiry', { name: v.name, company: v.company, email: v.email, phone: v.phone, message: v.msg, page: location.href }).then(() => setSent(true), () => setErr({ form: FORM_FAIL })).finally(() => setBusy(false)); };
  if (sent) return <div className="card car-form" role="status"><span className="tile" aria-hidden="true"><DS.Icon name="Check" size={28} /></span><h3 style={{ marginTop: 18 }}>Message sent.</h3><p style={{ marginTop: 8 }}>Thanks for reaching out. We'll reply within 1 business hour.</p></div>;
  return <form className="card car-form" onSubmit={submit} noValidate>
    <div className="car-form-row"><DS.Input label="Your name" value={v.name} onChange={set('name')} error={err.name} autoComplete="name" /><DS.Input label="Company or carrier" value={v.company} onChange={set('company')} autoComplete="organization" /></div>
    <div className="car-form-row"><DS.Input label="Email" type="email" value={v.email} onChange={set('email')} error={err.email} autoComplete="email" /><DS.Input label="Phone (optional)" type="tel" value={v.phone} onChange={set('phone')} error={err.phone} autoComplete="tel" /></div>
    <DS.Input label="Tell us about your network" multiline rows={4} value={v.msg} onChange={set('msg')} placeholder="Switch make and model, line count, what you're trying to do" />
    {err.form && <p role="alert" className="small" style={{ color: '#b42318' }}>{err.form}</p>}
    <div><DS.Button size="lg" type="submit" loading={busy}>Send message</DS.Button></div>
  </form>;
}

function CarriersScreen() {
  const [step, setStep] = React.useState(-1); // hovered process step; the line fills up to it
  const toForm = e => { e.preventDefault(); const el = document.getElementById('carrier-contact'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 88, behavior: 'smooth' }); };
  return <>
    <section className="hero on-navy" aria-labelledby="hero-title"><Container><div className="hero-grid">
      <div className="reveal"><p className="caption" style={{ fontWeight: 700, color: 'var(--oc-cyan)', marginBottom: 20 }}>For ILECs and CLECs</p>
        <h1 id="hero-title" className="display">Grow your switch or migrate it, without losing control.</h1>
        <p className="lead" style={{ marginTop: 24, maxWidth: 520 }}>Phased switch migrations and VoIP expansion for independent telcos, with NECA settlements, LATA compliance and FCC filings handled.</p>
        <div className="btn-row" style={{ marginTop: 36 }}><CallButton size="lg" /><DS.Button size="lg" variant="secondary" onDark href="#carrier-contact" onClick={toForm}>Book a consultation</DS.Button></div>
      </div>
      <div className="car-path reveal" aria-label="Migration path">
        <ol className="car-stages">{CAR_STAGES.map(([t, b], n) => <li key={t} className={'car-stage s' + (n + 1)} style={{ '--d': n }}><span className="car-stage-n num" aria-hidden="true">{n + 1}</span><div><p className="car-stage-t">{t}</p><p className="small">{b}</p></div></li>)}</ol>
        <ul className="car-chips">{['NECA compliant', 'LATA compliant', 'Planned for zero downtime'].map(c => <li key={c}><DS.Icon name="Check" size={14} strokeWidth={2.5} />{c}</li>)}</ul>
      </div>
    </div></Container></section>

    <Container><div className="car-proof reveal"><p>Rural ILECs in multiple states already work with us on switch modernization, fiber and broadband growth, and subscriber growth.</p>
      <Stats items={[['50+ years', 'Combined telecom experience on the team'], [UPTIME, 'Uptime SLA', 90], ['24/7', 'Network operations center monitoring']]} /></div></Container>

    <Section labelledBy="why-title"><div className="car-split">
      <div className="reveal"><h2 id="why-title" className="car-h2">Why carriers are planning migrations now</h2><p className="lead" style={{ marginTop: 16 }}>Carriers that plan early keep their options. Waiting tends to mean higher costs, less vendor support and lost subscribers.</p></div>
      <div className="car-reasons">{CAR_REASONS.map(([t, b], n) => <div key={t} className="reveal" style={{ transitionDelay: (n % 2) * 50 + 'ms' }}><h3>{t}</h3><p className="small">{b}</p></div>)}</div>
    </div></Section>

    <Section id="carrier-process" tone="subtle" labelledBy="proc-title"><Head id="proc-title" title="A phased migration, with you in control at every step." lead="A switch migration is technical, financial and regulatory work. We plan all three together." />
      <ol className="grid cols-4 steps" onMouseLeave={() => setStep(-1)}>{CAR_STEPS.map(([t, b], n) => <li key={t} className={'step' + (n < step ? ' fill' : '') + (n <= step ? ' lit' : '')} onMouseEnter={() => setStep(n)}><div className="reveal" style={{ transitionDelay: n * 50 + 'ms' }}><span className="step-n num">{n + 1}</span><h3>{t}</h3><p className="small" style={{ marginTop: 8 }}>{b}</p></div></li>)}</ol>
    </Section>

    <Section labelledBy="handle-title"><Head id="handle-title" title="What we handle for you" lead="From the copper to the paperwork." />
      <div className="grid cols-3">{CAR_HANDLE.map(([t, b], n) => <div key={t} className="card reveal" style={{ transitionDelay: (Math.min(n, 5) * 50) + 'ms' }}><h3 style={{ fontSize: 19 }}>{t}</h3><p className="small" style={{ marginTop: 8 }}>{b}</p></div>)}</div>
    </Section>

    <Section tone="subtle" labelledBy="grow-title"><div className="car-split car-grow">
      <div className="reveal"><h2 id="grow-title" className="car-h2">Grow without a full migration.</h2><p className="lead" style={{ marginTop: 16 }}>You don't have to retire your switch yet. Run it alongside VoIP and move services over when it makes sense.</p></div>
      <div className="car-compare"><span className="car-arrow" aria-hidden="true"><DS.Icon name="ArrowRight" size={18} /></span>
        <div className="card reveal"><h3>Stays on your switch</h3><ul className="car-plain">{['Existing subscribers', 'Current call routing and features', 'Settlement and billing as they run today'].map(t => <li key={t}>{t}</li>)}</ul></div>
        <div className="card car-voip reveal" style={{ transitionDelay: '50ms' }}><h3>Moves to VoIP</h3><ul className="checks">{['Mobile extensions for subscribers', 'New customers, while existing ones stay on the switch', 'Remote sites over SIP trunking, with LTE backup'].map(t => <Check key={t}>{t}</Check>)}</ul></div>
      </div>
    </div></Section>

    <Section labelledBy="telco-title"><div className="car-split">
      <div className="reveal"><h2 id="telco-title" className="car-h2">Why independent telcos choose OneCloud</h2></div>
      <div className="car-why">{CAR_WHY.map(([t, b]) => <div key={t} className="reveal"><h3>{t}</h3><p>{b}</p></div>)}</div>
    </div></Section>

    <Section id="carrier-contact" tone="subtle" labelledBy="talk-title"><div className="car-split">
      <div className="reveal"><h2 id="talk-title" className="car-h2">Talk through your options.</h2><p className="lead" style={{ marginTop: 16 }}>Migrating now or planning ahead, we'll walk through what makes sense for your network. We reply within 1 business hour.</p>
        <p className="car-contact"><a href={TEL} className="num">{PHONE}</a><a href={'mailto:' + SALES_EMAIL}>{SALES_EMAIL}</a></p></div>
      <div className="reveal"><CarrierForm /></div>
    </div></Section>
  </>;
}
Object.assign(window, { CarriersScreen });