// Nav + Hero components

function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Lock body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-brand" onClick={closeMenu}>
        <span className="nav-logo" />
        <span>sendar</span>
      </a>
      <nav className={`nav-links ${menuOpen ? 'open' : ''}`}>
        <a href="#about" onClick={closeMenu}>{t('nav.about')}</a>
        <a href="#matchmaking" onClick={closeMenu}>{t('nav.matchmaking')}</a>
        <a href="#education" onClick={closeMenu}>{t('nav.education')}</a>
        <a href="#award" onClick={closeMenu}>{t('nav.award')}</a>
        <a href="/kontakt" onClick={closeMenu}>{t('nav.contact')}</a>
        <div className="lang-toggle">
          <button className={lang === 'de' ? 'active' : ''} onClick={() => setLang('de')}>DE</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </nav>
      <button
        className={`nav-hamburger ${menuOpen ? 'open' : ''}`}
        aria-label={menuOpen ? 'Menü schließen' : 'Menü öffnen'}
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen((v) => !v)}
      >
        <span />
      </button>
    </header>
  );
}

// Hero backgrounds — abstract architectural gradients (no real photos)
const HERO_BGS = [
  {
    bg: `linear-gradient(180deg, #a8b5bd 0%, #5d6971 22%, #2b3138 55%, #0e1013 100%),
         radial-gradient(ellipse at 30% 90%, rgba(0,0,0,0.55) 0%, transparent 60%)`,
    accent: 'rgba(240,217,166,0.25)',
  },
  {
    bg: `linear-gradient(200deg, #d6b985 0%, #7a6142 40%, #2c231a 80%, #0f0c08 100%)`,
    accent: 'rgba(255,210,150,0.35)',
  },
  {
    bg: `linear-gradient(170deg, #2d3c45 0%, #1a2329 50%, #09110f 100%),
         radial-gradient(circle at 70% 20%, rgba(240,217,166,0.1) 0%, transparent 55%)`,
    accent: 'rgba(240,217,166,0.2)',
  },
];

// Architectural skyline as stacked rectangles that rise on load.
// Position / size set so they look like towers viewed from below.
const SKYLINE = [
  { x:   0, w: 180, h: 720, delay: 0.15, tilt: -0.4 },
  { x: 180, w: 120, h: 820, delay: 0.05, tilt: -0.3 },
  { x: 300, w:  90, h: 600, delay: 0.25, tilt: -0.25 },
  { x: 960, w: 140, h: 680, delay: 0.10, tilt:  0.3 },
  { x:1100, w: 170, h: 860, delay: 0.00, tilt:  0.5 },
  { x:1270, w: 170, h: 740, delay: 0.20, tilt:  0.4 },
];

function Hero({ t, cycle, sendStyle = 'broadcast' }) {
  const [idx, setIdx] = React.useState(0);
  const [mounted, setMounted] = React.useState(false);
  const bgRef = React.useRef(null);
  const contentRef = React.useRef(null);
  const skylineRef = React.useRef(null);

  React.useEffect(() => {
    const id = requestAnimationFrame(() => setMounted(true));
    return () => cancelAnimationFrame(id);
  }, []);

  // Cycle backgrounds
  React.useEffect(() => {
    if (!cycle) return;
    const id = setInterval(() => setIdx((i) => (i + 1) % HERO_BGS.length), 7000);
    return () => clearInterval(id);
  }, [cycle]);

  // Parallax on scroll
  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        if (bgRef.current)      bgRef.current.style.transform = `translate3d(0, ${y * 0.35}px, 0) scale(1.05)`;
        if (skylineRef.current) skylineRef.current.style.transform = `translate3d(0, ${y * 0.55}px, 0)`;
        if (contentRef.current) {
          contentRef.current.style.transform = `translate3d(0, ${y * 0.18}px, 0)`;
          contentRef.current.style.opacity = String(Math.max(0, 1 - y / 600));
        }
        ticking = false;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="top" className={`hero ${mounted ? 'hero-in' : ''}`}>
      <div className="hero-bg" ref={bgRef}>
        {HERO_BGS.map((b, i) => (
          <div
            key={i}
            className={`hero-bg-layer ${i === idx ? 'active' : ''}`}
            style={{ background: b.bg }}
          />
        ))}
      </div>

      {/* Animated architectural skyline */}
      <div className="hero-skyline" ref={skylineRef}>
        <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMax slice" style={{ width: '100%', height: '100%' }}>
          <defs>
            <linearGradient id="towerGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="rgba(0,0,0,0.25)"/>
              <stop offset="1" stopColor="rgba(0,0,0,0.85)"/>
            </linearGradient>
            <linearGradient id="windowGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="rgba(240,217,166,0.15)"/>
              <stop offset="1" stopColor="rgba(240,217,166,0.03)"/>
            </linearGradient>
          </defs>
          <g className="skyline-group">
            {SKYLINE.map((s, i) => (
              <g
                key={i}
                className="tower"
                style={{
                  transformOrigin: `${s.x + s.w/2}px 900px`,
                  transitionDelay: `${s.delay}s`,
                  '--tilt': `${s.tilt}deg`,
                }}
              >
                <rect
                  x={s.x} y={900 - s.h} width={s.w} height={s.h}
                  fill="url(#towerGrad)"
                />
                {/* Window grid overlay */}
                <rect
                  x={s.x + 8} y={900 - s.h + 20}
                  width={s.w - 16} height={s.h - 40}
                  fill="url(#windowGrad)"
                />
                {/* Vertical accents — thin cream lines suggesting glazing */}
                {Array.from({ length: Math.floor(s.w / 22) }).map((_, j) => (
                  <line
                    key={j}
                    x1={s.x + 12 + j * 22} y1={900 - s.h + 14}
                    x2={s.x + 12 + j * 22} y2={900 - 6}
                    stroke="rgba(240,217,166,0.14)" strokeWidth="0.5"
                  />
                ))}
                {/* Top edge highlight */}
                <line
                  x1={s.x} y1={900 - s.h}
                  x2={s.x + s.w} y2={900 - s.h}
                  stroke="rgba(240,217,166,0.35)" strokeWidth="1"
                />
              </g>
            ))}
          </g>
        </svg>
      </div>

      <div className="hero-content" ref={contentRef}>
        <h1 className="display hero-title" style={{ fontSize: 'clamp(56px, 8.4vw, 128px)' }}>
          <span className="hero-line-wrap hero-line-wrap--send">
            <span key={sendStyle} className={`hero-brand send-${sendStyle}`}>
              {sendStyle === 'broadcast' && <SendBroadcast text={t('hero.brand')} />}
              {sendStyle === 'paperplane' && <SendPaperplane text={t('hero.brand')} />}
              {sendStyle === 'signal' && <SendSignal text={t('hero.brand')} />}
            </span>
          </span>
          <span className="hero-line-wrap"><span className="hero-line">{t('hero.title1')}</span></span>
          <span className="hero-line-wrap"><span className="hero-line">{t('hero.title2')}</span></span>
        </h1>
        <p className="hero-sub">{t('hero.subtitle')}</p>
      </div>

      <div className="hero-dots">
        {HERO_BGS.map((_, i) => (
          <button
            key={i}
            className={`hero-dot ${i === idx ? 'active' : ''}`}
            aria-label={`Background ${i + 1}`}
            onClick={() => setIdx(i)}
          />
        ))}
      </div>
      <div className="hero-scroll-hint mono">
        <span>{t('hero.scrollHint')}</span>
        <span className="line" />
      </div>

      <style>{`
        .hero-skyline {
          position: absolute;
          left: 0; right: 0; bottom: 0;
          height: 88%;
          z-index: 1;
          pointer-events: none;
          will-change: transform;
        }
        .tower {
          opacity: 0;
          transform: translateY(100%) rotate(var(--tilt));
          transition:
            opacity 1.6s cubic-bezier(.2,.9,.2,1),
            transform 2.2s cubic-bezier(.16,.88,.22,1);
          will-change: transform, opacity;
        }
        .hero-in .tower {
          opacity: 1;
          transform: translateY(0) rotate(var(--tilt));
        }
        .hero-line-wrap {
          display: block;
          overflow: hidden;
          padding: 0.04em 0.02em;
        }
        .hero-line-wrap--send {
          overflow: visible; /* allow reveal FX (pings, sweeps, plane) to extend outside */
        }
        .hero-line-wrap--send .hero-brand {
          transform: none !important;
          opacity: 1 !important;
          transition: none !important;
        }
        .hero-line-wrap .hero-brand,
        .hero-line-wrap .hero-line {
          display: block;
          transform: translateY(110%);
          opacity: 0;
          transition:
            transform 1.3s cubic-bezier(.19,.88,.22,1),
            opacity 1.1s cubic-bezier(.19,.88,.22,1);
        }
        .hero-in .hero-line-wrap:nth-child(1) .hero-brand,
        .hero-in .hero-line-wrap:nth-child(2) .hero-line,
        .hero-in .hero-line-wrap:nth-child(3) .hero-line {
          transform: translateY(0);
          opacity: 1;
        }
        .hero-in .hero-line-wrap:nth-child(1) .hero-brand { transition-delay: 0.55s; }
        .hero-in .hero-line-wrap:nth-child(2) .hero-line  { transition-delay: 0.70s; }
        .hero-in .hero-line-wrap:nth-child(3) .hero-line  { transition-delay: 0.85s; }

        .hero .hero-sub {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 1s ease, transform 1s cubic-bezier(.19,.88,.22,1);
          transition-delay: 1.1s;
        }
        .hero-in .hero-sub { opacity: 0.92; transform: none; }

        .hero .hero-dots,
        .hero .hero-scroll-hint {
          opacity: 0;
          transition: opacity 1s ease;
          transition-delay: 1.35s;
        }
        .hero-in .hero-dots { opacity: 1; }
        .hero-in .hero-scroll-hint { opacity: 0.7; }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero, SendBroadcast, SendPaperplane, SendSignal });

// ————————————————————————————————————————————————————
// "Sending" reveal animations — one-shot: they play on mount
// to reveal the word "sendar", then settle. NOT ambient background motion.

function splitLetters(text) {
  return text.split('').map((ch, i) => (
    <span className="send-letter" key={i} style={{ '--i': i, '--n': text.length }}>
      {ch === ' ' ? '\u00A0' : ch}
    </span>
  ));
}

function SendBroadcast({ text }) {
  // Each letter arrives like a received transmission: a ring ping expands
  // around the letter slot as the letter materializes. Left-to-right.
  return (
    <span className="send-reveal send-reveal-broadcast" aria-label={text}>
      {splitLetters(text)}
      <span className="broadcast-ping" aria-hidden="true"/>
      <style>{`
        .send-broadcast .send-reveal-broadcast { display: inline-block; position: relative; }
        .send-reveal-broadcast .send-letter {
          display: inline-block;
          opacity: 0;
          transform: translateY(0.12em) scale(0.92);
          filter: blur(6px);
          animation: bc-letter 0.55s cubic-bezier(.2,.7,.2,1) forwards;
          animation-delay: calc(0.35s + var(--i) * 0.09s);
        }
        @keyframes bc-letter {
          to { opacity: 1; transform: none; filter: blur(0); }
        }
        .send-reveal-broadcast .broadcast-ping {
          position: absolute;
          left: 0.05em; top: 50%;
          width: 0.9em; height: 0.9em;
          margin-top: -0.45em;
          border-radius: 50%;
          border: 2px solid var(--sand);
          opacity: 0;
          transform: scale(0.2);
          animation: bc-ping 2.2s cubic-bezier(.2,.6,.2,1) 0.2s forwards;
        }
        @keyframes bc-ping {
          0%   { opacity: 0.0; transform: scale(0.2); }
          15%  { opacity: 0.85; }
          100% { opacity: 0; transform: scale(9); border-width: 0.5px; }
        }
      `}</style>
    </span>
  );
}

function SendPaperplane({ text }) {
  // A paper plane flies in from the left trailing a dashed line; as it passes
  // each letter position, that letter drops into place from above. Plane exits right.
  return (
    <span className="send-reveal send-reveal-plane" aria-label={text}>
      {splitLetters(text)}
      <span className="plane-track" aria-hidden="true">
        <svg viewBox="0 0 100 20" preserveAspectRatio="none">
          <line x1="0" y1="10" x2="100" y2="10"
                stroke="var(--sand)" strokeOpacity="0.55"
                strokeWidth="0.8" strokeDasharray="2 3"
                className="plane-trail-line"/>
        </svg>
      </span>
      <span className="plane-glyph" aria-hidden="true">
        <svg viewBox="0 0 20 14">
          <path d="M 0 0 L 20 7 L 6 10 L 6 14 L 0 14 Z" fill="var(--sand)"/>
        </svg>
      </span>
      <style>{`
        .send-paperplane .send-reveal-plane { display: inline-block; position: relative; }
        .send-reveal-plane .send-letter {
          display: inline-block;
          opacity: 0;
          transform: translateY(-0.7em) rotate(-2deg);
          animation: pl-letter 0.55s cubic-bezier(.2,.9,.25,1) forwards;
          /* Stagger so letters fall just after plane passes them */
          animation-delay: calc(0.28s + (var(--i) / var(--n)) * 1.4s);
        }
        @keyframes pl-letter {
          0%   { opacity: 0; transform: translateY(-0.7em) rotate(-2deg); }
          60%  { opacity: 1; }
          100% { opacity: 1; transform: translateY(0) rotate(0); }
        }
        .send-reveal-plane .plane-track {
          position: absolute;
          left: -0.3em; right: -0.1em;
          top: 45%;
          height: 2px;
          pointer-events: none;
          overflow: hidden;
        }
        .send-reveal-plane .plane-track svg {
          width: 100%; height: 100%; display: block;
          transform: scaleX(0);
          transform-origin: left center;
          animation: pl-trail 1.7s cubic-bezier(.4,0,.2,1) 0.1s forwards;
        }
        @keyframes pl-trail {
          0%   { transform: scaleX(0); }
          60%  { transform: scaleX(1); opacity: 1; }
          100% { transform: scaleX(1); opacity: 0; }
        }
        .send-reveal-plane .plane-glyph {
          position: absolute;
          left: -0.8em; top: 42%;
          width: 0.55em; height: 0.4em;
          pointer-events: none;
          opacity: 0;
          animation: pl-fly 1.9s cubic-bezier(.4,0,.2,1) 0.1s forwards;
        }
        .send-reveal-plane .plane-glyph svg { width: 100%; height: 100%; display: block; }
        @keyframes pl-fly {
          0%   { opacity: 0; transform: translate(0, 0.3em) rotate(-6deg); }
          10%  { opacity: 1; }
          60%  { transform: translate(calc(100% + 9em), 0) rotate(0deg); opacity: 1; }
          100% { transform: translate(calc(100% + 14em), -0.5em) rotate(8deg); opacity: 0; }
        }
      `}</style>
    </span>
  );
}

function SendSignal({ text }) {
  // A radar sweep crosses the word left-to-right; letters reveal in its wake
  // like a signal sweeping across a screen.
  return (
    <span className="send-reveal send-reveal-signal" aria-label={text}>
      {splitLetters(text)}
      <span className="signal-sweep" aria-hidden="true"/>
      <style>{`
        .send-signal .send-reveal-signal { display: inline-block; position: relative; overflow: visible; }
        .send-reveal-signal .send-letter {
          display: inline-block;
          opacity: 0;
          color: transparent;
          -webkit-text-stroke: 1px var(--sand);
          text-stroke: 1px var(--sand);
          transition: color 0.4s ease, -webkit-text-stroke 0.4s ease;
          animation: sg-letter 0.7s cubic-bezier(.2,.7,.2,1) forwards;
          animation-delay: calc(0.35s + (var(--i) / var(--n)) * 1.2s);
        }
        @keyframes sg-letter {
          0%   { opacity: 0; color: transparent; -webkit-text-stroke-width: 1px; }
          30%  { opacity: 1; color: transparent; -webkit-text-stroke-width: 1.5px; }
          100% { opacity: 1; color: var(--sand); -webkit-text-stroke-width: 0; }
        }
        .send-reveal-signal .signal-sweep {
          position: absolute;
          left: -0.5em; top: -0.1em; bottom: -0.1em;
          width: 0.6em;
          background: linear-gradient(90deg,
            rgba(240,217,166,0) 0%,
            rgba(240,217,166,0.35) 45%,
            rgba(240,217,166,0.75) 55%,
            rgba(240,217,166,0) 100%);
          filter: blur(4px);
          pointer-events: none;
          opacity: 0;
          animation: sg-sweep 1.7s cubic-bezier(.4,0,.2,1) 0.25s forwards;
        }
        @keyframes sg-sweep {
          0%   { opacity: 0;   transform: translateX(0); }
          15%  { opacity: 1; }
          85%  { opacity: 1; }
          100% { opacity: 0;   transform: translateX(calc(100% + 7em)); }
        }
      `}</style>
    </span>
  );
}
