/* Hero + Nav components for Notiscan */

const Wordmark = () =>
<a href="./" className="wordmark" aria-label="Notiscan, till startsidan">
    <img src="/v2/assets/notiscan-mark.png" alt="" width="36" height="36" style={{ display: "block" }} />
    Notiscan
  </a>;


const Nav = () =>
<nav className="nav" id="top" aria-label="Huvudmeny">
    <div className="container nav-inner">
      <Wordmark />
      <div className="links">
        <a href="./#hur">Hur det fungerar</a>
        <a href="./#vem">För vem</a>
        <a href="./#funktioner">Funktioner</a>
        <a href="/samarbeta">Samarbeta</a>
        <a href="./#priser">Priser</a>
      </div>
      <div className="nav-cta">
        <a href={window.PLAY_LINK.AKTIVERA_URL} className="btn ghost sm hide-mobile">Aktivera kod</a>
        <a href={window.PLAY_LINK.url("nav_primary")} className="btn primary sm">Pröva 30 dagar gratis →</a>
      </div>
    </div>
  </nav>;


/* ---- Hero ---- */
const HERO_ITEMS = [
  { sender: "Swedbank", body: "Löneinsättning: 28 450,00 kr", flag: "good", color: "#F2A035", initial: "S", time: "08:12" },
  { sender: "Paketleverans", body: "Ditt paket är på väg.", flag: "good", color: "#1F6FB2", initial: "P", time: "11:47" },
  { sender: "Gm4il", body: "Logga in med ditt BankID...", flag: "bad", color: "#C8462E", initial: "G", time: "12:04" },
  { sender: "Klarna", body: "Din betalning förfaller imorgon.", flag: "good", color: "#FFB6C1", initial: "K", time: "13:05" },
  { sender: "Skatteverket", body: "Du har ett nytt digitalt brev.", flag: "good", color: "#0E5A75", initial: "S", time: "15:22" },
  { sender: "n3tflix", body: "Uppdatera dina uppgifter NU.", flag: "bad", color: "#C8462E", initial: "N", time: "18:41" },
  { sender: "Swish", body: "Anna skickade 250 kr till dig.", flag: "good", color: "#5B2A86", initial: "S", time: "09:34" },
  { sender: "ICA", body: "Din digitala kvittokopia är klar.", flag: "good", color: "#E62525", initial: "I", time: "17:02" },
  { sender: "Pakethämta", body: "Bekräfta leverans, klicka här →", flag: "bad", color: "#C8462E", initial: "P", time: "10:18" },
  { sender: "Apoteket", body: "Recept förnyat, hämta när du vill.", flag: "good", color: "#1F8A5B", initial: "A", time: "14:55" },
  { sender: "Försäkringskassan", body: "Beslut om föräldrapenning.", flag: "good", color: "#0E5A75", initial: "F", time: "10:55" },
  { sender: "BankID-säk", body: "Verifiera ditt konto direkt.", flag: "bad", color: "#C8462E", initial: "B", time: "20:11" },
  { sender: "SJ", body: "Ditt tåg avgår från spår 4.", flag: "good", color: "#0B6FA8", initial: "S", time: "07:42" },
  { sender: "Spotify", body: "Din månadsfaktura är betald.", flag: "good", color: "#1FA34A", initial: "S", time: "06:30" },
  { sender: "Skatte-verk", body: "Återbäring väntar, logga in.", flag: "bad", color: "#C8462E", initial: "S", time: "16:25" },
  { sender: "Coop", body: "Din poäng: 1 240, nya erbjudanden.", flag: "good", color: "#0F6E40", initial: "C", time: "12:48" },
];

const VISIBLE = 4;
const SLOT_H = 70;

const HeroPhone = () => {
  // Start the head a few items in so the feed looks full on first paint.
  const [head, setHead] = React.useState(VISIBLE - 1);
  React.useEffect(() => {
    const id = setInterval(() => setHead((h) => h + 1), 2200);
    return () => clearInterval(id);
  }, []);

  // Render slots from -1 (entering, above) through VISIBLE (exiting, below).
  // Each rendered notification has a stable React key (its absolute index),
  // so React preserves the DOM node and CSS transitions animate position.
  const rendered = [];
  for (let slot = -1; slot <= VISIBLE; slot++) {
    const absIdx = head - slot;
    if (absIdx < 0) continue;
    const n = HERO_ITEMS[absIdx % HERO_ITEMS.length];
    const hidden = slot < 0 || slot >= VISIBLE;
    rendered.push({ slot, absIdx, n, hidden });
  }

  return (
    <div className="phone-stage">
      <div className="phone">
        <div className="notch"></div>
        <div className="screen">
          <div className="notif-list">
            <div className="head">
              <span className="title">Notiscan</span>
              <span className="time">Håller koll i bakgrunden</span>
            </div>
            <div className="notif-stream" style={{ height: VISIBLE * SLOT_H }}>
              {rendered.map(({ slot, absIdx, n, hidden }) => (
                <div
                  key={absIdx}
                  className={`notif stream-item ${n.flag === "bad" ? "flag-bad" : ""}`}
                  style={{
                    transform: `translateY(${slot * SLOT_H}px)`,
                    opacity: hidden ? 0 : 1,
                  }}
                >
                  <div className="av" style={{ background: n.color }}>{n.initial}</div>
                  <div>
                    <div className="meta-row">
                      <span className="sender">{n.sender}</span>
                      <span className="when">{n.time}</span>
                    </div>
                    <div className="body">{n.body}</div>
                  </div>
                  <div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Hero = () =>
<section className="hero">
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="pill"><span className="dot"></span>Notiscan · håller koll när du inte hinner</span>
          </div>
          <h1 className="display" style={{ marginTop: 22, fontSize: "clamp(44px, 6vw, 80px)" }} data-comment-anchor="e6ad18864b-h1-105-11">
            Vi håller koll när du <em>inte hinner</em>.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 580 }}>
            Det bästa skyddet är kunskap. Vi gör det näst bästa: Notiscan läser dina notiser i bakgrunden, känner igen bedrägeriförsöken och uppmärksammar dig innan du behöver klicka.
          </p>

          <div className="ctas">
            <a className="btn primary lg" href={window.PLAY_LINK.url("hero_primary")}>Pröva 30 dagar gratis →</a>
            <a className="btn lg" href="#hur">Hur funkar det?</a>
          </div>

          <div className="feature-row">
            <span className="feat">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z" /></svg>
              Byggt och drivet i Sverige
            </span>
            <span className="feat">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M5 12l4 4L19 6" /></svg>
              30 dagar gratis · ingen bindningstid
            </span>
            <span className="feat">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
              Servrar i EU
            </span>
          </div>

        </div>

        <HeroPhone />
      </div>
    </div>
  </section>;


window.Nav = Nav;
window.Hero = Hero;