/* global React, Halo, Button, Icon */

function FinalCTA({ onCTA }) {
  return (
    <section id="cta" className="final-cta">
      <Halo variant="cta">
        <div className="container">
          <div className="final-card">
            <span className="eyebrow eyebrow--on-light">Ready when you are</span>
            <h2 className="final-title">
              Let's build something <span className="hero-title-grad">useful</span> together.
            </h2>
            <p className="final-sub">
              If your product helps people learn data, BI, AI, or career skills — we're a fit.
              Send a one-line brief on WhatsApp and we'll take it from there.
            </p>
            <div className="final-cta-row">
              <Button variant="primary" onClick={onCTA} icon={<Icon name="message-circle" size={18} />}>
                Chat on WhatsApp
              </Button>
              <Button variant="ghost" as="a" href="mailto:halomas@dhanyindraswara.com">
                <Icon name="mail" size={16} /> halomas@dhanyindraswara.com
              </Button>
            </div>
            <div className="final-meta">
              <span><Icon name="clock" size={14} /> Reply within 24h</span>
              <span>·</span>
              <span><Icon name="calendar" size={14} /> 2-week lead time</span>
              <span>·</span>
              <span><Icon name="shield-check" size={14} /> Brand-safe content</span>
            </div>
          </div>
        </div>
      </Halo>
    </section>
  );
}

window.FinalCTA = FinalCTA;