/* Problem · How it works · For-whom (audience tabs) · Customize · Why */

/* ---- Problem (subtle, sourced) ---- */
const ProblemSection = () => (
  <section className="section paper" id="problem">
    <div className="container">
      <div className="problem-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>Vad vi håller koll på</span>
          <h2 className="display" style={{ marginTop: 12 }}>
            Bedrägeriförsöken har blivit en del av vardagen.
          </h2>
          <p className="lead" style={{ marginTop: 18, maxWidth: 540 }}>
            Falska sms från "banken", paketmissar från ett "paketföretag", investeringserbjudanden i flödet, någon som hör av sig och låtsas vara barnbarnet. Det är inte ovanligt längre, det är vardag. Och social manipulation drabbar främst äldre.
          </p>
          <p style={{ marginTop: 14, color: "var(--ink-2)", fontSize: 14, maxWidth: 540 }}>
            Källa: Brottsförebyggande rådet (Brå), Anmälda brott 2025 (slutlig statistik, mars 2026) · Polismyndigheten, Brottsvinsterna för bedrägeribrottsligheten 2025 (april 2026) · NTU 2025.
          </p>
        </div>
        <div className="problem-stats">
          <div className="problem-stat">
            <div className="num">232 862</div>
            <div className="lbl">anmälda bedrägerier i Sverige under 2025.</div>
          </div>
          <div className="problem-stat">
            <div className="num">5,7 mdr kr</div>
            <div className="lbl">var brottsvinsterna från bedrägerier 2025.</div>
          </div>
          <div className="problem-stat">
            <div className="num">39 %</div>
            <div className="lbl">av svenskarna oroar sig för internetbedrägeri (+7 pp sedan 2022).</div>
          </div>
        </div>
      </div>
      <p className="problem-foot">
        Social manipulation är den vanligaste formen och drabbar främst äldre. Investeringsbedrägeri står för de största enskilda förlusterna.
      </p>
    </div>
  </section>
);

/* ---- How it works (3 steps, local processing emphasized) ---- */
const HowItWorks = () => {
  const steps = [
    {
      n: 1, t: "Vi läser dina notiser",
      d: "Notiscan kör i bakgrunden på telefonen och tittar på sms, mejl och appnotiser i samma stund som de ploppar in.",
      icon: (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><rect x="6" y="6" width="20" height="20" rx="3"/><path d="M11 13h10M11 17h10M11 21h6"/></svg>)
    },
    {
      n: 2, t: "Vi känner igen mönstret",
      d: "Bluffsms, falska fakturor, paketmissar, BankID-knep, knepiga investeringserbjudanden. Vi har sett hundratusentals, vi vet hur de ser ut.",
      icon: (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="14" cy="14" r="7"/><path d="m20 20 6 6"/></svg>)
    },
    {
      n: 3, t: "Vi flaggar innan du klickar",
      d: "Du får en lugn, tydlig varning på skärmen. Om du vill kan vi också mejla din kontaktperson, så någon nära får veta utan att du behöver lyfta luren.",
      icon: (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 4 6 8v8c0 6 4 10 10 12 6-2 10-6 10-12V8L16 4Z"/><path d="m12 16 3 3 5-5"/></svg>)
    },
  ];
  return (
    <section className="section paper" id="hur">
      <div className="container">
        <div className="section-head" style={{ marginInline: "auto", textAlign: "center", alignItems: "center" }}>
          <span className="eyebrow"><span className="dot"></span>Så fungerar det</span>
          <h2 className="display">Tre saker händer, i tysthet.</h2>
          <p className="lead">Inga konton att koppla. Inga lösenord att lämna ifrån sig. Vi vidarebefordrar aldrig dina meddelanden, och vi säljer aldrig data.</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span className="num">{s.n}</span>
                <span className="icon">{s.icon}</span>
              </div>
              <h3 className="display">{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---- Two audiences: Skydda mig själv / Skydda en närstående ---- */
const ForWhom = () => {
  const [tab, setTab] = React.useState("self");

  const SELF = {
    eyebrow: "För dig själv",
    title: "Du behåller kontrollen, vi håller koll i bakgrunden.",
    body: "Notiscan stoppar bluffsamtalen och bedrägeri-sms:en innan de når dig. Du behöver inte lära dig något nytt. Du fortsätter använda telefonen som vanligt, vi tittar bara över axeln.",
    bullets: [
      "Falska sms från \"banken\", \"paketföretaget\" eller \"mobiloperatören\"",
      "Sms-fakturor och låtsasbarnbarn",
      "Investeringserbjudanden i sociala flöden",
      "Knep som vill åt ditt BankID",
    ],
    cta: "Pröva 30 dagar gratis →",
    campaign: "forwhom_self",
    footer: "Mindre än en kopp kaffe i veckan. Ingen bindningstid.",
  };

  const FAMILY = {
    eyebrow: "För en närstående",
    title: "Hjälp en förälder slippa bluffsamtalen, utan att de behöver lära sig något nytt.",
    body: "Du bor kanske inte i samma stad. Det är okej. Aktivera Notiscan på en mobil i taget, din förälder märker bara att telefonen blivit lugnare. Du kan bli kontaktperson och få ett mejl när något flaggats, utan att se hens privata meddelanden.",
    bullets: [
      "Aktivera på avstånd, ett mejl räcker",
      "Du blir kontaktperson, nivån väljer de själva",
      "Familj-paket: täcker två personer, en faktura",
      "Inga övervakningsdashboards, ingen loggning av samtal",
    ],
    cta: "Aktivera idag →",
    campaign: "forwhom_family",
    footer: "\"Vi vill inte att priset ska vara orsaken till att någons förälder blir lurad.\"",
  };

  const data = tab === "self" ? SELF : FAMILY;

  return (
    <section className="section cream" id="vem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>För vem</span>
          <h2 className="display">Två sätt att börja.</h2>
          <p className="lead">De flesta börjar med en av två tankar. Välj den som passar dig.</p>
          <div style={{ marginTop: 18, display: "flex", gap: 10, justifyContent: "flex-start", flexWrap: "wrap" }} role="tablist" aria-label="Välj målgrupp">
            <button
              className={`btn ${tab === "self" ? "primary" : ""}`}
              onClick={() => setTab("self")}
              role="tab"
              id="tab-self"
              aria-selected={tab === "self"}
              aria-controls="audience-panel"
            >För mig själv</button>
            <button
              className={`btn ${tab === "family" ? "primary" : ""}`}
              onClick={() => setTab("family")}
              role="tab"
              id="tab-family"
              aria-selected={tab === "family"}
              aria-controls="audience-panel"
            >För en närstående</button>
          </div>
        </div>

        <div
          className="audience-card"
          role="tabpanel"
          id="audience-panel"
          aria-labelledby={tab === "self" ? "tab-self" : "tab-family"}
        >
          <div>
            <span className="eyebrow"><span className="dot"></span>{data.eyebrow}</span>
            <h3 className="display" style={{ marginTop: 12, fontSize: "clamp(28px, 3vw, 40px)" }}>{data.title}</h3>
            <p style={{ marginTop: 14, color: "var(--ink-2)", fontSize: 17, lineHeight: 1.55, maxWidth: 540 }}>{data.body}</p>
            <a className="btn primary lg" href={window.PLAY_LINK.url(data.campaign)} style={{ marginTop: 22 }}>{data.cta}</a>
            <p style={{ marginTop: 14, color: "var(--muted)", fontSize: 14, maxWidth: 460, fontStyle: tab === "family" ? "italic" : "normal" }}>{data.footer}</p>
          </div>
          <ul className="audience-bullets">
            {data.bullets.map((b, i) => (
              <li key={i}>
                <span className="bullet-dot"></span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

/* ---- Customize ---- */
const Customize = () => {
  const [active, setActive] = React.useState("text");
  const opts = [
    { id: "text",  ic: "Aa", label: "Textstorlek", desc: "Du väljer storleken som passar dig." },
    { id: "theme", ic: "Lj", label: "Ljust eller mörkt", desc: "Anpassa utseendet efter din miljö." },
    { id: "sound", ic: "Va", label: "Varningsljud",  desc: "Bestäm hur du vill bli uppmärksammad." },
    { id: "lang",  ic: "Sv", label: "Språk & röst",  desc: "Notiscan pratar svenska, lugnt och tydligt." },
  ];

  let preview = null;
  if (active === "text") {
    preview = (
      <div className="mini-app">
        <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Textstorlek</div>
        <div className="row-mini" style={{ fontSize: 14 }}>Liten</div>
        <div className="row-mini" style={{ fontSize: 17, border: "2px solid var(--ink)" }}>Standard, rekommenderas</div>
        <div className="row-mini" style={{ fontSize: 22, fontWeight: 600 }}>Stor</div>
        <div className="row-mini" style={{ fontSize: 28, fontWeight: 700 }}>Extra stor</div>
      </div>
    );
  } else if (active === "theme") {
    preview = (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className="mini-app" style={{ minHeight: 280 }}>
          <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Ljust</div>
          <div className="row-mini">Swedbank · 28 450 kr</div>
          <div className="row-mini" style={{ background: "#FBE3DA", border: "1.5px solid var(--red)" }}>Gm4il, bedrägeri</div>
        </div>
        <div className="mini-app dark" style={{ minHeight: 280 }}>
          <div style={{ fontSize: 11, opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.1em" }}>Mörkt</div>
          <div className="row-mini">Swedbank · 28 450 kr</div>
          <div className="row-mini" style={{ background: "#3A1A14", color: "#FFB7A1" }}>Gm4il, bedrägeri</div>
        </div>
      </div>
    );
  } else if (active === "sound") {
    preview = (
      <div className="mini-app">
        <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Varningsljud</div>
        {["Tyst (vibration)", "Diskret pling", "Klassisk varning", "Tydlig röst, \"Notiscan uppmärksammar något\""].map((x, i) => (
          <div key={i} className="row-mini" style={i === 1 ? { border: "2px solid var(--ink)" } : {}}>
            <span style={{ width: 22, height: 22, borderRadius: 999, background: "var(--green)", display: "grid", placeItems: "center" }}></span>
            {x}
          </div>
        ))}
      </div>
    );
  } else {
    preview = (
      <div className="mini-app">
        <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Språk</div>
        <div className="row-mini" style={{ border: "2px solid var(--ink)" }}>Svenska</div>
        <div className="row-mini">English</div>
        <div className="row-mini">Suomi</div>
        <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 8 }}>Tonen är alltid lugn och tydlig. Inga utropstecken, inget panikspråk.</div>
      </div>
    );
  }

  return (
    <section className="section paper" id="anpassa">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Anpassad efter dig</span>
          <h2 className="display">Notiscan rättar sig efter dig, inte tvärtom.</h2>
          <p className="lead">Stor text, mörkt läge, lugna ljud. Du väljer själv under installationen, och kan ändra när du vill.</p>
        </div>

        <div className="customize-grid">
          <div className="customize-list" role="tablist" aria-label="Anpassningar">
            {opts.map(o => (
              <button
                type="button"
                key={o.id}
                className={`cust-row ${active === o.id ? "active" : ""}`}
                onClick={() => setActive(o.id)}
                role="tab"
                aria-selected={active === o.id}
                aria-controls="customize-preview"
              >
                <div className="left">
                  <div className="ic" style={{ fontFamily: "DM Sans, sans-serif", fontWeight: 700 }}>{o.ic}</div>
                  <div>
                    <div className="label">{o.label}</div>
                    <div className="desc">{o.desc}</div>
                  </div>
                </div>
                <div style={{ fontSize: 20, color: active === o.id ? "var(--green-deep)" : "var(--ink-2)" }} aria-hidden="true">→</div>
              </button>
            ))}
          </div>

          <div className="preview-card" role="tabpanel" id="customize-preview">
            {preview}
          </div>
        </div>
      </div>
    </section>
  );
};

window.ProblemSection = ProblemSection;
window.HowItWorks = HowItWorks;
window.ForWhom = ForWhom;
window.Customize = Customize;