/* global React */
const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ── Floating Tile (collage piece) ─────────────────── */
function FloatTile({ x, y, w, h, ph, img, label, mouse, depth=1, rot=0, delay=0 }) {
  const tx = (mouse.x - 0.5) * 30 * depth;
  const ty = (mouse.y - 0.5) * 18 * depth;
  return (
    <div
      className="tile"
      data-cursor="view"
      style={{
        left: `${x}%`, top: `${y}%`,
        width: `${w}px`, height: `${h}px`,
        transform: `translate(${tx}px, ${ty}px) rotate(${rot}deg)`,
        animationDelay: `${delay}s`
      }}
    >
      <span className="tile-meta">{label}</span>
      <div className="tile-inner" style={{ display: 'block', width: '100%', height: '100%', cursor: 'default', pointerEvents: 'none' }}>
        <div className={`placeholder ${ph}`} style={{ '--img': `url(${img})` }}><span>{label}</span></div>
      </div>
    </div>
  );
}

/* ── Hero ─────────────────────────────────────────── */
function Hero() {
  const [mouse, setMouse] = uS({ x: 0.5, y: 0.5 });
  const ref = uR(null);
  uE(() => {
    const onMove = (e) => {
      setMouse({
        x: e.clientX / window.innerWidth,
        y: e.clientY / window.innerHeight,
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section ref={ref} style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', paddingTop: 120 }}>
      {/* Headline — center stage */}
      <div style={{
        position: 'relative', zIndex: 5,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        minHeight: 'calc(100vh - 120px)', textAlign: 'center', padding: '0 24px',
        pointerEvents: 'none'
      }}>
        <div className="serif kerning-tight" style={{ fontSize: 'clamp(48px, 9vw, 152px)', lineHeight: 0.95, maxWidth: 1100 }}>
          <Reveal text="Spaces unfolding" baseDelay={1.0} />
          <br />
          <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
            <Reveal text="at the speed of thought." baseDelay={1.4} />
          </span>
        </div>

        <FadeUp delay={1.9}>
          <div style={{ marginTop: 36, color: 'var(--ink-mid)', fontSize: 14, maxWidth: 460, lineHeight: 1.6 }}>
            Aura is an immersive studio for architecture and interiors —
            stepped through, examined, and revised long before a single wall is built.
          </div>
        </FadeUp>

        <FadeUp delay={2.1}>
          <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', pointerEvents: 'auto' }}>
            <Magnetic strength={0.25}>
              <a href="/experience" className="btn-primary" data-cursor="click">
                Enter the Experience
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </a>
            </Magnetic>
            <Magnetic strength={0.25}>
              <a href="#spaces" className="btn-ghost" data-cursor="click">Browse Spaces</a>
            </Magnetic>
          </div>
        </FadeUp>
      </div>

      {/* Bottom meta strip */}
      <div style={{ position: 'absolute', left: 32, bottom: 28, display: 'flex', flexDirection: 'column', gap: 6, zIndex: 6 }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mid)' }}>
          ↳ Scroll
        </span>
      </div>
      <div style={{ position: 'absolute', right: 32, bottom: 28, display: 'flex', alignItems: 'center', gap: 14, zIndex: 6 }}>
        {[
          { label: 'Instagram', href: 'https://www.instagram.com/auraworld4u?igsh=bWw0azJrbmtrYXl3&utm_source=qr', icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg> },
          { label: 'Facebook', href: 'https://www.facebook.com/share/1CbfJ38DAS/?mibextid=wwXIfr', icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> },
          { label: 'YouTube', href: 'https://youtube.com/@auraworld-4u?si=fM7vBifv0yVZ_Ntj', icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> },
        ].map(({ label, href, icon }) => (
          <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
            style={{ color: 'var(--ink-mid)', display: 'flex', alignItems: 'center', transition: 'color .25s' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-mid)'}
          >{icon}</a>
        ))}
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mid)' }}>
          024 Spaces · 11 Cities · 2026
        </span>
      </div>
    </section>
  );
}

/* ── Top nav ──────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = uS(false);
  const [menuOpen, setMenuOpen] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  uE(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
  }, [menuOpen]);

  const links = [
    { href: '#spaces', label: 'Spaces' },
    { href: '#experience', label: 'Experience' },
    { href: '#ar-soon', label: 'AR · Soon' },
    { href: '#about', label: 'About' },
    { href: '#journal', label: 'Journal' },
  ];

  return (
    <>
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: scrolled ? '14px 24px' : '20px 24px',
      transition: 'padding .5s cubic-bezier(.22,1,.36,1), background .5s, box-shadow .5s',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(239,234,224,0.75)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px)' : 'none',
      boxShadow: scrolled ? '0 1px 0 rgba(21,20,15,0.08)' : 'none',
    }}>
      <a href="#">
        <img src="/latest/logo-dark.png" alt="Aura World 4U" style={{ height: 40, width: 'auto' }} />
      </a>

      <nav className="nav-cluster" style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
        {links.slice(0, 4).map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
      </nav>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a href="/experience" className="pill" style={{ background: 'var(--accent)', color: '#FFFDF8', border: '1.5px solid var(--accent)', fontWeight: 600 }}>Enter ↗</a>
        <button className={`burger ${menuOpen?'is-open':''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
    </header>

    <div className={`mobile-menu ${menuOpen?'is-open':''}`}>
      {links.map(l => (
        <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
      ))}
      <a href="/experience" onClick={() => setMenuOpen(false)} style={{ color: 'var(--accent)' }}>Enter Experience ↗</a>
      <div style={{ marginTop: 'auto', paddingTop: 32, display: 'flex', gap: 16 }}>
        {[
          { label: 'Instagram', href: 'https://www.instagram.com/auraworld4u?igsh=bWw0azJrbmtrYXl3&utm_source=qr', icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg> },
          { label: 'Facebook', href: 'https://www.facebook.com/share/1CbfJ38DAS/?mibextid=wwXIfr', icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> },
          { label: 'YouTube', href: 'https://youtube.com/@auraworld-4u?si=fM7vBifv0yVZ_Ntj', icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> },
        ].map(({ label, href, icon }) => (
          <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
            style={{ color: 'var(--ink-mid)', display: 'flex', alignItems: 'center' }}
          >{icon}</a>
        ))}
      </div>
    </div>
    </>
  );
}

window.Hero = Hero;
window.Nav = Nav;