"use client";

/**
 * Metrics — four headline results with animated count-up on scroll-in.
 * The ROAS metric is the single emerald-accented "signature" number.
 */

import Reveal from "./Reveal";
import CountUp from "./CountUp";
import { metrics } from "../content";

export default function Metrics() {
  return (
    <section id="results" className="metrics" aria-label="Results">
      <div className="wrap">
        <Reveal>
          <p className="kicker">The numbers</p>
          <h2 className="section__title">Results we can show you.</h2>
        </Reveal>

        <div className="metrics__inner">
          <Reveal className="metrics__grid" stagger={0.1}>
            {metrics.map((m) => (
              <div
                className={`metric${"accent" in m && m.accent ? " metric--accent" : ""}`}
                key={m.label}
              >
                <p className="metric__num">
                  <CountUp
                    value={m.value}
                    prefix={"prefix" in m ? m.prefix : ""}
                    suffix={m.suffix}
                    decimals={"decimals" in m ? m.decimals : 0}
                  />
                </p>
                <p className="metric__label">{m.label}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}