/* Pricing (4 tiers) · Familjedelning · Kontaktpersoner · FAQ · Footer */

const Pricing = () => {
  const [yearly, setYearly] = React.useState(false);
  const [showAll, setShowAll] = React.useState(false);
  const mainPlans = [
    {
      id: "bas", name: "Bas", sub: "Sms och mejl",
      monthly: 99, yearly: 990,
      cta: "Välj Bas →", highlight: false,
      feats: [
        "Håller koll på sms och mejl",
        "Uppmärksammar dig vid misstänkta meddelanden",
        "30 dagars historik",
      ],
    },
    {
      id: "std", name: "Standard", sub: "Hela skyddet",
      monthly: 149, yearly: 1490,
      cta: "Pröva 30 dagar gratis →", highlight: true,
      feats: [
        "Håller koll på sms, mejl och appar",
        "Uppmärksammar dig vid misstänkta meddelanden",
        "Kollar om dina konton har läckt",
        "Blockerar farliga webbsidor",
      ],
    },
    {
      id: "fam", name: "Familj", sub: "För två personer",
      monthly: 249, yearly: 2490,
      cta: "Välj Familj →", highlight: false,
      feats: [
        "Allt i Standard, för två personer",
        "Två separata konton, varsin inkorg",
        "Var sin lista med upp till 5 kontaktpersoner",
        "En faktura, ingen extra administration",
      ],
    },
  ];
  const extraPlans = [
    {
      id: "web", name: "Webapp", sub: "Grundläggande webbskydd",
      monthly: 49, yearly: 490,
      cta: "Välj Webapp →", highlight: false,
      feats: [
        "Grundläggande webbskydd",
        "Webbnotifikationer",
        "E-postrapporter",
      ],
    },
  ];

  const renderPlan = (p) => (
    <div key={p.id} className={`plan ${p.highlight ? "highlight" : ""}`}>
      {p.highlight && <span className="top-flag">Rekommenderas</span>}
      <div>
        <h3 className="display">{p.name}</h3>
        <div className="sub">{p.sub}</div>
      </div>
      <div className="price">
        <span className="price-num">{yearly ? p.yearly : p.monthly}</span>
        <span className="price-unit">{yearly ? "kr/år" : "kr/mån"}</span>
      </div>
      {yearly && (
        <div className="price-sub">≈ {Math.round(p.yearly / 12)} kr/mån</div>
      )}
      <ul>
        {p.feats.map((f) => <li key={f}>{f}</li>)}
      </ul>
      <a className={`btn ${p.highlight ? "primary" : ""}`} href={window.PLAY_LINK.url(`pricing_${p.id}`)} style={{ marginTop: "auto" }}>{p.cta}</a>
    </div>
  );

  return (
    <section className="section cream-2" id="priser">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Priser</span>
          <h2 className="display">En plan för dig, eller en för hela familjen.</h2>
          <p className="lead">30 dagars gratis prov på alla planer. Ingen bindningstid. Avsluta när du vill.</p>
          <div style={{ marginTop: 14 }}>
            <div className="pricing-toggle" role="group" aria-label="Betalningsperiod">
              <button className={!yearly ? "active" : ""} onClick={() => setYearly(false)} aria-pressed={!yearly}>Per månad</button>
              <button className={yearly ? "active" : ""} onClick={() => setYearly(true)} aria-pressed={yearly}>Per år <span className="save">spara 2 mån</span></button>
            </div>
          </div>
        </div>

        <div className="plans">
          {mainPlans.map(renderPlan)}
        </div>

        <div style={{ textAlign: "center", marginTop: 28 }}>
          <button className="btn sm" onClick={() => setShowAll(s => !s)}>
            {showAll ? "Dölj fler erbjudanden" : "Visa alla erbjudanden"}
          </button>
        </div>

        {showAll && (
          <div className="plans-extras">
            {extraPlans.map(renderPlan)}
          </div>
        )}

        <p style={{ marginTop: 28, textAlign: "center", color: "var(--muted)", fontSize: 14, maxWidth: 620, marginInline: "auto" }}>
          En ute-lunch i månaden. Vi vill inte att priset ska vara orsaken till att någons förälder blir lurad.
        </p>
      </div>
    </section>
  );
};

/* ---- Familjedelning (cost-share) ---- */
const Familjedelning = () => {
  return (
    <section className="section cream" id="funktioner">
      <div className="container">
        <div className="family-grid">
          <div className="family-copy">
            <span className="eyebrow"><span className="dot"></span>Familjedelning</span>
            <h2 className="display" style={{ marginTop: 12 }}>För dig och en till.</h2>
            <p className="lead" style={{ marginTop: 14 }}>Familj-paketet täcker två personer. Var och en får sin egen Notiscan, sin egen inkorg, och var sin lista med upp till fem kontaktpersoner. En faktura, ingen extra administration.</p>
            <ul className="feature-bullets" style={{ marginTop: 22 }}>
              <li>Två separata konton, ingen delar inkorg</li>
              <li>Var och en bjuder in egna kontaktpersoner (upp till 5 var)</li>
              <li>Perfekt för en partner, en förälder eller ett vuxet barn</li>
              <li>Bjud in den andra med en sexsiffrig kod</li>
            </ul>
            <a className="btn primary lg" href="#priser" style={{ marginTop: 26, alignSelf: "flex-start" }}>Se Familj-priset →</a>
          </div>
          <div className="family-stage">
            <div className="family-payer">
              <div className="avatar">OB</div>
              <div style={{ flex: 1 }}>
                <div className="name">Du</div>
                <div className="role">3 kontaktpersoner · aktiv</div>
              </div>
            </div>
            <div className="family-code">
              <span>Bjud in en till</span>
              <strong>4 8 2 7 · T R Y</strong>
            </div>
            <div className="family-members">
              <div className="family-member">
                <div className="avatar" style={{ background: "#F2A035" }}>MA</div>
                <div className="name">Mamma</div>
                <div className="role">2 kontaktpersoner</div>
              </div>
              <div className="family-member empty">
                <div className="avatar" style={{ background: "transparent", color: "var(--ink)", border: "1.5px dashed rgba(14,26,16,0.3)" }}>+</div>
                <div className="name">Ledig plats</div>
                <div className="role">För framtiden</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---- Kontaktpersoner (caregiver) ---- */
const Kontaktpersoner = () => {
  const [level, setLevel] = React.useState("email");
  const LEVELS = {
    email: { name: "Bara e-post", desc: "Kontaktpersonen behöver inget konto. Varje varning kommer som ett mejl." },
    app: { name: "Notiscan-appen", desc: "Direktvarningar i mobilen, så fort något flaggats." },
  };
  return (
    <section className="section paper">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Kontaktpersoner</span>
          <h2 className="display">Två par ögon, utan övervakningskänsla.</h2>
          <p className="lead">Du bjuder in någon du litar på. Du bestämmer hur nära de står dig och hur mycket de får se. Du är chefen över din telefon, inte de.</p>
        </div>

        <div className="kontakt-grid">
          {/* Left: levels */}
          <div className="kontakt-levels">
            <div className="level-head" id="kontakt-level-label">Hur nära vill kontaktpersonen vara?</div>
            <div role="radiogroup" aria-labelledby="kontakt-level-label">
            {Object.entries(LEVELS).map(([k, v]) => (
              <button
                key={k}
                type="button"
                className={`level-row ${level === k ? "active" : ""}`}
                onClick={() => setLevel(k)}
                role="radio"
                aria-checked={level === k}
              >
                <div className="level-name">{v.name}</div>
                <div className="level-desc">{v.desc}</div>
              </button>
            ))}
            </div>
            <div className="level-head" style={{ marginTop: 22 }}>Vad får de veta?</div>
            <div className="level-info">
              <div><strong>Du väljer själv.</strong> "Bara att något hänt", "antal flaggor" eller "hela meddelandet", du är chefen.</div>
            </div>
          </div>

          {/* Right: preview switches between email mockup and phone mockup */}
          <div className="kontakt-preview">
            {level === "email" ? (
              <div className="preview-frame">
                <div className="preview-tab">Mejl till kontaktpersonen, {LEVELS.email.name.toLowerCase()}</div>
                <div className="preview-body">
                  <div className="mail-row">
                    <span>Från</span><strong>Notiscan</strong>
                  </div>
                  <div className="mail-row">
                    <span>Till</span><strong>Sara (din dotter)</strong>
                  </div>
                  <div className="mail-row">
                    <span>Ämne</span>
                    <strong>Notiscan har uppmärksammat något</strong>
                  </div>
                  <div className="mail-body">
                    <p>Hej Sara, Notiscan har uppmärksammat ett misstänkt meddelande hos din förälder. Inget mer behövs från dig, vi ville bara att du skulle veta.</p>
                  </div>
                  <div className="mail-foot">Din förälder bjöd in dig som kontaktperson. Du kan när som helst lämna rollen.</div>
                </div>
              </div>
            ) : (
              <div className="kontakt-phone-stage">
                <div className="phone">
                  <div className="notch"></div>
                  <div className="screen kontakt-screen">
                    <div className="kontakt-app-head">
                      <span className="kontakt-app-brand">
                        <img src="/v2/assets/notiscan-mark.png" alt="" width="20" height="20" />
                        Notiscan
                      </span>
                      <span className="kontakt-app-time">Direktvarning</span>
                    </div>
                    <div className="kontakt-app-body">
                      <div className="kontakt-app-card alert">
                        <div className="kontakt-app-tag">Direktvarning</div>
                        <div className="kontakt-app-title">Direktvarning skickad till din mobil</div>
                        <div className="kontakt-app-meta">
                          <span>Från</span><strong>Notiscan</strong>
                        </div>
                        <div className="kontakt-app-meta">
                          <span>Till</span><strong>Sara (din dotter)</strong>
                        </div>
                        <div className="kontakt-app-text">
                          <p>Hej Sara, en direktvarning är på väg till din Notiscan-app. Du ser samma flaggor som din förälder ser, så ni kan prata om dem ihop nästa gång ni hörs.</p>
                        </div>
                        <div className="kontakt-app-foot">Din förälder bjöd in dig som kontaktperson. Du kan när som helst lämna rollen.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const FAQ_DATA = [
  {
    q: "Lämnar mina meddelanden telefonen?",
    a: "Innehållet granskas av vår bedrägeri-AI och används enbart för att flagga risker. Vi vidarebefordrar aldrig dina meddelanden, vi säljer aldrig data, och allt drivs på servrar inom EU. Du kan radera dina uppgifter när du vill."
  },
  {
    q: "Måste min förälder ladda ner appen till sin kontaktperson?",
    a: "Nej. Hen kan börja med att skriva in en mailadress, kontaktpersonen behöver inte ladda ner något. Vill kontaktpersonen vara närmare kan de installera appen för direktvarningar. Din förälder väljer nivån."
  },
  {
    q: "Är ni bättre än banken eller ett antivirus?",
    a: "Vi kompletterar dem. Bankerna varnar oftast efter inloggning. Antivirus tittar på filer. Notiscan tittar på det som faktiskt kommer in i din mobil, sms, mejl, appnotiser från Klarna, Swish, paketutskick, Skatteverket och liknande. Olika ögon på olika ställen."
  },
  {
    q: "Vad händer efter de 30 gratis dagarna?",
    a: "Inget automatiskt. Du får en lugn påminnelse innan provperioden tar slut. Vill du fortsätta gör du det. Vill du inte händer ingenting, appen slutar bara vaka på nya meddelanden."
  },
  {
    q: "Kan jag avsluta när jag vill?",
    a: "Ja. Ingen bindningstid, ingen uppsägningstid. Du kan avsluta direkt i appen. Du behåller skyddet till slutet av perioden du redan betalat för."
  },
  {
    q: "Fungerar det på iPhone?",
    a: "Notiscan finns just nu bara för Android. iOS-versionen är under utveckling, anmäl ditt intresse så hör vi av oss när den finns på plats. Fram tills dess kan du använda webbverktygen på den här sidan helt gratis."
  },
  {
    q: "Skiljer sig Familj-prenumeration från en kontaktperson?",
    a: "Ja, det är två olika saker. Familj-paketet täcker två personer som var och en har sin egen Notiscan och sin egen inkorg. En kontaktperson är någon nära som får ett mejl när något flaggats hos dig. Kontaktpersoner ingår i Standard och Familj (upp till fem per person). Bas-prenumerationen har inte stöd för kontaktpersoner."
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section paper" id="faq">
      <div className="container">
        <div className="section-head" style={{ marginInline: "auto" }}>
          <span className="eyebrow"><span className="dot"></span>Vanliga frågor</span>
          <h2 className="display">Det folk brukar fråga.</h2>
        </div>
        <div className="faq-list">
          {FAQ_DATA.map((it, i) => {
            const isOpen = open === i;
            const panelId = `faq-panel-${i}`;
            const buttonId = `faq-button-${i}`;
            return (
              <div key={i} className={`faq-item ${isOpen ? "open" : ""}`}>
                <button
                  type="button"
                  className="faq-q"
                  id={buttonId}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                >
                  <span>{it.q}</span>
                  <span className="ic" aria-hidden="true">{isOpen ? "−" : "+"}</span>
                </button>
                <div
                  className="faq-a"
                  id={panelId}
                  role="region"
                  aria-labelledby={buttonId}
                ><p>{it.a}</p></div>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: "center", marginTop: 28, color: "var(--muted)" }}>
          Hittar du inte svaret? <a href="mailto:support@notiscan.se" style={{ color: "var(--green-deep)", fontWeight: 600 }}>Skriv till oss →</a>
        </div>
      </div>
    </section>
  );
};

const Footer = () =>
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "DM Sans, sans-serif", fontWeight: 700, fontSize: 22, color: "#F1EEE3" }}>
            <img src="/v2/assets/notiscan-mark.png" alt="" width="32" height="32" style={{ display: "block", filter: "brightness(0) invert(1)" }} />
            Notiscan
          </div>
          <p style={{ color: "#B7B3A4", fontSize: 14, marginTop: 12, maxWidth: 280 }}>Vi håller koll när du inte hinner. Byggt och drivet i Karlstad.</p>
          <div style={{ marginTop: 18, display: "flex", gap: 10 }}>
            <a className="btn primary sm" href={window.PLAY_LINK.url("footer_primary")}>Pröva 30 dagar gratis →</a>
          </div>
        </div>
        <div>
          <h4>Produkt</h4>
          <ul>
            <li><a href="#hur">Så fungerar det</a></li>
            <li><a href="#funktioner">Funktioner</a></li>
            <li><a href="#priser">Priser</a></li>
            <li><a href="#verktyg">Gratis verktyg</a></li>
          </ul>
        </div>
        <div>
          <h4>För familjen</h4>
          <ul>
            <li><a href="#funktioner">Familjedelning</a></li>
            <li><a href="#funktioner">Kontaktpersoner</a></li>
            <li><a href={window.PLAY_LINK.AKTIVERA_URL}>Aktivera kod</a></li>
          </ul>
        </div>
        <div>
          <h4>Företaget</h4>
          <ul>
            <li><a href="/samarbeta">Samarbeta</a></li>
            <li><a href="mailto:support@notiscan.se">Kontakt</a></li>
          </ul>
        </div>
        <div>
          <h4>Juridik</h4>
          <ul>
            <li><a href="/integritet">Integritetspolicy</a></li>
            <li><a href="/villkor">Användarvillkor</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Argado Digital AB · Karlstad · Org.nr: 559439-2341</span>
        <span>Drivet i Sverige · Servrar i EU · Vi säljer aldrig data</span>
      </div>
    </div>
  </footer>;


window.Pricing = Pricing;
window.Familjedelning = Familjedelning;
window.Kontaktpersoner = Kontaktpersoner;
window.FAQ = FAQ;
window.Footer = Footer;