/* global React, LineIcon */

const PEOPLE = [
  {
    img: "assets/matti-notkola.png",
    name: "Matti Notkola",
    role: "CEO, Partner",
    creds: "Broker · M.Sc (Econ.)",
    blurb: "Yli 15 vuotta vakuutusalalla — vakuutusyhtiössä, kahdessa meklariyhtiössä, asianajotoimistossa kansainvälisten yritysten parissa ja yli kymmenen vuotta meklariyrittäjänä. Erikoistunut vastuukysymyksiin, keskeytysvakuutuksiin, kuljetusalaan ja henkilöstövakuuttamiseen.",
    tel: "+358 (0) 440 663 011",
    telHref: "tel:+358440663011",
    email: "matti.notkola@arvomeklarit.fi",
    linkedin: "https://linkedin.com/in/matti-notkola-a8188b12",
    profile: "Matti Notkola.html",
    book: "Yhteystiedot.html#kalenteri",
  },
  {
    img: "assets/jari-salmi.png",
    name: "Jari Salmi",
    role: "COB & Partner",
    creds: "Broker · YVTS · TVEAT · JET",
    blurb: "Yli 30 vuoden kokemus vakuutusalalta — sekä yhtiöiden että meklareiden puolelta. Lukee rivien välistä nopeasti.",
    tel: "+358 (0) 505 669 160",
    telHref: "tel:+358505669160",
    email: "jari.salmi@arvomeklarit.fi",
    linkedin: "https://www.linkedin.com/in/jari-salmi-4b449443/",
    profile: "Jari Salmi.html",
    book: "Yhteystiedot.html#kalenteri",
  },
];

function People() {
  return (
    <section className="people section" id="tekijat" aria-labelledby="people-title">
      <div className="container">
        <div className="people-head">
          <p className="eyebrow">Tekijät</p>
          <h2 id="people-title">Sama ihminen alusta loppuun.</h2>
          <p className="lead">
            Et puhu vaihtuvalle asiakaspalvelulle, vaan jollekulle, joka tuntee yrityksesi.
            Olemme molemmat työskennelleet aiemmin vakuutusyhtiöissä — tunnemme heidän hinnoittelulogiikkansa.
          </p>
        </div>

        <div className="people-grid">
          {PEOPLE.map((p) => (
            <article key={p.name} className="person">
              <div className="person-photo-wrap">
                <img src={p.img} alt={p.name} className="person-photo" loading="lazy" />
                <div className="person-photo-tone" aria-hidden="true" />
              </div>

              <div className="person-body">
                <div className="person-id">
                  <h3 className="person-name">{p.name}</h3>
                  <p className="person-role">{p.role}</p>
                  <p className="person-creds">{p.creds}</p>
                </div>

                <p className="person-blurb">{p.blurb}</p>

                <ul className="person-contact" role="list">
                  <li>
                    <a href={p.telHref} className="person-contact-item">
                      <LineIcon name="phone" size={16} />
                      <span className="tnum">{p.tel}</span>
                    </a>
                  </li>
                  <li>
                    <a href={`mailto:${p.email}`} className="person-contact-item">
                      <SocialIconInline name="mail" size={16} />
                      <span>{p.email}</span>
                    </a>
                  </li>
                  <li>
                    <a href={p.linkedin} target="_blank" rel="noopener" className="person-contact-item person-contact-linkedin">
                      <SocialIconInline name="linkedin" size={16} />
                      <span>Verkostoidu LinkedInissä</span>
                      <LineIcon name="arrow" size={14} />
                    </a>
                  </li>
                </ul>
                {p.profile ? (
                  <div className="person-actions">
                    <a href={p.book} className="btn-primary person-book-cta">
                      Varaa veloitukseton kartoitus
                    </a>
                    <a href={p.profile} className="person-profile-link">
                      Lue lisää <span aria-hidden="true">→</span>
                    </a>
                  </div>
                ) : null}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Local mini-icons (footer.jsx defines its own SocialIcon — keep this independent).
function SocialIconInline({ name, size = 16 }) {
  const props = { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true" };
  if (name === "linkedin") {
    return (
      <svg {...props} fill="currentColor">
        <path d="M4.98 3.5a2.5 2.5 0 11.02 5 2.5 2.5 0 01-.02-5zM3 9.5h4V21H3V9.5zM10 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H18.6v-5.2c0-1.24-.02-2.83-1.72-2.83-1.73 0-2 1.35-2 2.74V21H11V9.5z" />
      </svg>
    );
  }
  return (
    <svg {...props} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 7l9 6 9-6" />
    </svg>
  );
}

window.People = People;

if (!document.getElementById("people-css")) {
  const s = document.createElement("style");
  s.id = "people-css";
  s.textContent = `
    .people-head { max-width: 720px; margin-bottom: 64px; }
    .people-head h2 { margin-top: 8px; }
    .people-head .lead { margin-top: 20px; color: var(--ink-2); }

    .people-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }
    @media (min-width: 1080px) {
      .people-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }

    .person {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px;
      transition: border-color var(--t), box-shadow var(--t);
    }
    @media (min-width: 640px) {
      .person { grid-template-columns: 180px 1fr; gap: 28px; }
    }
    @media (min-width: 1080px) and (max-width: 1199px) {
      .person { grid-template-columns: 1fr; gap: 24px; }
    }
    .person:hover {
      border-color: rgba(201, 160, 80, .45);
      box-shadow: 0 18px 40px -28px rgba(31, 41, 55, .25);
    }

    .person-photo-wrap {
      position: relative;
      aspect-ratio: 4 / 5;
      max-width: 240px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg-2);
    }
    .person-photo {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(0.15) contrast(1.02);
      transition: filter var(--t), transform var(--t);
    }
    .person-photo-tone {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(31, 41, 55, .22));
      pointer-events: none;
      mix-blend-mode: multiply;
      transition: opacity var(--t);
    }
    .person:hover .person-photo {
      filter: none;
      transform: scale(1.02);
    }

    .person-body {
      display: flex; flex-direction: column;
      min-width: 0;
    }
    .person-id {
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 16px;
    }
    .person-name {
      font-size: 24px;
      letter-spacing: -0.015em;
      margin: 0 0 4px;
    }
    .person-role {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: 0.02em;
    }
    .person-creds {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--ink-2);
      letter-spacing: 0.01em;
    }
    .person-blurb {
      margin: 0 0 20px;
      font-size: 15px;
      color: var(--ink-2);
      line-height: 1.6;
    }

    .person-contact {
      list-style: none; padding: 0; margin: auto 0 0;
      display: flex; flex-direction: column;
      gap: 10px;
    }
    .person-contact-item {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 14px;
      color: var(--ink);
      transition: color var(--t);
    }
    .person-contact-item svg { color: var(--ink-2); transition: color var(--t); flex-shrink: 0; }
    .person-contact-item:hover { color: var(--gold); }
    .person-contact-item:hover svg { color: var(--gold); }
    .person-contact-linkedin .arrow { transition: transform var(--t); }
    .person-contact-linkedin:hover .arrow { transform: translateX(3px); }
    .person-actions {
      display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
      margin-top: 22px; padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .person-book-cta {
      font-size: 13px; padding: 10px 16px;
      letter-spacing: 0.04em;
    }
    .person-profile-link {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; font-weight: 500;
      color: var(--gold);
      transition: color var(--t);
    }
    .person-profile-link span { transition: transform var(--t); display: inline-block; }
    .person-profile-link:hover { color: var(--ink); }
    .person-profile-link:hover span { transform: translateX(3px); }
  `;
  document.head.appendChild(s);
}