/* 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 sessions.</h2>
        <p style={ctaStyles.lead}>
          Book an initial consultation to talk through your books, or a security
          audit of your QuickBooks. No obligation — just thirty minutes with Kevin.
        </p>
        <div style={ctaStyles.offers}>
          <a
            href="https://calendly.com/paradebookkeeping/initial-bookkeeping-consultation"
            target="_blank"
            rel="noopener noreferrer"
            style={ctaStyles.offer}
          >
            <div>
              <div style={ctaStyles.offerTitle}>Initial bookkeeping consultation</div>
              <div style={ctaStyles.offerBody}>A no-obligation call to talk through your books, your business, and where we can take work off your plate.</div>
            </div>
            <div style={ctaStyles.offerCta}>Book a consultation →</div>
          </a>
          <a
            href="https://calendly.com/paradebookkeeping/free-security-audit"
            target="_blank"
            rel="noopener noreferrer"
            style={ctaStyles.offer}
          >
            <div>
              <div style={ctaStyles.offerTitle}>Free 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.offerCta}>Book a security audit →</div>
          </a>
        </div>

        <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: {
    display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 16,
    background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.16)",
    borderRadius: 14, padding: 20, textDecoration: "none", color: "inherit", cursor: "pointer",
    transition: "background 200ms var(--ease-out), border-color 200ms var(--ease-out)",
  },
  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)" },
  offerCta: { fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, color: "var(--marigold-200)" },
  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;