/* Hero section for ZenTag */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const cfg = (typeof window !== 'undefined' && window.ZENTAG) || { isAuthed: false, urls: { login: '/login', signup: '/login', dashboard: '/login', order: '/login' } };
  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'py-3' : 'py-5'}`}>
      <div className={`mx-auto max-w-6xl px-5 flex items-center justify-between transition-all duration-500 ${scrolled ? 'glass-strong rounded-full px-5' : ''}`} style={scrolled ? { maxWidth: 980 } : {}}>
        <a href="#" className="flex items-center gap-2 group">
          <div className="w-7 h-7 rounded-lg flex items-center justify-center relative overflow-hidden" style={{ background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)' }}>
            <div className="absolute inset-0 opacity-50" style={{ background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%)' }} />
            <span className="relative font-bold text-[14px] text-white">z</span>
          </div>
          <span className="text-[15px] font-medium tracking-tight">ZenTag</span>
        </a>
        <div className="hidden md:flex items-center gap-7 text-[13.5px] text-fog-300">
          <a href="#cards" className="hover:text-white transition">Cards</a>
          <a href="#how" className="hover:text-white transition">How it works</a>
          <a href="#teams" className="hover:text-white transition">For teams</a>
          <a href="#features" className="hover:text-white transition">Features</a>
          <a href="#pricing" className="hover:text-white transition">Pricing</a>
          <a href="#contact" className="hover:text-white transition">Contact</a>
        </div>
        <div className="flex items-center gap-2">
          {cfg.isAuthed ? (
            <a href={cfg.urls.dashboard} className="px-3.5 py-2 rounded-full text-[13px] font-medium" style={{ background: '#fff', color: '#0a0a0d' }}>Dashboard</a>
          ) : (
            <>
              <a href={cfg.urls.login} className="hidden sm:block text-[13.5px] text-fog-300 hover:text-white transition mr-2">Sign in</a>
              <a href={cfg.urls.signup} className="px-3.5 py-2 rounded-full text-[13px] font-medium" style={{ background: '#fff', color: '#0a0a0d' }}>Get a card</a>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}

function Hero({ heroMaterial = 'matte' }) {
  // Parallax tilt for the hero stage based on mouse
  const stageRef = React.useRef(null);
  React.useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    let raf = null;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width/2;
      const cy = r.top + r.height/2;
      const dx = (e.clientX - cx) / r.width;
      const dy = (e.clientY - cy) / r.height;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.setProperty('--mx', dx.toFixed(3));
        el.style.setProperty('--my', dy.toFixed(3));
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section className="relative min-h-[100svh] pt-32 pb-24 overflow-hidden noise">
      <Aurora />
      <div className="absolute inset-0 grid-bg opacity-60" />

      {/* Top label */}
      <div className="relative z-10 mx-auto max-w-6xl px-5">
        <Reveal>
          <div className="flex justify-center">
            <Eyebrow>v2 · NFC + QR · Available now</Eyebrow>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <h1 className="display mt-7 text-center text-[clamp(54px,8.4vw,116px)] text-gradient">
            Your business card.
            <br/>
            <span className="text-gradient-accent italic font-serif font-normal">Reinvented.</span>
          </h1>
        </Reveal>

        <Reveal delay={2}>
          <p className="mt-7 text-center text-[clamp(16px,1.5vw,20px)] text-fog-300 max-w-2xl mx-auto leading-relaxed">
            Share your brand instantly with NFC, QR codes, and smart digital profiles. One tap. Unlimited connections.
          </p>
        </Reveal>

        <Reveal delay={3}>
          <div className="mt-9 flex flex-col sm:flex-row items-center justify-center gap-3">
            <PrimaryBtn href={(window.ZENTAG && window.ZENTAG.urls.signup) || '/login'}>Get your card</PrimaryBtn>
            <GhostBtn href="#cards">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              See cards
            </GhostBtn>
          </div>
        </Reveal>

        <Reveal delay={4}>
          <div className="mt-5 flex items-center justify-center gap-2 text-[12px] text-fog-400 font-mono">
            <Icon.Check width="14" height="14" style={{ color: 'var(--accent)' }} />
            No app required · Works on iPhone & Android
          </div>
        </Reveal>
      </div>

      {/* 3D Stage */}
      <div ref={stageRef} className="relative z-10 mt-20 mx-auto max-w-6xl px-5 stage-3d" style={{ ['--mx']: 0, ['--my']: 0 }}>
        <Reveal delay={5}>
          <div className="relative h-[520px] flex items-center justify-center">
            {/* QR floating left */}
            <div className="absolute left-[6%] top-1/2 -translate-y-1/2 hidden md:block" style={{
              transform: 'translate(calc(var(--mx)*-20px), calc(-50% + var(--my)*-12px))',
              transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1)',
            }}>
              <div className="relative p-5 rounded-3xl glass-strong floatY" style={{ animationDelay: '0.6s' }}>
                <QRCode size={150} />
                <div className="absolute -top-3 left-5 px-2.5 py-1 rounded-full text-[10px] font-mono uppercase tracking-widest" style={{ background: 'var(--accent)', color: '#fff' }}>Scan</div>
                {/* Scan line */}
                <div className="absolute inset-5 overflow-hidden rounded-2xl pointer-events-none">
                  <div className="scanline absolute left-0 right-0 h-[2px]" style={{ background: 'linear-gradient(90deg, transparent, var(--accent-2), transparent)', boxShadow: '0 0 16px var(--accent-glow)' }} />
                </div>
              </div>
            </div>

            {/* Central NFC card */}
            <div className="relative" style={{
              transform: 'translate3d(calc(var(--mx)*18px), calc(var(--my)*12px), 0)',
              transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1)',
            }}>
              {/* Ambient glow */}
              <div className="absolute -inset-20 -z-10 rounded-full blur-3xl" style={{ background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)' }} />

              {/* The hero card */}
              <div className="float" style={{ ['--rx']: '8deg', ['--ry']: '-16deg' }}>
                <NFCCard material={heroMaterial} className="w-[420px] md:w-[480px]" />
              </div>

              {/* NFC ripples from card */}
              <div className="absolute -right-10 top-1/2 -translate-y-1/2 pointer-events-none">
                {[0,1,2].map(i => (
                  <div key={i} className="absolute w-16 h-16 rounded-full border border-white/30 ripple" style={{ animationDelay: `${i*0.8}s` }} />
                ))}
              </div>

              {/* "Tap to share" hint */}
              <div className="absolute -bottom-12 left-1/2 -translate-x-1/2 text-[11px] font-mono uppercase tracking-[0.24em] text-fog-300 whitespace-nowrap">
                <span style={{ color: 'var(--accent-2)' }}>●</span> Tap to share
              </div>
            </div>

            {/* Phone floating right */}
            <div className="absolute right-[4%] top-1/2 -translate-y-1/2 hidden md:block" style={{
              transform: 'translate(calc(var(--mx)*22px), calc(-50% + var(--my)*16px)) rotate(6deg)',
              transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1)',
            }}>
              <div className="floatY" style={{ animationDelay: '1.2s' }}>
                <PhoneFrame style={{ width: 220 }}>
                  <ProfileScreen compact />
                </PhoneFrame>
              </div>
            </div>

            {/* Floating social icons */}
            <FloatingSocials />
          </div>
        </Reveal>
      </div>

    </section>
  );
}

function FloatingSocials() {
  // Position social icons around the card stage
  const positions = [
    { top: '8%', left: '32%', delay: '0s' },
    { top: '14%', right: '28%', delay: '0.4s' },
    { top: '70%', left: '24%', delay: '0.8s' },
    { top: '78%', right: '20%', delay: '1.2s' },
    { top: '40%', left: '10%', delay: '1.6s' },
    { top: '50%', right: '8%', delay: '2.0s' },
    { top: '22%', left: '46%', delay: '2.4s' },
  ];
  return (
    <>
      {SocialList.map(({ name, Comp, color }, i) => (
        <div key={name}
          className="absolute floatY pointer-events-none hidden lg:flex items-center justify-center w-11 h-11 rounded-2xl glass-strong"
          style={{
            ...positions[i],
            animationDelay: positions[i].delay,
            color: color,
            boxShadow: `0 0 24px ${color}33`,
          }}
        >
          <Comp width="18" height="18" />
        </div>
      ))}
    </>
  );
}

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