/* global React */

function Mocks_T360() { return null; } // placeholder

// T360 hero — real product screenshots stacked as a liquid-glass cascade.
// Three cards: customer self-service portal (Selfie), back-office calendar
// and the front Tilaukset (Pikahaut dropdown open) as the focal card.
function MockT360() {
  return (
    <div className="glass-stack glass-stack--3" aria-label="Softera T360° — tuotenäkymiä">
      <div className="glass-stack__shot glass-stack__shot--back-right">
        <img src="assets/t360-selfie.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--back-left">
        <img src="assets/t360-toimituskalenteri.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--front">
        <img src="assets/t360-tilaukset.png" alt="Softera T360° — Tilaukset" loading="lazy" />
      </div>
    </div>
  );
}

// J360 hero — real product screenshots stacked as the same liquid-glass
// cascade used by T360, but in the J360 mint/green colorway. Only three
// shots (Asiakkaat, Tuotteet, Laskut), so we use the 3-card variant.
function MockJ360() {
  return (
    <div className="glass-stack glass-stack--3" aria-label="Softera J360° — tuotenäkymiä">
      <div className="glass-stack__shot glass-stack__shot--back-right">
        <img src="assets/j360-asiakkaat.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--back-left">
        <img src="assets/j360-tuotteet.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--front">
        <img src="assets/j360-laskut.png" alt="Softera J360° — Laskut" loading="lazy" />
      </div>
    </div>
  );
}

// Horizon hero — real product screenshots stacked as the same liquid-glass
// cascade used by T360 and J360. Three shots: Mittaristo (KPI dashboard),
// Jonotilanne (queue chart), and the focal Yhteydenotto (live call detail).
function MockHorizon() {
  return (
    <div className="glass-stack glass-stack--3" aria-label="Softera Horizon — tuotenäkymiä">
      <div className="glass-stack__shot glass-stack__shot--back-right">
        <img src="assets/horizon-mittaristo.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--back-left">
        <img src="assets/horizon-jonotilanne.png" alt="" loading="lazy" />
      </div>
      <div className="glass-stack__shot glass-stack__shot--front">
        <img src="assets/horizon-yhteydenotto.png" alt="Softera Horizon — Yhteydenotto" loading="lazy" />
      </div>
    </div>
  );
}

function MockEtappiCase() {
  return (
    <div className="case-visual">
      <div className="case-visual__head">
        <span className="case-visual__pill">Lakeuden Etappi · J360°</span>
        <span className="case-visual__date">2024 → 2026</span>
      </div>
      <div className="case-visual__before">
        <div className="case-visual__lbl">Ennen</div>
        <div className="case-visual__chips">
          <span className="case-chip">Asiakasrekisteri</span>
          <span className="case-chip">Reittisuunnittelu</span>
          <span className="case-chip">Punnitusjärjestelmä</span>
          <span className="case-chip">Laskutus</span>
        </div>
      </div>
      <div className="case-visual__arrow">
        <svg width="100%" height="36" viewBox="0 0 200 36" preserveAspectRatio="none">
          <line x1="20" y1="6" x2="100" y2="30" stroke="#75FAC7" strokeWidth="1.5"/>
          <line x1="80" y1="6" x2="100" y2="30" stroke="#75FAC7" strokeWidth="1.5"/>
          <line x1="140" y1="6" x2="100" y2="30" stroke="#75FAC7" strokeWidth="1.5"/>
          <line x1="180" y1="6" x2="100" y2="30" stroke="#75FAC7" strokeWidth="1.5"/>
          <circle cx="100" cy="32" r="3" fill="#75FAC7"/>
        </svg>
      </div>
      <div className="case-visual__after">
        <div className="case-visual__lbl">Jälkeen</div>
        <div className="case-visual__one">
          <div className="case-visual__one-mark">J</div>
          <div>
            <div className="case-visual__one-name">Softera J360°</div>
            <div className="case-visual__one-sub">Yksi alusta · Yksi tietomalli · Yksi asiakkuus</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MockT360 = MockT360;
window.MockJ360 = MockJ360;
window.MockHorizon = MockHorizon;
window.MockEtappiCase = MockEtappiCase;