// Nav + Hero for Voco landing.
// Pivot 2026-04-22: bilingual dead-lead resurrection, pay on bind.

const WordmarkV = () => (
  <svg width="22" height="22" viewBox="0 0 64 64" fill="currentColor" style={{ display: 'block' }}>
    <path d="M8 10 L32 54 L56 10 L48 10 L32 38 L16 10 Z M20 10 L32 30 L44 10 L38 10 L32 20 L26 10 Z"/>
  </svg>
);

const Nav = () => (
  <header className="nav">
    <div className="container nav__inner">
      <a href="#" className="nav__brand">
        <span className="nav__brand-mark"><WordmarkV/></span>
        <span className="nav__wordmark">VOCO</span>
      </a>
      <nav>
        <ul className="nav__links">
          <li><a href="#problem">The graveyard</a></li>
          <li><a href="#demo">Live demo</a></li>
          <li><a href="#how">How it works</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </nav>
      <div className="nav__right">
        <a href="#" className="nav__signin">Sign in</a>
        <a href="#demo" className="btn btn--primary">Hear Sarah</a>
      </div>
    </div>
  </header>
);

const TickIcon = () => (
  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
    <path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="#10B981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Hero = () => (
  <section className="hero">
    <div className="container">
      <div className="hero__grid">
        <div>
          <div className="hero__chip">
            <span className="hero__chip-dot"/>
            Sarah is live — 12 aged leads resurrected this morning · 3 bilingual
          </div>
          <h1 className="h-display">Your dead leads aren't dead.</h1>
          <p className="lede hero__subhead">
            Sarah dials your aged SmartFinancial, EverQuote, and QuoteWizard list
            in English <em>or</em> Spanish, books quote appointments with your
            licensed agent, and you only pay when a policy binds. Found money
            on a pipeline you already paid for.
          </p>
          <div className="hero__ctas">
            <a href="#demo" className="btn btn--primary btn--lg">
              Hear Sarah now <span className="chev">→</span>
            </a>
            <a href="#calculator" className="btn btn--ghost btn--lg">Calculate your lift</a>
          </div>
          <div className="hero__trust">
            <span><TickIcon/> Built by a retired P&amp;C producer (25+ states)</span>
            <span><TickIcon/> Bilingual EN + ES, native voice switch</span>
            <span><TickIcon/> $0 setup. $75 per bound policy.</span>
          </div>
        </div>

        <HeroCallLog/>
      </div>
    </div>
  </section>
);

const HeroCallLog = () => {
  const rows = [
    { initials: "MG", name: "Maria Gutiérrez", meta: "SmartFinancial · Oct '25 · ES", phone: "(602) 555-0184", status: "booked", label: "Quote booked" },
    { initials: "RC", name: "Robert Chen", meta: "EverQuote · Aug '25 · EN", phone: "(480) 555-0219", status: "booked", label: "Quote booked" },
    { initials: "DW", name: "David Whitfield", meta: "QuoteWizard · Sep '25", phone: "(623) 555-0103", status: "voicemail", label: "Voicemail" },
    { initials: "LV", name: "Luis Vásquez", meta: "Datalot · Nov '25 · ES", phone: "(928) 555-0177", status: "booked", label: "Quote booked" },
    { initials: "JA", name: "Jamal Ahmed", meta: "Contactability · Jul '25", phone: "(602) 555-0455", status: "callback", label: "Callback" },
  ];
  return (
    <aside className="calllog" aria-label="Resurrection run — this morning">
      <div className="calllog__head">
        <div className="calllog__title">
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--live)", display: "inline-block" }}/>
          Sarah · resurrection run
        </div>
        <div className="calllog__date mono">Apr 22 · 06:42 – 08:58 · EN + ES</div>
      </div>
      <div className="calllog__list">
        {rows.map((r, i) => (
          <div key={i} className="calllog__row">
            <div className="calllog__avatar">{r.initials}</div>
            <div>
              <div className="calllog__name">{r.name}</div>
              <div className="calllog__meta">{r.meta} · <span className="mono">{r.phone}</span></div>
            </div>
            <div className={`calllog__status calllog__status--${r.status}`}>
              <span className="dot"/> {r.label}
            </div>
          </div>
        ))}
      </div>
      <div className="calllog__foot">
        <span><strong>3 quote appointments booked</strong> · 2 in Spanish · 1 callback scheduled</span>
        <span className="mono">$0 owed until one binds</span>
      </div>
    </aside>
  );
};

window.Nav = Nav; window.Hero = Hero;