/* global React */

// OSA 1 — Aidot asiakaslogot (käyttäjän luvalla julkaistut). Loput placeholderia.
const LOGOS = [
  { name: "Digia",              file: "assets/customer-digia.png",    placeholder: false },
  { name: "Nurminen Logistics", file: "assets/customer-nurminen.png", placeholder: false },
  { name: "DHL",                file: "assets/customer-dhl.png",      placeholder: false },
  { name: "Tornator",           file: "assets/customer-tornator.png", placeholder: false },
  { name: "Safe IT",            file: "assets/customer-safeit.png",   placeholder: false },
];

// OSA 2 — Anonymisoidut toimialaesimerkit (vakuutustiedot ovat luottamuksellisia).
const SECTORS = [
  { name: "Kuljetus",    note: "Pohjoismainen logistiikkakonserni" },
  { name: "Rakennus",    note: "Rakennusliike, valtakunnallinen" },
  { name: "Tuotanto",    note: "Konepajateollisuus, Etelä-Suomi" },
  { name: "ICT",         note: "Ohjelmistoyritys, kasvuvaihe" },
  { name: "Suunnittelu", note: "Arkkitehtitoimisto, kansainvälinen" },
  { name: "Finanssi",    note: "Kiinteistösijoitusyhtiö" },
];

// OSA 3 — Kolme tunnuslukua.
const STATS = [
  { num: "Yli 10 v", label: "Arvomeklareiden toiminta-aika" },
  { num: "Yli 5 v",  label: "Keskimääräinen asiakassuhteen pituus" },
  { num: "~50 v",    label: "Perustajien yhteenlaskettu kokemus" },
];

function LogoMark({ name, file, placeholder }) {
  if (placeholder) {
    return (
      <div className="logo-mark logo-mark-placeholder" aria-hidden="true">
        <span className="logo-placeholder-text">+</span>
      </div>
    );
  }
  return (
    <div className="logo-mark" title={name}>
      <img src={file} alt={name} loading="lazy" />
    </div>
  );
}

function SectorRow({ name, note }) {
  return (
    <li className="sector-row">
      <span className="sector-row-name">{name}</span>
      <span className="sector-row-note">{note}</span>
    </li>
  );
}

function StatBlock({ num, label }) {
  return (
    <li className="stat-block">
      <span className="tnum stat-block-num">{num}</span>
      <span className="stat-block-label">{label}</span>
    </li>
  );
}

function SocialProof() {
  return (
    <section className="social" aria-labelledby="social-title">
      <div className="container">
        <h2 id="social-title" className="social-title">
          Asiakkaitamme pörssiyhtiöistä perheyrityksiin
        </h2>

        {/* OSA 1 — Logorivi */}
        <div className="logo-grid" aria-label="Asiakaslogoja">
          {LOGOS.map((l, i) => (
            <LogoMark key={i} {...l} />
          ))}
        </div>

        <div className="social-divider" aria-hidden="true" />

        {/* OSA 2 — Anonymisoidut toimialaesimerkit */}
        <p className="social-intro">
          Vakuutustiedot ovat luottamuksellisia — emme julkaise asiakkaidemme nimiä ilman heidän lupaansa. Toimialaesimerkkejä asiakaspohjastamme:
        </p>
        <ul className="sector-list" aria-label="Toimialaesimerkit">
          {SECTORS.map((s) => (
            <SectorRow key={s.name} {...s} />
          ))}
        </ul>

        <div className="social-divider" aria-hidden="true" />

        {/* OSA 3 — Tunnusluvut */}
        <ul className="stat-grid" aria-label="Tunnusluvut">
          {STATS.map((s, i) => (
            <StatBlock key={i} {...s} />
          ))}
        </ul>
      </div>
    </section>
  );
}

window.SocialProof = SocialProof;

if (!document.getElementById("social-css")) {
  const s = document.createElement("style");
  s.id = "social-css";
  s.textContent = `
    .social {
      background: var(--bg-2);
      padding: 80px 0 88px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .social-title {
      text-align: center;
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(22px, 2.4vw, 28px);
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0 0 48px;
      max-width: 28ch;
      margin-left: auto;
      margin-right: auto;
    }

    /* OSA 1 — Logorivi */
    .logo-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 24px 40px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .logo-mark {
      flex: 0 1 140px;
      max-width: 180px;
      display: flex; align-items: center; justify-content: center;
      height: 80px;
      padding: 8px;
    }
    .logo-mark img {
      max-height: 64px;
      max-width: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(1) brightness(0.7) contrast(1.1);
      opacity: 0.65;
      transition: filter var(--t), opacity var(--t);
    }
    .logo-mark:hover img,
    .logo-mark:focus-within img {
      filter: grayscale(0) brightness(1) contrast(1);
      opacity: 1;
    }
    .logo-mark-placeholder {
      border: 1px dashed var(--line);
      border-radius: 6px;
      background: transparent;
      color: var(--ink-3, #b0a99e);
      min-height: 64px;
    }
    .logo-placeholder-text {
      font-size: 22px;
      font-weight: 300;
      color: var(--line);
    }

    /* Erottimet */
    .social-divider {
      max-width: 880px;
      height: 1px;
      background: var(--line);
      margin: 56px auto;
      opacity: 0.6;
    }

    /* OSA 2 — Anonymisoidut toimialat */
    .social-intro {
      text-align: center;
      font-style: italic;
      font-size: 14px;
      color: var(--ink-2);
      max-width: 60ch;
      margin: 0 auto 32px;
      line-height: 1.6;
    }
    .sector-list {
      list-style: none; padding: 0;
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      border-top: 1px solid var(--line);
    }
    @media (min-width: 720px) {
      .sector-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 56px;
      }
    }
    .sector-row {
      display: grid;
      grid-template-columns: minmax(110px, max-content) 1fr;
      gap: 20px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      align-items: baseline;
    }
    .sector-row-name {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 15px;
      color: var(--gold);
      letter-spacing: 0;
    }
    .sector-row-note {
      font-size: 14px;
      color: var(--ink);
      line-height: 1.5;
    }

    /* OSA 3 — Tunnusluvut */
    .stat-grid {
      list-style: none; padding: 0;
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }
    @media (min-width: 720px) {
      .stat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
      }
    }
    .stat-block {
      display: flex; flex-direction: column;
      gap: 12px;
      padding: 32px 16px 8px;
      border-top: 2px solid var(--gold);
    }
    .stat-block-num {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(44px, 5vw, 60px);
      color: var(--gold);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .stat-block-label {
      font-size: 15px;
      color: var(--ink);
      line-height: 1.5;
      max-width: 22ch;
      margin: 0 auto;
    }
  `;
  document.head.appendChild(s);
}