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

// ───────── Approach (Method ramework) ─────────
function Approach() {
  const points = [
    { n: '01', t: 'Riktning och genomförande', d: 'Vi arbetar tvärs hela kedjan — från innovation och affärsstrategi till prioriteringar, styrning, operativ modell, teknik, data, organisation och förflyttning i vardagen.' },
    { n: '02', t: 'AI i grunden, inte AI-tillagt', d: 'AI är en integrerad del av hur vi analyserar och levererar — inte ett buzzword eller en pilot. Det gör oss snabbare, skarpare och mer relevanta.' },
    { n: '03', t: 'Ekosystem och senior erfarenhet', d: 'Erfarenhet från några av Nordens mest välkända företag, ett starkt ekosystem av samverkande företag och ett pragmatiskt metodramverk — för verklig effekt, inte bara bra planer.' },
  ];

  return (
    <section id="approach" style={{ borderTop: '1px solid var(--line)', background: 'var(--paper)' }}>
      <div className="wrap section-pad">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 48,
        }} className="appr-grid">
          <div style={{ gridColumn: 'span 5', minWidth: 0, paddingRight: 24 }} className="appr-left">
            <span className="eyebrow"><span className="dash" /> 03 — Förhållningssätt</span>
            <h2 className="headline" style={{
              fontSize: 'clamp(32px, 3.6vw, 52px)', marginTop: 26, marginBottom: 0,
            }}>
              Strategi, Transformation,
              <br />
              Erfarenhet <em style={{ fontWeight: 600 }}>integrerad med AI.</em>
            </h2>
            <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.65, color: 'var(--ink-soft)', maxWidth: 420, textWrap: 'pretty' }}>
              För att lyckas tar vi med oss strategi- och transformationserfarenhet
              från några av Nordens mest välkända företag, ett brett och starkt
              ekosystem av samverkande bolag och ett pragmatiskt metodramverk,
              där AI är integrerat från dag ett. Inte som ett buzzword eller en pilot.
            </p>
          </div>

          <ol style={{
            gridColumn: 'span 6', gridColumnStart: 7,
            listStyle: 'none', padding: 0, margin: 0,
            borderLeft: '1px solid var(--green)',
            paddingLeft: 36,
          }} className="appr-list">
            {points.map((p, i) => (
              <li key={p.n + i} style={{
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, textAlign: 'left',
                padding: '32px 0 32px 24px', position: 'relative',
                borderBottom: i < points.length - 1 ? '1px solid var(--line)' : 'none',
              }}>
                {/* tick on green line */}
                <span style={{
                  position: 'absolute', left: -41, top: 38, width: 10, height: 10,
                  background: 'var(--orange)', borderRadius: 999,
                }} />
                <span className="display" style={{
                  fontSize: 36, fontWeight: 700, color: 'var(--green)',
                  letterSpacing: '-0.04em', lineHeight: 1,
                }}>{p.n}</span>
                <div>
                  <h3 className="display" style={{
                    fontSize: 26, fontWeight: 600, margin: 0, lineHeight: 1.2,
                    letterSpacing: '-0.02em', color: 'var(--ink)',
                  }}>{p.t}</h3>
                  <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.65, color: 'var(--ink-soft)', textWrap: 'pretty' }}>
                    {p.d}
                  </p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .appr-grid { grid-template-columns: 1fr !important; }
          .appr-left, .appr-list { grid-column: span 1 !important; grid-column-start: auto !important; }
          .appr-list { border-left: none !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── Services ─────────
const SERVICES = [
  {
    k: 'Strategi & innovation',
    h: 'Riktning där värdet finns',
    items: ['Affärs- och innovationsstrategi', 'Värdepotential', 'Prioriteringar och roadmap'],
  },
  {
    k: 'Operativ modell',
    h: 'Styrning som möjliggör tempo',
    items: ['Operativ modell', 'Lednings- & styrmodell', 'Organisation & roller'],
  },
  {
    k: 'AI, teknik & data',
    h: 'Från strategi till leverans',
    items: ['AI-strategi', 'Styrmodell för Data & AI', 'Teknik- & dataarkitektur'],
  },
  {
    k: 'Genomförande',
    h: 'Verklig effekt, inte bara planer',
    items: ['Transformationsledning', 'Koordinering av ekosystem', 'Ledningstöd och sparring till CEO, CIO, styrelse'],
  },
];

function Services() {
  return (
    <section id="services" style={{ background: '#004225', color: 'var(--paper)' }}>
      <div className="wrap section-pad">
        <div style={{
          marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 24,
        }} className="serv-head">
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 460px', alignItems: 'flex-end', gap: 48, justifyContent: 'start', flexWrap: 'wrap' }} className="serv-head-row">
            <div>
              <span className="eyebrow" style={{ color: 'var(--orange)' }}>
                <span className="dash" style={{ background: 'var(--orange)', opacity: 0.9 }} />
                04 — Erbjudande
              </span>
              <h2 className="headline" style={{
                fontSize: 'clamp(40px, 5.6vw, 88px)', marginTop: 22, marginBottom: 0, color: 'var(--paper)',
              }}>
                Fyra områden.
                <br />
                <em style={{ color: 'var(--orange)', fontWeight: 600 }}>Ett gemensamt mål.</em>
              </h2>
            </div>
            <p style={{ color: 'rgba(244,237,225,0.7)', fontSize: 15, lineHeight: 1.65, margin: 0, paddingBottom: 12 }}>
              Från innovation och affärsstrategi till operativ modell, teknik, data
              och förflyttning i vardagen — i ett sammanhängande arbete.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          border: '1px solid rgba(244,237,225,0.12)',
        }} className="serv-grid">
          {SERVICES.map((s, i) => <ServiceCard key={s.k} s={s} i={i} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .serv-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServiceCard({ s, i }) {
  const [hover, setHover] = useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '40px 36px 36px', position: 'relative', minHeight: 300,
        borderRight: i % 2 === 0 ? '1px solid rgba(244,237,225,0.12)' : 'none',
        borderBottom: i < 2 ? '1px solid rgba(244,237,225,0.12)' : 'none',
        background: hover ? 'rgba(0,0,0,0.18)' : 'transparent',
        transition: 'background 280ms ease',
        cursor: 'default',
      }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 32 }}>
        <span className="caps" style={{ color: 'var(--orange)' }}>{s.k}</span>
        <span className="display" style={{
          fontSize: 22, color: hover ? 'var(--orange)' : 'rgba(244,237,225,0.3)',
          transition: 'all 220ms ease',
          transform: hover ? 'translateX(4px)' : 'none',
          display: 'inline-block',
        }}>↗</span>
      </div>
      <h3 className="display" style={{
        fontSize: 32, fontWeight: 600, margin: 0, color: 'var(--paper)',
        lineHeight: 1.15, letterSpacing: '-0.025em',
      }}>{s.h}</h3>
      <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0' }}>
        {s.items.map(it => (
          <li key={it} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '8px 0', fontSize: 14, color: 'rgba(244,237,225,0.78)',
          }}>
            <span style={{ width: 14, height: 1, background: 'var(--orange)', flexShrink: 0 }} />
            {it}
          </li>
        ))}
      </ul>
    </article>
  );
}

window.SiteServices = { Approach, Services };