// extras.jsx — additional rich sections for Elast Clinic
const { useState: _useState, useEffect: _useEffect, useRef: _useRef } = React;

/* ---------- Promo strip (top) ---------- */
function PromoStrip({ lang }) {
  const target = _useRef(new Date(Date.now() + 1000 * 60 * 60 * 47).getTime()).current;
  const [now, setNow] = _useState(Date.now());
  _useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
  let d = Math.max(0, target - now);
  const hh = String(Math.floor(d / 3.6e6)).padStart(2, "0");
  d %= 3.6e6;
  const mm = String(Math.floor(d / 6e4)).padStart(2, "0");
  d %= 6e4;
  const ss = String(Math.floor(d / 1000)).padStart(2, "0");
  return (
    <div className="promo-strip">
      <span className="promo-strip__dot"/>
      <span>{lang === "uk" ? "Травневий бонус: −15% на курс біоревіталізації" : "May bonus: −15% on biorevitalisation course"}</span>
      <span className="promo-strip__sep">·</span>
      <span className="promo-strip__count"><b>{hh}</b>:<b>{mm}</b>:<b>{ss}</b></span>
    </div>
  );
}

/* ---------- Quiz: подобрать процедуру ---------- */
const QUIZ_Q = {
  uk: [
    { q: "Що турбує найбільше?", opts: [
      { v: "tone",   l: "Тьмяна шкіра, втомлений вигляд" },
      { v: "lines",  l: "Зморшки, овал обличчя" },
      { v: "acne",   l: "Постакне, текстура шкіри" },
      { v: "hair",   l: "Небажане волосся" },
    ]},
    { q: "Скільки часу маєте на реабілітацію?", opts: [
      { v: "none", l: "Жодного — вечір на людях" },
      { v: "day",  l: "1–2 дні вдома" },
      { v: "week", l: "До тижня" },
    ]},
    { q: "Ваш бюджет на одну процедуру?", opts: [
      { v: "low",  l: "До 2 000 грн" },
      { v: "med",  l: "2 000 — 5 000 грн" },
      { v: "high", l: "5 000+ грн" },
    ]},
  ],
  en: [
    { q: "What bothers you most?", opts: [
      { v: "tone",  l: "Dull skin, tired look" },
      { v: "lines", l: "Wrinkles, sagging" },
      { v: "acne",  l: "Post-acne, texture" },
      { v: "hair",  l: "Unwanted hair" },
    ]},
    { q: "How much downtime do you have?", opts: [
      { v: "none", l: "None — out tonight" },
      { v: "day",  l: "1–2 days at home" },
      { v: "week", l: "Up to a week" },
    ]},
    { q: "Your budget per session?", opts: [
      { v: "low",  l: "Up to 2 000 UAH" },
      { v: "med",  l: "2 000 — 5 000 UAH" },
      { v: "high", l: "5 000+ UAH" },
    ]},
  ],
};
const QUIZ_RESULT = {
  tone: { uk: ["Біоревіталізація", "Курс 4 процедури з інтервалом 2 тижні. Шкіра світліє, повертається тонус."],
          en: ["Biorevitalisation", "Course of 4 sessions every 2 weeks. Brightens, restores tone."], page: "site/services/injection.html" },
  lines:{ uk: ["Ботулінотерапія + філери", "Комбінований протокол — мімічні зморшки і носогубні складки. Результат тримається до 9 місяців."],
          en: ["Botulinum + fillers", "Combined protocol — mimic lines and nasolabial folds."], page: "site/services/injection.html" },
  acne: { uk: ["Лазерна терапія Fraxel", "Прицільне оновлення епідермісу. 3 процедури з інтервалом 4 тижні."],
          en: ["Fraxel laser", "Targeted resurfacing. 3 sessions, 4 weeks apart."], page: "site/services/laser.html" },
  hair: { uk: ["Лазерна епіляція", "Олександрит або діод 808 нм. Курс — 6 процедур до повного результату."],
          en: ["Laser hair removal", "Alexandrite or 808 nm diode. 6 sessions to full result."], page: "site/services/laser.html" },
};
function Quiz({ lang, onBook }) {
  const [open, setOpen] = _useState(false);
  const [step, setStep] = _useState(0);
  const [ans, setAns] = _useState({});
  const qs = QUIZ_Q[lang];
  function pick(v) {
    const next = { ...ans, [step]: v };
    setAns(next);
    if (step + 1 < qs.length) setStep(step + 1);
    else setStep(qs.length); // result
  }
  function reset() { setStep(0); setAns({}); }
  const result = QUIZ_RESULT[ans[0]];
  return (
    <React.Fragment>
      <section className="quiz-cta" id="quiz">
        <div className="container container--wide">
          <div className="quiz-cta__panel">
            <div>
              <div className="hero__eyebrow">{lang === "uk" ? "Не знаєте, що вам потрібно?" : "Not sure what you need?"}</div>
              <h2 className="quiz-cta__title">
                {lang === "uk" ? "Підберемо " : "We'll find your "} <em>{lang === "uk" ? "вашу процедуру" : "procedure"}</em>
                <br/>{lang === "uk" ? "за 30 секунд." : "in 30 seconds."}
              </h2>
              <p className="quiz-cta__sub">{lang === "uk" ? "Три питання — і ви отримаєте конкретну рекомендацію лікаря, без зайвих знижок-запитів." : "Three questions — and you get a clear recommendation, no upsell."}</p>
            </div>
            <button className="hero__cta" onClick={() => { reset(); setOpen(true); }}>
              {lang === "uk" ? "Почати" : "Start the quiz"} →
            </button>
          </div>
        </div>
      </section>

      {open && (
        <div className="quiz-modal" onClick={(e) => { if (e.target.classList.contains("quiz-modal")) setOpen(false); }}>
          <div className="quiz-modal__inner">
            <button className="quiz-modal__close" onClick={() => setOpen(false)}>×</button>
            {step < qs.length ? (
              <React.Fragment>
                <div className="quiz-progress">
                  {qs.map((_, i) => <span key={i} className={i <= step ? "is-on" : ""}/>)}
                </div>
                <div className="quiz-step">
                  <div className="quiz-step__num">{String(step + 1).padStart(2, "0")} / {String(qs.length).padStart(2, "0")}</div>
                  <h3>{qs[step].q}</h3>
                  <div className="quiz-opts">
                    {qs[step].opts.map((o) => (
                      <button key={o.v} className="quiz-opt" onClick={() => pick(o.v)}>
                        <span>{o.l}</span>
                        <span className="quiz-opt__arrow">→</span>
                      </button>
                    ))}
                  </div>
                </div>
              </React.Fragment>
            ) : (
              <div className="quiz-result">
                <div className="hero__eyebrow">{lang === "uk" ? "Ваша рекомендація" : "Your recommendation"}</div>
                <h3>{result ? (lang === "uk" ? result.uk[0] : result.en[0]) : "—"}</h3>
                <p>{result ? (lang === "uk" ? result.uk[1] : result.en[1]) : ""}</p>
                <div className="quiz-result__actions">
                  <button className="hero__cta" onClick={() => { setOpen(false); onBook(); }}>
                    {lang === "uk" ? "Записатися" : "Book a visit"} →
                  </button>
                  <button className="hero__cta-ghost" onClick={reset}>
                    {lang === "uk" ? "Пройти ще раз" : "Retake"}
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

/* ---------- Equipment / brands strip ---------- */
const EQUIP = [
  { name: "Juvederm",  type: "filler" },
  { name: "Restylane", type: "filler" },
  { name: "Profhilo",  type: "biostim" },
  { name: "Bocouture", type: "btx" },
  { name: "IAL System", type: "biorev" },
  { name: "Fotona",    type: "laser" },
  { name: "Candela",   type: "laser" },
  { name: "Lumenis",   type: "laser" },
];
function Equipment({ lang }) {
  return (
    <section className="equip" id="equipment">
      <div className="container container--wide">
        <div className="section-head">
          <div>
            <div className="hero__eyebrow">{lang === "uk" ? "Препарати та обладнання" : "Products & equipment"}</div>
            <h2 className="section-head__title" style={{ marginTop: 16 }}>
              {lang === "uk" ? "Тільки сертифіковані " : "Only certified "}<em>{lang === "uk" ? "бренди" : "brands"}</em>
            </h2>
          </div>
          <div className="section-head__rhs">
            {lang === "uk"
              ? "Кожен препарат — з європейського реєстру. Кожен апарат — з підтвердженою клінічною базою."
              : "Every product is from an EU registry. Every device has clinical evidence."}
          </div>
        </div>
        <div className="equip__grid">
          {EQUIP.map((e) => (
            <div className="equip__card" key={e.name}>
              <span className="equip__type">{e.type}</span>
              <span className="equip__name">{e.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PromoStrip, Quiz, Equipment });