/* global React */
const { useState, useEffect, useRef } = React;
const { Sparkle } = window.SiteCommon;

// ───────── Manifesto / Marknaden ─────────
function Manifesto() {
  return (
    <section id="manifesto" style={{ borderTop: '1px solid var(--line)', background: 'var(--paper)' }}>
      <div className="wrap section-pad">
        <div style={{ marginBottom: 40 }}>
          <span className="eyebrow">
            <span className="dash" /> 01 — Marknaden
          </span>
          <h2 className="headline" style={{
            fontSize: 'clamp(40px, 5.4vw, 80px)', marginTop: 22, marginBottom: 0,
          }}>
            Flera skiften. <em style={{ fontWeight: 600 }}>Samtidigt.</em>
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 40, alignItems: 'stretch',
        }} className="manif-grid">
          <div style={{ gridColumn: 'span 4' }} className="manif-img">
            <div style={{
              position: 'relative', height: '100%', minHeight: 460, overflow: 'hidden', borderRadius: 2,
              boxShadow: '0 30px 60px -30px rgba(0, 66, 37, 0.35)',
            }}>
              <img src="img/forest.jpg" alt="Nordisk skog i dimma"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(0,66,37,0.15) 0%, rgba(0,66,37,0.45) 100%)',
                mixBlendMode: 'multiply' }} />
            </div>
          </div>

          <div style={{ gridColumn: 'span 8', minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }} className="manif-right">
            <p style={{ fontSize: 21, lineHeight: 1.55, fontWeight: 400, margin: 0, color: 'var(--ink)', textWrap: 'pretty' }}>
              Vi lever i en värld av <span className="under-mark">snabb förändring</span>. Förändringen drivs
              av flera samtidiga skiften som fortsatt digitalisering, hållbarhetsomställning, elektrifiering,
              geopolitisk osäkerhet samt teknikskiftet med AI och agenter. Det förändrar oss, våra företag
              och organisationer.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 22, color: 'var(--ink-soft)', textWrap: 'pretty' }}>
              Det förändrar hur värde skapas, hur konkurrenskraft byggs och hur beslut fattas. Det ställer
              nya krav på flexibilitet, anpassning och förmåga att omsätta strategiska vägval i konkret
              förändring,
              <em className="serif" style={{ color: 'var(--orange)', fontWeight: 500 }}> snabbt</em>.
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .manif-grid { grid-template-columns: 1fr !important; }
          .manif-img, .manif-right { grid-column: span 1 !important; grid-column-start: auto !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── Shifts ─────────
const SHIFTS = [
  { n: '01', t: 'Fortsatt digitalisering', d: 'Digitala kanaler, plattformar och processer fortsätter forma kundresor och arbetssätt.' },
  { n: '02', t: 'AI och agenter', d: 'Generativ AI och autonoma agenter omdefinierar vad som kan automatiseras och accelereras.' },
  { n: '03', t: 'Hållbarhets­omställning', d: 'Klimat- och rapporteringskrav driver konkreta affärsval — inte bara löften.' },
  { n: '04', t: 'Elektrifiering', d: 'Energi och infrastruktur ritas om i grunden, från transport till industri.' },
  { n: '05', t: 'Geopolitisk osäkerhet', d: 'Värdekedjor, leverantörer och regleringar prövas på nytt sätt.' },
  { n: '06', t: 'Förändrade kundbeteenden', d: 'Förväntningar på upplevelse, transparens och hastighet höjs i alla segment.' },
];

function Shifts() {
  return (
    <section id="shifts" style={{ borderTop: '1px solid var(--line)', background: 'var(--paper-deep)' }}>
      <div className="wrap section-pad">
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32,
          marginBottom: 64, flexWrap: 'wrap',
        }}>
          <div>
            <span className="eyebrow"><span className="dash" /> 02 — Krafterna</span>
            <h2 className="headline" style={{
              fontSize: 'clamp(36px, 4.6vw, 68px)', marginTop: 22, marginBottom: 0, maxWidth: 760,
            }}>
              Sex krafter som skriver om <em>spelplanen</em>.
            </h2>
          </div>
          <div className="caps" style={{ color: 'var(--ink-mute)', maxWidth: 240, lineHeight: 1.7 }}>
            ↳ De val ni gör idag avgör hur företaget fungerar i morgon
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          borderTop: '1px solid var(--green)',
          borderLeft: '1px solid var(--line)',
        }} className="shifts-grid">
          {SHIFTS.map(s => <ShiftCard key={s.n} s={s} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .shifts-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .shifts-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ShiftCard({ s }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', padding: '36px 28px 36px',
        borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
        background: hover ? 'var(--paper-warm)' : 'transparent',
        transition: 'background 220ms ease', minHeight: 240, cursor: 'default',
      }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 24 }}>
        <span className="display" style={{
          fontSize: 36, fontWeight: 600, lineHeight: 1, color: 'var(--green)', letterSpacing: '-0.04em',
        }}>{s.n}</span>
        <Sparkle size={9} style={{ opacity: hover ? 1 : 0, transition: 'opacity 220ms', transform: 'translateY(-3px) rotate(-15deg)' }} />
      </div>
      <h3 className="display" style={{
        fontSize: 23, fontWeight: 600, margin: 0, lineHeight: 1.18, letterSpacing: '-0.02em', color: 'var(--ink)',
      }}>{s.t}</h3>
      <p style={{
        marginTop: 14, fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', textWrap: 'pretty',
      }}>{s.d}</p>
    </div>
  );
}

// ───────── Value Bridge (green block) ─────────
function ValueBridge() {
  return (
    <section style={{
      borderTop: '1px solid var(--line)', background: 'var(--green)',
      color: 'var(--paper)', overflow: 'hidden', position: 'relative',
    }}>
      {/* decorative sparkle pattern */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.08,
        backgroundImage: `radial-gradient(var(--orange) 1px, transparent 1.5px)`,
        backgroundSize: '32px 32px',
      }} />
      <div className="wrap section-pad" style={{ paddingTop: 80, paddingBottom: 80, position: 'relative' }}>
        <div style={{ marginBottom: 40 }}>
          <span className="eyebrow" style={{ color: 'var(--orange)' }}>
            <span className="dash" style={{ background: 'var(--orange)', opacity: 0.9 }} />
            02 — Vad vi gör
          </span>
          <h2 className="headline" style={{
            fontSize: 'clamp(40px, 5.6vw, 84px)', marginTop: 26, marginBottom: 0,
            color: 'var(--paper)', maxWidth: 900,
          }}>
            Teknik som blir <em style={{ color: 'var(--orange)', fontFamily: 'var(--serif)', fontWeight: 600 }}>verklig nytta.</em>
          </h2>
        </div>
        <div style={{ maxWidth: 1000 }} className="value-right">
            <p style={{ fontSize: 20, lineHeight: 1.6, color: 'rgba(244,237,225,0.92)', margin: 0, textWrap: 'pretty' }}>
              På 10D Transformation hjälper vi nordiska företag och organisationer att omsätta teknik,
              som AI, i verklig nytta. Tekniken kan ge oss bättre upplevelser, smartare arbetssätt
              och starkare relationer med kunder och medborgare.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(244,237,225,0.7)', marginTop: 22, textWrap: 'pretty' }}>
              Vi hjälper våra kunder att se var värdet är störst, att tydliggöra mål och riktning
              samt att driva förändringen hela vägen in i verksamheten.
            </p>
          </div>

        <div style={{
          marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="value-stats">
          {[
            { l: 'Var värdet är störst', d: 'Identifiera och prioritera' },
            { l: 'Mål och riktning', d: 'Tydliggöra och förankra' },
            { l: 'Transformation', d: 'Att driva förändringen hela vägen in i verksamheten' },
          ].map(s => (
            <div key={s.l} style={{
              borderTop: '1px solid rgba(255,99,9,0.4)', paddingTop: 16,
            }}>
              <Sparkle size={9} style={{ transform: 'rotate(-15deg)' }} />
              <div className="display" style={{
                fontSize: 17, fontWeight: 600, marginTop: 10, color: 'var(--paper)', letterSpacing: '-0.01em',
              }}>
                {s.l}
              </div>
              <div style={{ fontSize: 12.5, color: 'rgba(244,237,225,0.65)', marginTop: 6, lineHeight: 1.55 }}>
                {s.d}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .value-grid { grid-template-columns: 1fr !important; }
          .value-left, .value-right { grid-column: span 1 !important; grid-column-start: auto !important; }
          .value-stats { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.SiteMid = { Manifesto, Shifts, ValueBridge };