/* OpSpot — Fleet bento (ported from the original opspot.ai "Named workers" section). */
const { useState: useStateFleet } = React;

function Fleet() {
  return (
    <section className="section-pad" id="fleet" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal className="sec-head">
          <span className="kicker"><b>03</b> · The workers</span>
          <h2 className="display" style={{ marginTop: 14 }}>Named workers. Real jobs.</h2>
          <p>Eight AI employees, mixed and matched to your business. Each one plugs into your phones, inbox, calendar, CRM, and tools — not a chatbot floating beside them. They log every action and ask before they spend money or speak for you.</p>
        </Reveal>

        <div className="fleet-grid">
          <Reveal className="cell span-6 tall" style={{ '--c1': 'oklch(0.62 0.20 295)', '--c2': 'oklch(0.52 0.22 285)' }}>
            <div className="h"><span className="ag" /> AI Receptionist</div>
            <h3>Answers every call.<br />Books the job. Never sleeps.</h3>
            <p>Picks up in two rings, qualifies the caller, books to your calendar, and texts a confirmation — at 2pm or 2am.</p>
            <div className="viz">
              <div className="recep-wave">
                {Array.from({ length: 32 }).map((_, i) => (
                  <span key={i} style={{ animationDelay: `${i * 50}ms` }} />
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={1} className="cell span-6 tall" style={{ '--c1': 'oklch(0.74 0.16 65)', '--c2': 'oklch(0.64 0.19 48)' }}>
            <div className="h"><span className="ag" /> Sales Agent</div>
            <h3>Quotes, proposals, and chase.<br />Approvals on the big ones.</h3>
            <p>Drafts quotes from your price book, replies to inbound leads, and runs nurture sequences. You approve anything over your set threshold.</p>
            <div className="viz">
              <div className="pipe">
                <div className="col">Intake
                  <div className="card">L. Cheng · roof quote</div>
                </div>
                <div className="col">Qualified
                  <div className="card b">Ridge HVAC · $8.4k</div>
                </div>
                <div className="col">Proposal
                  <div className="card b">Bayside Café · $2.1k</div>
                </div>
                <div className="col">Won
                  <div className="card c">Northgate Auto · $4.6k</div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={2} className="cell span-4" style={{ '--c1': 'oklch(0.60 0.18 245)', '--c2': 'oklch(0.50 0.20 250)' }}>
            <div className="h"><span className="ag" /> Follow-up Agent</div>
            <h3>Nudges every lead until it converts or dies.</h3>
            <div className="viz">
              <div className="thread">
                <div className="bub"><small>Day 1 · SMS</small>Hey Dana — quote ready when you are.</div>
                <div className="bub me"><small>Day 3 · SMS</small>Holding the Tue 9:30 slot for you?</div>
                <div className="bub"><small>Day 3 · Reply</small>Yes please. Book it.</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={3} className="cell span-4" style={{ '--c1': 'oklch(0.58 0.16 155)', '--c2': 'oklch(0.50 0.17 150)' }}>
            <div className="h"><span className="ag" /> Booking Agent</div>
            <h3>Owns your calendar. Routes the right tech to the right job.</h3>
            <div className="viz">
              <div className="cal">
                {Array.from({ length: 14 }).map((_, i) => {
                  const isBook = [1, 3, 5, 8, 10, 12].includes(i);
                  const isNew = [9, 13].includes(i);
                  return <div key={i} className={`d ${isBook ? 'book' : ''} ${isNew ? 'new' : ''}`}>{(i % 7) + 9}</div>;
                })}
              </div>
            </div>
          </Reveal>

          <Reveal delay={4} className="cell span-4" style={{ '--c1': 'oklch(0.64 0.14 200)', '--c2': 'oklch(0.54 0.15 210)' }}>
            <div className="h"><span className="ag" /> Inventory Tracker</div>
            <h3>Watches stock. Reorders before you run out.</h3>
            <div className="viz">
              <div className="inv">
                <div className="ir"><span>Gaskets 6mm</span><div className="bar"><span style={{ width: '18%' }} className="low" /></div><span>18%</span></div>
                <div className="ir"><span>Filter A-12</span><div className="bar"><span style={{ width: '64%' }} /></div><span>64%</span></div>
                <div className="ir"><span>Pipe 1/2&quot;</span><div className="bar"><span style={{ width: '82%' }} /></div><span>82%</span></div>
                <div className="ir"><span>Coupler 3/4</span><div className="bar"><span style={{ width: '22%' }} className="low" /></div><span>22%</span></div>
                <div className="ir"><span>Sealant T-7</span><div className="bar"><span style={{ width: '71%' }} /></div><span>71%</span></div>
              </div>
            </div>
          </Reveal>

          <Reveal className="cell span-6" style={{ '--c1': 'oklch(0.58 0.16 155)', '--c2': 'oklch(0.50 0.17 135)' }}>
            <div className="h"><span className="ag" /> Content &amp; Ads Agent</div>
            <h3>Posts the work. Pauses the losers.</h3>
            <p>Turns this week's completed jobs into reels and posts. Manages Meta/Google ads with hard daily caps.</p>
            <div className="viz">
              <div className="ads">
                <div className="tile">
                  <div className="meta"><span>Reel · Draft</span><span className="ctr">queued</span></div>
                  Before/after — kitchen reno walkthrough
                </div>
                <div className="tile">
                  <div className="meta"><span>Meta · Live</span><span className="ctr">CTR 2.4%</span></div>
                  “Same-day plumbing” — radius 12mi
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={1} className="cell span-6" style={{ '--c1': 'oklch(0.54 0.17 275)', '--c2': 'oklch(0.46 0.18 280)' }}>
            <div className="h"><span className="ag" /> Ops Coordinator + Custom CRM/Software</div>
            <h3>The wiring between everything. Built to your shape.</h3>
            <p>Routes work between agents, syncs to your tools, and — when an off-the-shelf CRM doesn't fit — we ship custom software in the same install.</p>
            <div className="ops">
              <svg viewBox="0 0 400 160" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="opg" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0" stopColor="oklch(0.55 0.18 275)" stopOpacity=".75" />
                    <stop offset="1" stopColor="oklch(0.6 0.14 205)" stopOpacity=".75" />
                  </linearGradient>
                </defs>
                {[
                  ['M 40 80 C 100 30, 160 30, 200 80', 0],
                  ['M 40 80 C 100 130, 160 130, 200 80', .3],
                  ['M 200 80 C 260 30, 320 30, 360 80', .6],
                  ['M 200 80 C 260 130, 320 130, 360 80', .9],
                ].map(([d, dly], i) => (
                  <path key={i} d={d} fill="none" stroke="url(#opg)" strokeWidth="1.5" strokeDasharray="4 6" style={{ animation: `dash 4s linear infinite`, animationDelay: `${dly}s` }} />
                ))}
                {[[40, 80], [200, 80], [360, 80], [120, 30], [120, 130], [280, 30], [280, 130]].map(([x, y], i) => (
                  <g key={i}>
                    <circle cx={x} cy={y} r="14" fill="#ffffff" stroke="oklch(0.55 0.18 275 / .55)" strokeWidth="1" />
                    <circle cx={x} cy={y} r="4" fill="oklch(0.52 0.18 275)" />
                  </g>
                ))}
              </svg>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Fleet });