/* IrsPage — full-page IRS 2025 quote flow */

const IRS_ICONS = [
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
    <line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
  </svg>,
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
  </svg>,
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
  </svg>,
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
    <polyline points="9 22 9 12 15 12 15 22"/>
  </svg>,
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
    <polyline points="17 6 23 6 23 12"/>
  </svg>,
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
  </svg>,
];

/* hero copy per language */
const IRS_HERO = {
  pt: {
    badge: "Proposta personalizada em 24 horas",
    headline: ["IRS 2025.", "A parte simples", "de viver em Portugal."],
    accentWords: ["simples"],
    sub: "Não conseguimos entregar o seu IRS em 10 minutos. Ninguém consegue. O que fazemos: dedicamos 5 a 10 minutos às perguntas que realmente importam e enviamos uma proposta real dentro de 24 horas. Não \"a partir de €X\". Não \"depende\". Um número real para a sua situação real.",
    boxBold: "Não existe um preço único.",
    boxBody: "Analisamos cada resposta sua e trabalhamos para manter o valor o mais baixo que conseguirmos. A proposta que chega ao seu email foi escrita por uma pessoa que leu o que escreveu.",
  },
  uk: {
    badge: "Персональна пропозиція за 24 години",
    headline: ["IRS 2025.", "Проста частина", "життя в Португалії."],
    accentWords: ["Проста"],
    sub: "Ми не можемо подати ваш IRS за 10 хвилин. Ніхто не може. Що ми робимо: витрачаємо 5–10 хвилин на питання, які справді мають значення, і надсилаємо реальну пропозицію протягом 24 годин. Не «від €X». Не «залежить». Реальна цифра для вашої реальної ситуації.",
    boxBold: "Єдиної ціни не існує.",
    boxBody: "Ми аналізуємо кожну вашу відповідь і прагнемо зробити суму якомога нижчою. Пропозиція, яка надійде вам на пошту, написана людиною, яка прочитала те, що ви написали.",
  },
  ru: {
    badge: "Персональное предложение за 24 часа",
    headline: ["IRS 2025.", "Простая часть", "жизни в Португалии."],
    accentWords: ["Простая"],
    sub: "Мы не можем подать ваш IRS за 10 минут. Никто не может. Что мы делаем: тратим 5–10 минут на вопросы, которые действительно важны, и отправляем реальное предложение в течение 24 часов. Не «от €X». Не «зависит». Реальная цифра для вашей реальной ситуации.",
    boxBold: "Единой цены не существует.",
    boxBody: "Мы анализируем каждый ваш ответ и стремимся сделать сумму как можно ниже. Предложение, которое придёт вам на почту, написано человеком, который прочитал то, что вы написали.",
  },
};

/* ── wizard helpers (same as IrsWizard) ── */
function RadioOption({ option, selected, onSelect }) {
  return (
    <button type="button" className={`wz-option${selected ? " selected" : ""}`} onClick={() => onSelect(option.id)}>
      <div className="wz-radio">
        <svg className="wz-radio-check" width="11" height="9" viewBox="0 0 11 9" fill="none">
          <path d="M1 4L4 7.5L10 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <div className="wz-option-body">
        <div className="wz-option-title">{option.title}</div>
        {option.sub && <div className="wz-option-sub">{option.sub}</div>}
      </div>
    </button>
  );
}

function IncomeCard({ source, icon, selected, onToggle }) {
  return (
    <button type="button" className={`wz-inc-card${selected ? " selected" : ""}`} onClick={() => onToggle(source.id)} aria-pressed={selected}>
      <div className="wz-inc-icon">{icon}</div>
      <div className="wz-inc-body">
        <div className="wz-inc-title">{source.title}</div>
        <div className="wz-inc-sub">{source.sub}</div>
      </div>
      <div className="wz-inc-check" aria-hidden="true">
        {selected && (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        )}
      </div>
    </button>
  );
}

function Pill({ label, selected, onClick }) {
  return (
    <button type="button" className={`wz-pill${selected ? " selected" : ""}`} onClick={onClick}>
      {label}
    </button>
  );
}

/* ── IrsPage component ── */
function IrsPage({ lang, setLang }) {
  const t    = (window.I18N[lang] || window.I18N["pt"]).wizard;
  const hero = IRS_HERO[lang] || IRS_HERO["pt"];

  const [step, setStep]       = React.useState(0);
  const [done, setDone]       = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);
  const [data, setData] = React.useState({
    married: null, tax: null, incomes: [],
    incomeRange: null, bankCount: null, bankForeign: null,
    name: "", email: "", phone: "",
  });

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleIncome = (id) => setData(d => ({
    ...d,
    incomes: d.incomes.includes(id) ? d.incomes.filter(x => x !== id) : [...d.incomes, id],
  }));

  const canAdvance = () => {
    if (step === 0) return !!data.married;
    if (step === 1) return !!data.tax;
    if (step === 2) return data.incomes.length > 0 && !!data.incomeRange && !!data.bankCount && !!data.bankForeign;
    if (step === 3) return data.name.trim() && /\S+@\S+\.\S+/.test(data.email);
    return false;
  };

  const submit = async () => {
    if (!canAdvance()) return;
    if (step < t.steps.length - 1) { setStep(step + 1); window.scrollTo({ top: document.getElementById("irs-form").offsetTop - 32, behavior: "smooth" }); return; }
    setSending(true); setSubmitError(null);
    try {
      const marriedLabel = t.married.options.find(o => o.id === data.married)?.title || data.married;
      const taxLabel     = t.tax.options.find(o => o.id === data.tax)?.title || data.tax;
      const incomesLabel = data.incomes.map(id => t.income.sources.find(s => s.id === id)?.title || id).join(", ");
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "af5963d4-45e2-47b9-8566-205df3906fb0",
          subject: `[OR · IRS 2025] ${data.name}`,
          from_name: "OR — Site (IRS Page)",
          name: data.name, email: data.email, phone: data.phone,
          estado_civil: marriedLabel, regime_fiscal: taxLabel,
          rendimentos: incomesLabel, faixa_rendimento: data.incomeRange,
          contas_bancarias: data.bankCount, contas_estrangeiro: data.bankForeign,
          language: lang,
        }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.success === false) throw new Error(json.message || "Erro ao enviar");
      setDone(true);
    } catch (err) {
      setSubmitError(t.error);
    } finally { setSending(false); }
  };

  const pct = ((step + 1) / t.steps.length) * 100;

  /* render headline with accent on specific words */
  const renderHeadline = () => hero.headline.map((line, i) => {
    const isAccent = hero.accentWords.some(w => line.includes(w));
    return (
      <span key={i} style={{ display: "block", color: isAccent ? "#16A34A" : "inherit" }}>
        {line}
      </span>
    );
  });

  return (
    <div className="irs-page">
      {/* minimal header */}
      <header className="irs-page-header">
        <a href="/" className="nav-logo" style={{ textDecoration: "none" }}>
          OR
          <small>Contabilidade · Consultoria Fiscal</small>
        </a>
        <div className="irs-page-header-right">
          {[{code:"pt",label:"PT"},{code:"uk",label:"UA"},{code:"ru",label:"RU"}].map(({code,label}) => (
            <button
              key={code}
              className={`irs-lang-btn${lang === code ? " active" : ""}`}
              onClick={() => { setLang(code); try { localStorage.setItem("or-lang", code); } catch(e){} }}
            >
              {label}
            </button>
          ))}
          <a href="/" className="irs-back-link">
            ← {lang === "uk" ? "На головну" : lang === "ru" ? "На главную" : "Voltar ao site"}
          </a>
        </div>
      </header>

      {/* hero */}
      <section className="irs-page-hero">
        <div className="irs-page-hero-inner">
          <div className="irs-badge">
            <span className="irs-badge-dot"></span>
            {hero.badge}
          </div>
          <h1 className="irs-page-headline">{renderHeadline()}</h1>
          <p className="irs-page-sub">{hero.sub}</p>
          <div className="irs-page-box">
            <span className="irs-box-bold">{hero.boxBold}</span>{" "}{hero.boxBody}
          </div>
        </div>
      </section>

      {/* form */}
      <section className="irs-page-form-wrap" id="irs-form">
        <div className="irs-page-form-inner">

          {done ? (
            <div className="wz-success" style={{ background: "#fff", borderRadius: 20, padding: "48px 32px" }}>
              <div className="wz-success-mark">✓</div>
              <h2>{t.success.title}</h2>
              <p>{t.success.body.replace("{name}", data.name)}</p>
              <a href="/" className="wz-btn-next" style={{ display: "inline-block", textDecoration: "none", margin: "0 auto" }}>
                {lang === "uk" ? "На головну" : lang === "ru" ? "На главную" : "Voltar ao site"} →
              </a>
            </div>
          ) : (
            <>
              {/* progress bar */}
              <div className="irs-page-progress">
                <div className="wz-progress-meta">
                  <span>{lang === "uk" ? "Крок" : lang === "ru" ? "Шаг" : "Passo"} {step + 1} {lang === "uk" ? "з" : lang === "ru" ? "из" : "de"} {t.steps.length}</span>
                  <span className="wz-step-name">{t.steps[step]}</span>
                </div>
                <div className="wz-progress-bar" style={{ borderRadius: 4 }}>
                  <div className="wz-progress-fill" style={{ width: `${pct}%` }}></div>
                </div>
              </div>

              {/* question card */}
              <div className="irs-page-card">

                {step === 0 && (
                  <>
                    <h2 className="wz-title">{t.married.title}</h2>
                    <p className="wz-lead">{t.married.lead}</p>
                    <div className="wz-options">
                      {t.married.options.map(o => <RadioOption key={o.id} option={o} selected={data.married === o.id} onSelect={v => set("married", v)} />)}
                    </div>
                  </>
                )}

                {step === 1 && (
                  <>
                    <h2 className="wz-title">{t.tax.title}</h2>
                    <p className="wz-lead">{t.tax.lead}</p>
                    <div className="wz-options">
                      {t.tax.options.map(o => <RadioOption key={o.id} option={o} selected={data.tax === o.id} onSelect={v => set("tax", v)} />)}
                    </div>
                  </>
                )}

                {step === 2 && (
                  <>
                    <h2 className="wz-title">{t.income.title}</h2>
                    <p className="wz-lead">{t.income.lead}</p>
                    <div className="wz-inc-grid">
                      {t.income.sources.map((s, i) => (
                        <IncomeCard key={s.id} source={s} icon={IRS_ICONS[i]} selected={data.incomes.includes(s.id)} onToggle={toggleIncome} />
                      ))}
                    </div>
                    <div className="wz-bigger-card">
                      <div className="wz-bigger-head">
                        <div className="wz-bigger-icon">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>
                          </svg>
                        </div>
                        <div>
                          <div className="wz-bigger-title">{t.income.biggerTitle}</div>
                          <div className="wz-bigger-sub">{t.income.biggerSub}</div>
                        </div>
                      </div>
                      <div className="wz-bigger-group">
                        <div className="wz-bigger-label">{t.income.rangeLabel}</div>
                        <div className="wz-pills">{t.income.ranges.map(r => <Pill key={r} label={r} selected={data.incomeRange === r} onClick={() => set("incomeRange", r)} />)}</div>
                      </div>
                      <div className="wz-bigger-group">
                        <div className="wz-bigger-label">{t.income.bankLabel}</div>
                        <div className="wz-pills">{t.income.bankCounts.map(c => <Pill key={c} label={c} selected={data.bankCount === c} onClick={() => set("bankCount", c)} />)}</div>
                      </div>
                      <div className="wz-bigger-group">
                        <div className="wz-bigger-label">{t.income.foreignLabel}</div>
                        <div className="wz-pills">
                          <Pill label={t.income.yes} selected={data.bankForeign === "sim"} onClick={() => set("bankForeign", "sim")} />
                          <Pill label={t.income.no}  selected={data.bankForeign === "nao"} onClick={() => set("bankForeign", "nao")} />
                        </div>
                      </div>
                    </div>
                  </>
                )}

                {step === 3 && (
                  <>
                    <h2 className="wz-title">{t.contact.title}</h2>
                    <p className="wz-lead">{t.contact.lead}</p>
                    <div className="wz-fields">
                      <div className="wz-row-2">
                        <div className="wz-field">
                          <label>{t.contact.name}</label>
                          <input type="text" autoComplete="off" value={data.name} onChange={e => set("name", e.target.value)} />
                        </div>
                        <div className="wz-field">
                          <label>{t.contact.email}</label>
                          <input type="email" autoComplete="off" value={data.email} onChange={e => set("email", e.target.value)} />
                        </div>
                      </div>
                      <div className="wz-field" style={{ maxWidth: 260 }}>
                        <label>{t.contact.phone}</label>
                        <input type="tel" autoComplete="off" value={data.phone} onChange={e => set("phone", e.target.value)} />
                      </div>
                    </div>
                  </>
                )}

              </div>{/* end card */}

              {/* nav */}
              <div className="irs-page-nav">
                {step > 0
                  ? <button type="button" className="wz-btn-back" onClick={() => setStep(step - 1)}>{t.nav.back}</button>
                  : <div />
                }
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                  {submitError && <p style={{ fontSize: 12, color: "#dc2626", margin: 0 }}>{submitError}</p>}
                  <button type="button" className="wz-btn-next" disabled={!canAdvance() || sending} onClick={submit}>
                    {sending ? t.nav.sending : step < t.steps.length - 1 ? t.nav.next : t.nav.submit}
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      </section>

      <footer className="irs-page-footer">
        © 2026 OR Contabilidade · <a href="/">orcontabilidade.com</a>
      </footer>
    </div>
  );
}

window.IrsPage = IrsPage;
