/* Samarbeta - open invitation, editorial layout */

const Samarbeta = () => {
  const tracks = [
    {
      tag: "01",
      label: "Partner",
      desc: "Banker, försäkring, telekom, eller någon annan organisation som möter sina kunder via meddelanden och vill komplettera det skydd som redan finns.",
    },
    {
      tag: "02",
      label: "Rådgivare",
      desc: "Du har byggt något liknande tidigare. Du behöver inte signa ett kontrakt, ibland räcker det med en kaffe och en ärlig invändning.",
    },
    {
      tag: "03",
      label: "Pilot",
      desc: "Forskning, kommun eller pensionärsförbund. Vi kör hellre ett litet, konkret pilotprojekt än lägger på lager av planeringsmöten.",
    },
  ];

  return (
    <section className="section samarbeta" id="samarbeta">
      <div className="container">
        <article className="samarbeta-letter">
          <div className="samarbeta-corner" aria-hidden="true">
            Karlstad &middot; 2026
          </div>

          <header className="samarbeta-head">
            <span className="eyebrow"><span className="dot"></span>Samarbeta</span>
            <h2 className="display">En öppen inbjudan.</h2>
            <p className="samarbeta-deck">
              Från Notiscan, till dig som vill bygga vidare på ett tryggare Sverige.
            </p>
          </header>

          <div className="samarbeta-body">
            <p>
              Bedrägerier är inte ett tekniskt problem som någon redan har löst. Det är ett mänskligt problem som dyker upp i nya former varje vecka. Banker, polis och teleoperatörer gör redan ett tungt jobb. Notiscan vill komplettera dem med ett extra par ögon precis där meddelandet landar, i mobilen, där folk faktiskt klickar.
            </p>
            <p>
              Vi söker dig som vill bygga den här pusselbiten med oss. Tre former, lika gärna en blandning.
            </p>
          </div>

          <ol className="samarbeta-tracks">
            {tracks.map((tr) => (
              <li key={tr.tag} className="samarbeta-track">
                <span className="samarbeta-track-num">{tr.tag}</span>
                <div className="samarbeta-track-body">
                  <h3 className="samarbeta-track-h">{tr.label}</h3>
                  <p>{tr.desc}</p>
                </div>
              </li>
            ))}
          </ol>

          <footer className="samarbeta-foot">
            <div className="samarbeta-sign">
              <span className="samarbeta-sign-cursive">Vi hörs,</span>
              <span className="samarbeta-sign-name">Oliver</span>
              <span className="samarbeta-sign-role">kontakt, Notiscan</span>
            </div>
            <a className="btn primary lg samarbeta-cta-btn" href="mailto:oliver@notiscan.se">
              Skriv direkt
              <span aria-hidden="true">→</span>
            </a>
          </footer>
        </article>
      </div>
    </section>
  );
};

window.Samarbeta = Samarbeta;