/* global React */

function WhyUs({ lang = "fi" }) {
  return (
    <section className="focus" data-screen-label="Miksi Softera">
      <div className="focus__inner">
        <div className="focus__rule"></div>
        <div className="focus__eye" style={{ fontSize: "18px" }}>{lang === "fi" ? "Miksi Softera" : "Why Softera"}</div>
        <h2 className="focus__h">
          {lang === "fi" ?
          <>Liiketoimintakriittiset järjestelmät, jotka on rakennettu <em>toimialasi</em> <span style={{ color: "#0061a1" }}>syvällisellä tuntemuksella.</span></> :
          <>Business-critical systems that <em>actually</em> understand your industry.</>}
        </h2>
        <p className="focus__sub">
          {lang === "fi" ?
          <>Kiertotaloudelle, teleoperaattoreille ja toimialariippumattomasti asiakaspalveluun.<br />Ei yleispätevää ERP:tä, vaan toimialasi ehdoilla suunniteltu ratkaisu.</> :
          "We don't build generic software. Every component, every workflow, every report has been honed in one industry — then tested in three."}
        </p>
        {/* Tilastot piilotettu — palauta poistamalla nämä kommenttimerkit
        <div className="focus__grid">
          <div className="focus__cell">
            <div className="focus__num">30+</div>
            <div className="focus__lbl">{lang === "fi" ? "vuotta toimialakokemusta" : "years of industry experience"}</div>
          </div>
          <div className="focus__cell">
            <div className="focus__num">12+</div>
            <div className="focus__lbl">{lang === "fi" ? "T360°-käyttöönottoa valokuitualalla" : "T360° deployments in fiber"}</div>
          </div>
          <div className="focus__cell">
            <div className="focus__num">~4 h</div>
            <div className="focus__lbl">{lang === "fi" ? "keskimääräinen tukivasteaika" : "average support response"}</div>
          </div>
          <div className="focus__cell">
            <div className="focus__num">99,9 %</div>
            <div className="focus__lbl">{lang === "fi" ? "käytettävyys ylläpitopalvelussa" : "uptime in managed service"}</div>
          </div>
        </div>
        */}
      </div>
    </section>);

}

function Platform({ lang = "fi" }) {
  return (
    <section className="platform" id="tuotteet" data-screen-label="Tuotteet">
      <div className="platform__inner">
        <div className="platform__head">
          <div>
            <div className="eyebrow">{lang === "fi" ? "Tuotteet" : "Products"}</div>
            <h2 className="section__title" style={{ marginTop: 8 }}>
              {lang === "fi" ? "Kaksi järjestelmää, yksi tietomalli." : "Two systems, one data model."}
            </h2>
          </div>
          <p className="section__lede">
            {lang === "fi" ?
            "Softera 360° hoitaa toiminnan ytimen. Softera Horizon kokoaa asiakaskohtaamiset. Yhdessä saumaton kokonaisuus ilman raskaita integraatioita." :
            "Softera 360° runs the operational core. Softera Horizon orchestrates customer interactions. Seamless, with no heavy integrations."}
          </p>
        </div>

        <div className="platform__cards">
          <div className="product-card">
            <span className="product-card__tag"><i data-lucide="layers" style={{ width: 13, height: 13 }}></i> ERP / BSS</span>
            <div>
              <div className="product-card__strap">Softera 360°</div>
              <div className="product-card__name">{lang === "fi" ? "Tuotteista, toimita, palvele, laskuta." : "Productize, deliver, serve, bill."}</div>
            </div>
            <p className="product-card__lede">
              {lang === "fi" ?
              "Toimialariippumaton ERP/BSS, joka konfiguroidaan toimialakohtaisiksi ratkaisuiksi: J360° jätehuoltoon, T360° valokuituun. Asiakashallinta, sopimukset, tuotteistus, työnohjaus ja laskutus yhdessä." :
              "Industry-agnostic ERP/BSS configured into vertical solutions — J360° for waste, T360° for fiber. CRM, contracts, products, work and billing in one place."}
            </p>
            <div className="product-card__cta">
              <a className="link-arrow" href="ratkaisut.html#360">{lang === "fi" ? "Tutustu 360°-tuoteperheeseen" : "Explore the 360° family"} <i data-lucide="arrow-right"></i></a>
            </div>
          </div>

          <div className="product-card product-card--dark">
            <span className="product-card__tag"><i data-lucide="message-circle" style={{ width: 13, height: 13 }}></i> CX · Asiakaspalvelu</span>
            <div>
              <div className="product-card__strap">Softera Horizon</div>
              <div className="product-card__name">{lang === "fi" ? "Hallitse, mittaa ja johda asiakaskohtaamisia." : "Run, measure and lead every interaction."}</div>
            </div>
            <p className="product-card__lede">
              {lang === "fi" ?
              "Puhelin, sähköposti, chat ja somet yhteen inboxiin. Asiakkaan automaattinen tunnistus ja taustajärjestelmien tiedot näytöllä ennen kuin vastaat." :
              "Phone, email, chat and social into one inbox. Automatic identification and back-office context before you pick up."}
            </p>
            <div className="product-card__cta">
              <a className="link-arrow" href="ratkaisut.html#horizon" style={{ color: "var(--softera-mint)" }}>{lang === "fi" ? "Lue lisää Horizonista" : "Learn about Horizon"} <i data-lucide="arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Industries({ lang = "fi" }) {
  const items = lang === "fi" ? [
  {
    mod: "sky", icon: "wifi", name: "Valokuitu", product: "T360° + Horizon",
    lede: "Operaattorin koko liiketoiminta yhdellä alustalla. Käytössä 20+ kotimaisella operaattorilla.",
    bullets: ["Liittymähallinta & valokuitusopimukset", "Tuotemalli kampanjoille ja paketeille", "Tilauksen elinkaari myynnistä toimitukseen", "Selfie-portaali kuluttajille"],
    href: "valokuitu.html", cta: "Lue lisää →"
  },
  {
    mod: "mint", icon: "recycle", name: "Ympäristöhuolto", product: "J360° + Horizon",
    lede: "Rakennus tiedonhallinnan ytimessä — kuten jätelaki edellyttää. Jätehuoltomääräykset sisäänrakennettuina.",
    bullets: ["Jätehuoltomääräykset rakennustyypeittäin", "Suomi.fi-tunnistautuminen", "Reittien suunnittelu & punnitukset", "ESG-raportointi suoraan datasta"],
    href: "ymparistohuolto.html", cta: "Lue lisää →"
  },
  {
    mod: "cyan", icon: "zap", name: "Energia", product: "Softera Horizon",
    lede: "Sähkö, kaukolämpö ja vesi yhdellä työpöydällä — eri taustajärjestelmät kytkettyinä yhteen asiakaspalvelunäkymään ilman ikkunaviidakkoa.",
    bullets: ["Sähkönsiirto ja sähkönmyynti", "Kaukolämpö ja vesi", "Mittarihallinta ja tasekirjaus", "Häiriö- ja vianhallinta"],
    href: null, cta: null
  },
  {
    mod: "navy", icon: "building-2", name: "Kiinteistöt", product: "Softera Horizon",
    lede: "Isännöinti ja kiinteistöpalvelu yhdellä asiakaskortilla. Asukkaan kaikki palvelut yhdessä näkymässä, vaikka taustajärjestelmiä olisi monta.",
    bullets: ["Monialakonsernin kiinteistöliiketoiminta", "Isännöinti ja kiinteistöpalvelu", "Yksi asiakkuus, monta kohdetta", "Yhteinen asiakaspalvelu konsernin yli"],
    href: null, cta: null
  }] :
  [
  { mod: "sky", icon: "wifi", name: "Fiber", product: "T360° + Horizon", lede: "An operator's entire business on one platform. In use at 20+ Finnish operators.", bullets: ["Subscription & fiber contracts", "Product model for campaigns", "Order lifecycle end-to-end", "Selfie portal for consumers"], href: "valokuitu.html", cta: "Learn more →" },
  { mod: "mint", icon: "recycle", name: "Waste management", product: "J360° + Horizon", lede: "Buildings at the centre of data — as the law requires. Waste regulations built in.", bullets: ["Regulations by building type", "Suomi.fi authentication", "Route planning & weighing", "ESG reporting from data"], href: "ymparistohuolto.html", cta: "Learn more →" },
  { mod: "cyan", icon: "zap", name: "Energy", product: "Softera Horizon", lede: "Electricity, district heat and water on one desktop — disparate back-ends unified into one customer view.", bullets: ["Electricity transmission & sales", "District heat and water", "Meter management & reconciliation", "Outage & fault management"], href: null, cta: null },
  { mod: "navy", icon: "building-2", name: "Real estate", product: "Softera Horizon", lede: "Property management and services on one customer card — every service a resident uses, in one view.", bullets: ["Multi-business real-estate ops", "Property management & services", "One customer, many properties", "Shared customer service across group"], href: null, cta: null }];

  return (
    <section className="industries" id="toimialat" data-screen-label="Toimialat">
      <div className="industries__inner">
        <div className="section__head">
          <div className="eyebrow">{lang === "fi" ? "Toimialat" : "Industries"}</div>
          <h2 className="section__title">{lang === "fi" ? "Yksi alusta, neljä toimialakohtaista konfiguraatiota." : "One platform. Four industry configurations."}</h2>
          <p className="section__lede">
            {lang === "fi" ? "Sama tietomalli, samat työkalut. Toimialan vaatimukset on rakennettu järjestelmän sisään." : "Same data model, same tools — industry rules are built in, not bolted on."}
          </p>
        </div>
        <div className="industries__grid">
          {items.map((it) =>
          <div key={it.name} className={"industry-card industry-card--" + it.mod}>
              <div className="industry-card__head">
                <div className="industry-card__icon"><i data-lucide={it.icon}></i></div>
                <div>
                  <div className="industry-card__name">{it.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em", textTransform: "uppercase", marginTop: 4 }}>{it.product}</div>
                </div>
              </div>
              <div className="industry-card__cta">
                {it.href ? <a className="link-arrow" href={it.href}>{lang === "fi" ? "Lue lisää" : "Learn more"} <i data-lucide="arrow-right"></i></a> : <span style={{ opacity: 0 }}>&nbsp;</span>}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.WhyUs = WhyUs;
window.Platform = Platform;
window.Industries = Industries;