/* Diagnóstico Digital — UI React trilingüe (FR · DE · ES). Usa window.DIAG. */
const { useState, useEffect, useRef } = React;

const LANGS = ["fr", "de", "es", "en"];
const STORE = "md_lang";

const UI = {
  fr: {
    back_site: "← Retour au site",
    wkicker: "Gratuit · Sans inscription", wt1: "Diagnostic", wt2: "digital gratuit",
    wlead: "Répondez à quelques questions simples sur votre activité et recevez aussitôt un rapport personnalisé : votre score digital sur 100, vos points forts, vos axes d'amélioration et des recommandations concrètes.",
    f_min: "minutes", f_blocks: "blocs", f_score: "score",
    start: "Commencer le diagnostic", fineprint: "Vos réponses ne sont pas partagées. Le rapport est généré automatiquement pour vous.",
    progress: (c, t) => "Étape " + c + " sur " + t, multi_hint: "· plusieurs choix", choose: "Choisissez une option…",
    back: "← Retour", next: "Suivant", see_report: "Voir mon rapport",
    rkicker: "Votre rapport digital", rtitle: e => "Diagnostic de " + e, your_biz: "votre activité", pts: "pts",
    strengths_h: "Points forts détectés", opp_h: "Axes d'amélioration", impact_h: "Impact estimé sur votre activité", rec_h: "Recommandations personnalisées",
    svc_kicker: "Comment Mariño Digital peut vous aider", svc_h: "Des services pour ce dont vous avez besoin maintenant",
    cta_h: "Je veux un audit personnalisé gratuit", cta_p: "Je vous analyse en profondeur, sans engagement, et je vous propose un plan sur mesure sans jargon.",
    cta_btn: "Demander l'audit gratuit", cta_more: "En savoir plus sur Mariño Digital", restart: "↺ Refaire le diagnostic",
  },
  de: {
    back_site: "← Zurück zur Website",
    wkicker: "Kostenlos · Ohne Anmeldung", wt1: "Kostenlose", wt2: "Digital-Analyse",
    wlead: "Beantworten Sie ein paar einfache Fragen zu Ihrem Unternehmen und erhalten Sie sofort einen persönlichen Bericht: Ihr Digital-Score von 100, Ihre Stärken, Ihre Verbesserungspotenziale und konkrete Empfehlungen.",
    f_min: "Minuten", f_blocks: "Blöcke", f_score: "Score",
    start: "Analyse starten", fineprint: "Ihre Antworten werden nicht geteilt. Der Bericht wird automatisch für Sie erstellt.",
    progress: (c, t) => "Schritt " + c + " von " + t, multi_hint: "· Mehrfachauswahl", choose: "Wählen Sie eine Option…",
    back: "← Zurück", next: "Weiter", see_report: "Meinen Bericht ansehen",
    rkicker: "Ihr Digital-Bericht", rtitle: e => "Diagnose von " + e, your_biz: "Ihr Unternehmen", pts: "Pkt.",
    strengths_h: "Erkannte Stärken", opp_h: "Verbesserungspotenziale", impact_h: "Geschätzte Auswirkung auf Ihr Geschäft", rec_h: "Persönliche Empfehlungen",
    svc_kicker: "Wie Mariño Digital Ihnen helfen kann", svc_h: "Services für das, was Sie jetzt brauchen",
    cta_h: "Ich möchte ein kostenloses Audit", cta_p: "Ich analysiere Sie gründlich, unverbindlich, und schlage Ihnen einen maßgeschneiderten Plan ohne Fachjargon vor.",
    cta_btn: "Kostenloses Audit anfragen", cta_more: "Mehr über Mariño Digital", restart: "↺ Analyse wiederholen",
  },
  es: {
    back_site: "← Volver a la web",
    wkicker: "Gratis · Sin registro", wt1: "Diagnóstico", wt2: "digital gratuito",
    wlead: "Responde unas preguntas sencillas sobre tu negocio y recibe al instante un informe personalizado: tu puntuación digital sobre 100, tus fortalezas, tus oportunidades de mejora y recomendaciones prácticas.",
    f_min: "minutos", f_blocks: "bloques", f_score: "puntuación",
    start: "Empezar diagnóstico", fineprint: "Tus respuestas no se comparten. El informe se genera automáticamente para ti.",
    progress: (c, t) => "Paso " + c + " de " + t, multi_hint: "· varias opciones", choose: "Elige una opción…",
    back: "← Atrás", next: "Siguiente", see_report: "Ver mi informe",
    rkicker: "Tu informe digital", rtitle: e => "Diagnóstico de " + e, your_biz: "tu negocio", pts: "pts",
    strengths_h: "Fortalezas detectadas", opp_h: "Oportunidades de mejora", impact_h: "Impacto estimado en tu negocio", rec_h: "Recomendaciones personalizadas",
    svc_kicker: "Cómo puede ayudarte Mariño Digital", svc_h: "Servicios para lo que tu negocio necesita ahora",
    cta_h: "Quiero una auditoría personalizada gratuita", cta_p: "Te reviso a fondo, sin compromiso, y te propongo un plan a medida sin tecnicismos.",
    cta_btn: "Pedir auditoría gratis", cta_more: "Ver más sobre Mariño Digital", restart: "↺ Repetir el diagnóstico",
  },
  en: {
    back_site: "← Back to site",
    wkicker: "Free · No sign-up", wt1: "Free digital", wt2: "diagnostic",
    wlead: "Answer a few simple questions about your business and instantly get a personalised report: your digital score out of 100, your strengths, your areas for improvement and practical recommendations.",
    f_min: "minutes", f_blocks: "blocks", f_score: "score",
    start: "Start the diagnostic", fineprint: "Your answers aren't shared. The report is generated automatically for you.",
    progress: (c, t) => "Step " + c + " of " + t, multi_hint: "· multiple choice", choose: "Choose an option…",
    back: "← Back", next: "Next", see_report: "See my report",
    rkicker: "Your digital report", rtitle: e => "Diagnostic of " + e, your_biz: "your business", pts: "pts",
    strengths_h: "Strengths detected", opp_h: "Areas for improvement", impact_h: "Estimated impact on your business", rec_h: "Personalised recommendations",
    svc_kicker: "How Mariño Digital can help you", svc_h: "Services for what you need now",
    cta_h: "I want a free personalised audit", cta_p: "I'll review you in depth, with no commitment, and propose a tailored plan with no jargon.",
    cta_btn: "Request the free audit", cta_more: "More about Mariño Digital", restart: "↺ Retake the diagnostic",
  },
};

function ProgressBar({ current, total, ui }) {
  const pct = Math.round((current / total) * 100);
  return (
    <div className="dg-progress">
      <div className="dg-progress-meta"><span>{ui.progress(current, total)}</span><span>{pct}%</span></div>
      <div className="dg-progress-track"><div className="dg-progress-fill" style={{ width: pct + "%" }} /></div>
    </div>
  );
}

function Option({ type, checked, label, onClick }) {
  return (
    <button type="button" className={"dg-opt" + (checked ? " on" : "")} onClick={onClick} aria-pressed={checked}>
      <span className={"dg-box " + type}>{checked ? (type === "single" ? <span className="dot" /> : "✓") : null}</span>
      <span className="dg-opt-label">{label}</span>
    </button>
  );
}

function Question({ q, value, onChange, ui }) {
  if (q.type === "text") {
    return (
      <div className="dg-q">
        <label className="dg-q-label" htmlFor={q.id}>{q.label}</label>
        <input id={q.id} className="dg-input" type="text" placeholder={q.placeholder || ""} value={value || ""} onChange={e => onChange(e.target.value)} />
      </div>
    );
  }
  if (q.type === "select") {
    return (
      <div className="dg-q">
        <label className="dg-q-label" htmlFor={q.id}>{q.label}</label>
        <div className="dg-select-wrap">
          <select id={q.id} className="dg-input dg-select" value={value || ""} onChange={e => onChange(e.target.value)}>
            <option value="" disabled>{ui.choose}</option>
            {q.options.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
          </select>
          <span className="dg-chev">▾</span>
        </div>
      </div>
    );
  }
  if (q.type === "single") {
    return (
      <div className="dg-q">
        <div className="dg-q-label">{q.label}</div>
        <div className="dg-opts">
          {q.options.map(o => <Option key={o.v} type="single" checked={value === o.v} label={o.label} onClick={() => onChange(o.v)} />)}
        </div>
      </div>
    );
  }
  const arr = Array.isArray(value) ? value : [];
  const toggle = v => {
    let next;
    if (q.none && v === q.none) next = arr.includes(v) ? [] : [v];
    else next = arr.includes(v) ? arr.filter(x => x !== v) : [...arr.filter(x => x !== q.none), v];
    onChange(next);
  };
  return (
    <div className="dg-q">
      <div className="dg-q-label">{q.label} <span className="dg-hint">{ui.multi_hint}</span></div>
      <div className="dg-opts grid">
        {q.options.map(o => <Option key={o.v} type="multi" checked={arr.includes(o.v)} label={o.label} onClick={() => toggle(o.v)} />)}
      </div>
    </div>
  );
}

function LangSwitch({ lang, setLang }) {
  return (
    <div className="dg-lang" role="group" aria-label="Language">
      {LANGS.map((l, i) => (
        <React.Fragment key={l}>
          {i ? <span className="sep">/</span> : null}
          <button type="button" className={l === lang ? "active" : ""} onClick={() => setLang(l)}>{l.toUpperCase()}</button>
        </React.Fragment>
      ))}
    </div>
  );
}

function Welcome({ onStart, ui }) {
  return (
    <div className="dg-welcome">
      <span className="dg-kicker">{ui.wkicker}</span>
      <h1 className="dg-h1">{ui.wt1}<br />{ui.wt2}</h1>
      <p className="dg-lead">{ui.wlead}</p>
      <div className="dg-facts">
        <div className="dg-fact"><span className="dg-fact-n">3–5</span><span className="dg-fact-l">{ui.f_min}</span></div>
        <div className="dg-fact"><span className="dg-fact-n">10</span><span className="dg-fact-l">{ui.f_blocks}</span></div>
        <div className="dg-fact"><span className="dg-fact-n">/100</span><span className="dg-fact-l">{ui.f_score}</span></div>
      </div>
      <button className="dg-btn lg" onClick={onStart}>{ui.start} <span className="arr">↗</span></button>
      <p className="dg-fineprint">{ui.fineprint}</p>
    </div>
  );
}

function Gauge({ score, level }) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    const dur = 1100, t0 = Date.now();
    const id = setInterval(() => {
      const p = Math.min(1, (Date.now() - t0) / dur), e = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(e * score));
      if (p >= 1) clearInterval(id);
    }, 30);
    const fb = setTimeout(() => setVal(score), dur + 300);
    return () => { clearInterval(id); clearTimeout(fb); };
  }, [score]);
  const R = 86, C = 2 * Math.PI * R, off = C - (val / 100) * C;
  return (
    <div className="dg-gauge">
      <svg viewBox="0 0 200 200" width="200" height="200">
        <circle cx="100" cy="100" r={R} className="dg-gauge-bg" />
        <circle cx="100" cy="100" r={R} className={"dg-gauge-fg lvl-" + level.key} style={{ strokeDasharray: C, strokeDashoffset: off }} transform="rotate(-90 100 100)" />
      </svg>
      <div className="dg-gauge-center"><span className="dg-gauge-num">{val}</span><span className="dg-gauge-max">/ 100</span></div>
    </div>
  );
}

function Report({ answers, onRestart, lang, ui }) {
  const r = window.DIAG.buildReport(answers, lang);
  const empresa = answers.empresa ? answers.empresa : ui.your_biz;
  return (
    <div className="dg-report">
      <div className="dg-report-hero">
        <div>
          <span className="dg-kicker">{ui.rkicker}</span>
          <h1 className="dg-h1 sm">{ui.rtitle(empresa)}</h1>
          <div className={"dg-level lvl-" + r.level.key}>
            <span className="dg-level-name">{r.level.name}</span>
            <span className="dg-level-range">{r.level.range} {ui.pts}</span>
          </div>
          <p className="dg-level-blurb">{r.level.blurb}</p>
        </div>
        <Gauge score={r.score} level={r.level} />
      </div>
      <div className="dg-cols">
        <section className="dg-block">
          <h3 className="dg-block-h"><span className="dg-ico ok">✦</span> {ui.strengths_h}</h3>
          <ul className="dg-list">{r.strengths.map((s, i) => <li key={i}>{s}</li>)}</ul>
        </section>
        <section className="dg-block">
          <h3 className="dg-block-h"><span className="dg-ico warn">!</span> {ui.opp_h}</h3>
          <ul className="dg-list">{r.opportunities.map((s, i) => <li key={i}>{s}</li>)}</ul>
        </section>
      </div>
      <section className="dg-impact">
        <h3 className="dg-block-h light">{ui.impact_h}</h3>
        <p>{r.impact}</p>
      </section>
      <section className="dg-block wide">
        <h3 className="dg-block-h"><span className="dg-ico rec">→</span> {ui.rec_h}</h3>
        <ol className="dg-reclist">{r.recommendations.map((s, i) => <li key={i}><span className="dg-recn">{String(i + 1).padStart(2, "0")}</span>{s}</li>)}</ol>
      </section>
      <section className="dg-services">
        <span className="dg-kicker center">{ui.svc_kicker}</span>
        <h3 className="dg-services-h">{ui.svc_h}</h3>
        <div className="dg-svc-grid">
          {r.services.map((s, i) => <div className="dg-svc" key={i}><h4>{s.name}</h4><p>{s.desc}</p></div>)}
        </div>
      </section>
      <section className="dg-cta">
        <h2>{ui.cta_h}</h2>
        <p>{ui.cta_p}</p>
        <div className="dg-cta-btns">
          <a className="dg-btn lg" href="https://wa.me/41796377370" target="_blank" rel="noopener">{ui.cta_btn} <span className="arr">↗</span></a>
          <a className="dg-btn ghost" href="index.html#contacto">{ui.cta_more}</a>
        </div>
        <button className="dg-restart" onClick={onRestart}>{ui.restart}</button>
      </section>
    </div>
  );
}

function App() {
  const [lang, setLangState] = useState(() => { const l = localStorage.getItem(STORE); return LANGS.includes(l) ? l : "fr"; });
  const setLang = l => { setLangState(l); localStorage.setItem(STORE, l); document.documentElement.lang = l; };
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const ui = UI[lang];
  const steps = window.DIAG.localizedSteps(lang);
  const total = steps.length;
  const [stage, setStage] = useState("welcome");
  const [answers, setAnswers] = useState({});
  const [shake, setShake] = useState(false);
  const topRef = useRef(null);

  useEffect(() => { if (topRef.current) topRef.current.scrollTop = 0; window.scrollTo(0, 0); }, [stage]);

  const set = (id, v) => setAnswers(a => ({ ...a, [id]: v }));
  const visibleQs = step => step.questions.filter(q => window.DIAG.visible(q, answers));
  const stepComplete = step => visibleQs(step).every(q => {
    const v = answers[q.id];
    if (q.type === "multi") return Array.isArray(v) && v.length > 0;
    return v !== undefined && v !== null && String(v).trim() !== "";
  });

  const next = () => {
    const step = steps[stage];
    if (!stepComplete(step)) { setShake(true); setTimeout(() => setShake(false), 500); return; }
    if (stage === total - 1) setStage("report"); else setStage(stage + 1);
  };
  const back = () => { if (stage === 0) setStage("welcome"); else setStage(stage - 1); };

  let content;
  if (stage === "welcome") content = <Welcome onStart={() => setStage(0)} ui={ui} />;
  else if (stage === "report") content = <Report answers={answers} onRestart={() => { setAnswers({}); setStage("welcome"); }} lang={lang} ui={ui} />;
  else {
    const step = steps[stage];
    content = (
      <div className={"dg-step" + (shake ? " shake" : "")}>
        <ProgressBar current={stage + 1} total={total} ui={ui} />
        <div className="dg-step-head">
          <span className="dg-kicker">{step.kicker}</span>
          <h2 className="dg-step-title">{step.title}</h2>
          {step.subtitle && <p className="dg-step-sub">{step.subtitle}</p>}
        </div>
        <div className="dg-questions">
          {visibleQs(step).map(q => <Question key={q.id} q={q} value={answers[q.id]} onChange={v => set(q.id, v)} ui={ui} />)}
        </div>
        <div className="dg-nav">
          <button className="dg-btn ghost" onClick={back}>{ui.back}</button>
          <button className="dg-btn" onClick={next}>{stage === total - 1 ? ui.see_report : ui.next} <span className="arr">→</span></button>
        </div>
      </div>
    );
  }

  return (
    <div className="dg-shell" ref={topRef}>
      <header className="dg-top">
        <a href="index.html" className="dg-logo"><span className="b">Mariño</span><span className="s">Digital</span></a>
        <div className="dg-top-right">
          <LangSwitch lang={lang} setLang={setLang} />
          <a href="index.html" className="dg-back-site">{ui.back_site}</a>
        </div>
      </header>
      <main className="dg-main">{content}</main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);