/* global React */
(function(){
const { useState, useEffect } = React;

/* =============================================================
   OnboardingTour.jsx — 3-slide welcome tour
   --------------------------------------------------------------
   Shown once after first signup. Persists "seen" in localStorage.
   ============================================================= */

const SLIDES = [
  {
    accent: "#ff4ea8",
    icon: "swipe",
    title: "خوش اومدی به کشوردوست",
    sub: "این یه جشنواره‌ی آنلاینه برای روایت ایران — متن، عکس، ویدیو، صوت. هر چی هست، اینجا جاش هست.",
    art: "festival",
  },
  {
    accent: "#9a6cff",
    icon: "upload",
    title: "اثرتو بفرست",
    sub: "هر روز یه چالش جدید داریم. هر چی فرستادی، مردم رای می‌دن — ۵ نفر برتر هر ماه برنده می‌شن.",
    art: "upload",
  },
  {
    accent: "#f5d589",
    icon: "trophy",
    title: "جایزه‌ها واقعی‌ان",
    sub: "بیلبوردهای شهری، مصاحبه‌ی تلویزیونی، تله‌فیلم AI از داستانک‌ت، و جشنواره‌ی سالانه‌ی حضوری.",
    art: "rewards",
  },
];

window.OnboardingTour = function OnboardingTour({ onDone, onSkip }) {
  const [idx, setIdx] = useState(0);
  const slide = SLIDES[idx];
  const isLast = idx === SLIDES.length - 1;

  // mark seen on done
  const finish = () => {
    try { localStorage.setItem("kd-tour-seen", "1"); } catch {}
    onDone?.();
  };
  const skip = () => {
    try { localStorage.setItem("kd-tour-seen", "1"); } catch {}
    onSkip?.();
  };

  return (
    <div className="kd-tour" style={{ ['--accent']: slide.accent }}>
      <div className="kd-tour__aurora" aria-hidden="true">
        <i style={{ background: `radial-gradient(circle, ${slide.accent} 0%, transparent 65%)` }} />
      </div>

      <button className="kd-tour__skip" onClick={skip}>رد کن</button>

      <div className="kd-tour__inner">
        <div className="kd-tour__art" data-art={slide.art}>
          <Art kind={slide.art} accent={slide.accent} />
        </div>

        <div className="kd-tour__copy">
          <span className="kd-tour__step">
            {String(idx + 1).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d])} از {String(SLIDES.length).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d])}
          </span>
          <h1 className="kd-tour__title">{slide.title}</h1>
          <p className="kd-tour__sub">{slide.sub}</p>
        </div>

        <div className="kd-tour__dots" role="tablist">
          {SLIDES.map((_, i) => (
            <button
              key={i}
              className={`kd-tour__dot ${i === idx ? "is-on" : ""}`}
              onClick={() => setIdx(i)}
              aria-label={`اسلاید ${i + 1}`}
            />
          ))}
        </div>

        <div className="kd-tour__nav">
          {idx > 0 && (
            <button className="kd-tour__navbtn" onClick={() => setIdx(i => i - 1)}>
              <Icon name="chevron" size={16} stroke={2.4} /> قبلی
            </button>
          )}
          <span style={{ flex: 1 }} />
          {!isLast ? (
            <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={() => setIdx(i => i + 1)}>
              بعدی <Icon name="back" size={16} stroke={2.4} />
            </button>
          ) : (
            <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={finish}>
              بریم! <Icon name="back" size={16} stroke={2.4} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

/* SVG art per slide — kept inline, simple geometric brand-shape */
function Art({ kind, accent }) {
  if (kind === "festival") {
    return (
      <svg viewBox="0 0 360 220" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="#ff4ea8" />
            <stop offset="50%" stopColor="#9a6cff" />
            <stop offset="100%" stopColor="#4be3ff" />
          </linearGradient>
        </defs>
        <circle cx="60" cy="160" r="44" fill="url(#g1)" opacity="0.32" />
        <circle cx="180" cy="80" r="60" fill="url(#g1)" opacity="0.42" />
        <circle cx="300" cy="160" r="38" fill="url(#g1)" opacity="0.32" />
        {/* figures inspired by logo */}
        <g transform="translate(140,90)" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round">
          <circle cx="0" cy="0" r="8" />
          <path d="M -10 14 q 10 -6 20 0 v 22" />
          <circle cx="22" cy="-4" r="7" fill="#f5d589" stroke="#f5d589" />
          <path d="M 13 10 q 9 -5 18 0 v 22" />
          <circle cx="44" cy="0" r="8" />
          <path d="M 34 14 q 10 -6 20 0 v 22" />
        </g>
      </svg>
    );
  }
  if (kind === "upload") {
    return (
      <svg viewBox="0 0 360 220" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="g2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={accent} stopOpacity="0.7" />
            <stop offset="100%" stopColor={accent} stopOpacity="0.05" />
          </linearGradient>
        </defs>
        {/* base */}
        <rect x="120" y="150" width="120" height="40" rx="8" fill="url(#g2)" stroke={accent} strokeOpacity="0.4" />
        {/* upload icon */}
        <g transform="translate(180,55)" stroke={accent} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M 0 0 v 80" />
          <path d="M -22 22 l 22 -22 l 22 22" />
        </g>
        {/* surrounding sparkles */}
        <circle cx="60" cy="60" r="3" fill={accent} />
        <circle cx="300" cy="50" r="4" fill={accent} opacity="0.7" />
        <circle cx="70" cy="170" r="3" fill="#f5d589" />
        <circle cx="290" cy="170" r="3" fill="#4be3ff" />
        <circle cx="280" cy="100" r="2" fill="#fff" opacity="0.6" />
        <circle cx="90" cy="110" r="2" fill="#fff" opacity="0.6" />
      </svg>
    );
  }
  if (kind === "rewards") {
    return (
      <svg viewBox="0 0 360 220" xmlns="http://www.w3.org/2000/svg">
        {/* trophy */}
        <g transform="translate(180,110)" stroke="#f5d589" strokeWidth="3" fill="none" strokeLinejoin="round" strokeLinecap="round">
          <path d="M -28 -40 h 56 v 16 a 28 28 0 0 1 -56 0 z" fill="#f5d589" fillOpacity="0.18" />
          <path d="M -28 -34 h -14 a 8 8 0 0 0 12 12" />
          <path d="M 28 -34 h 14 a 8 8 0 0 1 -12 12" />
          <path d="M -10 8 h 20" />
          <path d="M 0 -8 v 16" />
          <path d="M -16 22 h 32" />
        </g>
        {/* confetti */}
        <circle cx="80" cy="60" r="4" fill="#ff4ea8" />
        <circle cx="100" cy="100" r="3" fill="#4be3ff" />
        <circle cx="260" cy="60" r="3" fill="#9a6cff" />
        <circle cx="280" cy="110" r="4" fill="#44e3b8" />
        <rect x="60" y="160" width="6" height="3" fill="#ff8a3d" transform="rotate(20 60 160)" />
        <rect x="300" y="170" width="6" height="3" fill="#f5d589" transform="rotate(-30 300 170)" />
        <rect x="170" y="180" width="6" height="3" fill="#ff4ea8" transform="rotate(10 170 180)" />
      </svg>
    );
  }
  return null;
}
})();