/* ===== Nav, Hero, Press ===== */
const HERO_VIDEO = "hero.mp4";

const NAV_LINKS = ['Story', 'Products', 'Help', 'Support'];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav-in fixed top-0 inset-x-0 z-50 flex items-center justify-center pt-4 sm:pt-6 px-4 sm:px-8 gap-2 sm:gap-3">
      <div
        className="flex items-center justify-center rounded-full w-10 h-10 sm:w-11 sm:h-11 shrink-0 transition-shadow duration-300"
        style={{ backgroundColor: '#EDEDED', boxShadow: scrolled ? '0 6px 24px rgba(0,0,0,0.10)' : 'none' }}
      >
        <Logo />
      </div>
      <div
        className="flex items-center gap-4 sm:gap-10 rounded-xl px-4 sm:px-8 py-2.5 sm:py-3 transition-shadow duration-300"
        style={{ backgroundColor: '#EDEDED', boxShadow: scrolled ? '0 6px 24px rgba(0,0,0,0.10)' : 'none' }}
      >
        <span className="hidden sm:block text-[14px] font-semibold tracking-tight text-gray-900 pr-1">SendiBionik</span>
        {NAV_LINKS.map((l) => (
          <a
            key={l}
            href={`#${l.toLowerCase()}`}
            className="text-[12px] sm:text-[14px] font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200"
          >
            {l}
          </a>
        ))}
      </div>
    </nav>
  );
}

function Hero() {
  // subtle video parallax / zoom on scroll
  const [scale, setScale] = useState(1.05);
  const [yOff, setYOff] = useState(0);
  useEffect(() => {
    if (prefersReduced()) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const y = window.scrollY;
        setScale(1.05 + Math.min(y / 4000, 0.12));
        setYOff(Math.min(y * 0.18, 160));
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  return (
    <header className="relative min-h-[900px] bg-[#f0f0ee]" style={{ overflow: 'hidden' }}>
      <video
        className="absolute inset-0 w-full h-full object-cover"
        style={{ transform: `scale(${scale}) translateY(${yOff}px)`, transition: 'transform 0.1s linear' }}
        autoPlay muted loop playsInline preload="auto"
        width="1440" height="900"
        src={HERO_VIDEO}
      />
      {/* gentle wash so bottom-left text stays legible across video frames */}
      <div className="absolute inset-0 bg-gradient-to-t from-[#f0f0ee]/70 via-transparent to-transparent pointer-events-none" />

      <div className="relative z-10 flex flex-col min-h-[900px]">
        <Nav />
        <div className="flex-1 flex items-end pb-10 sm:pb-16 lg:pb-20 px-6 sm:px-12 md:px-20 lg:px-28">
          <div className="hero-in max-w-xs">
            <a href="#press" className="inline-flex items-center gap-1.5 text-[11.5px] font-medium text-blue-500 hover:text-blue-600 transition-colors mb-3 group">
              Designed & fitted in Penang
              <span className="inline-block transition-transform duration-200 group-hover:translate-x-0.5">→</span>
            </a>
            <h1 className="text-[1.5rem] sm:text-[1.75rem] leading-[1.15] font-medium text-gray-900 tracking-tight mb-3">
              Smart prosthetics for people who keep fighting.
            </h1>
            <p className="text-[15px] text-gray-700 font-medium mb-2 leading-snug">Affordable, locally fitted. Scan, stride in 7 days.</p>
            <p className="text-[13px] text-gray-400 font-normal mb-3">Built for daily life — and built to last.</p>
            <a href="#fitting" className="inline-flex items-center gap-2 text-[13px] font-medium text-blue-500 border border-blue-400 rounded-full px-5 py-2.5 hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200 group">
              Book a Free Scan
              <span className="transition-transform duration-200 group-hover:translate-x-0.5">→</span>
            </a>
          </div>
        </div>

        {/* scroll cue */}
        <div className="absolute bottom-6 right-6 sm:right-12 hidden sm:flex flex-col items-center gap-2 text-gray-400">
          <span className="text-[10px] uppercase tracking-[0.25em] [writing-mode:vertical-rl]">Scroll</span>
          <span className="w-px h-10 bg-gray-300 overflow-hidden relative">
            <span className="absolute inset-x-0 top-0 h-1/2 bg-gray-500 animate-[heroUp_1.6s_ease-in-out_infinite]" />
          </span>
        </div>
      </div>
    </header>
  );
}

function Press() {
  const logos = ['The Daily Ledger', 'Health Weekly', 'Tech Tribune', 'The Northern Post', 'Mobility Review', 'Frontier Journal', 'Civic Wire'];
  const row = [...logos, ...logos];
  return (
    <section id="press" className="py-10 sm:py-14 border-y border-black/5 bg-[#f0f0ee]">
      <p className="text-center text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-7" data-reveal>
        Trusted &amp; featured by
      </p>
      <div className="relative overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]">
        <div className="marquee gap-14 sm:gap-20 px-10">
          {row.map((name, i) => (
            <span key={i} className="shrink-0 text-[15px] sm:text-[17px] font-semibold tracking-tight text-gray-400 hover:text-gray-700 transition-colors whitespace-nowrap">
              {name}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Press, HERO_VIDEO });