/* Results — merged outcome + expansion narrative */

function Results() {
  const [ref, inView] = useInView({ threshold: 0.25, once: true });

  // Same window comparison: pilot sites (Superscript on) vs the rest of Foothills
  const benchmarks = [
    { label: "PILOT SITES · WITH SUPERSCRIPT", value: 77, highlight: true  },
    { label: "OTHER FOOTHILLS LOCATIONS",      value: 45, highlight: false },
    { label: "PILOT SITES · PRIOR YEAR",       value: 40, highlight: false }
  ];

  return (
    <Section
      id="results"
      num="[03] / RESULTS"
      title={<>Pilot sites lifted yield to <em>77%</em>. The sites without Superscript stayed at 45%.</>}
    >
      <p className="body muted" style={{ maxWidth: 720, marginBottom: 40 }}>
        Pilot sites outperformed their non-pilot peers by 32 points — and outperformed their own prior-year yield by 37, a larger margin.
      </p>

      <div ref={ref} style={{ display:"flex", flexDirection:"column", gap: 56 }}>

        {/* Yield comparison bars */}
        <div>
          <div className="label" style={{ color: "var(--ss-black)", marginBottom: 14 }}>
            PATIENT YIELD · ONE-MONTH WINDOW
          </div>
          <div className="yield-bars">
            {benchmarks.map((b, i) => (
              <div key={i} className="yield-bars__row">
                <span className="label yield-bars__label" style={{ color: b.highlight ? "var(--ss-blue)" : "var(--ss-grey-2)" }}>
                  {b.label}
                </span>
                <div className="yield-bars__track">
                  <div className="yield-bars__fill" style={{
                    width: inView ? (b.value / 100 * 100) + "%" : 0,
                    background: b.highlight ? "var(--ss-blue)" : "var(--ss-black)",
                    transitionDelay: (i * 0.12) + "s"
                  }} />
                </div>
                <span className="yield-bars__val" style={{ color: b.highlight ? "var(--ss-blue)" : "var(--ss-black)" }}>
                  {b.value}%
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* A/R compression — visual bar + supporting line */}
        <div>
          <div className="label label--blue" style={{ marginBottom: 14 }}>
            TIME TO COLLECT
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.45, color:"var(--ss-black)",
                      letterSpacing:"-0.01em", maxWidth: 720, margin: "0 0 24px" }}>
            4 to 5 months of A/R compressed into weeks. 36% of collected dollars
            arrived fully paid before the appointment via automated text-to-pay.
          </p>

          <div className="wait">
            <div className="wait__row">
              <div className="wait__row-label">A/R TAIL · PRE-SUPERSCRIPT</div>
              <div className="wait__row-bar">
                <div className="wait__row-fill" style={{ width: inView ? "100%" : 0 }} />
              </div>
              <div className="wait__row-val">8-10 mo</div>
            </div>
            <div className="wait__row">
              <div className="wait__row-label">A/R TAIL · WITH SUPERSCRIPT</div>
              <div className="wait__row-bar">
                <div className="wait__row-fill wait__row-fill--blue"
                     style={{ width: inView ? "10%" : 0 }} />
              </div>
              <div className="wait__row-val">~1 mo</div>
            </div>
          </div>
        </div>

        {/* Outcome strip — what Foothills did with the result */}
        <div className="outcome-strip">
          <div>
            <div className="label" style={{ color:"var(--ss-grey-3)", marginBottom: 6 }}>
              Q2 TARGET · NETWORK YIELD
            </div>
            <div style={{ fontSize: 34, letterSpacing:"-0.025em", color:"var(--ss-blue)",
                          fontWeight: 500, lineHeight: 1 }}>
              95%
            </div>
          </div>
          <div>
            <div className="label" style={{ color:"var(--ss-grey-3)", marginBottom: 6 }}>
              PRE-PILOT BACKLOG CLEARED
            </div>
            <div style={{ fontSize: 34, letterSpacing:"-0.025em", color:"var(--ss-black)",
                          fontWeight: 500, lineHeight: 1 }}>
              $77K+
            </div>
          </div>
          <div>
            <div className="label" style={{ color:"var(--ss-grey-3)", marginBottom: 6 }}>
              PILOT OUTCOME
            </div>
            <div style={{ fontSize: 16, lineHeight: 1.45, color:"var(--ss-black)",
                          letterSpacing:"-0.01em" }}>
              Foothills asked Superscript to accelerate rollout across all locations
              before the pilot window ended.
            </div>
          </div>
        </div>

      </div>
    </Section>
  );
}

window.Results = Results;