/* Shared conversion blocks (homepage + /agencies):
 *   LogoMarquee — integration logos scrolling under the hero (real
 *                 integrations only; favicons via Google's s2 service, no
 *                 local assets to license).
 *   StackSwap   — "one seat replaces the whole stack" with real dollar math.
 */

const AIDA_INTEGRATIONS = [
  ['GoHighLevel', 'gohighlevel.com'],
  ['LinkedIn', 'linkedin.com'],
  ['Instantly', 'instantly.ai'],
  ['RB2B', 'rb2b.com'],
  ['Microsoft 365', 'microsoft.com'],
  ['SMTP inboxes', 'smtp.com'],
  ['Domain purchasing', 'godaddy.com'],
  ['Stripe', 'stripe.com'],
  ['Google Calendar', 'calendar.google.com'],
  ['Zapier & Webhooks', 'zapier.com'],
  ['Claude AI', 'claude.ai'],
];

function LogoMarquee({ label }) {
  // Two IDENTICAL halves; each item carries its own trailing margin so the
  // -50% translate lands exactly on the seam — no dead gap at the wrap.
  const half = (dup) => AIDA_INTEGRATIONS.map(([name, domain]) => (
    <span key={`${dup}-${name}`} className="mq-item">
      <img src={`https://www.google.com/s2/favicons?domain=${domain}&sz=64`} alt="" width="34" height="34" loading="lazy" />
      {name}
    </span>
  ));
  return (
    <div className="mq-wrap">
      <style>{`
        .mq-wrap{padding:30px 0;border-top:1px solid rgba(120,130,160,0.14);border-bottom:1px solid rgba(120,130,160,0.14);overflow:hidden}
        .mq-label{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute,#8a93a6);margin-bottom:18px}
        .mq-track{display:flex;width:max-content;animation:mq-scroll 36s linear infinite;will-change:transform}
        .mq-wrap:hover .mq-track{animation-play-state:paused}
        .mq-item{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--ink,#1e2433);white-space:nowrap;opacity:0.88;margin-right:64px}
        .mq-item img{border-radius:7px}
        @keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
      `}</style>
      <div className="mq-label">{label || 'Plays nice with your stack'}</div>
      <div className="mq-track">
        {half('a')}
        {half('b')}
      </div>
    </div>
  );
}
window.LogoMarquee = LogoMarquee;

/* Real customers whose outbound runs on AiDA. Logos are normalized locally
 * (trimmed + padded) and served from /logos so every tile lines up in size;
 * white tiles keep dark wordmarks legible on both the light and dark pages.
 * Per-logo `cls` tunes optical size / backing: 'big' for wordmarks that read
 * small, 'badge' for the square GrubGigz mark, 'dark' for the Talent Finders
 * lockup (white/gold on a dark card so it doesn't fight the white tiles). */
const AIDA_CUSTOMERS = [
  { name: 'Keller Williams', src: '/logos/cust-keller-williams.png' },
  { name: 'Talent Finders', src: '/logos/cust-talent-finders.png', cls: 'dark' },
  { name: 'Panasonic Toughbook', src: '/logos/cust-panasonic-toughbook.png', cls: 'big' },
  { name: 'The Junkluggers', src: '/logos/cust-junkluggers.png', cls: 'big' },
  { name: 'Ericsson', src: '/logos/cust-ericsson.png' },
  { name: 'Guardian IoT', src: '/logos/cust-guardian-iot.png' },
  { name: 'Archers', src: '/logos/cust-archers.png', cls: 'big' },
  { name: 'Pong', src: '/logos/cust-pong.png' },
  { name: 'GrubGigz', src: '/logos/cust-grubgigz.png', cls: 'badge' },
  { name: 'Zetron', src: '/logos/cust-zetron.png' },
];

function CustomerMarquee({ label }) {
  // Two IDENTICAL halves of fixed-size tiles; -50% translate lands exactly on
  // the seam (each tile carries the same width + trailing margin).
  const half = (dup) => AIDA_CUSTOMERS.map(({ name, src, cls }) => (
    <span key={`${dup}-${name}`} className={cls ? `cmq-tile cmq-${cls}` : 'cmq-tile'} title={name}>
      <img src={src} alt={name} loading="eager" />
    </span>
  ));
  return (
    <div className="cmq-wrap">
      <style>{`
        .cmq-wrap{padding:38px 0 42px;border-top:1px solid rgba(120,130,160,0.14);border-bottom:1px solid rgba(120,130,160,0.14);background:linear-gradient(180deg,#fbfbff,#f4f5ff);overflow:hidden}
        .cmq-label{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute,#8a93a6);margin-bottom:26px;padding:0 20px}
        .cmq-track{display:flex;width:max-content;align-items:center;animation:cmq-scroll 52s linear infinite;will-change:transform}
        .cmq-wrap:hover .cmq-track{animation-play-state:paused}
        .cmq-tile{flex:none;display:flex;align-items:center;justify-content:center;height:84px;width:180px;margin-right:20px;background:#fff;border:1px solid rgba(120,130,160,0.16);border-radius:14px;box-shadow:0 8px 20px -14px rgba(20,24,60,0.4)}
        .cmq-tile img{max-height:50px;max-width:138px;width:auto;height:auto;object-fit:contain;display:block}
        .cmq-big img{max-height:60px;max-width:150px}
        .cmq-badge img{max-height:74px;max-width:74px}
        .cmq-dark{background:#111118;border-color:rgba(255,255,255,0.14)}
        @keyframes cmq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        @media(prefers-reduced-motion:reduce){.cmq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
      `}</style>
      <div className="cmq-label">{label || 'Customers That Trust Us With Their Outbound Growth'}</div>
      <div className="cmq-track">
        {half('a')}
        {half('b')}
      </div>
    </div>
  );
}
window.CustomerMarquee = CustomerMarquee;

/* Real-world list prices for the per-client tool pile AiDA folds into one
 * seat. Sales Navigator and RB2B are deliberately NOT listed — those licenses
 * stay (we run the automation on top of them), and honest math sells harder. */
const OLD_STACK = [
  ['An enrichment tool', 'enrichment + scraping', 350],
  ['A contact database', 'contacts + data', 149],
  ['A LinkedIn sequencer', 'sending + sequences', 99],
  ['An email sequencer', 'inbox campaigns', 99],
  ['An AI copy tool', 'personalization', 49],
  ['Brand monitoring', 'mentions + competitors', 199],
];
const OLD_TOTAL = OLD_STACK.reduce((s, [, , p]) => s + p, 0); // 945

const NEW_INCLUDES = [
  ['Enrichment: verified emails & phones', 'replaces your enrichment tool'],
  ['Buying signals + lead database', 'replaces your contact database'],
  ['LinkedIn outreach + smart sequencing', 'replaces your LinkedIn sequencer'],
  ['Email outreach + sequencing', 'replaces your email sequencer', 'coming soon'],
  ['Per-signal AI copy + AI inbox', 'replaces a copy tool'],
  ['Brand & competitor monitoring', 'replaces a monitoring tool'],
  ['Anonymous Traffic ID: scoring, enrichment & follow-up', 'works with your website-visitor tool'],
];

function StackSwap({ perClient }) {
  const unit = perClient ? 'per client' : 'per month';
  return (
    <section className="section" id="stack-swap">
      <style>{`
        .ss-grid{display:grid;grid-template-columns:1fr auto 1.1fr;gap:22px;align-items:stretch}
        @media(max-width:900px){.ss-grid{grid-template-columns:1fr}.ss-swap{transform:rotate(90deg);margin:0 auto}}
        .ss-col{border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:22px;background:#fff}
        .ss-col.new{border-color:var(--indigo,#4f46e5);background:linear-gradient(180deg,#fff,#f5f6ff)}
        .ss-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px}
        .ss-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--line,#eceef3);font-size:14px}
        .ss-row .sub{display:block;font-size:11.5px;color:var(--ink-mute,#8a93a6)}
        .ss-price{font-family:var(--mono);font-size:13px;white-space:nowrap}
        .ss-total{display:flex;justify-content:space-between;padding-top:14px;margin-top:6px;border-top:2px solid var(--ink,#1e2433);font-weight:700;font-size:15px}
        .ss-swap{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--indigo,#4f46e5)}
        .ss-save{margin-top:26px;text-align:center;border:1px solid #bbf7d0;background:#f0fdf4;color:#15803d;border-radius:14px;padding:16px 20px;font-size:15px;font-weight:600}
        .ss-save b{font-size:22px}
        .ss-note{margin-top:12px;text-align:center;font-size:12px;color:var(--ink-mute,#8a93a6)}
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-indigo">One seat · one bill</div>
            <h2>One seat replaces<br/>the entire stack.</h2>
          </div>
          <p className="lede">
            Stop duct-taping six subscriptions together{perClient ? ' for every client' : ''}. One
            AiDA seat carries the database, enrichment, sequencing, AI copy, and brand
            monitoring — on one login and one bill.
          </p>
        </div>

        <div className="ss-grid">
          <div className="ss-col">
            <div className="ss-tag" style={{color:'#b91c1c'}}>The old way · 6 tools · 6 logins</div>
            {OLD_STACK.map(([name, sub, price]) => (
              <div className="ss-row" key={name}>
                <span>{name}<span className="sub">{sub}</span></span>
                <span className="ss-price">${price}/mo</span>
              </div>
            ))}
            <div className="ss-total"><span>Total {unit}</span><span>${OLD_TOTAL}/mo</span></div>
          </div>

          <div className="ss-swap">SWAP →</div>

          <div className="ss-col new">
            <div className="ss-tag" style={{color:'var(--indigo,#4f46e5)'}}>The new way · one seat · one bill</div>
            {NEW_INCLUDES.map(([name, sub, status]) => (
              <div className="ss-row" key={name}>
                <span>{name}<span className="sub">↳ {sub}</span></span>
                <span className="ss-price" style={{color: status === 'coming soon' ? '#b45309' : '#15803d'}}>{status || 'included'}</span>
              </div>
            ))}
            <div className="ss-total">
              <span>AiDA seat {unit}</span>
              <span>{perClient ? '$197/mo' : <>$197<span style={{fontWeight:400, color:'var(--ink-mute,#8a93a6)'}}> – </span>$297/mo</>}</span>
            </div>
          </div>
        </div>

        <div className="ss-save">
          Save <b>{perClient ? `$${OLD_TOTAL - 197}` : `$${OLD_TOTAL - 297}–$${OLD_TOTAL - 197}`}</b>{perClient ? '/mo per client' : '/mo'} — with nothing to glue together.
        </div>
        <div className="ss-note">
          Bring your own Sales Navigator — AiDA runs the automation, enrichment, scoring, and follow-up on top of it.
        </div>
      </div>
    </section>
  );
}
window.StackSwap = StackSwap;