'use client';

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

const STAR_PATH = 'M9.263 1.268c.232-.714 1.242-.714 1.474 0l1.783 5.488c.104.32.401.536.737.536h5.77c.752 0 1.064.96.456 1.402l-4.668 3.391a.775.775 0 0 0-.282.867l1.784 5.488c.231.714-.586 1.308-1.193.866l-4.669-3.392a.775.775 0 0 0-.91 0l-4.67 3.393c-.606.44-1.423-.153-1.191-.867l1.783-5.488a.775.775 0 0 0-.282-.867L.517 8.695C-.091 8.252.22 7.292.972 7.292h5.77a.775.775 0 0 0 .738-.536z';

export default function WelcomePage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const qs = searchParams.toString();
  const suffix = qs ? `?${qs}` : '';
  const [showCookies, setShowCookies] = useState(false);

  useEffect(() => {
    const dismissed = typeof window !== 'undefined' && window.localStorage.getItem('cookies-acknowledged');
    if (!dismissed) setShowCookies(true);
  }, []);

  const dismissCookies = () => {
    setShowCookies(false);
    try { window.localStorage.setItem('cookies-acknowledged', '1'); } catch {}
  };

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

  return (
    <main className="welcome-page">
      <div className="welcome-bg" aria-hidden="true">
        <img src="/assets/intro-bg.jpg" alt="" />
      </div>
      <div className="welcome-overlay" aria-hidden="true" />

      <div className="welcome-content">
        <img className="welcome-moon" src="/assets/hilal.svg" alt="" aria-hidden="true" width={128} height={128} />

        <div className="welcome-titles">
          <p className="welcome-title-sub">Welcome to</p>
          <h1 className="welcome-title-main">AyahStories</h1>
        </div>
      </div>

      <div className="welcome-footer">
        <div className="welcome-trust">
          <div className="welcome-trust-row">
            <img className="welcome-laurel welcome-laurel-left" src="/assets/laurel-left.svg" alt="" aria-hidden="true" />
            <div className="welcome-trust-center">
              <span className="welcome-trust-label">Trusted by Muslims Worldwide</span>
              <div className="welcome-stars">
                {[...Array(5)].map((_, i) => (
                  <span key={i} className="welcome-star-item" style={{ animationDelay: `${0.8 + i * 0.2}s` }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                      <path d={STAR_PATH} fill="#F5AC4C" />
                    </svg>
                  </span>
                ))}
              </div>
            </div>
            <img className="welcome-laurel welcome-laurel-right" src="/assets/laurel-right.svg" alt="" aria-hidden="true" />
          </div>
        </div>

        <button type="button" className="cta-gold welcome-cta" onClick={handleContinue}>
          Continue
        </button>
        {!showCookies && (
          <p className="welcome-footer-text">
            By proceeding, you accept our<br />
            <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>.
          </p>
        )}
      </div>

      {showCookies && (
        <div className="cookie-banner" role="dialog" aria-label="Cookie consent">
          <p className="cookie-banner-text">
            We use cookies for your best online experience. See our <a href="#">Cookie Policy</a>.
          </p>
          <button type="button" className="cookie-banner-okay" onClick={dismissCookies}>
            Okay
          </button>
        </div>
      )}
    </main>
  );
}
