/* global React */
const { useState, useEffect, useRef } = React;

// ───────── Sparkle (logo-echo orange triangle) ─────────
function Sparkle({ size = 14, rotate = -15, color, style }) {
  return (
    <span aria-hidden="true" style={{
      display: 'inline-block', width: 0, height: 0, borderStyle: 'solid',
      borderWidth: `${size * 0.5}px 0 ${size * 0.5}px ${size}px`,
      borderColor: `transparent transparent transparent ${color || 'var(--orange)'}`,
      transform: `rotate(${rotate}deg)`,
      ...style,
    }} />
  );
}

// ───────── 10D Logo (recreated, matches brand book) ─────────
function Logo({ small = false, dark = false }) {
  const color = dark ? 'var(--paper)' : 'var(--green)';
  const size = small ? 22 : 28;
  return (
    <a href="#top" aria-label="10D Transformation" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
    }}>
      <span style={{ position: 'relative', display: 'inline-block', lineHeight: 1 }}>
        <span className="display" style={{
          fontWeight: 800, fontSize: size, letterSpacing: '-0.05em', color, fontFamily: 'var(--display)',
        }}>10D</span>
        <span style={{
          position: 'absolute', top: -size * 0.18, right: -size * 0.42,
          width: 0, height: 0, borderStyle: 'solid',
          borderWidth: `${size * 0.18}px 0 ${size * 0.18}px ${size * 0.36}px`,
          borderColor: 'transparent transparent transparent var(--orange)',
          transform: 'rotate(-18deg)',
        }} />
      </span>
      <span className="caps" style={{
        fontSize: 10, letterSpacing: '0.28em',
        color: dark ? 'rgba(244,237,225,0.7)' : 'var(--green)',
        fontWeight: 600, marginLeft: 4,
      }}>Transformation</span>
    </a>
  );
}

// ───────── Nav ─────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = [
    { href: '#manifesto', label: 'Skiften' },
    { href: '#approach', label: 'Förhållningssätt' },
    { href: '#services', label: 'Erbjudande' },
    { href: '#founders', label: 'Grundare' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: scrolled ? 'color-mix(in srgb, var(--paper) 88%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
      transition: 'all 280ms ease',
    }}>
      <div className="wrap" style={{
        height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo />
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }} className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} className="caps"
              style={{ color: 'var(--ink-soft)', transition: 'color 200ms', fontSize: 11 }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--green)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-soft)'}
            >{l.label}</a>
          ))}
        </nav>
        <a href="#contact" className="btn" style={{ padding: '11px 20px', fontSize: 11 }}>
          Hör av dig <span className="arrow">→</span>
        </a>
      </div>
      <style>{`@media (max-width: 860px) { .nav-links { display: none !important; } }`}</style>
    </header>
  );
}

// ───────── Hero ─────────
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="wrap" style={{ paddingTop: 36, paddingBottom: 64 }}>

        {/* Top meta row */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 44, flexWrap: 'wrap', gap: 16,
        }}>
          <span className="eyebrow">
            <span className="spark" />
            Strategi · Genomförande · AI i grunden
          </span>
        </div>

        {/* Headline — geometric Futura feel */}
        <h1 className="headline" style={{
          fontSize: 'clamp(48px, 8.4vw, 144px)',
          fontWeight: 700,
          margin: 0,
          letterSpacing: '-0.045em',
          lineHeight: 0.9,
          textTransform: 'none',
        }}>
          Från strategi
          <br />
          till <em style={{ fontWeight: 600 }}>verklig</em>
          <br />
          <span style={{ position: 'relative', display: 'inline-block' }}>
            transformation.
            <Sparkle size={42} rotate={-12} style={{ position: 'absolute', right: -56, top: -18 }} />
          </span>
        </h1>

        {/* Below-headline grid */}
        <div style={{
          marginTop: 48,
        }} className="hero-grid">
          <div className="hero-col-left">
            <p style={{
              fontSize: 19, lineHeight: 1.55, color: 'var(--ink)',
              maxWidth: 560, margin: 0, textWrap: 'pretty', fontWeight: 400,
            }}>
              10D Transformation hjälper nordiska företag att gå från strategi
              till verklig transformation.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 32 }}>
              <a href="#contact" className="btn">
                Hör av dig <span className="arrow">→</span>
              </a>
              <a href="#approach" className="btn btn-ghost">
                Så arbetar vi
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-col-left, .hero-col-right { grid-column: span 1 !important; }
        }
      `}</style>
    </section>
  );
}

window.SiteCommon = { Sparkle, Logo, Nav, Hero };