/* Spot-the-fraud interactive demo */

const SPOT_MESSAGES = [
  { id: 1, sender: "Swedbank", initial: "S", color: "#F2A035", body: "Löneinsättning: 28 450,00 kr. Nytt saldo: 34 201,12 kr.", when: "08:12", fraud: false, why: "Notisen kommer från den verifierade Swedbank-appen. Inga länkar, inga uppmaningar." },
  { id: 2, sender: "Paketleverans", initial: "P", color: "#1F6FB2", body: "Ditt paket kunde inte levereras. Boka ny tid: paket-omleverans.se/3847", when: "11:47", fraud: true, why: "Avsändaren saknar tydlig identitet och länken pekar på en domän som inte tillhör något riktigt paketföretag. Seriösa transportörer ber dig öppna deras egen app, inte klicka på en länk." },
  { id: 3, sender: "Klarna", initial: "K", color: "#FFB6C1", body: "Din betalning på 349 kr till H&M förfaller imorgon. Hantera i appen.", when: "13:05", fraud: false, why: "Påminnelse utan länkar. Klarna ber dig öppna sin egen app." },
  { id: 4, sender: "Skatteverket", initial: "S", color: "#0E5A75", body: "Du har ett nytt digitalt brev. Läs det på skatteverket.se/brev", when: "15:22", fraud: false, why: "Officiell domän, ingen brådska, ingen begäran om inloggning." },
  { id: 5, sender: "Netflix", initial: "N", color: "#C8462E", body: "Vi kunde inte dra din betalning. Uppdatera dina uppgifter: netflix-konto.com", when: "18:41", fraud: true, why: "Domänen netflix-konto.com är inte Netflix. Klassisk phishing med pressökande språk." },
  { id: 6, sender: "BankID", initial: "B", color: "#15170F", body: "Identifieringsförfrågan väntar. Öppna BankID-appen för att svara.", when: "20:08", fraud: true, why: "Notisen ser perfekt ut: rätt avsändare, korrekt språk, inga länkar, exakt så här ser en riktig BankID-pushnotis ut. Den enda ledtråden är att du inte just har startat en inloggning någonstans. Bedragare initierar en BankID-session i ditt namn och hoppas att du godkänner reflexmässigt, då släpps de in i din bank eller hos Skatteverket. Den här typen är nästan omöjlig att se på texten, det är därför Notiscan tittar på hela mönstret runt notisen, inte bara orden." },
];

const SpotTheFraud = () => {
  const [revealed, setRevealed] = React.useState({});
  const [picked, setPicked] = React.useState({});

  const onPick = (id, guess) => {
    if (revealed[id]) return;
    setPicked(p => ({ ...p, [id]: guess }));
    setRevealed(r => ({ ...r, [id]: true }));
  };

  const total = SPOT_MESSAGES.length;
  const fraudCount = SPOT_MESSAGES.filter(m => m.fraud).length;
  const answered = Object.keys(revealed).length;
  const correct = Object.entries(picked).filter(([id, g]) => {
    const m = SPOT_MESSAGES.find(x => x.id === Number(id));
    return m && (g === "fraud") === m.fraud;
  }).length;

  const reset = () => { setRevealed({}); setPicked({}); };

  return (
    <section className="section cream-2" id="demo">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Testa själv</span>
          <h2 className="display">En vanlig dag i din inkorg.</h2>
          <p className="lead">Det här är notiser som ploppar upp en helt vanlig vardag. Tre av dem är bedrägeri, varav en är nästan omöjlig att se på texten ensam. Ser du vilka? Det bästa skyddet är kunskap, vi gör det näst bästa.</p>
        </div>

        <div className="spot-grid">
          {SPOT_MESSAGES.map(m => {
            const isRevealed = !!revealed[m.id];
            const guess = picked[m.id];
            const wasRight = isRevealed && (guess === "fraud") === m.fraud;
            return (
              <div key={m.id} className={`spot-msg ${isRevealed ? "revealed" : ""} ${m.fraud ? "fraud" : "legit"}`}>
                <div className="sender-av" style={{ background: m.color }}>{m.initial}</div>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                    <span className="sender">{m.sender}</span>
                    <span className="when">{m.when}</span>
                  </div>
                  <div className="body">{m.body}</div>
                  {isRevealed && (
                    <div style={{ marginTop: 10, fontSize: 14, color: "var(--ink-2)" }}>
                      <b style={{ color: wasRight ? "var(--green-deep)" : "var(--red)" }}>
                        {wasRight ? "Rätt!" : "Inte den här gången."}
                      </b>{" "}{m.why}
                    </div>
                  )}
                </div>
                {!isRevealed ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 6, alignSelf: "center" }} role="group" aria-label={`Bedöm notis från ${m.sender}`}>
                    <button className="btn sm" onClick={() => onPick(m.id, "legit")} style={{ minWidth: 110 }} aria-label={`Markera notis från ${m.sender} som säker`}>Säker</button>
                    <button className="btn sm" onClick={() => onPick(m.id, "fraud")} style={{ minWidth: 110, background: "#FBE3DA" }} aria-label={`Markera notis från ${m.sender} som bedrägeri`}>Bedrägeri</button>
                  </div>
                ) : <div></div>}
                {isRevealed && (
                  <div className="verdict">{m.fraud ? "Bedrägeri" : "Säker"}</div>
                )}
              </div>
            );
          })}
        </div>

        <div className="spot-status">
          {answered === total ? (
            <>
              <div className="score-bubble">
                <span className="num">{correct}/{total}</span>
                <span>{correct === total ? "Imponerande." : correct >= 4 ? "Bra jobbat, men bedragare lurar de flesta." : "Lugn. Notiscan känner igen dem alla."}</span>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <a className="btn primary" href={window.PLAY_LINK.url("postquiz")}>Pröva 30 dagar gratis →</a>
                <button className="btn" onClick={reset}>Försök igen</button>
              </div>
            </>
          ) : (
            <p className="muted" style={{ margin: 0 }}>{answered}/{total} besvarade. Notiscan känner igen dem på millisekunder.</p>
          )}
        </div>
      </div>
    </section>
  );
};

window.SpotTheFraud = SpotTheFraud;