// CTABanner — "Join the Family" closing CTA. Bigger, gold-led, family-business
// intimate. Drops the [!danger] chrome (mismatched: an invitation isn't a
// warning) in favor of a hero-grade card with founder portrait + signature.
function CTABanner({ onScheduleClick }) {
  return (
    <section className="td-section td-cta-section">
      <div className="td-cta">
        <div className="td-cta__glow" aria-hidden="true"></div>
        <div className="td-cta__inner">
          <div className="td-cta__copy">
            <div className="td-cta__eyebrow">
              <span className="td-cta__eyebrow-e" aria-hidden="true">🚀</span>
              <span>Join the Family</span>
            </div>
            <h2 className="td-cta__h">
              <em>Ready to grow?</em><br />
              <span className="td-cta__h--gold">Let's build it together.</span>
            </h2>
            <p className="td-cta__sub">
              All plans are monthly retainers.{' '}
              <em>Mix &amp; match channels. Cancel anytime.</em>
            </p>

            <ul className="td-cta__bullets">
              <li><span className="td-cta__check">✅</span><strong><em>One team, one roof, every channel.</em></strong></li>
              <li><span className="td-cta__check">✅</span><strong><em>You own the data, always.</em></strong></li>
              <li><span className="td-cta__check">✅</span><strong><em>A real plan in 24 hours, not a sales pitch.</em></strong></li>
            </ul>

            <div className="td-cta__actions">
              <button className="td-btn td-btn--primary td-btn--lg" onClick={onScheduleClick}>
                Schedule a Discovery Call →
              </button>
              <a className="td-cta__email" href="mailto:hello@trilliondigital.net">
                or email hello@trilliondigital.net
              </a>
            </div>

            <div className="td-cta__sig">
              <img className="td-cta__sig-avatar" src="./assets/team_travis.jpeg"
                   alt="Travis Paul Talamo II"
                   style={{objectFit:'cover'}} />
              <div>
                <div className="td-cta__sig-name">— Travis Paul Talamo II</div>
                <div className="td-cta__sig-role">Founder | CEO</div>
              </div>
            </div>
          </div>

          <aside className="td-cta__media">
            <div className="td-cta__video">
              <div className="td-placeholder td-placeholder--vertical">
                <span className="td-placeholder__label">YouTube · 9:16</span>
                <span className="td-placeholder__sub">Founder vertical embed</span>
              </div>
              <button className="td-cta__play" aria-label="Play founder video">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </button>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.CTABanner = CTABanner;