const STEPS = [['Phone', 'Call comes in', 'A customer calls your business number. Your AI picks up on the first ring, including nights, weekends and holidays.'], ['Target', 'AI qualifies the caller', 'It asks the right questions: what they need, when they are available and how urgent it is.'], ['Zap', 'Takes action instantly', 'Books the appointment. Answers pricing questions. Routes emergencies to your cell. Sends a confirmation text.'], ['Inbox', 'You stay in the loop', 'A full summary by text or email: who called, what they needed and what your AI did about it.']];
const FEATURES = [['CalendarDays', 'Appointment scheduling', 'Books, reschedules and cancels, with automatic text confirmations.'], ['CircleHelp', 'FAQ handling', 'Hours, services, pricing and directions, trained on your business.'], ['Target', 'Smart call routing', 'Emergencies and hot leads go straight to you. Routine calls stay with AI.'], ['FileText', 'Message taking', 'Caller name, reason and callback number, delivered instantly.'], ['Globe', 'Multilingual', 'English, Spanish and more, so you can expand your reach without hiring.'], ['ChartColumn', 'Call analytics', 'Every call, booking and question, so you can see the trends.']];
function HomeScreen({ onContact }) {
  const [step, setStep] = React.useState(-1); // hovered How it works step; the line fills up to it
  return <>
    <section className="hero on-navy" aria-labelledby="hero-title"><Container><div className="hero-grid">
      <div className="reveal"><p className="caption" style={{ fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--oc-blue-on-navy)', marginBottom: 20 }}>AI receptionist</p>
        <h1 id="hero-title" className="display">Every call answered, even when you're on a job.</h1>
        <p className="lead" style={{ marginTop: 24, maxWidth: 520 }}>24/7 phone answering that books appointments, handles FAQs, takes messages and routes calls, so you can stay on the job.</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>
        <ul className="checks" style={{ display: 'flex', gap: 22, marginTop: 28, flexWrap: 'wrap' }}>{['No setup fees', 'No long-term contracts', 'Cancel anytime'].map(t => <Check key={t}>{t}</Check>)}</ul>
      </div>
      <div className="reveal lc-wrap"><LiveCall /></div>
    </div></Container></section>
    <Section id="industries" tone="navy" labelledBy="ind-title"><Head id="ind-title" title="Hear it answer for your industry." lead="Call any line below. An AI receptionist picks up as a real business in that industry, trained the way yours would be." /><div className="reveal"><IndustryCarousel /></div></Section>
    <Container><Stats items={[['Since 2008', 'Building business phone systems', 1990], [UPTIME, 'Uptime', 90], ['24/7', 'Answered on the first ring']]} /></Container>
    <Section id="how-ai-works" labelledBy="how-title"><Head id="how-title" title="From missed call to booked customer." lead="No app to install. No staff to train. Your AI receptionist handles calls on your existing business line." />
      <ol className="grid cols-4 steps" onMouseLeave={() => setStep(-1)}>{STEPS.map(([ic, 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 tone="subtle" labelledBy="feat-title"><Head id="feat-title" title="What your receptionist handles" lead="No extra apps. No complex setup. Just a receptionist that does the job." />
      <div className="grid bento" style={{ gridTemplateColumns: 'repeat(12,1fr)', gap: 20 }}>
        <div className="card reveal" style={{ gridColumn: 'span 5', gridRow: 'span 2', display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '32px 32px 0' }}><Tile icon="Phone" /><h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-.02em', margin: '18px 0 8px' }}>24/7 call answering</h3><p style={{ fontSize: 16 }}>Never miss a call again. Your AI answers every incoming call, day or night, holiday or weekend.</p></div>
          <div style={{ marginTop: 'auto', padding: 32 }}><div className="caption num" style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', marginBottom: 8 }}><span>12 AM</span><span>6 AM</span><span>12 PM</span><span>6 PM</span><span>12 AM</span></div><div aria-hidden="true" style={{ display: 'grid', gridTemplateColumns: 'repeat(24,1fr)', gap: 3 }}>{Array.from({ length: 24 }, (_, h) => <div key={h} className="hour-bar" style={{ '--h': h, height: 34, borderRadius: 4, background: h < 8 || h >= 18 ? 'var(--oc-blue-100)' : 'var(--oc-blue)' }} />)}</div><div className="caption" style={{ display: 'flex', gap: 18, marginTop: 12 }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--oc-blue)' }} />Business hours</span><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--oc-blue-100)' }} />After hours, still answered</span></div></div>
        </div>
        {FEATURES.map(([ic, t, b], n) => <div key={t} className="card reveal" style={{ gridColumn: 'span ' + [4, 3, 3, 4, 6, 6][n], padding: 24, transitionDelay: (Math.min(n, 5) * 50) + 'ms' }}><Tile icon={ic} size={44} /><h3 style={{ fontSize: 18, margin: '14px 0 6px' }}>{t}</h3><p className="small">{b}</p></div>)}
      </div>
    </Section>
    <Section tone="subtle" tight labelledBy="price-title"><div className="reveal price" style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', borderRadius: 24, overflow: 'hidden', border: '1px solid var(--oc-line)', background: '#fff', boxShadow: 'var(--shadow-card)' }}>
      <div style={{ padding: 48 }}><h2 id="price-title">Affordable plans for every business size.</h2><p className="lead" style={{ marginTop: 12 }}>Starting at less than what you'd pay a part-time receptionist.</p><ul className="checks" style={{ marginTop: 24 }}>{['No setup fees', 'No long-term contracts, cancel anytime', 'White glove setup and custom AI training included', 'Works with your existing business number'].map(t => <Check key={t}>{t}</Check>)}</ul></div>
      <div className="on-navy" style={{ background: 'var(--oc-navy)', padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 20 }}><div><div className="caption" style={{ fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--oc-blue-on-navy)' }}>Plans from</div><div className="num" style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}><span style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-.03em', lineHeight: 1, color: '#fff' }}><CountUp value="$500" from={100} duration={900} /></span><span style={{ fontSize: 17 }}>/ month</span></div></div><div style={{ height: 1, background: 'rgba(255,255,255,.14)' }} /><div><div style={{ fontWeight: 700, color: '#fff' }}>AI receptionist plans</div><p className="small" style={{ marginTop: 4 }}>Quoted on your monthly call volume and number of lines. One call gets you a number.</p></div><CallButton size="lg" /></div>
    </div></Section>
  </>;
}
Object.assign(window, { HomeScreen });