/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// CONTACT — single source of truth
// ============================================================
// Vexara's inbound line is answered by Riley (Vapi inbound assistant) —
// caller hits the receptionist who qualifies and books a demo. Same number
// can be reached 24/7 because the receiver is AI; humans pick up follow-ups
// during business hours.
const VEXARA_PHONE_TEL = '+12563718343';
const VEXARA_PHONE_DISPLAY = '(256) 371-8343';
const VEXARA_EMAIL = 'hello@vexaraai.com';

// ============================================================
// LOGO
// ============================================================
function Logo({ size = 26 }) {
  return (
    <a href="/" className="logo" aria-label="Vexara AI home">
      <span className="logo-mark" style={{ width: size, height: size }}>
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M5 5L12 14L19 5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M5 13L12 22L19 13" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" opacity="0.45"/>
        </svg>
      </span>
      <span>vexara<span style={{ color: 'var(--accent)' }}>.</span></span>
    </a>
  );
}

// ============================================================
// NAV
// ============================================================
function Nav({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 32);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <Logo />
        <nav className="nav-links" aria-label="Primary">
          <a href="/#shifts">Solutions</a>
          <a href="/industries/auto-dealerships/">Industries</a>
          <a href="/how-it-works/">How it works</a>
          <a href="/#roi">ROI</a>
          <a href="/#footer">Company</a>
        </nav>
        <div className="nav-cta">
          <button
            onClick={onToggleTheme}
            aria-label="Toggle theme"
            style={{
              width: 36, height: 36, borderRadius: 8,
              border: '1px solid var(--line-strong)',
              background: 'var(--bg-elev)',
              display: 'grid', placeItems: 'center',
              color: 'var(--ink-muted)'
            }}
          >
            {theme === 'dark' ? (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
            ) : (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            )}
          </button>
          <a
            href={`tel:${VEXARA_PHONE_TEL}`}
            className="nav-call"
            aria-label={`Call Vexara at ${VEXARA_PHONE_DISPLAY}`}
            style={{
              display: 'flex', alignItems: 'center', gap: 6,
              fontSize: 13, color: 'var(--ink-muted)',
              padding: '0 4px', whiteSpace: 'nowrap'
            }}
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            {VEXARA_PHONE_DISPLAY}
          </a>
          <a href="/book-a-demo/" className="btn btn-primary btn-arrow">
            Book a demo
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M6.5 2.5L10 6 6.5 9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </header>
  );
}

// ============================================================
// HERO with lead-to-call animation
// ============================================================
function HeroCallCard() {
  const [step, setStep] = useState(0);
  // 0: nothing, 1: form submit, 2: webhook, 3: dialing, 4: connected, 5: qualified, 6: booked
  const stages = [
    { time: '7:42:03 PM', label: 'Lead submits form', sub: 'CRM webhook fires (form #2451)' },
    { time: '7:42:11 PM', label: 'Vexara picks up signal', sub: 'Lead routed · intent score: 0.81' },
    { time: '7:42:38 PM', label: 'Outbound call dialing', sub: 'Calling as your dealership · TCPA verified' },
    { time: '7:42:51 PM', label: 'Lead connected', sub: '"Hi Marcus, this is Riley with Northland Auto…"' },
    { time: '7:44:22 PM', label: 'Qualified · objection handled', sub: 'Timeline: this weekend · trade-in: yes' },
    { time: '7:45:07 PM', label: 'Test-drive booked', sub: 'Saturday 10:30 AM · logged to VinSolutions' },
  ];

  useEffect(() => {
    let i = 0;
    const tick = () => {
      i = (i + 1) % (stages.length + 2);
      setStep(i);
    };
    const interval = setInterval(tick, 1400);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="callcard" aria-hidden="true">
      <div className="callcard-head">
        <span className="label">Live · Lead-to-Call</span>
        <span className="latency">
          <span className="pulse"></span>
          <span style={{ fontFeatureSettings: "'tnum'" }}>
            {step >= 3 ? `${Math.min((step - 2) * 12 + 11, 60)}s latency` : 'standby'}
          </span>
        </span>
      </div>
      <div className="callcard-stages">
        {stages.map((s, idx) => {
          const active = step > idx;
          const done = step > idx + 1;
          const current = step === idx + 1;
          return (
            <div key={idx} className={`stage ${active ? 'active' : ''} ${done ? 'done' : ''} ${current ? 'current' : ''}`}>
              <span className="timestamp">{s.time}</span>
              <span className="label">
                {s.label}
                <span className="sub">{s.sub}</span>
              </span>
              <span className="marker">
                <span className="num">{idx + 1}</span>
                <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5L5 9L9.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
            </div>
          );
        })}
      </div>
      <div className="callcard-foot">
        <span className="crm-pill">
          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><circle cx="5" cy="5" r="3"/></svg>
          Synced to VinSolutions
        </span>
        <span>Conversation #VX-2451 · est. lift +3.4×</span>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid-bg" aria-hidden="true"></div>
      <div className="container hero-inner">
        <div>
          <span className="hero-pill">
            <span className="tag">v2</span>
            Now live for auto dealerships in 14 states
          </span>
          <h1>
            The 60-second<br/>
            <em className="accent">lead-response</em> agent.
          </h1>
          <p className="hero-sub">
            Vexara calls every inbound lead in under a minute, qualifies them, and books the next step — as your business, on your CRM, around the clock. No new tools for your team to learn.
          </p>
          <div className="hero-actions">
            <a href="/book-a-demo/" className="btn btn-primary btn-arrow">
              Book a 20-minute demo
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M6.5 2.5L10 6 6.5 9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#how" className="btn btn-ghost">See how it works</a>
          </div>
          <div className="hero-trust">
            <span>SOC 2-aligned</span>
            <span className="dot"></span>
            <span>TCPA-compliant</span>
            <span className="dot"></span>
            <span>&lt;1 hr setup</span>
          </div>
        </div>
        <HeroCallCard />
      </div>
    </section>
  );
}

// ============================================================
// CRM logos band
// ============================================================
function LogosBand() {
  return (
    <section className="logos-band" style={{ padding: '48px 0' }}>
      <div className="container">
        <div className="logos-band-label">Plugs into the stack you already run</div>
        <div className="logos-row">
          {['VinSolutions', 'DealerSocket', 'Elead', 'HubSpot', 'Salesforce', 'ServiceTitan'].map(n => (
            <span key={n} className="crm-name">{n}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SHIFTS
// ============================================================
function Shifts() {
  const cards = [
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
      title: 'After-Hours Response',
      desc: 'A lead hits your form at 8 pm. Vexara calls them back in 60 seconds, qualifies them, and books the next step — before your team starts tomorrow.',
      meta1: 'Avg latency', val1: '60s',
      meta2: 'Coverage', val2: '24/7'
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>,
      title: 'Morning Prioritization',
      desc: 'Every morning at 7 am, Vexara scores every open lead on intent — site behavior, CRM history, recency — and hands reps a ranked call list with exactly what to say.',
      meta1: 'Runs at', val1: '7:00 AM',
      meta2: 'Signals', val2: '40+'
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 12a9 9 0 0 1 15.3-6.4L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15.3 6.4L3 16"/><path d="M3 21v-5h5"/></svg>,
      title: 'Cross-Sell Triggers',
      desc: 'Vexara reads every support interaction, service record, or lifecycle event for signals a customer is ready for the next purchase — then drafts the outreach. Your team hits send.',
      meta1: 'Reads', val1: 'CRM + service',
      meta2: 'Output', val2: 'Drafted msg'
    }
  ];
  return (
    <section id="shifts">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Solutions</span>
          <h2>Three shifts we run for you.</h2>
          <p className="lead">Vexara sits on top of your existing CRM. Your team keeps its workflow. Your leads stop dying between shifts.</p>
        </div>
        <div className="shifts-grid">
          {cards.map((c, i) => (
            <div key={i} className="shift-card">
              <div className="shift-icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="shift-meta">
                <span>{c.meta1} · <span className="v">{c.val1}</span></span>
                <span>{c.meta2} · <span className="v">{c.val2}</span></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TRANSCRIPT — scroll-driven
// ============================================================
const TRANSCRIPT = [
  { who: 'agent', name: 'Vexara · as Northland Auto', text: "Hi Marcus, this is Riley calling from Northland Auto — you just submitted an inquiry on the 2024 4Runner. Got a quick second?" },
  { who: 'lead', name: 'Marcus (lead)', text: "Yeah — wow, that was fast. I literally just hit submit." },
  { who: 'agent', name: 'Vexara', text: "We try to catch you while it's still top of mind. Are you trading something in, or is this an addition?" },
  { who: 'lead', name: 'Marcus', text: "Trading my '19 Tacoma. Maybe this weekend if the numbers work." },
  { who: 'agent', name: 'Vexara', text: "Got it. Saturday 10:30 works — I can hold a 4Runner with the tow package and have a trade quote ready. Sound good?" },
  { who: 'lead', name: 'Marcus', text: "Yeah, lock it in." },
  { who: 'agent', name: 'Vexara', text: "Booked. You'll get a confirmation text and Tony, your sales advisor, will meet you at the showroom." }
];

function Transcript() {
  const [visible, setVisible] = useState(0);
  const sectionRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          // progressively reveal
          let i = 0;
          const tick = () => {
            i++;
            setVisible(i);
            if (i < TRANSCRIPT.length) setTimeout(tick, 700);
          };
          tick();
          obs.disconnect();
        }
      });
    }, { threshold: 0.25 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="transcript-section" ref={sectionRef} id="how">
      <div className="container">
        <div className="transcript-wrap">
          <div className="transcript-sticky">
            <span className="eyebrow">How it runs</span>
            <h2>A real call, on tape.</h2>
            <p className="lead">Vexara handles the call as your business — never as &ldquo;Vexara.&rdquo; Warm, regionally neutral, no robotic latency. Every call is logged, transcribed, and synced back to your CRM with sentiment, objections, and the booked datetime.</p>
            <div className="transcript-meta">
              <div className="item">
                <div className="k">Time to first word</div>
                <div className="v">540 ms</div>
              </div>
              <div className="item">
                <div className="k">Voice model</div>
                <div className="v">Custom · regional</div>
              </div>
              <div className="item">
                <div className="k">Outcome</div>
                <div className="v">Test-drive booked</div>
              </div>
              <div className="item">
                <div className="k">CRM update</div>
                <div className="v">Auto-logged</div>
              </div>
            </div>
          </div>
          <div className="transcript-feed">
            <div className="transcript-feed-head">
              <span>Conversation #VX-2451 · live</span>
              <span style={{ color: 'var(--success)' }}>● recording</span>
            </div>
            {TRANSCRIPT.map((b, i) => (
              <div key={i} className={`bubble ${b.who} ${i < visible ? 'visible' : ''}`}>
                <span className="who">{b.name}</span>
                {b.text}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// STATS BAND
// ============================================================
function useCountUp(target, durationMs = 1400) {
  // Count-up that respects reduced-motion + only animates clean integers.
  // Non-numeric targets (e.g. "<1") pass through unchanged. Returns [value, ref].
  const ref = useRef(null);
  const numeric = /^\d+$/.test(target);
  const [val, setVal] = useState(numeric ? 0 : target);

  useEffect(() => {
    if (!numeric) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setVal(parseInt(target, 10)); return; }
    const node = ref.current;
    if (!node) return;
    let raf = 0;
    let started = false;
    const goal = parseInt(target, 10);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (!e.isIntersecting || started) return;
        started = true;
        const t0 = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - t0) / durationMs);
          const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
          setVal(Math.round(goal * eased));
          if (t < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
        obs.disconnect();
      });
    }, { threshold: 0.4 });
    obs.observe(node);
    return () => { obs.disconnect(); cancelAnimationFrame(raf); };
  }, [target, numeric, durationMs]);

  return [val, ref];
}

function StatCell({ num, unit, label }) {
  const [val, ref] = useCountUp(num);
  return (
    <div className="stat" ref={ref}>
      <div className="num">{val}<span className="unit">{unit}</span></div>
      <div className="label">{label}</div>
    </div>
  );
}

function Stats() {
  const stats = [
    { num: '60', unit: 's', label: 'Avg. callback latency after a lead submits' },
    { num: '3', unit: '×', label: 'More after-hours leads converting to bookings' },
    { num: '42', unit: '%', label: 'Of after-hours leads rescued from cold-lead queue' },
    { num: '<1', unit: 'hr', label: 'Typical integration time on major CRMs' }
  ];
  return (
    <section className="stats-band" style={{ padding: 0 }}>
      <div className="container" style={{ padding: '80px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <span className="eyebrow">Numbers</span>
          <span className="stats-disclaimer" style={{ margin: 0 }}>Illustrative — pending public case studies</span>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => (
            <StatCell key={i} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// INDUSTRIES
// ============================================================
function Industries() {
  const list = [
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 17h14M5 17v-5l2-5h10l2 5v5M5 17v3M19 17v3M7 17h.01M17 17h.01"/></svg>,
      title: 'Auto Dealerships',
      desc: 'After-hours form submissions, morning ISM call lists, service-to-sales trade-in triggers.',
      stack: 'VinSolutions · DealerSocket · Elead',
      badge: 'Flagship', flagship: true,
      href: '/industries/auto-dealerships/'
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 11l9-8 9 8M5 10v10h14V10"/></svg>,
      title: 'Real Estate Brokerages',
      desc: 'Vexara qualifies prospects, confirms the listing is still active, books showings into the agent\u2019s calendar.',
      stack: 'Follow Up Boss · kvCORE · Sierra',
      badge: 'Active build',
      href: '/industries/real-estate/'
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.5 2.5L13 10.5l1.7-2.7z"/></svg>,
      title: 'Home Services (HVAC, Roofing, Solar)',
      desc: 'Quote requests get a live callback in 60 seconds. Scheduled consultations land in dispatch with full intake captured.',
      stack: 'ServiceTitan · Housecall · Jobber',
      badge: 'Active build',
      href: '/industries/home-services/'
    },
    {
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 3l1.9 5.6L20 10l-5 3.5L17 20l-5-3-5 3 2-6.5L4 10l6.1-1.4z"/></svg>,
      title: 'Med Spas & Aesthetic Practices',
      desc: 'Consultation requests booked while the prospect is still on your site. Treatment-history-driven recall outreach.',
      stack: 'Boulevard · Mindbody · Aesthetic Record',
      badge: 'Active build',
      href: '/industries/med-spas/'
    }
  ];
  return (
    <section id="industries">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Industries</span>
          <h2>Built for businesses that live and die on fast follow-up.</h2>
          <p className="lead">If a missed call at 7 pm is a missed sale, Vexara is for you.</p>
        </div>
        <div className="industries-grid">
          {list.map((i, idx) => (
            <a key={idx} href={i.href} className="industry" style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className="industry-icon">{i.icon}</div>
              <div>
                <h3>{i.title}</h3>
                <p>{i.desc}</p>
                <div className="stack">{i.stack}</div>
              </div>
              <span className={`badge ${i.flagship ? 'flagship' : ''}`}>{i.badge}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ROI CALCULATOR
// ============================================================
function ROI() {
  const [leads, setLeads] = useState(400);
  const [acv, setAcv] = useState(2400);
  const [baseline, setBaseline] = useState(8);

  // Vexara rescue lift: ~3x baseline conversion on after-hours leads (~40% of leads)
  // Baseline is current conversion %; after-hours portion = 40%; lifted by 3x but capped.
  const afterHoursShare = 0.40;
  const liftedConversion = Math.min(baseline * 3, 60); // %
  const recoveredLeads = leads * afterHoursShare * ((liftedConversion - baseline) / 100);
  const monthlyRevenue = recoveredLeads * acv;
  const annualRevenue = monthlyRevenue * 12;

  const fmtMoney = (n) => '$' + Math.round(n).toLocaleString();

  return (
    <section id="roi">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">ROI calculator</span>
          <h2>What does a 60-second response actually return?</h2>
          <p className="lead">Drag the inputs to your numbers. The output assumes ~40% of inbound leads arrive after hours and Vexara converts them at 3× your current baseline.</p>
        </div>
        <div className="roi">
          <div className="roi-controls">
            <div className="roi-row">
              <label>Inbound leads / month <span className="val">{leads.toLocaleString()}</span></label>
              <input type="range" min="50" max="3000" step="50" value={leads} onChange={e => setLeads(+e.target.value)} />
            </div>
            <div className="roi-row">
              <label>Avg. customer value <span className="val">${acv.toLocaleString()}</span></label>
              <input type="range" min="200" max="20000" step="100" value={acv} onChange={e => setAcv(+e.target.value)} />
            </div>
            <div className="roi-row">
              <label>Current conversion rate <span className="val">{baseline}%</span></label>
              <input type="range" min="2" max="25" step="1" value={baseline} onChange={e => setBaseline(+e.target.value)} />
            </div>
            <div style={{ marginTop: 32, padding: 16, background: 'var(--bg-subtle)', borderRadius: 'var(--radius)', fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--ink)' }}>How it's calculated:</strong> 40% of your leads arrive after hours. Vexara converts those at 3× your current rate. The delta is incremental revenue Vexara captures without changing your team's workflow.
            </div>
          </div>
          <div className="roi-output">
            <div className="key">Estimated incremental revenue</div>
            <div className="big">{fmtMoney(annualRevenue)}<span className="unit">/yr</span></div>
            <div className="sub">≈ {fmtMoney(monthlyRevenue)} / month from rescued after-hours leads</div>
            <div className="breakdown">
              <div>
                <div className="b-k">Recovered leads / mo</div>
                <div className="b-v">{Math.round(recoveredLeads)}</div>
              </div>
              <div>
                <div className="b-k">Lifted conversion</div>
                <div className="b-v">{liftedConversion}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TESTIMONIAL
// ============================================================
function Testimonial() {
  return (
    <section className="testimonial">
      <div className="container">
        <blockquote>
          &ldquo;We used to lose every lead that came in after 6 pm. <span className="accent">Now they&rsquo;re booked before our BDC opens.</span> The math is unreal — Vexara paid for itself the first weekend.&rdquo;
          <cite>GM · 9-rooftop dealership group · Midwest</cite>
        </blockquote>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="final-cta-grid-bg" aria-hidden="true"></div>
      <div className="container">
        <h2>See Vexara running against a live CRM.</h2>
        <p>20-minute walkthrough — your stack, your flow, your exact integration path mapped out.</p>
        <div className="final-cta-actions">
          <a href="/book-a-demo/" className="btn btn-primary btn-arrow">
            Book a demo
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M6.5 2.5L10 6 6.5 9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#how" className="btn btn-ghost">See how it works</a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer id="footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <Logo />
            <p>AI agents for businesses whose revenue depends on catching a lead fast and following through.</p>
            <p style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-muted)' }}>
              <a href={`tel:${VEXARA_PHONE_TEL}`} style={{ color: 'inherit' }}>{VEXARA_PHONE_DISPLAY}</a>
              <span style={{ margin: '0 6px', opacity: 0.4 }}>·</span>
              <a href={`mailto:${VEXARA_EMAIL}`} style={{ color: 'inherit' }}>{VEXARA_EMAIL}</a>
            </p>
          </div>
          <div className="foot-col">
            <h4>Solutions</h4>
            <ul>
              <li><a href="/#shifts">After-hours response</a></li>
              <li><a href="/#shifts">Morning prioritization</a></li>
              <li><a href="/#shifts">Cross-sell triggers</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Industries</h4>
            <ul>
              <li><a href="/industries/auto-dealerships/">Auto dealerships</a></li>
              <li><a href="/industries/real-estate/">Real estate</a></li>
              <li><a href="/industries/home-services/">Home services</a></li>
              <li><a href="/industries/med-spas/">Med spas</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <ul>
              <li><a href="/how-it-works/">How it works</a></li>
              <li><a href="/#roi">ROI</a></li>
              <li><a href="/book-a-demo/">Book a demo</a></li>
              <li><a href="/blog/">Blog</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Trust</h4>
            <ul>
              <li><a href="#footer">SOC 2-aligned</a></li>
              <li><a href="#footer">TCPA compliance</a></li>
              <li><a href="#footer">Privacy</a></li>
              <li><a href="#footer">Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Vexara AI · All rights reserved</span>
          <span>Built for fast-follow-up businesses</span>
        </div>
      </div>
    </footer>
  );
}

// Export
Object.assign(window, { Nav, Hero, LogosBand, Shifts, Transcript, Stats, Industries, ROI, Testimonial, FinalCTA, Footer, Logo });
