// AI.jsx — Full-bleed dark section showcasing AI inside the consultancy

const AIBand = ({ onCta }) => (
  <section className="ai-band" id="ai">
    <div className="container">
      <div className="section-header reveal" style={{ maxWidth: 760 }}>
        <div className="eyebrow"><span className="mark"/>AI INSIDE THE PRACTICE</div>
        <h2>AI runs the matching, the review, and the first-line voice work.</h2>
        <p>
          Acerti is not an AI startup. We are a consultancy that has rebuilt the
          unglamorous middle of services delivery &mdash; sourcing, code review,
          tier-1 support &mdash; on top of AI. The savings flow through to you.
        </p>
      </div>

      <div className="ai-grid">
        <div className="ai-points reveal">
          {[
            { n: "01", title: "AI-vetted talent matching", body: "4,000+ consultants scored on past assignments, skills, English fluency, and client feedback. Three-engineer shortlist in under five seconds." },
            { n: "02", title: "AI code review on every PR", body: "Static analysis, security checks, and pattern-matching against your codebase. Roughly 30% fewer production defects in past deployments." },
            { n: "03", title: "AI voice agents for tier-1", body: "20+ languages, sub-second latency, scripted hand-off to human consultants. Typical inbound deflection: ~70%." },
            { n: "04", title: "AI project estimation", body: "Past-engagement data feeds estimation for new SOWs. Variance from final invoice has narrowed to under 12%." },
          ].map((p) => (
            <div className="ai-point" key={p.n}>
              <div className="num">{p.n}</div>
              <div>
                <h4 className="title-md">{p.title}</h4>
                <p>{p.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="reveal" data-d="2">
          <VoiceTerminal/>
        </div>
      </div>
    </div>
  </section>
);

const VoiceTerminal = () => (
  <div className="voice-terminal">
    <div className="vline sys"><span className="who">19:42:01</span><span>Inbound call accepted &middot; en-US &middot; intent: order-status</span></div>
    <div className="vline"><span className="who">agent</span><span className="said">Hi, this is Mia from West-Ridge Outdoors. I can pull up an order &mdash; what's your order number?</span></div>
    <div className="vline user"><span className="who">caller</span><span className="said">Yeah, hi, it's 89241.</span></div>
    <div className="vline"><span className="who">agent</span><span className="said">Got it &mdash; order 89241 for Jordan, shipped Tuesday, delivered today at 11:14am. Anything else?</span></div>
    <div className="vline user"><span className="who">caller</span><span className="said">Actually, the tent pole's bent. Can someone help with a return?</span></div>
    <div className="vline sys"><span className="who">19:42:38</span><span>Confidence threshold passed &middot; transferring to human consultant &middot; queue: returns-tier-2</span></div>
    <div className="vline"><span className="who">agent</span><span className="said">Of course &mdash; I'll bring in a returns specialist right now. Two seconds.</span></div>
    <div className="voice-meter">
      <span>Latency 320ms &middot; CSAT pred. 4.6 &middot; deflected 73%</span>
      <span className="wave"><span/><span/><span/><span/><span/></span>
    </div>
  </div>
);

Object.assign(window, { AIBand, VoiceTerminal });