function OfficeMap({ variant }) {
  if (variant === "espoo") {
    return (
      <svg viewBox="0 0 400 200" preserveAspectRatio="none">
        <g stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1">
          <path d="M0 60 L150 60 L160 80 L260 80 L270 110 L400 110" />
          <path d="M0 130 L100 130 L110 150 L260 150 L270 170 L400 170" />
          <path d="M80 0 L80 200" />
          <path d="M210 0 L210 80" />
          <path d="M310 80 L310 200" />
        </g>
        <g fill="rgba(255,255,255,0.08)">
          <rect x="20" y="20" width="50" height="32" rx="3" />
          <rect x="90" y="20" width="100" height="32" rx="3" />
          <rect x="220" y="90" width="80" height="50" rx="3" />
          <rect x="320" y="120" width="60" height="40" rx="3" />
        </g>
      </svg>
    );
  }
  if (variant === "kuopio") {
    return (
      <svg viewBox="0 0 400 200" preserveAspectRatio="none">
        <g fill="rgba(255,255,255,0.05)">
          <path d="M0 0 Q60 40 30 110 Q10 170 80 200 L0 200 Z" />
          <path d="M400 0 L400 80 Q360 100 380 140 Q400 170 400 200 L300 200 Q280 160 320 130 Q360 100 320 70 Q280 40 320 0 Z" />
          <ellipse cx="180" cy="120" rx="50" ry="30" />
        </g>
        <g stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1">
          <path d="M0 80 Q120 60 200 100 T400 90" />
          <path d="M60 200 Q120 140 200 160 T380 150" />
        </g>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 400 200" preserveAspectRatio="none">
      <g stroke="rgba(255,255,255,0.14)" fill="none" strokeWidth="1">
        <path d="M0 40 L400 40" />
        <path d="M0 80 L400 80" />
        <path d="M0 120 L400 120" />
        <path d="M0 160 L400 160" />
        <path d="M80 0 L80 200" />
        <path d="M200 0 L200 200" />
        <path d="M320 0 L320 200" />
      </g>
      <g stroke="rgba(255,255,255,0.28)" fill="none" strokeWidth="1.5">
        <path d="M0 100 L160 100 L180 80 L400 80" />
      </g>
    </svg>
  );
}

function Office({ variant, city, note, street, postal }) {
  return (
    <article className="y-office">
      <div className="y-office__map">
        <OfficeMap variant={variant} />
        <span className="y-office__pin"></span>
      </div>
      <div className="y-office__body">
        <div className="y-office__city">{city}</div>
        {note && <div className="y-office__note">{note}</div>}
        <div className="y-office__addr">
          <i data-lucide="map-pin"></i>
          <div className="y-office__addr-line">
            <span className="y-office__addr-street">{street}</span>
            <span className="y-office__addr-city">{postal}</span>
          </div>
        </div>
      </div>
    </article>
  );
}

function Contact({ initials, color, name, role, email, phone }) {
  return (
    <div className="y-contact">
      <div className="y-contact__top">
        <div className={"sft-avatar sft-avatar--md " + color}>{initials}</div>
        <div>
          <div className="y-contact__name">{name}</div>
          <div className="y-contact__role">{role}</div>
        </div>
      </div>
      <div className="y-contact__row">
        <i data-lucide="mail"></i>
        <span>{email}</span>
      </div>
      <div className="y-contact__row y-contact__row--phone">
        <i data-lucide="phone"></i>
        <span>{phone}</span>
      </div>
    </div>
  );
}

function Toimipisteet() {
  return (
    <section className="sft-section y-section-light" id="yhteys" data-screen-label="Toimipisteet">
      <div className="sft-section__inner">
        <div className="sft-section__head">
          <div className="sft-eyebrow">{window.L("Toimipisteet","Offices")}</div>
          <h2 className="sft-section__title">{window.L("Kolme kaupunkia, yksi tiimi","Three cities, one team")}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)", margin: "8px 0 0", maxWidth: "62ch" }}>
            {window.L("Toimimme kolmella paikkakunnalla, ja työskentelytapamme on suunniteltu niin, ettei sijainti rajoita uraa eikä yhteistyötä.","We operate in three locations, and our way of working is designed so that location limits neither careers nor collaboration.")}
          </p>
        </div>

        <div className="y-offices__grid">
          <Office
            variant="espoo"
            city="Espoo"
            note=""
            street="Sokerilinnantie 11 A"
            postal="02600 Espoo"
          />
          <Office
            variant="kuopio"
            city="Kuopio"
            note=""
            street="Microkatu 1 M"
            postal="70210 Kuopio"
          />
          <Office
            variant="seinajoki"
            city="Seinäjoki"
            note=""
            street="Kampusranta 9 C"
            postal="60320 Seinäjoki"
          />
        </div>

        <div className="y-contacts">
          <div className="y-contacts__h">{window.L("Yhteyshenkilöt","Contacts")}</div>
          <div className="y-contacts__grid">
            <Contact
              initials="AL"
              color="sft-avatar--deep"
              name="Antti Lapinleimu"
              role={window.L("Toimitusjohtaja","CEO")}
              email="antti.lapinleimu@softera.fi"
              phone="+358 50 572 6062"
            />
            <Contact
              initials="SN"
              color="sft-avatar--blue"
              name="Sanna Nurmesniemi"
              role={window.L("Kehitys ja projektit","Development and projects")}
              email="sanna.nurmesniemi@softera.fi"
              phone="+358 44 722 7139"
            />
            <Contact
              initials="HM"
              color="sft-avatar--cyan"
              name="Hanna Maunula"
              role={window.L("Asiakkuudet ja palvelut","Accounts and services")}
              email="hanna.maunula@softera.fi"
              phone="+358 44 700 3205"
            />
          </div>
        </div>

        <div className="y-billing">
          <h3 className="y-billing__h">{window.L("Laskutusosoitteet","Billing addresses")}</h3>
          <div className="y-billing__grid">
            <div className="y-billing__col">
              <div className="y-billing__sub">{window.L("Verkkolaskut","E-invoices")}</div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">Softera Oy</span>
                <span className="y-billing__val">Y-tunnus 1524748-7</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Verkkolaskuosoite","E-invoice address")}</span>
                <span className="y-billing__val">003715247487</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Operaattori","Operator")}</span>
                <span className="y-billing__val">Maventa (003721291126)</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Aineistomuoto","Format")}</span>
                <span className="y-billing__val y-billing__val--text">Finvoice</span>
              </div>
            </div>
            <div className="y-billing__col">
              <div className="y-billing__sub">{window.L("Paperilaskut","Paper invoices")}</div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Vastaanottaja","Recipient")}</span>
                <span className="y-billing__val y-billing__val--text">Softera Oy</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Viite","Reference")}</span>
                <span className="y-billing__val">15247487</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Postilokero","PO Box")}</span>
                <span className="y-billing__val y-billing__val--text">PL 100</span>
              </div>
              <div className="y-billing__row">
                <span className="y-billing__lbl">{window.L("Postitoimipaikka","Postal city")}</span>
                <span className="y-billing__val y-billing__val--text">80020 Kollektor Scan</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}