// Cases.jsx — "Case studies": audit-led conversion wins.
// Layout: three columns. Left + middle thirds hold the two flagship cases
// (Annabella, Her Fantasy Box) as vertical cards — full square poster on top,
// every metric shown, plus a subtle CTA (no dropdown). Right third stacks three
// compact proof cases (Juvenon, Omnilux, WigDealer); these use a "Show results"
// accordion and no case-study link. A paid-audit CTA band closes the section.

const CS_PRIMARY = [
  {
    brand: "Annabella",
    img: "assets/cases/annabella.avif",
    logo: "assets/cases/logos/annabella.avif",
    tag: "Featured case",
    feat: true,
    headline: "Audit-led Shopify rebuild that doubled conversion in 60 days",
    href: "/conversion/case-study/dtc-baby-brand",
    metrics: [
      { v: "+113%", l: "CVR lift in 60 days" },
      { v: "+234%", l: "increase in ATC" },
      { v: "+226%", l: "Completed checkout" },
    ],
    cta: "Read the Annabella case study",
  },
  {
    brand: "Her Fantasy Box",
    img: "assets/cases/herfantasybox.avif",
    logo: "assets/cases/logos/her-fantasy-box.avif",
    logoTall: true,
    tag: "Case study",
    href: "/conversion/case-study/subscription-purchase-growth",
    headline: "63 tests, 42 winners, and subscription growth",
    metrics: [
      { v: "+26.41%", l: "mobile conversion lift" },
      { v: "+15.43%", l: "subscription lift" },
      { v: "+27.56%", l: "subscription lift" },
    ],
    cta: "Read the testing case study",
  },
];

const CS_SECONDARY = [
  {
    brand: "Juvenon",
    img: "assets/cases/juvenon.avif",
    logo: "assets/cases/logos/juvenon.avif",
    funnel: "PDP · Testing",
    headline: "PDP purchase options made easier to act on",
    metrics: [
      { v: "+35.24%", l: "CVR lift — featured PDP win" },
      { v: "99.18%", l: "statistical confidence" },
      { v: "90 / 62", l: "tests run / winners in broader program" },
    ],
  },
  {
    brand: "Omnilux",
    img: "assets/cases/omnilux.avif",
    logo: "assets/cases/logos/omnilux.avif",
    funnel: "Nav · PDP · Homepage",
    headline: "High-ticket DTC proof moved closer to the buying decision",
    metrics: [
      { v: "+58%", l: "CVR lift — reviews & results in nav" },
      { v: "+35%", l: "CVR lift — PDP testimonial video" },
      { v: "+13.26%", l: "CVR lift — homepage hero proof" },
    ],
  },
  {
    brand: "WigDealer",
    img: "assets/cases/wigdealer.avif",
    logo: "assets/cases/logos/wigdealer.avif",
    funnel: "Cart · Collection · PDP",
    headline: "Cart, collection, and PDP friction reduced across the funnel",
    metrics: [
      { v: "+10.74%", l: "RPV lift — cart simplification" },
      { v: "+7.77%", l: "CVR lift — collection top-fold" },
      { v: "+7.07%", l: "CVR lift — PDP testimonial video" },
    ],
  },
];

// count-up that respects +/- sign, decimals, and % suffix; runs once in view
function csUseCount(target, run) {
  const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!run) return;
    if (reduce) { setN(target); return; }
    let raf, start;
    const tick = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / 1100); setN(target * (1 - Math.pow(1 - p, 3))); if (p < 1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => { if (raf) cancelAnimationFrame(raf); };
  }, [run, target]);
  return run ? n : 0;
}

function CsMetricValue({ value }) {
  const ref = useRef(null);
  const [run, setRun] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => { es.forEach((e) => { if (e.isIntersecting) { setRun(true); io.disconnect(); } }); }, { threshold: 0.4 });
    io.observe(el);
    const t = setTimeout(() => setRun(true), 1800);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  const m = String(value).match(/^([+-]?)(\d+(?:\.\d+)?)(.*)$/);
  const target = m ? parseFloat(m[2]) : 0;
  const decimals = m ? ((m[2].split(".")[1] || "").length) : 0;
  const n = csUseCount(target, run);
  if (!m) return <span ref={ref}>{value}</span>;
  const shown = decimals ? n.toFixed(decimals) : Math.round(n).toString();
  return <span ref={ref}>{m[1]}{shown}{m[3]}</span>;
}

const csUp = (v) => String(v).trim().startsWith("+");

// flagship card: full square poster on top, all metrics shown, subtle CTA
function CsPrimaryCard({ c, idx }) {
  return (
    <article className={"cs-card cs-pcard card-mat" + (c.feat ? " cs-pcard--feat" : "")} style={{ "--bi": idx }}>
      <span className="card-beam" aria-hidden="true" />
      <div className="cs-media">
        <img src={assetUrl(c.img)} alt={c.brand + " — " + c.headline} loading="lazy" />
      </div>
      <div className="cs-content">
        <div className="cs-tagrow">
          <span className={"cs-tag" + (c.feat ? " cs-tag--feat" : "")}><span className="pdot" />{c.tag}</span>
          <img className={"cs-logo" + (c.logoTall ? " cs-logo--tall" : "")} src={assetUrl(c.logo)} alt={c.brand} />
        </div>
        <h3 className="cs-h">{c.headline}</h3>
        <div className="cs-metrics">
          {c.metrics.map((m, i) => (
            <div key={m.l + i} className="cs-metric">
              <span className={"cs-metric__v" + (csUp(m.v) ? " cs-up" : "")}><CsMetricValue value={m.v} /></span>
              <span className="cs-metric__l">{m.l}</span>
            </div>
          ))}
        </div>
        <a href={c.href || "#cta"} className="cs-cta-link">{c.cta} <i className="ri-arrow-right-line" /></a>
      </div>
    </article>
  );
}

// compact proof card: square thumb + headline, metrics behind a Show-results
// accordion (top metric peeks through a fade when collapsed), no case link
function CsSecondaryCard({ c, idx }) {
  const [open, setOpen] = useState(false);
  return (
    <article className="cs-card cs-scard card-mat" style={{ "--bi": idx }}>
      <span className="card-beam" aria-hidden="true" />
      <div className="cs-media cs-media--rail">
        <img src={assetUrl(c.img)} alt={c.brand + " — " + c.headline} loading="lazy" />
      </div>
      <div className="cs-scard-body">
        <div className="cs-tagrow">
          <img className="cs-logo cs-logo--rail" src={assetUrl(c.logo)} alt={c.brand} />
          <span className="cs-proof-funnel">{c.funnel}</span>
        </div>
        <h4 className="cs-proof-h">{c.headline}</h4>

        <div className={"cs-results" + (open ? " is-open" : "")}>
          <div className="cs-results-inner">
            {c.metrics.map((m, i) => (
              <div key={m.l + i} className="cs-pm">
                <span className={"cs-pm__v" + (csUp(m.v) ? " cs-up" : "")}><CsMetricValue value={m.v} /></span>
                <span className="cs-pm__l">{m.l}</span>
              </div>
            ))}
          </div>
        </div>

        <button type="button" className="cs-disclose" aria-expanded={open} onClick={() => setOpen(!open)}>
          {open ? "Hide results" : "Show results"}
          <i className={"ri-arrow-down-s-line" + (open ? " is-up" : "")} />
        </button>
      </div>
    </article>
  );
}

function Cases() {
  const headRef = useReveal();
  const gridRef = useReveal();
  const ctaRef = useReveal();
  return (
    <section id="showcase" className="section cases-sec">
      <div className="haze-bloom" aria-hidden="true" />
      <div className="wrap">
        <div ref={headRef} className="reveal sec-head cases-head" style={{ maxWidth: 760 }}>
          <div className="eyebrow"><span className="dot" />Case studies</div>
          <h2 className="h-section">From audit findings to shipped conversion wins.</h2>
          <p className="p-lead">
            The best proof is not a prettier page. It is what happens after the diagnosis turns into a prioritized fix, a cleaner funnel, or a test that proves what works.
          </p>
        </div>

        <div ref={gridRef} className="reveal cases-grid">
          {CS_PRIMARY.map((c, i) => <CsPrimaryCard key={c.brand} c={c} idx={i} />)}
          <div className="cases-rail">
            {CS_SECONDARY.map((c, i) => <CsSecondaryCard key={c.brand} c={c} idx={i} />)}
          </div>
        </div>

        <div ref={ctaRef} className="reveal cases-cta">
          <h3 className="cases-cta__h">See what your audit would find.</h3>
          <p className="cases-cta__sub">
            We'll help you understand whether your biggest opportunity is audit, implementation, testing, or a longer optimization roadmap.
          </p>
          <a href="#cta" className="btn btn-primary cases-cta__btn">Book a Shopify audit consult <i className="ri-arrow-right-line" /></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cases });