// Remaining sections for Voco landing — bilingual dead-lead resurrection pivot (2026-04-22).
// Sections: Proof strip, Metrics (the graveyard), Meet Sarah, Demo wrapper,
// Steps, Compliance, Pricing, FAQ, Final CTA, Footer.

const ProofStrip = () => (
  <section className="proof">
    <div className="container proof__inner proof__inner--cohort">
      <div className="proof__cohort-copy">
        <span className="proof__label">Pilot cohort — now open</span>
        <span className="proof__headline">5 seats for independent P&amp;C agencies in AZ, TX, FL, CA, NV, NM.</span>
        <span className="proof__sub">Founder-led onboarding with AJ. No setup fee. $0 until a policy binds. Bilingual by default.</span>
      </div>
      <div className="proof__seats" aria-label="Pilot seats">
        <span className="proof__seat">Seat 1 — open</span>
        <span className="proof__seat">Seat 2 — open</span>
        <span className="proof__seat">Seat 3 — open</span>
        <span className="proof__seat">Seat 4 — open</span>
        <span className="proof__seat">Seat 5 — open</span>
      </div>
      <a className="proof__cta" href="#demo">Apply for a seat →</a>
    </div>
  </section>
);

const Metrics = () => (
  <section className="section section--alt" id="problem">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">The problem</div>
        <h2 className="h2">Every agency has a graveyard.</h2>
        <p className="lede">
          SmartFinancial, EverQuote, QuoteWizard, Datalot, Contactability. Thousands of leads
          you already paid for, called once, and wrote off as trash. A third of them, in the
          Sunbelt, answered the phone in Spanish — and nobody called them back.
        </p>
      </div>
      <div className="metrics">
        <div className="metric">
          <div className="metric__stat">5k–50k</div>
          <div className="metric__label">aged P&amp;C leads sitting in the average independent agency's CRM, untouched.</div>
          <div className="metric__source">Source: Voco pilot intake, 2026</div>
        </div>
        <div className="metric">
          <div className="metric__stat">$1–2B</div>
          <div className="metric__label">US independents spend a year on aggregator leads — most of it dies on first missed callback.</div>
          <div className="metric__source">Source: LendingTree / QuoteWizard S-1, industry reports</div>
        </div>
        <div className="metric">
          <div className="metric__stat">~33%</div>
          <div className="metric__label">of P&amp;C leads in AZ / TX / FL / CA primarily speak Spanish. Your producers don't.</div>
          <div className="metric__source">Source: US Census ACS, 2024</div>
        </div>
      </div>
      <blockquote className="quote-strip">
        "This old ass lead. Already called by me and everyone else in the market. Ugh, EverQuote lead — this is gonna be trash."
        <cite>— Every independent producer, right before quitting on a $40 lead</cite>
      </blockquote>
    </div>
  </section>
);

// ── Product / Meet Sarah ──────────────────────────
const IconPhone = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 01-2.2 2A19.8 19.8 0 011 4.2 2 2 0 014 2h3a2 2 0 012 1.7c.1.9.3 1.9.6 2.8a2 2 0 01-.4 2.1L8 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4c.9.3 1.9.5 2.8.6a2 2 0 011.8 2.1z"/></svg>;
const IconCalendar = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><line x1="16" y1="3" x2="16" y2="7"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="3" y1="11" x2="21" y2="11"/></svg>;
const IconShield = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>;
const IconGlobe = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></svg>;
const IconReport = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h12l4 4v12H4z"/><path d="M8 13h8M8 17h5"/></svg>;

const Product = () => (
  <section className="section" id="product">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">The product</div>
        <h2 className="h2">Meet Sarah — the agent your aged leads will actually take a call from.</h2>
        <p className="lede">Upload your dead list. Sarah dials each lead, detects language in the first two seconds, delivers the full compliance stack, and books the quote appointment with your licensed agent. You show up and bind.</p>
      </div>
      <div className="split">
        <div className="feature-list">
          <div className="feature-item">
            <div className="feature-item__icon"><IconPhone/></div>
            <div>
              <h3>Resurrects the leads you gave up on</h3>
              <p>Aged SmartFinancial, EverQuote, QuoteWizard, Datalot, Contactability, or your own AMS CSV. She references their original intake — this isn't a cold call.</p>
            </div>
          </div>
          <div className="feature-item">
            <div className="feature-item__icon"><IconGlobe/></div>
            <div>
              <h3>Bilingual. Native switch in two seconds.</h3>
              <p>Opens in English, switches to Spanish the moment the lead does — same voice, same script, no handoff. "Hablamos español" isn't a line item. It's the default.</p>
            </div>
          </div>
          <div className="feature-item">
            <div className="feature-item__icon"><IconCalendar/></div>
            <div>
              <h3>Books quote appointments mid-call</h3>
              <p>Checks your Google Calendar, offers real slots, confirms day and time. Writes the event and hands off warm to your licensed agent.</p>
            </div>
          </div>
          <div className="feature-item">
            <div className="feature-item__icon"><IconShield/></div>
            <div>
              <h3>Compliance on every call</h3>
              <p>AI disclosure within 10 seconds, recording disclosure, DNC honored, stayed-in-lane — evaluated natively on every conversation. Auditable in your dashboard, exportable on demand.</p>
            </div>
          </div>
        </div>
        <SarahTranscript/>
      </div>
    </div>
  </section>
);

const SarahTranscript = () => (
  <div className="transcript">
    <div className="transcript__head">
      <div className="transcript__caller">
        <div className="calllog__avatar" style={{ width: 38, height: 38, fontSize: 13 }}>MG</div>
        <div>
          <div className="transcript__caller-name">Maria Gutiérrez · SmartFinancial lead, Oct '25</div>
          <div className="transcript__caller-meta">+1 (602) 555-0184 · 02:08 · EN → ES</div>
        </div>
      </div>
      <div className="transcript__timer"><span className="rec"/>REC</div>
    </div>
    <div className="transcript__body">
      <div className="tline">
        <div className="tline__who tline__who--sarah">SARAH</div>
        <div className="tline__text">Hi Maria, this is Sarah, an AI assistant calling on behalf of [your agency]. This call may be recorded. Is now a good time for a quick chat?<span className="tag">AI disclosed</span></div>
      </div>
      <div className="tline">
        <div className="tline__who">MARIA</div>
        <div className="tline__text">¿Bueno? ¿Puede hablar español?</div>
      </div>
      <div className="tline">
        <div className="tline__who tline__who--sarah">SARAH</div>
        <div className="tline__text">Claro que sí. Le llamo porque pidió una cotización de seguro de auto en octubre por SmartFinancial, y creo que nadie logró contactarle completamente. ¿Todavía está buscando cobertura?<span className="tag">Switched to ES</span></div>
      </div>
      <div className="tline">
        <div className="tline__who">MARIA</div>
        <div className="tline__text">Sí, todavía pago mucho. Me gustaría comparar.</div>
      </div>
      <div className="tline">
        <div className="tline__who tline__who--sarah">SARAH</div>
        <div className="tline__text">Perfecto. Su agente está comparando varias aseguradoras ahorita. Le agendo una llamada rápida de 15 minutos — ¿qué día le queda esta semana?</div>
      </div>
      <div className="tline">
        <div className="tline__who">MARIA</div>
        <div className="tline__text">El jueves.</div>
      </div>
      <div className="tline">
        <div className="tline__who tline__who--sarah">SARAH</div>
        <div className="tline__text">Excelente. ¿Mañana o tarde?</div>
      </div>
      <div className="tline">
        <div className="tline__who">MARIA</div>
        <div className="tline__text">Por la tarde. Tipo dos.</div>
      </div>
      <div className="tline">
        <div className="tline__who tline__who--sarah">SARAH</div>
        <div className="tline__text">Listo — jueves a las dos de la tarde con su agente. Le llega la confirmación a su correo. Que tenga buen día, Maria.<span className="tag">Quote booked</span></div>
      </div>
    </div>
    <div className="transcript__foot">
      <div className="transcript__foot-left">
        <span className="check-mini"><span className="dot-live"/> AI disclosed</span>
        <span className="check-mini"><span className="dot-live"/> Recording disclosed</span>
        <span className="check-mini"><span className="dot-live"/> Booked in Spanish</span>
      </div>
      <span className="mono">calls/res-1184.json</span>
    </div>
  </div>
);

// ── Live call demo section wrapper ─────────────────
const DemoSection = () => (
  <section className="section section--alt" id="demo">
    <div className="container">
      <div className="section-head section-head--center">
        <div className="eyebrow" style={{ color: "var(--live)" }}>Try it now — no signup</div>
        <h2 className="h2">Hear Sarah. Right here. Right now.</h2>
        <p className="lede" style={{ margin: "0 auto" }}>
          Tap the button. She greets you exactly like she greets an aged lead —
          AI disclosure, recording disclosure, real conversation. Respond in
          English or Spanish; she switches mid-call.
        </p>
      </div>
      <CallDemo/>
    </div>
  </section>
);

// ── Steps ───────────────────────────────────────────
const Steps = () => (
  <section className="section" id="how">
    <div className="container">
      <div className="section-head section-head--center">
        <div className="eyebrow">How it works</div>
        <h2 className="h2">Three steps. Zero upfront cost.</h2>
        <p className="lede" style={{ margin: "0 auto" }}>Live in under 24 hours. Drop your dead list tonight, Sarah resurrects tomorrow.</p>
      </div>
      <div className="steps">
        <div className="step">
          <div className="step__num">01</div>
          <h3>Upload your graveyard</h3>
          <p>CSV export from SmartFinancial, EverQuote, QuoteWizard, Datalot, Contactability — or your AMS dead-lead report. Scrubbed against DNC + aged-consent windows automatically.</p>
        </div>
        <div className="step">
          <div className="step__num">02</div>
          <h3>Sarah resurrects them — bilingually</h3>
          <p>She dials each lead, switches EN ↔ ES in two seconds, references the original intake, and books the quote appointment on your calendar. Fully TCPA compliant. Every call recorded.</p>
        </div>
        <div className="step">
          <div className="step__num">03</div>
          <h3>You bind. You pay. Only then.</h3>
          <p>Your licensed agent works the quote. When a policy binds, you click "bound" in your dashboard — that fires the $75 outcome fee. No binds, no fees. Zero risk.</p>
        </div>
      </div>
    </div>
  </section>
);

// ── Compliance ─────────────────────────────────────
const Compliance = () => (
  <section className="section section--alt" id="compliance">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">Compliance</div>
        <h2 className="h2">Insurance-grade compliance. Bilingual. Native.</h2>
        <p className="lede">Built after the FCC's Feb 2024 AI voice ruling. Consent, disclosure, and DNC enforcement are foundational — in English and Spanish.</p>
      </div>
      <div className="comply">
        <div className="comply-card">
          <div className="comply-card__icon"><IconShield/></div>
          <h3>TCPA + FCC Feb 2024 ruling</h3>
          <p>AI disclosure within 10 seconds and recording disclosure within 15 — in the lead's language. Scrubbed against National DNC + state DNC + your internal list before every dial.</p>
        </div>
        <div className="comply-card">
          <div className="comply-card__icon"><IconShield/></div>
          <h3>Aged-consent windows</h3>
          <p>We only dial leads with documented intake consent under 18 months old. Lead vendor + intake date preserved for every record. Audit-ready on day one.</p>
        </div>
        <div className="comply-card">
          <div className="comply-card__icon"><IconShield/></div>
          <h3>Regulatory boundaries</h3>
          <p>Sarah never quotes premiums, recommends coverage, or gives advice. Appointment-setting only. Zero E&amp;O exposure on the call itself.</p>
        </div>
        <div className="comply-card">
          <div className="comply-card__icon"><IconShield/></div>
          <h3>Native compliance audit</h3>
          <p>Every call scored by ElevenLabs' native evaluation stack: AI disclosure, recording disclosure, DNC honored, stayed-in-lane. Transcript + audio + eval result stored per call.</p>
        </div>
      </div>
    </div>
  </section>
);

// ── Pricing ────────────────────────────────────────
const PLANS = [
  {
    name: "Pilot",
    price: "$0",
    unit: "setup",
    sub: "14 days. $0 per call. Pay only when a policy binds.",
    minutes: "Unlimited calls",
    overage: "$0 / min during pilot",
    outcome: "$75 per bound policy",
    cta: "Start the pilot",
    href: "#demo",
    tone: "signal",
    featured: true,
    tag: "Founding cohort",
    list: [
      "Upload your full aged-lead graveyard",
      "Bilingual EN + ES on every call",
      "Native ElevenLabs compliance evals",
      "Founder-led onboarding with AJ",
      "Cancel anytime — keep every policy bound",
    ],
  },
  {
    name: "Growth",
    price: "$199",
    unit: "/ mo",
    sub: "For agencies scaling past the pilot. Subscription covers inbound + renewals.",
    minutes: "2,000 min included",
    overage: "$0.08 / min after",
    outcome: "$50–100 per bound",
    cta: "Talk to AJ",
    href: "mailto:Hello@itsvoco.com",
    tone: "ghost",
    list: [
      "Everything in Pilot",
      "Inbound receptionist agent (EN + ES)",
      "Outbound renewal retention",
      "Direct AMS integration (Epic, HawkSoft, EZLynx, AMS360, Vertafore)",
      "Outcome dashboard + monthly ROI report",
    ],
  },
  {
    name: "Scale",
    price: "$499",
    unit: "/ mo",
    sub: "Multi-producer agencies, SIAA/Smart Choice clusters, and consolidators.",
    minutes: "10,000 min included",
    overage: "$0.06 / min after",
    outcome: "$50 per bound",
    cta: "Talk to AJ",
    href: "mailto:Hello@itsvoco.com",
    tone: "ghost",
    list: [
      "Everything in Growth",
      "Multi-location + team seats",
      "Cluster pricing for member agencies",
      "Priority support (< 1 hr Slack)",
      "Dedicated success manager",
    ],
  },
];

const OUTCOMES = [
  { label: "Quote booked",                 price: "$8",   detail: "Confirmed calendar event with your licensed agent — in EN or ES." },
  { label: "Bound policy (resurrection)",  price: "$75",  detail: "Policy from a resurrected aged lead binds in your AMS. The hero outcome." },
  { label: "Renters cross-sell bound",     price: "$35",  detail: "Sarah mentions bundling; a new renters policy binds." },
  { label: "Remarketing quote accepted",   price: "$45",  detail: "Policyholder accepts a remarketed quote. Saved account." },
  { label: "FNOL submitted (inbound)",     price: "$30",  detail: "After-hours claim intake — ACORD-aligned handoff to your agent." },
  { label: "Retained policyholder",        price: "$25",  detail: "Rate-hike call → policy retained in your AMS within 45 days." },
];

const Pricing = () => (
  <section className="section" id="pricing">
    <div className="container">
      <div className="section-head section-head--center">
        <div className="eyebrow">Pricing</div>
        <h2 className="h2">Pay-on-bind. Because it's your trash we're working.</h2>
        <p className="lede" style={{ margin: "0 auto" }}>
          The pilot is $0 until a policy binds. You already paid for the leads.
          You already paid for your producers' time. We get paid only when
          Sarah recovers dollars that were leaving your account.
        </p>
      </div>

      <div className="plans plans--3up">
        {PLANS.map((p) => (
          <div key={p.name} className={"plan" + (p.featured ? " plan--featured" : "")}>
            {p.tag && <span className="plan__tag">{p.tag}</span>}
            <div className="plan__name">{p.name}</div>
            <div className="plan__amount">
              <span className="plan__price">{p.price}</span>
              <span className="plan__unit">{p.unit}</span>
            </div>
            <p className="plan__sub">{p.sub}</p>
            <div className="plan__meter">
              <div className="plan__meter-row"><span>Calls</span><strong>{p.minutes}</strong></div>
              <div className="plan__meter-row"><span>Overage</span><strong>{p.overage}</strong></div>
              <div className="plan__meter-row"><span>Outcomes</span><strong>{p.outcome}</strong></div>
            </div>
            <ul className="plan__list">
              {p.list.map((l, i) => <li key={i}>{l}</li>)}
            </ul>
            <a
              href={p.href}
              className={"btn btn--full " + (p.tone === "signal" ? "btn--signal" : "btn--ghost")}
            >{p.cta} →</a>
          </div>
        ))}
      </div>

      <div className="enterprise">
        <div className="enterprise__text">
          <div className="eyebrow">Enterprise · MGA · Cluster</div>
          <div className="enterprise__title">MGAs, SIAA/Smart Choice clusters, and multi-state agency networks.</div>
          <p className="enterprise__sub">
            One contract, all member agencies onboarded. Volume-discounted bind
            fees. Custom compliance scripts by state. Optional pure-outcome
            pricing — you only pay when Sarah delivers a bound policy.
          </p>
        </div>
        <a href="mailto:Hello@itsvoco.com" className="btn btn--dark">Talk to AJ →</a>
      </div>

      <div className="outcomes">
        <div className="outcomes__head">
          <div className="eyebrow">Outcome catalog</div>
          <h3 className="outcomes__title">You only pay when Sarah delivers a measurable win.</h3>
          <p className="outcomes__sub">
            Every outcome fee ties to a webhook from your AMS, calendar, or
            attestation click — with the call transcript, language, timestamp,
            and system-of-record ID on every invoice line. One-click dispute
            if it's ever wrong.
          </p>
        </div>
        <div className="outcomes__grid">
          {OUTCOMES.map((o, i) => (
            <div key={i} className="outcome">
              <div className="outcome__price">{o.price}</div>
              <div className="outcome__label">{o.label}</div>
              <div className="outcome__detail">{o.detail}</div>
            </div>
          ))}
        </div>
        <div className="outcomes__foot">
          The rule we hold ourselves to: every outcome fee is a small fraction
          of the dollar value it delivers. A $75 bound-policy fee unlocks
          ~$500–$1,200 in year-one commission. A $8 booked quote replaces 30
          minutes of producer time.
        </div>
      </div>
    </div>
  </section>
);

// ── FAQ ────────────────────────────────────────────
const FAQ = () => {
  const items = [
    { q: "How can Sarah possibly bind a policy — she's AI, she can't quote.", a: "She doesn't. Sarah books the quote appointment; your licensed agent quotes and binds. Appointment-setting is administrative, not solicitation — no license required for Sarah, zero E&O change for your agency." },
    { q: "My aged leads are dead. Been called by everyone. Why would this work?", a: "Three reasons. (1) Most of those calls were in English only — a third of your Spanish-speaking leads never got called back in their language. (2) Sarah references the original intake specifically — this isn't a cold call. (3) At 1,000+ dials a day per agency, the math on a 1.5% bind rate is still found money on a pipeline you already paid for." },
    { q: "Is Sarah really bilingual — or is it translated English?", a: "Fully native. Same voice model, 32 languages, seamless mid-call switching powered by ElevenLabs Conversational AI 2.0. You'll hear her switch from English to Spanish in the live demo on this page. If it doesn't sound native to you, don't sign up." },
    { q: "What about TCPA and aged-consent windows?", a: "We only dial leads with documented intake consent under 18 months old. Every record preserves original_source + original_intake_date for audit. National DNC + state DNC + your internal list scrubbed before every dial. AI disclosure in the first 10 seconds of every call in every language." },
    { q: "What AMS systems do you support?", a: "CSV upload from any AMS today. Direct integration with Applied Epic, HawkSoft, EZLynx, AMS360, and Vertafore on Growth. IVANS File Transfer API partnership pending — bind attestation will go native once that lands." },
    { q: "How fast do I go live, really?", a: "Under 24 hours. Upload your dead-lead CSV, connect your Google Calendar, and Sarah resurrects the list the next morning. No setup fee. No training period. No implementation call you have to take at 2 AM." },
    { q: "Who is AJ and why should I trust him with my leads?", a: "AJ Autrey — retired P&C producer, licensed in 25+ states. He code-called the same recycled SmartFinancial lists this product resurrects. He sat in the chair. The bilingual gap, the receptionist gatekeeper, the \"ugh, EverQuote lead\" reflex — all scars. Voco is the agent he wished he had." },
  ];
  return (
    <section className="section section--alt" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow">FAQ</div>
          <h2 className="h2">Questions, answered.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <details key={i} className="faq-item">
              <summary>{it.q}</summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Final CTA + Footer ─────────────────────────────
const FinalCTA = () => (
  <section className="final-cta">
    <div className="container">
      <h2>Your dead leads aren't dead. They just answered in Spanish.</h2>
      <p>Live in 24 hours. $0 until a policy binds. Founder-led pilot with AJ.</p>
      <a href="#demo" className="btn btn--signal btn--lg">Hear Sarah now →</a>
      <div className="final-cta__meta">No credit card. No setup fee. She dials on your aged list tomorrow morning.</div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div>
          <div className="footer__brand">
            <span style={{ color: "var(--black)" }}><WordmarkV/></span>
            <span className="nav__wordmark">VOCO</span>
          </div>
          <p className="footer__tag">Bilingual AI voice agents that resurrect dead P&amp;C leads. Pay on bind. Built by a former agent.</p>
        </div>
        <div className="footer__col">
          <h4>Product</h4>
          <ul>
            <li><a href="#product">Lead Resurrection Sarah</a></li>
            <li><a href="#">Inbound Sarah (Growth)</a></li>
            <li><a href="#demo">Live demo</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Company</h4>
          <ul>
            <li><a href="#">About AJ</a></li>
            <li><a href="#">The pivot story</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="mailto:Hello@itsvoco.com">Contact</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Compliance</h4>
          <ul>
            <li><a href="#">TCPA &amp; FCC</a></li>
            <li><a href="#">Aged-consent policy</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Voco, Inc. · Built by a retired P&amp;C producer in Arizona.</span>
        <span className="mono">Hello@itsvoco.com</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { ProofStrip, Metrics, Product, DemoSection, Steps, Compliance, Pricing, FAQ, FinalCTA, Footer });