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

/* ====== Shared atoms ====== */

function Hedgehog({ src, className = '', style, anim = true, rot = 0 }) {
  return (
    <img
      src={src}
      alt=""
      className={`hedgehog ${className} ${anim ? 'hedgehog--anim' : ''}`}
      style={{ ...style, '--rot': `${rot}deg`, transform: `rotate(${rot}deg)` }}
    />
  );
}

function SectionHead({ num, title, meta }) {
  return (
    <header className="section__head">
      <div className="num">{num}</div>
      <h2 className="title">{title}</h2>
      <div className="meta">{meta}</div>
    </header>
  );
}

/* ====== Topbar ====== */

function Topbar({ page, setPage }) {
  const links = [
    ['home', 'Home'],
    ['groove', 'Groove'],
    ['about', 'About'],
    ['media', 'Media'],
    ['shows', 'Shows'],
    ['contact', 'Contact'],
  ];
  return (
    <header className="topbar">
      <div className="topbar__brand" onClick={() => setPage('home')}>
        <img src="assets/igel-x.png" alt="Kevin Weigel" />
      </div>
      <nav className="topbar__nav">
        {links.map(([id, label]) => (
          <button
            key={id}
            data-active={page === id}
            onClick={() => setPage(id)}
          >{label}</button>
        ))}
      </nav>
      <button className="topbar__cta" onClick={() => setPage('contact')}>
        <span className="dot" />
        Book a Set
      </button>
    </header>
  );
}

/* ====== Footer ====== */

function Footer({ setPage }) {
  const [tagline, setTagline] = useState('Open-air techno, woodland house, evolution in motion. Booking worldwide.');

  useEffect(() => {
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => { if (d.settings && d.settings.footer_tagline) setTagline(d.settings.footer_tagline); })
      .catch(() => {});
  }, []);

  return (
    <footer className="footer">
      <div className="footer__brand">
        <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '0.02em', textTransform: 'uppercase', lineHeight: 1}}>
          Kevin<br/><span style={{color: 'var(--pink)'}}>Weigel</span>
        </div>
        <p className="tag">{tagline}</p>
      </div>
      <div className="footer__col">
        <h4>Explore</h4>
        <a onClick={() => setPage('groove')}>Groove</a>
        <a onClick={() => setPage('about')}>About</a>
        <a onClick={() => setPage('media')}>Media</a>
        <a onClick={() => setPage('shows')}>Shows</a>
        <a onClick={() => setPage('contact')}>Contact</a>
      </div>
      <div className="footer__col">
        <h4>Listen</h4>
        <a href="https://soundcloud.com/kevinweigel" target="_blank" rel="noreferrer">SoundCloud</a>
        <a href="https://www.mixcloud.com/kevinweigel" target="_blank" rel="noreferrer">Mixcloud</a>
      </div>
      <div className="footer__col">
        <h4>Follow</h4>
        <a href="#" onClick={(e)=>e.preventDefault()}>Instagram</a>
        <a href="https://www.youtube.com/@ElectronicEvolution" target="_blank" rel="noreferrer">YouTube</a>
      </div>
      <div className="footer__bottom">
        <div>© 2026 Kevin Weigel</div>
        <div style={{display:'flex',gap:'16px',flexWrap:'wrap',justifyContent:'flex-end'}}>
          <a href="/impressum.php" style={{color:'var(--grey)',textDecoration:'none',fontSize:13}}>Impressum</a>
          <a href="/datenschutz.php" style={{color:'var(--grey)',textDecoration:'none',fontSize:13}}>Datenschutz</a>
          <button
            style={{background:'none',border:'none',color:'var(--grey)',fontSize:13,cursor:'pointer',padding:0,fontFamily:'inherit'}}
            onClick={() => window.kwConsent && window.kwConsent.open()}
          >Cookie-Einstellungen</button>
        </div>
      </div>
    </footer>
  );
}

/* ====== Intro splash ====== */

function Splash() {
  const [phase, setPhase] = useState('loading'); // loading → fly → (unmount)
  const [gone, setGone] = useState(false);
  const igelRef = useRef(null);
  const wrapRef = useRef(null);

  function liftOff() {
    setPhase(p => (p === 'loading' ? 'fly' : p));
  }

  // While the splash is on screen, hide the real header logo so there isn't a
  // second igel sitting at the destination before the flying one lands.
  // Remove the flag as soon as the splash is gone — the component returns null
  // but stays mounted, so we can't rely on an unmount-cleanup here.
  useEffect(() => {
    document.body.classList.add('intro-splashing');
  }, []);
  useEffect(() => {
    if (gone) document.body.classList.remove('intro-splashing');
  }, [gone]);

  // After 4s the bar is full → lift the igel up to the header logo.
  useEffect(() => {
    const t = setTimeout(liftOff, 4000);
    return () => clearTimeout(t);
  }, []);

  // When flying, measure the real header logo and animate the wrap onto it (WAAPI is
  // deterministic — avoids CSS-transition trigger timing quirks).
  useEffect(() => {
    if (phase !== 'fly') return;
    const logo = document.querySelector('.topbar__brand img');
    const igel = igelRef.current;
    const wrap = wrapRef.current;
    if (logo && igel && wrap) {
      const lr = logo.getBoundingClientRect();
      const ir = igel.getBoundingClientRect();
      const dx = (lr.left + lr.width / 2) - (ir.left + ir.width / 2);
      const dy = (lr.top + lr.height / 2) - (ir.top + ir.height / 2);
      const scale = lr.width / ir.width;
      const target = `translate(${dx}px, ${dy}px) scale(${scale})`;
      const anim = wrap.animate(
        [{ transform: 'translate(0px, 0px) scale(1)' }, { transform: target }],
        { duration: 1050, easing: 'cubic-bezier(0.66, 0, 0.2, 1)', fill: 'forwards' }
      );
      anim.onfinish = () => { wrap.style.transform = target; };
    }
    const t = setTimeout(() => setGone(true), 1150);
    return () => clearTimeout(t);
  }, [phase]);

  if (gone) return null;

  return (
    <div className={`splash splash--${phase}`} onClick={liftOff} role="presentation">
      <div className="splash__stage">
        <div className="splash__igelwrap" ref={wrapRef}>
          <img ref={igelRef} className="splash__igel" src="assets/igel-x.png?v=1" alt="" />
        </div>
      </div>
      <div className="splash__loader">
        <div className="splash__bar"><span /></div>
        <div className="splash__hint">Loading the groove</div>
      </div>
    </div>
  );
}

Object.assign(window, { Hedgehog, SectionHead, Topbar, Footer, Splash });