// hero.jsx — top of report
const Hero = () => {
  const D = window.ROI_DATA;
  const ref = React.useRef(null);
  const seen = useInView(ref, 0.05);

  const collected       = useCounter(D.headline.total_collected, 800, seen);
  const uncollected     = useCounter(D.headline.total_uncollected, 800, seen);
  const rate            = useCounter(D.headline.collection_rate_pct, 700, seen, 1);
  const claims          = useCounter(D.headline.total_claims, 650, seen);
  const days            = useCounter(D.headline.avg_days_to_payment, 600, seen, 1);
  const opsCost         = useCounter(D.headline.operational_cost_est, 1700, seen);
  const opsPct          = useCounter(D.headline.operational_cost_pct, 1500, seen, 1);
  const W               = D.with_superscript;
  const addlCollections = useCounter(W.additional_collections, 850, seen);
  const projRate        = useCounter(W.projected_rate_pct, 800, seen, 1);
  const daysReduction   = Math.round((D.headline.avg_days_to_payment - W.avg_days_to_payment) / D.headline.avg_days_to_payment * 100);

  // A 12-bar mini sparkline driven by monthly_rate, animates with seen
  const monthly = D.monthly_rate;
  const maxRate = 90;

  return (
    <section ref={ref} style={{
      position: "relative",
      background: "#F9F9F9",
      padding: "32px 56px 80px",
      borderBottom: "1px solid #000",
      overflow: "hidden",
    }}>
      {/* Top chyron meta-line */}
      <div style={{
        display: "flex", alignItems: "center", gap: 16,
        paddingBottom: 16, marginBottom: 56, borderBottom: "1px dashed #00A3FF",
      }}>
        <img src="assets/superscript-logo-blue.svg" alt="Superscript" style={{ height: 18 }} />
        <Mono color="#00A3FF">[3] RESEARCH</Mono>
        <Mono color="#00A3FF" style={{ opacity: 0.6 }}>·</Mono>
        <Mono color="#00A3FF" style={{ opacity: 0.6 }}>REVENUE CYCLE BENCHMARK · CY2024</Mono>
        <span style={{ flex: 1, height: 1, background: "#00A3FF", opacity: 0.4 }} />
        <Mono color="#00A3FF">x:264 y:73</Mono>
      </div>

      {/* Practice header */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 48, alignItems: "end", marginBottom: 64 }}>
        <div>
          <Mono color="#00A3FF" size={11} style={{ display: "block", marginBottom: 24 }}>PRACTICE</Mono>
          <h1 style={{
            fontFamily: "Suisse Intl", fontWeight: 300, fontSize: 96, lineHeight: 0.88,
            letterSpacing: "-0.035em", margin: 0,
          }}>
            {D.practice.split(" ").slice(0, -1).join(" ")} <em style={{ color: "#00A3FF", fontStyle: "italic" }}>{D.practice.split(" ").slice(-1)}</em>
          </h1>
          <div style={{ display: "flex", gap: 32, marginTop: 32, flexWrap: "wrap" }}>
            <div>
              <Mono color="#00A3FF" size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>SPECIALTY</Mono>
              <span style={{ fontSize: 16, fontWeight: 400 }}>{D.specialty}</span>
            </div>
            <div>
              <Mono color="#00A3FF" size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>LOCATION</Mono>
              <span style={{ fontSize: 16, fontWeight: 400 }}>{D.location}</span>
            </div>
            <div>
              <Mono color="#00A3FF" size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>PERIOD</Mono>
              <span style={{ fontSize: 16, fontWeight: 400 }}>{D.period}</span>
            </div>
          </div>
        </div>

        {/* Sparkline of monthly rate — dynamic floor so variation is visible */}
        <div style={{ border: "1px solid #000", padding: "16px 18px 18px", background: "#fff" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
            <Mono color="#00A3FF" size={10}>COLLECTION RATE · MONTHLY</Mono>
            <Mono size={10} color="#666">2024</Mono>
          </div>
          {(() => {
            const rateFloor = Math.floor(Math.min(...monthly.map(m => m.rate)) / 5) * 5;
            const rateCeil  = 90;
            const BAR_H     = 64;
            const toY = r => BAR_H - Math.max(2, (r - rateFloor) / (rateCeil - rateFloor) * BAR_H);
            return (
              <svg viewBox="0 0 320 96" width="100%" height={96} style={{ display: "block" }}>
                <line x1="0" x2="320" y1={BAR_H} y2={BAR_H} stroke="#CCCCCC" strokeWidth="0.5" />
                <text x={0} y={BAR_H + 5} fontSize="5.5" fontFamily="Suisse Intl Mono, JetBrains Mono, monospace"
                  fontWeight="700" fill="#AAAAAA">{rateFloor}%</text>
                {monthly.map((m, i) => {
                  const x     = (i / 11) * 320;
                  const barH  = Math.max(2, (m.rate - rateFloor) / (rateCeil - rateFloor) * BAR_H);
                  const delay = i * 80;
                  return (
                    <g key={m.m}>
                      <rect x={x + 2} y={BAR_H - barH} width={20} height={barH} fill="#00A3FF"
                        style={{
                          transformOrigin: `${x + 12}px ${BAR_H}px`,
                          transform: seen ? "scaleY(1)" : "scaleY(0)",
                          transition: `transform 700ms cubic-bezier(0.2,0.7,0.2,1) ${delay}ms`,
                        }}
                      />
                      <text x={x + 12} y={BAR_H - barH - 2} fontSize="5.5"
                        fontFamily="Suisse Intl Mono, JetBrains Mono, monospace"
                        fontWeight="700" textAnchor="middle"
                        fill="#00A3FF"
                        style={{ opacity: seen ? 1 : 0, transition: `opacity 300ms ${delay + 400}ms` }}>
                        {m.rate.toFixed(0)}
                      </text>
                      <text x={x + 12} y={BAR_H + 10} fontSize="5.5"
                        fontFamily="Suisse Intl Mono, JetBrains Mono, monospace"
                        fontWeight="700" textAnchor="middle" fill="#999">{m.m[0]}</text>
                    </g>
                  );
                })}
              </svg>
            );
          })()}
        </div>
      </div>

      {/* Headline metric grid */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0,
        border: "1px solid #000",
      }}>
        <Metric label="PROJECTED UPLIFT" value={`+${fmt.usd(addlCollections)}`} note="additional collections with Superscript" accent />
        <Metric label="TOTAL COLLECTED" value={fmt.usd(collected)} note={`of ${fmt.usd(D.headline.total_collectable)} collectable`} />
        <Metric label="UNCOLLECTED" value={fmt.usd(uncollected)} note="leakage in the funnel" warn />
        <Metric label="COLLECTION RATE" value={`${Math.round(rate)}%`} projValue={`${Math.round(projRate)}%`} note="industry median 80.3%" />
        <Metric label="AR ACCELERATION · WITH SUPERSCRIPT" value={`${daysReduction}%`} note={<>DAYS TO COLLECT · {days.toFixed(1)}d → <span style={{color:"#00A3FF"}}>{W.avg_days_to_payment}d</span></>} last />
      </div>

      {/* Ops cost callout */}
      <div style={{
        marginTop: 16, padding: "14px 20px",
        border: "1px solid #000", background: "#000", color: "#fff",
        display: "flex", alignItems: "center", gap: 24,
      }}>
        <div style={{ flex: 1, fontSize: 16, letterSpacing: "-0.01em" }}>
          Estimated <span style={{ color: "#FF8B4A", fontWeight: 600 }}>{fmt.usd(opsCost)}</span> spent on collection operations — <span style={{ color: "#FF8B4A", fontWeight: 600 }}>{opsPct.toFixed(1)}%</span> of dollars actually collected.
        </div>
        <Mono color="#64C5FD" size={10}>OPERATIONAL OVERHEAD</Mono>
      </div>
    </section>
  );
};

const Metric = ({ label, value, projValue, note, last = false, accent = false, warn = false }) => (
  <div style={{
    padding: "20px 22px 22px",
    borderRight: last ? "none" : "1px solid #000",
    background: accent ? "#00A3FF" : "#fff",
    color: accent ? "#fff" : "#000",
    minHeight: 132,
    display: "flex", flexDirection: "column", justifyContent: "center", gap: 12,
    position: "relative",
  }}>
    <Mono color={accent ? "rgba(255,255,255,0.85)" : "#00A3FF"} size={10}>{label}</Mono>
    <div>
      {projValue ? (
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, flexWrap: "wrap", marginBottom: 8 }}>
          <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: 38, lineHeight: 1, letterSpacing: "-0.025em", color: warn ? "#FF426F" : (accent ? "#fff" : "#000") }}>{value}</div>
          <div style={{ fontFamily: "Suisse Intl Mono, JetBrains Mono, monospace", fontWeight: 700, fontSize: 16, color: "#999", lineHeight: 1, alignSelf: "center" }}>→</div>
          <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: 38, lineHeight: 1, letterSpacing: "-0.025em", color: "#00A3FF" }}>{projValue}</div>
        </div>
      ) : (
        <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: 38, lineHeight: 1, letterSpacing: "-0.025em", marginBottom: 8, color: warn ? "#FF426F" : (accent ? "#fff" : "#000") }}>{value}</div>
      )}
      <div style={{ fontFamily: "Suisse Intl Mono, JetBrains Mono, monospace", fontWeight: 500, fontSize: 11, letterSpacing: "-0.02em", color: accent ? "rgba(255,255,255,0.85)" : "#666" }}>{note}</div>
    </div>
  </div>
);

window.Hero = Hero;