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

  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 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: isMobile ? "20px 16px 48px" : "32px 56px 80px",
      borderBottom: "1px solid #000",
      overflow: "hidden",
    }}>
      {/* Top chyron meta-line */}
      <div style={{
        display: "flex", alignItems: "center", gap: isMobile ? 8 : 16,
        paddingBottom: isMobile ? 12 : 16, marginBottom: isMobile ? 32 : 56,
        borderBottom: `1px dashed ${THEME.primary}`,
        flexWrap: isMobile ? "wrap" : "nowrap",
      }}>
        <img src="assets/superscript-logo-blue.svg" alt="Superscript" style={{ height: isMobile ? 14 : 18, flexShrink: 0 }} />
        <Mono color={THEME.primary} size={isMobile ? 10 : 11}>[3] RESEARCH</Mono>
        <Mono color={THEME.primary} size={isMobile ? 10 : 11} style={{ opacity: 0.6 }}>·</Mono>
        <Mono color={THEME.primary} size={isMobile ? 10 : 11} style={{ opacity: 0.6 }}>
          {isMobile ? "CY2024 BENCHMARK" : "REVENUE CYCLE BENCHMARK · CY2024"}
        </Mono>
        {!isMobile && <span style={{ flex: 1, height: 1, background: THEME.primary, opacity: 0.4 }} />}
        {!isMobile && <Mono color={THEME.primary}>x:264 y:73</Mono>}
      </div>

      {/* Practice header */}
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1fr 380px",
        gap: isMobile ? 24 : 48,
        alignItems: isMobile ? "stretch" : "end",
        marginBottom: isMobile ? 32 : 64,
      }}>
        <div>
          <Mono color={THEME.primary} size={isMobile ? 10 : 11} style={{ display: "block", marginBottom: isMobile ? 14 : 24 }}>PRACTICE</Mono>
          <h1 style={{
            fontFamily: "Suisse Intl", fontWeight: 300,
            fontSize: isMobile ? 48 : 96,
            lineHeight: isMobile ? 0.92 : 0.88,
            letterSpacing: "-0.035em", margin: 0,
            wordBreak: "break-word",
          }}>
            {D.practice.split(" ").slice(0, -1).join(" ")} <em style={{ color: THEME.primary, fontStyle: "italic" }}>{D.practice.split(" ").slice(-1)}</em>
          </h1>
          <div style={{
            display: "flex",
            gap: isMobile ? 20 : 32,
            marginTop: isMobile ? 20 : 32,
            flexWrap: "wrap",
          }}>
            <div>
              <Mono color={THEME.primary} size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>SPECIALTY</Mono>
              <span style={{ fontSize: isMobile ? 14 : 16, fontWeight: 400 }}>{D.specialty}</span>
            </div>
            <div>
              <Mono color={THEME.primary} size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>LOCATION</Mono>
              <span style={{ fontSize: isMobile ? 14 : 16, fontWeight: 400 }}>{D.location}</span>
            </div>
            <div>
              <Mono color={THEME.primary} size={10} style={{ display: "block", marginBottom: 6, opacity: 0.6 }}>PERIOD</Mono>
              <span style={{ fontSize: isMobile ? 14 : 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={THEME.primary} 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={THEME.primary}
                        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={THEME.primary}
                        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 — 2x3 on mobile, 1x5 on desktop */}
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(5, 1fr)",
        gap: 0,
        border: "1px solid #000",
      }}>
        <Metric label="PROJECTED UPLIFT" value={`+${fmt.usdAbbr(addlCollections)}`} note="additional collections with Superscript" accent isMobile={isMobile} pos={0} />
        <Metric label="TOTAL COLLECTED" value={fmt.usdAbbr(collected)} note={`of ${fmt.usdAbbr(D.headline.total_collectable)} collectable`} isMobile={isMobile} pos={1} />
        <Metric label="UNCOLLECTED" value={fmt.usdAbbr(uncollected)} note="leakage in the funnel" warn isMobile={isMobile} pos={2} />
        <Metric label="COLLECTION RATE" value={`${Math.round(rate)}%`} projValue={`${Math.round(projRate)}%`} note={`cohort median ${D.benchmark.cohort_p50_pct.toFixed(1)}%`} isMobile={isMobile} pos={3} />
        <Metric label="AR ACCELERATION · WITH SUPERSCRIPT" value={`${daysReduction}%`} note={<>DAYS TO COLLECT · {days.toFixed(1)}d → <span style={{color:THEME.primary}}>{W.avg_days_to_payment}d</span></>} isMobile={isMobile} pos={4} />
      </div>
    </section>
  );
};

const Metric = ({ label, value, projValue, note, isMobile, pos, accent = false, warn = false }) => {
  const isLastCol = isMobile ? (pos % 2 === 1) : (pos === 4);
  const isLastRow = isMobile ? (pos >= 4) : true;
  return (
    <div style={{
      padding: isMobile ? "16px 14px 18px" : "20px 22px 22px",
      borderRight: isLastCol ? "none" : "1px solid #000",
      borderBottom: isLastRow ? "none" : "1px solid #000",
      background: accent ? THEME.primary : "#fff",
      color: accent ? "#fff" : "#000",
      minHeight: isMobile ? 108 : 132,
      display: "flex", flexDirection: "column", justifyContent: "center", gap: isMobile ? 8 : 12,
      position: "relative",
    }}>
      <Mono color={accent ? "rgba(255,255,255,0.85)" : THEME.primary} size={isMobile ? 9 : 10}>{label}</Mono>
      <div>
        {projValue ? (
          <div style={{ display: "flex", alignItems: "baseline", gap: isMobile ? 4 : 6, flexWrap: "wrap", marginBottom: 8 }}>
            <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: isMobile ? 20 : 30, 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: isMobile ? 11 : 14, color: "#999", lineHeight: 1, alignSelf: "center" }}>→</div>
            <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: isMobile ? 20 : 30, lineHeight: 1, letterSpacing: "-0.025em", color: THEME.primary }}>{projValue}</div>
          </div>
        ) : (
          <div style={{ fontFamily: "Suisse Intl", fontWeight: 400, fontSize: isMobile ? 26 : 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: isMobile ? 10 : 11, letterSpacing: "-0.02em", color: accent ? "rgba(255,255,255,0.85)" : "#666", lineHeight: 1.4 }}>{note}</div>
      </div>
    </div>
  );
};

window.Hero = Hero;