;(function () {
/* AreaChart — 320x140 SVG area chart with teal gradient fill + line on top. */

const STROKE_PATH =
  'M 0 100 C 30 95, 50 105, 80 90 C 110 75, 140 85, 170 65 C 200 50, 230 60, 260 35 C 290 25, 305 30, 320 20';
const FILL_PATH = `${STROKE_PATH} L 320 140 L 0 140 Z`;

const AreaChart = () => {
  return (
    <svg
      width="100%"
      height={140}
      viewBox="0 0 320 140"
      preserveAspectRatio="none"
    >
      <defs>
        <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={colors.teal} stopOpacity={0.35} />
          <stop offset="1" stopColor={colors.teal} stopOpacity={0} />
        </linearGradient>
      </defs>
      <path d={FILL_PATH} fill="url(#chartFill)" />
      <path
        d={STROKE_PATH}
        stroke={colors.teal}
        strokeWidth={2.5}
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

Object.assign(window, { AreaChart });
})();