// pitch.jsx. closing pitch: value prop + success metrics

const Pitch = () => {
  const ref = React.useRef(null);
  const seen = useInView(ref, 0.1);
  const p = useProgress(1400, seen);
  const isMobile = useIsMobile();

  const D = window.ROI_DATA;
  const uncollected = D.headline.total_uncollected;
  const opsCost = D.headline.operational_cost_est;

  return (
    <div ref={ref} style={{ color: "#fff" }}>

      {/* ── CTA ── */}
      <div style={{ textAlign: "center", paddingBottom: 16 }}>
        <h2 style={{
          fontFamily: "Suisse Intl", fontWeight: 300,
          fontSize: isMobile ? 28 : 42,
          lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px", color: "#fff",
        }}>
          See what this looks like<br />
          <em style={{ color: THEME.primary, fontStyle: "italic" }}>for your practice.</em>
        </h2>
        <div style={{
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          gap: isMobile ? 10 : 16,
          justifyContent: "center",
          alignItems: "center",
          flexWrap: "wrap"
        }}>
          <a href="https://athenaconnect.athenahealth.com/marketplace/authorization-consent/superscript" target="_blank" style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
            height: 48,
            padding: isMobile ? "0 24px" : "0 36px",
            borderRadius: 0,
            background: THEME.primary, color: "#fff", border: `1.5px solid ${THEME.primary}`,
            fontFamily: "Suisse Intl", fontSize: 17, fontWeight: 400,
            letterSpacing: "-0.01em", textDecoration: "none",
            cursor: "pointer",
            width: isMobile ? "100%" : "auto",
            maxWidth: 320,
          }}>Get your report</a>
          <a href="mailto:hello@superscript.nyc" style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
            height: 48,
            padding: isMobile ? "0 24px" : "0 36px",
            borderRadius: 0,
            background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,0.3)",
            fontFamily: "Suisse Intl", fontSize: 17, fontWeight: 400,
            letterSpacing: "-0.01em", textDecoration: "none",
            cursor: "pointer",
            width: isMobile ? "100%" : "auto",
            maxWidth: 320,
          }}>Request a demo</a>
        </div>
        <Mono size={10} color="rgba(255,255,255,0.3)" style={{ display: "block", marginTop: 24, lineHeight: 1.5 }}>
          HELLO@SUPERSCRIPT.NYC · EHR-NATIVE · ATHENA INTEGRATED · HIPAA COMPLIANT
        </Mono>
      </div>

    </div>
  );
};

window.Pitch = Pitch;