const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Finder quiz + FAQ accordion
function Finder() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({ height: null, age: null, level: null });

  const questions = [
    {
      key: "height",
      title: "რა არის rider-ის სიმაღლე?",
      options: [
        { v: "90-120", label: "90 – 120 სმ", hint: "პატარა ბავშვი" },
        { v: "110-140", label: "110 – 140 სმ", hint: "მოზარდი" },
        { v: "140-160", label: "140 – 160 სმ", hint: "ძველი მოზარდი" },
        { v: "160+", label: "160 სმ +", hint: "ზრდასრული" }
      ]
    },
    {
      key: "age",
      title: "რა ასაკისაა rider?",
      options: [
        { v: "4-7", label: "4 – 7 წელი" },
        { v: "8-12", label: "8 – 12 წელი" },
        { v: "13-17", label: "13 – 17 წელი" },
        { v: "18+", label: "18 წელი +" }
      ]
    },
    {
      key: "level",
      title: "რა გამოცდილება აქვს rider-ს?",
      options: [
        { v: "first", label: "პირველი ცდა", hint: "არასდროს ჰყავდა მართული" },
        { v: "some", label: "მცირე გამოცდილება", hint: "უტარია რამდენჯერმე" },
        { v: "intermediate", label: "საშუალო", hint: "კომფორტულად მართავს" },
        { v: "advanced", label: "გამოცდილი", hint: "off-road-ზე ხშირად" }
      ]
    }
  ];

  function recommend({ height, age, level }) {
    if (height === "90-120") {
      return { family: "Warrior Kids", model: "SX-E250 ან SX-E350", id: "warrior-kids", reason: "ბავშვის სიმაღლისთვის ოპტიმალური საწყისი ხაზი — დაბალი seat height, კონტროლირებადი ძალა, parental speed control." };
    }
    if (height === "110-140") {
      return { family: "Warrior Youth", model: level === "first" ? "SX-E2" : "SX-E5", id: "warrior-youth", reason: "მოზარდი rider-ისთვის — მეტი ძალა, range და ნამდვილი off-road შესაძლებლობა." };
    }
    if (height === "140-160") {
      return { family: "Warrior", model: "SX-E8", id: "warrior", reason: "Bridge მოდელი youth-სა და pro-grade-ს შორის — agile, powerful, advanced performance." };
    }
    if (height === "160+") {
      if (level === "advanced") return { family: "Warrior Pro", model: "SX-E15 PLUS", id: "warrior-pro", reason: "Pro-grade ხაზი dedicated rider-ისთვის — მაქსიმალური performance, ძლიერი suspension და braking." };
      return { family: "Ares", model: "RALLY ან RALLY PRO", id: "ares", reason: "Flagship all-terrain ხაზი — versatile პლატფორმა trail, adventure და commute გამოყენებისთვის." };
    }
    return { family: "Warrior Kids", model: "SX-E250", id: "warrior-kids", reason: "კარგი საწყისი წერტილი ნებისმიერი rider-ისთვის." };
  }

  const choose = (key, v) => {
    const next = { ...answers, [key]: v };
    setAnswers(next);
    setTimeout(() => {
      if (step < questions.length - 1) setStep(step + 1);
      else setStep(questions.length);
    }, 220);
  };

  const reset = () => { setAnswers({ height: null, age: null, level: null }); setStep(0); };
  const result = step === questions.length ? recommend(answers) : null;
  const q = questions[step];

  return (
    <div className="finder">
      <div className="finder-progress">
        {questions.map((_, i) => (
          <div
            key={i}
            className={`fp-step ${i < step ? "done" : ""} ${i === step ? "active" : ""}`}
          >
            <span className="fp-num">0{i + 1}</span>
            <span className="fp-bar"></span>
          </div>
        ))}
        <div className={`fp-step ${step === questions.length ? "active done" : ""}`}>
          <span className="fp-num">→</span>
          <span className="fp-bar"></span>
        </div>
      </div>

      {result ? (
        <div className="finder-result">
          <div className="fr-label">შენი RFN რეკომენდაცია</div>
          <div className="fr-family">{result.family}</div>
          <div className="fr-model">{result.model}</div>
          <p className="fr-reason">{result.reason}</p>
          <div className="fr-cta">
            <a href={`#${result.id}`} className="btn btn-primary">ხაზის ნახვა</a>
            <button className="btn btn-ghost" onClick={reset}>თავიდან დაწყება</button>
          </div>
        </div>
      ) : (
        <div className="finder-question" key={q.key}>
          <div className="fq-counter">კითხვა {step + 1} / {questions.length}</div>
          <h4 className="fq-title">{q.title}</h4>
          <div className="fq-options">
            {q.options.map((opt) => (
              <button
                key={opt.v}
                className={`fq-opt ${answers[q.key] === opt.v ? "selected" : ""}`}
                onClick={() => choose(q.key, opt.v)}
              >
                <span className="fq-opt-label">{opt.label}</span>
                {opt.hint ? <span className="fq-opt-hint">{opt.hint}</span> : null}
                <span className="fq-opt-arrow">→</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {window.RFN_DATA.faq.map((item, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span className="faq-num">0{i + 1}</span>
            <span className="faq-text">{item.q}</span>
            <span className="faq-icon" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M5 10h10M10 5v10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/>
              </svg>
            </span>
          </button>
          <div className="faq-a-wrap">
            <div className="faq-a">{item.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Finder = Finder;
window.FAQ = FAQ;