/* global window, React */
// Kechballen — primitives, hero/landing, swipe components

const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ---------- Wordmark / Logo ----------------------------------------------
function KechWordmark({ size = 64, variant = 'full', alt = 'Kechballen' }) {
  // variant: 'full' (4-layer color), 'mono-black', 'mono-white', 'monogram', 'monogram-mono-white', 'monogram-mono-black'
  const base = variant === 'mono-black' ?
  'assets/brand/logo-mono-black.svg' :
  variant === 'mono-white' ?
  'assets/brand/logo-mono-white.png' :
  variant === 'monogram' ?
  'assets/brand/monogram-full-color.png' :
  variant === 'monogram-mono-white' ?
  'assets/brand/monogram-mono-white.png' :
  variant === 'monogram-mono-black' ?
  'assets/brand/monogram-mono-black.svg' :
  'assets/brand/logo-full-transparent-gemini-clean.png';
  // cache-buster — bump when brand assets are re-imported
  const src = base + '?v=may02gc';
  return (
    <img
      src={src}
      alt={alt}
      style={{
        width: typeof size === 'number' ? `${size}px` : size,
        height: 'auto',
        display: 'inline-block',
        verticalAlign: 'middle',
        userSelect: 'none'
      }}
      draggable={false} />);


}

// ---------- Sticker (chunky framed box) ----------------------------------
function Sticker({ children, rot = 0, color = 'aqua', style, ...rest }) {
  const shadowColor = color === 'aqua' ? 'var(--kech-aqua)' : color === 'fuchsia' ? 'var(--kech-fuchsia)' : 'var(--kech-black)';
  return (
    <div
      style={{
        background: 'var(--kech-white)',
        color: 'var(--kech-black)',
        border: '3px solid var(--kech-black)',
        borderRadius: 18,
        boxShadow: `6px 6px 0 ${shadowColor}, 6px 6px 0 3px var(--kech-black)`,
        transform: `rotate(${rot}deg)`,
        ...style
      }}
      {...rest}>
      {children}
    </div>);

}

// ---------- Marquee strip ------------------------------------------------
function Ticker({ items, variant = 'fuchsia', speed = 30, reverse = false }) {
  const cls = `ticker ticker--${variant}`;
  const seq = [];
  for (let r = 0; r < 8; r++) seq.push(...items);
  return (
    <div className={cls}>
      <div
        className={'marquee' + (reverse ? ' marquee--reverse' : '')}
        style={{ animationDuration: `${speed}s` }}>
        <div className="ticker__inner" style={{ display: 'flex' }}>
          {seq.map((t, i) =>
          <span key={i} style={{ padding: '0 18px', display: 'inline-flex', alignItems: 'center', gap: 18 }}>
              {t}
              <span className="ticker__sep" />
            </span>
          )}
        </div>
        <div className="ticker__inner" style={{ display: 'flex' }}>
          {seq.map((t, i) =>
          <span key={i} style={{ padding: '0 18px', display: 'inline-flex', alignItems: 'center', gap: 18 }}>
              {t}
              <span className="ticker__sep" />
            </span>
          )}
        </div>
      </div>
    </div>);

}

// ---------- Floating sticker (decorative) -------------------------------
function FloatingSticker({ children, top, left, right, bottom, rot = 0, delay = 0, bg = 'var(--kech-aqua)', color = 'var(--kech-black)', size = 16 }) {
  return (
    <div
      className="floating-sticker"
      style={{
        position: 'absolute',
        top, left, right, bottom,
        background: bg, color,
        border: '3px solid var(--kech-black)',
        borderRadius: 999,
        padding: '8px 14px 10px',
        fontFamily: 'Kechfont, system-ui',
        fontWeight: 800,
        textTransform: 'lowercase',
        fontSize: size,
        lineHeight: 1.1,
        whiteSpace: 'nowrap',
        boxShadow: '4px 4px 0 var(--kech-black)',
        '--rot': rot + 'deg',
        animation: `kech-drift 4s ease-in-out ${delay}s infinite`,
        zIndex: 5
      }}>
      {children}
    </div>);

}

// ---------- Typewriter (rotating) ---------------------------------------
function RotatingType({ words, color = 'var(--kech-aqua)' }) {
  const [idx, setIdx] = useState(0);
  const [text, setText] = useState('');
  const [phase, setPhase] = useState('typing'); // typing | hold | erasing
  const word = words[idx];

  useEffect(() => {
    let t;
    if (phase === 'typing') {
      if (text.length < word.length) {
        t = setTimeout(() => setText(word.slice(0, text.length + 1)), 65);
      } else {
        t = setTimeout(() => setPhase('hold'), 1500);
      }
    } else if (phase === 'hold') {
      t = setTimeout(() => setPhase('erasing'), 800);
    } else {
      if (text.length > 0) {
        t = setTimeout(() => setText(text.slice(0, -1)), 30);
      } else {
        setIdx((i) => (i + 1) % words.length);
        setPhase('typing');
      }
    }
    return () => clearTimeout(t);
  }, [text, phase, word, words]);

  return (
    <span style={{ color, fontFamily: 'Kechfont, system-ui', fontWeight: 800, textTransform: 'lowercase' }}
    className="cursor">
      {text || '\u00A0'}
    </span>);

}

// ---------- Real ornament photo with subtle hover bob ------------------
function OrnamentBall({ design, collection, size }) {
  const seed = design.seed || 0;
  const tilt = seed * 37 % 9 - 4; // -4°..+4°
  const dur = 4 + seed * 13 % 5 * 0.4; // 4–6s
  const delay = seed * 7 % 10 * -0.3; // randomized phase
  // Always fill the parent — caller's container controls the size.
  return (
    <div
      style={{
        pointerEvents: 'none',
        position: 'absolute',
        inset: 0,
        transform: `rotate(${tilt}deg)`,
        boxSizing: 'border-box',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
      
      <img
        src={design.img}
        alt={design.caption}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'contain',
          objectPosition: 'center',
          mixBlendMode: 'multiply',
          animation: `kech-bob ${dur}s ease-in-out ${delay}s infinite`,
          filter: 'drop-shadow(0 8px 0 rgba(0,0,0,0.18))',
          display: 'block',
          flexShrink: 0
        }}
        draggable={false} />
      
    </div>);

}

// ---------- Background per collection -----------------------------------
function useIsMobile(breakpoint = 600) {
  const [isMobile, setIsMobile] = useState(
    typeof window !== 'undefined' ? window.matchMedia(`(max-width: ${breakpoint}px)`).matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [breakpoint]);
  return isMobile;
}

function CollectionBackdrop({ collection, dense = false }) {
  const isMobile = useIsMobile();
  const bgSrc = isMobile && collection.bgImageMobile ? collection.bgImageMobile : collection.bgImage;
  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: collection.bg }} />
      {bgSrc &&
      <div
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: `url(${bgSrc})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          opacity: 0.55,
          mixBlendMode: 'multiply'
        }} />

      }
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background:
          collection.bg === '#191414' ?
          'radial-gradient(circle at 30% 20%, rgba(240,55,165,0.30), transparent 55%), radial-gradient(circle at 75% 80%, rgba(155,240,225,0.18), transparent 60%)' :
          'radial-gradient(circle at 70% 25%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 20% 85%, rgba(0,0,0,0.10), transparent 55%)'
        }} />
      
    </>);

}

// =========================================================================
// LANDING
// =========================================================================
function Landing({ onStart, waitlistCount }) {
  return (
    <section className="page" style={{ background: 'var(--kech-black)' }}>
      {/* Hero */}
      <div style={{
        position: 'relative',
        minHeight: '90vh',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr)',
        alignItems: 'center',
        padding: '64px 28px 80px',
        background:
          'radial-gradient(60% 70% at 20% 20%, #FBA8D2 0%, rgba(251,168,210,0) 60%),' +
          'radial-gradient(55% 65% at 38% 40%, #F037A5 0%, rgba(240,55,165,0) 55%),' +
          'radial-gradient(60% 70% at 78% 78%, #C9F7EE 0%, rgba(201,247,238,0) 60%),' +
          'radial-gradient(45% 55% at 65% 55%, #9BF0E1 0%, rgba(155,240,225,0) 65%),' +
          'linear-gradient(135deg, #FBA8D2 0%, #F037A5 35%, #6FC9BB 70%, #C9F7EE 100%)'
      }}>
        {/* Soft black scrim aan de onderkant zodat de overgang naar de zwarte sectie zacht is */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to bottom, transparent 60%, rgba(25,20,20,0.35) 100%)',
          pointerEvents: 'none'
        }} />
        <div className="halftone" style={{ opacity: 0.35, mixBlendMode: 'multiply' }} />

        {/* Floating bits — removed per feedback */}

        <div style={{ position: 'relative', zIndex: 2, maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
          <div className="rise" style={{ marginBottom: 18 }}>
            <span className="tag tag--mono" style={{ background: 'var(--kech-aqua)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--kech-black)' }} />
              kerst 2026 = herres
            </span>
          </div>

          <div className="rise" style={{ animationDelay: '40ms', marginBottom: 28 }}>
            <KechWordmark size="clamp(220px, 38vw, 560px)" />
          </div>

          <h1
            className="rise"
            style={{
              fontFamily: 'var(--font-body)',
              fontWeight: 800,
              fontSize: 'clamp(34px, 5.2vw, 72px)',
              color: 'var(--kech-black)',
              lineHeight: 1.02,
              letterSpacing: '-0.02em',
              textTransform: 'none',
              margin: '0 0 8px',
              animationDelay: '160ms'
            }}>
            help <span style={{ color: 'var(--kech-fuchsia-ink, #B8267B)', fontStyle: 'italic' }}>kiezen</span> welke kechballen<br />
            kerst '26 herres maken
          </h1>

          <div className="rise" style={{ animationDelay: '220ms', marginTop: 22, fontSize: 22, color: 'var(--kech-black)' }}>
            jij bent de jury voor{' '}
            <RotatingType color="var(--kech-fuchsia-ink, #B8267B)" words={['slee queens', 'sneeuw sigma chads', 'tokkie-couture', 'kerstboom moggers', 'holiday lock-ins', 'delusional dripping drerries']} />
          </div>

          <p className="rise" style={{
            animationDelay: '360ms',
            margin: 0,
            display: 'none'
          }}></p>

          <div className="rise" style={{ animationDelay: '520ms', marginTop: 36, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button onClick={onStart} className="kbtn" style={{ fontSize: 26, padding: '16px 32px 18px' }}>
              start swipen →
            </button>
          </div>

          <div className="rise" style={{ animationDelay: '680ms', marginTop: 28, display: 'inline-flex', gap: 10, alignItems: 'center', color: 'rgba(25,20,20,0.7)', fontSize: 13, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--kech-fuchsia)' }} />
            {waitlistCount} kechies waren je al voor
          </div>
        </div>
      </div>

      {/* WTF is Kechballen */}
      <div id="wtf" style={{ position: 'relative', background: 'var(--kech-fuchsia)', borderTop: '4px solid var(--kech-black)', padding: '64px 28px', overflow: 'hidden' }}>

        <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
          <div className="section-head" style={{ marginBottom: 32, textAlign: 'center' }}>
            <h2 style={{
              fontFamily: 'Kechfont, system-ui', fontWeight: 800,
              fontSize: 'clamp(32px, 8.2vw, 132px)', textTransform: 'lowercase',
              margin: 0, color: 'var(--kech-black)', lineHeight: 0.82, letterSpacing: '-0.03em'
            }}>wtf is kechballen?</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, alignItems: 'stretch' }}>
            <div style={{
              background: 'var(--kech-white)', border: '3px solid var(--kech-black)', borderRadius: 20,
              padding: '24px 22px', boxShadow: '7px 7px 0 var(--kech-black)', transform: 'rotate(-1.2deg)',
              color: 'var(--kech-black)'
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: 'var(--kech-fuchsia)', marginBottom: 10, textTransform: 'uppercase' }}>

              </div>
              <div style={{ fontFamily: 'Kechfont, system-ui', fontWeight: 800, fontSize: 30, lineHeight: 0.95, letterSpacing: '-0.01em', textTransform: 'lowercase', marginBottom: 12 }}>kerst is mid

              </div>
              <p style={{ fontSize: 16, lineHeight: 1.45, margin: 0, fontWeight: 500 }}>je moeder heeft 2 soorten kerstballen:
1. traditionele NPC ballen
2. 'hippe' cringe ballen van alledaagse objecten uit jouw leven die jouw karige karakter tonen (ieuw)
</p>
            </div>

            <div style={{ background: 'var(--kech-aqua)', border: '3px solid var(--kech-black)', borderRadius: 20,
              padding: '24px 22px', boxShadow: '7px 7px 0 var(--kech-black)', transform: 'rotate(0.8deg)',
              color: 'var(--kech-black)'
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: 'var(--kech-black)', marginBottom: 10, textTransform: 'uppercase' }}>

              </div>
              <div style={{ fontFamily: 'Kechfont, system-ui', fontWeight: 800, fontSize: 30, lineHeight: 0.95, letterSpacing: '-0.01em', textTransform: 'lowercase', marginBottom: 12 }}>kechballen is lit

              </div>
              <p style={{ fontSize: 16, lineHeight: 1.45, margin: 0, fontWeight: 500 }}>Kechballen is een ode aan jouw inner kech. iedereen heeft het in zich, een pauper, een drerrie, een ho; jij ook! Kechballen helpt dat te channelen tijdens de feestdagen

              </p>
            </div>

            <div style={{
              background: 'var(--kech-black)', border: '3px solid var(--kech-black)', borderRadius: 20,
              padding: '24px 22px', boxShadow: '7px 7px 0 var(--kech-aqua), 7px 7px 0 3px var(--kech-black)', transform: 'rotate(-0.6deg)',
              color: 'var(--kech-white)'
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: 'var(--kech-aqua)', marginBottom: 10, textTransform: 'uppercase' }}>

              </div>
              <div style={{ fontFamily: 'Kechfont, system-ui', fontWeight: 800, fontSize: 30, lineHeight: 0.95, letterSpacing: '-0.01em', textTransform: 'lowercase', marginBottom: 12, color: 'var(--kech-aqua)' }}>waarom swipen?

              </div>
              <p style={{ fontSize: 16, lineHeight: 1.45, margin: 0, fontWeight: 500, color: 'var(--kech-white)' }}>niemand heeft zo'n top tier smaak als jij. help ons kiezen welke kechballen wij gaan maken om als kerstornament de boom te halen in 2026

              </p>
            </div>
          </div>
        </div>
      </div>

      {/* How-it-works strip */}
      <div id="hoe" style={{ position: 'relative', background: 'var(--kech-aqua)', borderTop: '4px solid var(--kech-black)', borderBottom: '4px solid var(--kech-black)', padding: '56px 28px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <div className="section-head" style={{ marginBottom: 36 }}>
            <h2 style={{
              fontFamily: 'Kechfont, system-ui', fontWeight: 800,
              fontSize: 'clamp(40px, 9.5vw, 96px)', textTransform: 'lowercase',
              margin: 0, color: 'var(--kech-black)', lineHeight: 0.85, letterSpacing: '-0.02em',
              whiteSpace: 'nowrap'
            }}>zo werkt het</h2>
            <span className="tag tag--mono" style={{ background: 'var(--kech-black)', color: 'var(--kech-aqua)' }}>{"<3 MIN"}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
            {[
            { n: '01', t: 'swipe', s: 'bekijk de ontwerpjes en swipe ze naar links of rechts' },
            { n: '02', t: 'feedback', s: 'laat ons weten wat je er wel/niet grappig aan vindt' },
            { n: '03', t: 'volg', s: 'kom op de exclusieve wachtlijst en wees de eerste die kan flaneren met kerst' }].
            map((it, i) =>
            <div key={it.n} style={{
              background: 'var(--kech-white)',
              border: '3px solid var(--kech-black)',
              borderRadius: 18,
              padding: '20px 20px 22px',
              boxShadow: i % 2 === 0 ? '6px 6px 0 var(--kech-fuchsia), 6px 6px 0 3px var(--kech-black)' : '6px 6px 0 var(--kech-black)',
              transform: `rotate(${i % 2 === 0 ? -1 : 1}deg)`,
              color: 'var(--kech-black)'
            }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.2em', color: 'var(--kech-fuchsia)', marginBottom: 8 }}>
                  stap {it.n}
                </div>
                <div style={{ fontFamily: 'Kechfont, system-ui', fontWeight: 800, fontSize: 30, textTransform: 'lowercase', lineHeight: 0.9, letterSpacing: '-0.01em', marginBottom: 8 }}>
                  {it.t}
                </div>
                <div style={{ fontSize: 15, lineHeight: 1.4, color: 'var(--kech-black)', opacity: 0.82, fontWeight: 500 }}>
                  {it.s}
                </div>
              </div>
            )}
          </div>

          <div style={{ marginTop: 36, textAlign: 'center' }}>
            <button onClick={onStart} className="kbtn" style={{ background: 'var(--kech-black)', color: 'var(--kech-aqua)', boxShadow: '5px 5px 0 var(--kech-fuchsia), 5px 5px 0 3px var(--kech-black)' }}>
              ok, breng me die ballen
            </button>
          </div>
        </div>
      </div>

      {/* Bottom black ticker — removed per feedback */}
    </section>);

}

window.KechHero = { Landing, KechWordmark, Sticker, Ticker, FloatingSticker, RotatingType, OrnamentBall, CollectionBackdrop };