/* global React */
const { useState } = React;

// ============================================================
// FAQ component (shared)
// ============================================================
function FAQ({ items, eyebrow = "FAQ", title = "Common questions" }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">{eyebrow}</span>
          <h2>{title}</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="plus">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                </span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Pipeline (How It Works deep-dive)
// ============================================================
function Pipeline() {
  const steps = [
    {
      title: 'Lead hits your form',
      desc: 'Your CRM fires its usual webhook — nothing about that changes. Vexara listens silently in the background, no new tools for your team.',
      detail: [
        ['Trigger', 'CRM webhook · form #'],
        ['Latency', <span className="v accent">~3s</span>],
        ['Source', 'Inbound web / chat / SMS'],
        ['Action', 'Lead routed to agent']
      ]
    },
    {
      title: 'Vexara picks up the signal',
      desc: 'Within seconds, our AI scores intent against 40+ signals — site behavior, CRM history, recency, vehicle / property / service viewed.',
      detail: [
        ['Intent score', <span className="v accent">0.81 / 1.0</span>],
        ['Signals', '40+ inputs'],
        ['Routing', 'High-intent · live call'],
        ['Fallback', 'SMS if no answer × 2']
      ]
    },
    {
      title: 'Outbound call dialing',
      desc: 'Vexara calls as your business — never as “Vexara.” TCPA-verified consent, regional voice, warm and natural. Time-to-first-word under 600ms.',
      detail: [
        ['Caller ID', 'Your business'],
        ['Voice', 'Custom · regional'],
        ['TTFW', <span className="v accent">540 ms</span>],
        ['Compliance', 'TCPA · DNC scrubbed']
      ]
    },
    {
      title: 'Qualifies in 90 seconds',
      desc: 'Confirms interest, checks timeline, asks the one question that decides buyer vs tire-kicker. Handles objections without pressure.',
      detail: [
        ['Avg duration', '1m 47s'],
        ['Qualification', 'Timeline · budget · trade'],
        ['Objection model', 'Empathic · no-pressure'],
        ['Hand-off', 'Live transfer if requested']
      ]
    },
    {
      title: 'Books the next step',
      desc: 'Appointment, site visit, consultation, or a specific-time callback. Never the vague "someone will reach out."',
      detail: [
        ['Outputs', 'Appt · visit · consult · callback'],
        ['Calendar sync', 'Direct · agent calendar'],
        ['Confirmation', 'SMS + email · auto'],
        ['Reminder', '24h + 2h before']
      ]
    },
    {
      title: 'Logs everything to your CRM',
      desc: 'Outcome, sentiment, objections raised, booked datetime, full transcript. Your team arrives to an already-sorted pipeline.',
      detail: [
        ['Logged fields', '14 standard + custom'],
        ['Transcript', 'Full · searchable'],
        ['Sentiment', 'Per-utterance scoring'],
        ['Recording', 'Stored 90 days · encrypted']
      ]
    }
  ];
  return (
    <section>
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">End-to-end</span>
          <h2>Six steps from form-fill to booked appointment.</h2>
          <p className="lead">Every step is observable, auditable, and synced back to your CRM in real-time. No black boxes.</p>
        </div>
        <div className="pipeline">
          {steps.map((s, i) => (
            <div key={i} className="pipeline-step">
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
              <div className="pipeline-detail">
                {s.detail.map(([k, v], j) => (
                  <div key={j} className="row">
                    <span className="k">{k}</span>
                    {typeof v === 'string' ? <span className="v">{v}</span> : v}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Compliance band
// ============================================================
function Compliance() {
  const items = [
    { icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 2l9 4v6c0 5-3.5 9-9 10C6.5 21 3 17 3 12V6l9-4z"/></svg>,
      h: 'TCPA-compliant', p: 'Consent verification on every outbound call. DNC list scrubbing. Time-of-day rules per state.' },
    { icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>,
      h: 'SOC 2-aligned', p: 'Encrypted at rest and in transit. Audit logs for every agent action. Role-based access for your team.' },
    { icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>,
      h: 'Human escalation', p: 'Any caller can request a real human at any moment. Vexara never pretends to be human if asked directly.' }
  ];
  return (
    <section className="compliance-band">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Trust & compliance</span>
          <h2>Built for regulated industries from day one.</h2>
        </div>
        <div className="compliance-grid">
          {items.map((it, i) => (
            <div key={i} className="compliance-item">
              <div className="icon">{it.icon}</div>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Dealer flow (Auto Dealerships page)
// ============================================================
function DealerFlow() {
  return (
    <section>
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">The wedge</span>
          <h2>Why auto dealerships were our first market.</h2>
          <p className="lead">The problem is acute. The math is clean. The infrastructure — VinSolutions, DealerSocket, Elead — maps perfectly onto our agent stack.</p>
        </div>
        <div className="dealer-flow">
          <div className="dealer-flow-card">
            <span className="tag">Problem</span>
            <h4>Lead-response is broken after 6pm</h4>
            <p>40% of dealership leads come in after hours. Industry average response time: 17 hours. By morning, the lead has already filled out three competitor forms.</p>
          </div>
          <div className="dealer-flow-card">
            <span className="tag">Solution</span>
            <h4>60-second AI callback as your store</h4>
            <p>Vexara picks up the lead, calls within 60 seconds, qualifies, books the test drive — synced to VinSolutions before your BDC opens.</p>
          </div>
          <div className="dealer-flow-card">
            <span className="tag">Outcome</span>
            <h4>3× after-hours booking rate</h4>
            <p>Same lead volume. Same CRM. 3× the bookings making it onto Saturday's drive list. The math pays for itself the first weekend.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Integrations grid (used on auto dealerships page)
// ============================================================
function Integrations() {
  const dms = ['VinSolutions', 'DealerSocket', 'Elead', 'CDK Drive', 'Reynolds & Reynolds', 'Dealertrack', 'AutoAlert', 'XtreamService'];
  return (
    <section>
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Integrations</span>
          <h2>Drops into the stack you already run.</h2>
          <p className="lead">Typical integration time on major dealership CRMs: under one hour. No replatforming, no migrations, no new tools for your BDC.</p>
        </div>
        <div className="integration-grid">
          {dms.map(d => <div key={d} className="integration-card">{d}</div>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ, Pipeline, Compliance, DealerFlow, Integrations });