/* Problem / Solution — parallax dual columns */
const Problem = () => {
  const ref = React.useRef(null);
  const p = useScrollProgress(ref);

  return (
    <section ref={ref} className="relative py-32 overflow-hidden">
      <div className="mx-auto max-w-[1400px] px-6">
        <div className="flex items-end justify-between flex-wrap gap-8 mb-20">
          <div className="max-w-2xl">
            <div className="font-mono text-xs tracking-[0.3em] text-flame mb-5" data-reveal>[ 01 / THE PROBLEM ]</div>
            <h2 className="word-rev text-[clamp(40px,6vw,96px)] leading-[0.95] tracking-[-0.03em] font-bold">
              {splitWords("Every missed call is")} <span className="serif text-flame">{splitWords("revenue walking away.")}</span>
            </h2>
          </div>
          <p className="text-white/60 text-lg max-w-md" data-reveal data-reveal-delay="2">
            The average service business misses <span className="text-flame font-semibold">62% of calls after hours</span> — and 85% of those callers never call back. They call your competitor.
          </p>
        </div>

        {/* Two parallax columns */}
        <div className="grid md:grid-cols-2 gap-6">
          {/* WITHOUT */}
          <div
            className="bg-panel border border-line2 rounded-3xl p-8 md:p-12 relative overflow-hidden"
            data-py="0.16" data-px="10"
          >
            <div className="font-mono text-xs tracking-[0.3em] text-white/40 mb-6">WITHOUT GRIPPY</div>
            <ul className="space-y-5 text-white/70">
              {[
                ['62%', 'after-hours calls go to voicemail'],
                ['$340', 'avg job value lost per missed call'],
                ['85%', 'voicemail callers never call back'],
                ['11pm', 'when emergencies actually happen'],
                ['$0', 'your website earns at 2am'],
              ].map(([n, t]) => (
                <li key={t} className="flex items-baseline gap-5 pb-5 border-b border-line2 last:border-0">
                  <div className="font-bold text-3xl text-white/30 w-20 tabular-nums">{n}</div>
                  <div className="text-base">{t}</div>
                </li>
              ))}
            </ul>
          </div>

          {/* WITH */}
          <div
            className="bg-flame text-black rounded-3xl p-8 md:p-12 relative overflow-hidden"
            data-py="-0.16" data-px="-10"
          >
            <div className="font-mono text-xs tracking-[0.3em] text-black/60 mb-6">WITH GRIPPY</div>
            <ul className="space-y-5">
              {[
                ['100%', 'calls answered — every hour, every day'],
                ['<2s', 'pickup time, faster than a human'],
                ['+38%', 'more booked jobs in 90 days'],
                ['24/7', 'on-call dispatch that never sleeps'],
                ['$0', 'extra payroll, training, or PTO'],
              ].map(([n, t]) => (
                <li key={t} className="flex items-baseline gap-5 pb-5 border-b border-black/15 last:border-0">
                  <div className="font-bold text-3xl w-20 tabular-nums">{n}</div>
                  <div className="text-base font-medium">{t}</div>
                </li>
              ))}
            </ul>
            <div className="absolute top-8 right-8 font-mono text-xs tracking-[0.2em] text-black/50">DAY 1 →</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Problem = Problem;