/* global React */

function CtaBand() {
  return (
    <section id="contact" style={ctaStyles.wrap}>
      <img src="assets/confetti.svg" style={ctaStyles.confetti} alt="" />
      <div style={ctaStyles.inner}>
        <img src="assets/drum-medallion.svg" style={{ width: 48, height: 48, marginBottom: 22, filter: "brightness(0) invert(1)", opacity: 0.85 }} alt="" />
        <h2 style={ctaStyles.h2}>Two free 30-minute audits.</h2>
        <p style={ctaStyles.lead}>
          Pick one, or both: a QuickBooks security audit, or a business automation
          audit. No obligation — just thirty minutes with Kevin.
        </p>
        <div style={ctaStyles.offers}>
          <div style={ctaStyles.offer}>
            <div style={ctaStyles.offerTitle}>QuickBooks security audit</div>
            <div style={ctaStyles.offerBody}>We'll check your QuickBooks access, permissions, and settings for anything that could put your business at risk.</div>
          </div>
          <div style={ctaStyles.offer}>
            <div style={ctaStyles.offerTitle}>Business automation audit</div>
            <div style={ctaStyles.offerBody}>We'll look at your day-to-day and flag the busywork that could be automated away.</div>
          </div>
        </div>

        <form style={ctaStyles.form} onSubmit={(e) => { e.preventDefault(); alert("Thanks! We'll be in touch within one business day."); }}>
          <input style={ctaStyles.input} placeholder="Your name" type="text" required />
          <input style={ctaStyles.input} placeholder="you@yourcompany.com" type="email" required />
          <button style={ctaStyles.btn} type="submit">Schedule a call →</button>
        </form>

        <div style={ctaStyles.alt}>
          <span style={ctaStyles.altLabel}>Rather call or email?</span>
          <a href="tel:7199642095" style={ctaStyles.altLink}>(719) 964-2095</a>
          <span style={ctaStyles.dot} />
          <a href="mailto:paradebookkeeping@gmail.com" style={ctaStyles.altLink}>paradebookkeeping@gmail.com</a>
        </div>
      </div>
    </section>
  );
}

const ctaStyles = {
  wrap: { position: "relative", padding: "84px 40px", background: "var(--forest-400)", overflow: "hidden", color: "var(--paper)" },
  confetti: { position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18, pointerEvents: "none", objectFit: "cover" },
  inner: { position: "relative", zIndex: 2, maxWidth: 1100, margin: "0 auto", textAlign: "center" },
  h2: { fontFamily: "var(--font-display)", fontSize: 52, fontWeight: 600, lineHeight: 1.08, letterSpacing: "-0.025em", margin: 0 },
  lead: { fontSize: 17, lineHeight: 1.6, marginTop: 16, color: "rgba(250, 247, 242, 0.88)" },
  offers: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 36, textAlign: "left" },
  offer: { background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.16)", borderRadius: 14, padding: 20 },
  offerTitle: { fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, letterSpacing: "-0.005em", marginBottom: 8 },
  offerBody: { fontSize: 13.5, lineHeight: 1.55, color: "rgba(250, 247, 242, 0.8)" },
  form: { display: "flex", gap: 10, marginTop: 36, flexWrap: "wrap" },
  input: { flex: "1 1 180px", fontFamily: "var(--font-sans)", fontSize: 15, padding: "14px 18px", border: "none", borderRadius: 12, background: "rgba(255,255,255,0.96)", color: "var(--ink-900)", outline: "none" },
  btn: { fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--ink-900)", background: "var(--marigold-400)", border: "none", padding: "14px 22px", borderRadius: 12, cursor: "pointer", flexShrink: 0 },
  alt: {
    marginTop: 40, paddingTop: 24, borderTop: "1px solid rgba(250, 247, 242, 0.18)",
    display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap",
    fontSize: 14,
  },
  altLabel: { color: "rgba(250, 247, 242, 0.65)" },
  altLink: { color: "var(--marigold-200)", textDecoration: "none", fontWeight: 600, fontFamily: "var(--font-mono)" },
  dot: { width: 4, height: 4, borderRadius: 99, background: "rgba(250, 247, 242, 0.3)" },
};

window.CtaBand = CtaBand;