'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { SECTION_ORDER } from '../sectionConfig';

export default function SocialProofPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const qs = searchParams.toString();
  const suffix = qs ? `?${qs}` : '';

  const handleContinue = () => {
    const idx = SECTION_ORDER.indexOf('social-proof');
    const next = SECTION_ORDER[idx + 1];
    if (next) router.push(`/onboarding/${next}${suffix}`);
  };

  return (
    <main className="social-proof-page">
      <div className="social-proof-content">
        <div className="social-proof-orbit" aria-hidden="true">
          <svg className="social-proof-orbit-rings" viewBox="0 0 320 320">
            <circle cx="160" cy="160" r="60" />
            <circle cx="160" cy="160" r="100" />
            <circle cx="160" cy="160" r="140" />
          </svg>
          <div className="social-proof-orbit-image">
            <img src="/assets/social-proof.png" alt="" />
          </div>
        </div>

        <h1 className="social-proof-title">
          <span>4 Million</span> Hearts have chosen Ayatique
        </h1>

        <div className="social-proof-pill">
          <span className="pill-icon">⚡</span>
          2-min quiz to unlock Quranic stories
        </div>
      </div>

      <div className="social-proof-footer">
        <button type="button" className="cta-gold" onClick={handleContinue}>
          Continue
        </button>
      </div>
    </main>
  );
}
