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

// ───────── Founders ─────────
function Founders() {
  return (
    <section id="founders" style={{ borderTop: '1px solid var(--line)', background: 'var(--paper-warm)' }}>
      <div className="wrap section-pad">
        <div style={{ marginBottom: 64, maxWidth: 1000 }}>
          <span className="eyebrow"><span className="dash" /> 05 — Grundare</span>
          <h2 className="headline" style={{
            fontSize: 'clamp(40px, 5.4vw, 80px)', marginTop: 22, marginBottom: 0,
          }}>
            Senior <em style={{ fontWeight: 600 }}>erfarenhet.</em>
            <br />
            Verklig genomförandekraft.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 48,
        }} className="found-grid">
          <div style={{ gridColumn: 'span 7' }} className="found-img">
            <div style={{
              position: 'relative', aspectRatio: '3/2', overflow: 'hidden', borderRadius: 2,
              boxShadow: '0 40px 80px -40px rgba(0, 66, 37, 0.4)',
            }}>
              <img src="img/founders.jpg" alt="Mattias Forsberg och Mattias Boman, medgrundare av 10D Transformation"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,33,18,0.5), transparent 50%)' }} />
              <div style={{
                position: 'absolute', bottom: 24, left: 24, right: 24,
                color: 'var(--paper)',
              }}>
                <div className="display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  Mattias Boman <span style={{ opacity: 0.7, fontWeight: 400 }}>&</span> Mattias Forsberg
                </div>
              </div>
            </div>
          </div>

          <div style={{ gridColumn: 'span 5' }} className="found-text">
            <p style={{ fontSize: 17, lineHeight: 1.65, margin: 0, color: 'var(--ink)', textWrap: 'pretty' }}>
              10D Transformation grundades av <strong style={{ color: 'var(--green)' }}>Mattias Forsberg</strong> och{' '}
              <strong style={{ color: 'var(--green)' }}>Mattias Boman</strong> för att sätta upp den nya
              tidens strategiska rådgivning.
            </p>
            <p style={{ marginTop: 20, fontSize: 14.5, lineHeight: 1.7, color: 'var(--ink-soft)', textWrap: 'pretty' }}>
              Mattias Forsberg är strategisk rådgivare med bakgrund från Accenture och BCG samt ledande operativa
              roller som CIO/CDIO i Handelsbanken, SAS och Systembolaget. Mattias Boman var tidigare ansvarig för
              Accentures strategi- och konsultverksamhet och byggde upp Accentures digitala byrå Interactive i
              Norden genom förvärv och organisk tillväxt.
            </p>
            <blockquote className="serif" style={{
              margin: '40px 0 0', padding: '20px 0 20px 28px',
              borderLeft: '2px solid var(--orange)',
              fontSize: 26, fontStyle: 'italic', lineHeight: 1.3,
              color: 'var(--green)', letterSpacing: '-0.01em',
            }}>
              "Verklig effekt i förändringen — inte bara bra planer."
            </blockquote>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .found-grid { grid-template-columns: 1fr !important; }
          .found-img, .found-text { grid-column: span 1 !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── Marquee strip ─────────
function MarqueeStrip() {
  const items = [
    'Human problems', 'Intelligent solutions', 'Positive impact',
    'Heritage & Luxury', 'AI i grunden', 'Strategi → genomförande',
    'Nordens transformations­partner',
  ];
  const all = [...items, ...items];
  return (
    <section style={{
      background: 'var(--orange)', color: 'var(--ink)',
      padding: '22px 0', overflow: 'hidden',
      borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--green-deep)',
    }}>
      <div className="marquee" style={{ alignItems: 'center' }}>
        {all.map((t, i) => (
          <div key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 56 }}>
            <span className="display" style={{
              fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em',
            }}>{t}</span>
            <Sparkle size={14} style={{ transform: 'rotate(-15deg)' }} color="var(--green)" />
          </div>
        ))}
      </div>
    </section>
  );
}

// ───────── Contact ─────────
function Contact() {
  return (
    <section id="contact" style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--paper)', borderTop: '1px solid var(--line)',
    }}>
      <div className="wrap section-pad" style={{ paddingTop: 96, paddingBottom: 110, position: 'relative' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 2 }}>
          <span className="eyebrow" style={{ justifyContent: 'center' }}>
            <span className="dash" /> 06 — Hör gärna av dig
          </span>
          <h2 className="headline" style={{
            fontSize: 'clamp(44px, 7vw, 112px)', marginTop: 22, marginBottom: 0,
            letterSpacing: '-0.04em', lineHeight: 0.92,
          }}>
            Låt oss prata om er nästa
            <br />
            <em style={{ fontWeight: 600 }}>transformation.</em>
            <Sparkle size={28} style={{ marginLeft: 12, transform: 'translateY(-2.5em) rotate(-12deg)' }} />
          </h2>
          <p style={{
            margin: '32px auto 0', maxWidth: 540, fontSize: 17, lineHeight: 1.65,
            color: 'var(--ink-soft)', textWrap: 'pretty',
          }}>
            Ett första samtal är förutsättningslöst. Vi lyssnar, ställer skarpa
            frågor och berättar hur vi skulle ta oss an det.
          </p>
          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 16 }}>
            <a href="mailto:hej@10dtransformation.se" className="btn" style={{ padding: '17px 28px', fontSize: 13 }}>
              hej@10dtransformation.se <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div aria-hidden style={{
          position: 'absolute', bottom: -240, left: '50%', transform: 'translateX(-50%)',
          width: 640, height: 640, borderRadius: '50%',
          background: 'radial-gradient(circle, color-mix(in srgb, var(--orange) 25%, transparent) 0%, transparent 65%)',
          filter: 'blur(40px)',
        }} />
      </div>
    </section>
  );
}

// ───────── Footer ─────────
function Footer() {
  const { Logo } = window.SiteCommon;
  return (
    <footer style={{ background: 'var(--green-deep)', color: 'var(--paper)' }}>
      <div className="wrap" style={{
        paddingTop: 56, paddingBottom: 40, display: 'flex', flexWrap: 'wrap',
        gap: 32, alignItems: 'flex-start', justifyContent: 'space-between',
      }}>
        <div style={{ maxWidth: 360 }}>
          <Logo dark />
          <p style={{ marginTop: 18, fontSize: 13, lineHeight: 1.65, color: 'rgba(244,237,225,0.65)' }}>
            Strategisk rådgivning och genomförandekraft för nordiska företag och organisationer.
            AI integrerad från dag ett.
          </p>
        </div>

        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          <div>
            <div className="caps" style={{ color: 'var(--orange)', marginBottom: 14 }}>Navigera</div>
            {['Skiften', 'Förhållningssätt', 'Erbjudande', 'Grundare'].map((l, i) => (
              <div key={l} style={{ marginBottom: 8 }}>
                <a href={['#manifesto','#approach','#services','#founders'][i]}
                  style={{ fontSize: 13, color: 'rgba(244,237,225,0.85)' }}>{l}</a>
              </div>
            ))}
          </div>
          <div>
            <div className="caps" style={{ color: 'var(--orange)', marginBottom: 14 }}>Kontakt</div>
            <div style={{ marginBottom: 8 }}>
              <a href="mailto:hej@10dtransformation.se" style={{ fontSize: 13, color: 'rgba(244,237,225,0.85)' }}>
                hej@10dtransformation.se
              </a>
            </div>
            <div style={{ fontSize: 13, color: 'rgba(244,237,225,0.6)' }}>Stockholm · Norden</div>
          </div>
        </div>
      </div>
      <div style={{
        borderTop: '1px solid rgba(244,237,225,0.12)',
      }}>
        <div className="wrap" style={{
          paddingTop: 20, paddingBottom: 20, display: 'flex', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16,
        }}>
          <p className="caps" style={{ color: 'rgba(244,237,225,0.45)', fontSize: 10 }}>
            © {new Date().getFullYear()} 10D Transformation AB
          </p>
          <p className="caps" style={{ color: 'rgba(244,237,225,0.45)', fontSize: 10 }}>
            Stockholm · Norden
          </p>
        </div>
      </div>
    </footer>
  );
}

window.SiteFoot = { Founders, MarqueeStrip, Contact, Footer };