/* Growth — Storefront performance + animated conversion bar chart. */

function Growth() {
  const [ref, inView] = useInView({ threshold: 0.25, once: true });
  const newPatients = useCountUp(62, { duration: 1700, active: inView });

  // Conversion benchmarks
  const benchmarks = [
    { label: "E-COMMERCE BENCHMARK · LOW",  value: 3,  highlight: false },
    { label: "E-COMMERCE BENCHMARK · HIGH", value: 5,  highlight: false },
    { label: "MEDRITE × SUPERSCRIPT",        value: 21, highlight: true }
  ];

  return (
    <Section id="growth" num="[04] / GROWTH"
             title={<>The Storefront converted at 21%, four to seven times <em>e-commerce benchmarks.</em></>}>

      <p className="body muted" style={{ maxWidth: 720, marginBottom: 48 }}>
        Pilot results came in fast enough that Medrite committed to accelerated network rollout
        before the two-week pilot window closed. Yield, throughput, and storefront
        conversion all cleared bar at the three pilot sites.
      </p>

      <div ref={ref} className="growth">
        <div>
          <div className="label label--blue" style={{ marginBottom: 14 }}>CONVERSION RATE · BOOKING FUNNEL</div>
          <div className="growth__big">
            <CountStat to={21} suffix="%" duration={1800} />
          </div>
          <div className="body muted" style={{ maxWidth: 460, marginBottom: 28 }}>
            E-commerce conversion in high-intent consumer categories typically lands
            between 3% and 5%. Superscript's storefront sits at <strong>21%</strong>.
          </div>

          <div style={{ display:"flex", flexDirection:"column", gap: 14, maxWidth: 460 }}>
            {benchmarks.map((b, i) => (
              <div key={i} style={{ display:"grid", gridTemplateColumns:"180px 1fr 48px",
                                    alignItems:"center", gap: 14 }}>
                <span className="label" style={{ color: b.highlight ? "var(--ss-blue)" : "var(--ss-grey-2)" }}>
                  {b.label}
                </span>
                <div style={{ height: 10, background:"var(--ss-grey-6)",
                              border:"1px solid var(--ss-grey-4)", position:"relative" }}>
                  <div style={{
                    position:"absolute", left: 0, top: 0, bottom: 0,
                    width: inView ? (b.value / 25 * 100) + "%" : 0,
                    background: b.highlight ? "var(--ss-blue)" : "var(--ss-black)",
                    transition: "width 1.5s cubic-bezier(.2,.7,.2,1)",
                    transitionDelay: (i * 0.15) + "s"
                  }} />
                </div>
                <span style={{ fontFamily:"var(--font-sans)", fontSize: 20,
                              letterSpacing:"-0.03em", textAlign:"right",
                              color: b.highlight ? "var(--ss-blue)" : "var(--ss-black)" }}>
                  {b.value}%
                </span>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 36, padding: "16px 18px",
                        background:"var(--ss-white)", border:"1px solid var(--ss-black)",
                        display:"flex", justifyContent:"space-between", gap: 20 }}>
            <div>
              <div className="label">NET NEW PATIENTS / WEEK</div>
              <div style={{ fontSize: 32, letterSpacing:"-0.03em", marginTop: 4 }}>
                {Math.round(newPatients)}
              </div>
            </div>
            <div>
              <div className="label">ARRIVED PREPAID + REGISTERED</div>
              <div style={{ fontSize: 32, letterSpacing:"-0.03em", marginTop: 4, color:"var(--ss-blue)" }}>
                100%
              </div>
            </div>
            <div>
              <div className="label">PILOT OUTCOME</div>
              <div style={{ fontSize: 14, marginTop: 8, color:"var(--ss-grey-2)" }}>
                Medrite accelerated rollout <strong style={{ color:"var(--ss-black)" }}>before the pilot ended.</strong>
              </div>
            </div>
          </div>
        </div>

        <div className="growth__viz">
          <img src="assets/storefront-desktop.png" alt="Storefront preview" />
          <div style={{ marginTop: 14, display:"flex", justifyContent:"space-between",
                        fontFamily:"var(--font-mono)", fontSize: 11,
                        color:"var(--ss-grey-3)", letterSpacing:"-0.03em",
                        textTransform:"uppercase" }}>
            <span>3 PILOT SERVICES</span>
            <span>● LIVE</span>
            <span>EXPANDED TO ALL POST-PILOT</span>
          </div>
        </div>
      </div>
    </Section>
  );
}

window.Growth = Growth;