// Stacktree Labs — single-file React landing page.
// Hosted via index.html which loads React + Babel + Tailwind from CDNs,
// so this file can ship as raw JSX with no build step. Deploy by
// pushing to GitHub Pages (see .github/workflows/pages.yml).

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

// ─── Particle background (canvas, no library) ──────────────────────────
// Lightweight starfield with cursor parallax. Cheaper than Three.js,
// scales with viewport, pauses when tab is hidden.
function ParticleField() {
  const ref = useRef(null);

  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf = 0;
    let particles = [];
    let mouse = { x: 0, y: 0 };
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    function resize() {
      canvas.width  = window.innerWidth  * dpr;
      canvas.height = window.innerHeight * dpr;
      canvas.style.width  = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
      ctx.scale(dpr, dpr);
    }

    function spawn() {
      const count = Math.min(180, Math.floor(window.innerWidth / 8));
      particles = Array.from({ length: count }, () => ({
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight,
        z: Math.random() * 1.0 + 0.2,           // depth (0.2 .. 1.2)
        vx: (Math.random() - 0.5) * 0.12,
        vy: (Math.random() - 0.5) * 0.12,
        r: Math.random() * 1.2 + 0.4,
        c: Math.random() > 0.85 ? '#39FF14' : '#00BFFF',
        a: Math.random() * 0.5 + 0.25,
      }));
    }

    function tick() {
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
      for (const p of particles) {
        // Parallax: deeper particles move less with cursor.
        const px = p.x + (mouse.x - window.innerWidth  / 2) * 0.012 * p.z;
        const py = p.y + (mouse.y - window.innerHeight / 2) * 0.012 * p.z;
        ctx.beginPath();
        ctx.arc(px, py, p.r * p.z, 0, Math.PI * 2);
        ctx.fillStyle = p.c;
        ctx.globalAlpha = p.a * p.z;
        ctx.fill();
        p.x += p.vx; p.y += p.vy;
        if (p.x < -10) p.x = window.innerWidth + 10;
        if (p.x > window.innerWidth + 10) p.x = -10;
        if (p.y < -10) p.y = window.innerHeight + 10;
        if (p.y > window.innerHeight + 10) p.y = -10;
      }
      ctx.globalAlpha = 1;

      // Connect close-by particles with hairline lines for a constellation feel.
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const a = particles[i], b = particles[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < 9000) {
            const alpha = (1 - d2 / 9000) * 0.18;
            ctx.strokeStyle = `rgba(0,191,255,${alpha})`;
            ctx.lineWidth = 0.6;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
          }
        }
      }
      raf = requestAnimationFrame(tick);
    }

    function onMove(e) {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    }

    function onVisibility() {
      if (document.hidden) cancelAnimationFrame(raf);
      else raf = requestAnimationFrame(tick);
    }

    resize();
    spawn();
    raf = requestAnimationFrame(tick);
    window.addEventListener('resize', () => { resize(); spawn(); });
    window.addEventListener('mousemove', onMove);
    document.addEventListener('visibilitychange', onVisibility);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('visibilitychange', onVisibility);
    };
  }, []);

  return (
    <canvas
      ref={ref}
      className="fixed inset-0 z-0 pointer-events-none"
      aria-hidden="true"
    />
  );
}

// ─── Reveal-on-scroll wrapper ──────────────────────────────────────────
function Reveal({ children, delay = 0, className = '' }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            setTimeout(() => e.target.classList.add('is-visible'), delay);
            io.unobserve(e.target);
          }
        }
      },
      { threshold: 0.15 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={`reveal ${className}`}>{children}</div>;
}

// ─── 3D tilt card on cursor hover (CSS transform only) ─────────────────
function TiltCard({ children, className = '' }) {
  const ref = useRef(null);

  const onMove = useCallback((e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    const rx = (0.5 - y) * 8;   // tilt up/down up to 8deg
    const ry = (x - 0.5) * 12;  // tilt left/right up to 12deg
    el.style.transform =
      `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`;
  }, []);

  const onLeave = useCallback(() => {
    const el = ref.current; if (!el) return;
    el.style.transform =
      'perspective(900px) rotateX(0) rotateY(0) translateZ(0)';
  }, []);

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      className={`tilt-card ${className}`}
    >
      {children}
    </div>
  );
}

// ─── Floating geometric shapes (CSS 3D, decorative) ────────────────────
function FloatingShapes() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden z-0" aria-hidden="true">
      <div className="absolute top-[12%] left-[8%] h-32 w-32 rounded-2xl border border-electric/40 animate-float-slow"
           style={{ transform: 'rotate(15deg)', boxShadow: '0 0 40px rgba(0,191,255,0.25)' }} />
      <div className="absolute top-[28%] right-[10%] h-20 w-20 rounded-full border-2 border-neon/40 animate-float"
           style={{ boxShadow: '0 0 28px rgba(57,255,20,0.3)' }} />
      <div className="absolute bottom-[18%] left-[18%] h-24 w-24 animate-float-fast"
           style={{
             transform: 'rotate(45deg)',
             background: 'linear-gradient(135deg, rgba(0,191,255,0.18), rgba(57,255,20,0.10))',
             border: '1px solid rgba(0,191,255,0.35)',
             boxShadow: '0 0 32px rgba(0,191,255,0.25)',
           }} />
      <div className="absolute bottom-[28%] right-[20%] h-16 w-16 rounded-full animate-float-slow"
           style={{ background: 'radial-gradient(circle, rgba(0,191,255,0.6) 0%, transparent 70%)' }} />
    </div>
  );
}

// ─── Section: Hero ─────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="relative z-10 min-h-screen flex flex-col items-center justify-center px-6 py-24 overflow-hidden">
      <FloatingShapes />
      <Reveal>
        <p className="font-display tracking-[0.32em] text-xs md:text-sm text-electric/80 uppercase mb-6 text-center">
          Stacktree Labs
        </p>
      </Reveal>
      <Reveal delay={120}>
        <h1 className="font-display text-5xl md:text-7xl lg:text-8xl text-center font-bold leading-[1.05] tracking-tight max-w-5xl">
          We build <span className="grad-text">games</span>.<br className="hidden md:block" />
          <span className="grad-text">apps</span>. <span className="grad-text">platforms</span>.
          <span className="grad-text"> experiences</span>.
        </h1>
      </Reveal>
      <Reveal delay={240}>
        <p className="mt-8 max-w-2xl text-center text-mist/70 text-base md:text-lg leading-relaxed">
          A product-driven software studio shipping polished games, SaaS tools,
          entertainment apps, and utilities — all under one roof.
        </p>
      </Reveal>
      <Reveal delay={360}>
        <a
          href="#what-we-build"
          className="group relative mt-12 inline-flex items-center gap-3 rounded-full
                     border border-electric/60 bg-electric/10 px-7 py-3
                     font-display font-semibold text-electric
                     transition-all duration-300
                     hover:bg-electric hover:text-ink-900 hover:shadow-glow hover:scale-[1.04]"
        >
          See what we're building
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
               className="transition-transform group-hover:translate-x-1">
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        </a>
      </Reveal>

      {/* Scroll cue. */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-mist/40">
        <span className="text-[10px] tracking-[0.3em] uppercase">scroll</span>
        <div className="h-10 w-[1px] bg-gradient-to-b from-electric/60 to-transparent" />
      </div>
    </section>
  );
}

// ─── Section: About ────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" className="relative z-10 px-6 py-32 max-w-4xl mx-auto">
      <Reveal>
        <p className="font-display tracking-[0.28em] text-[11px] uppercase text-electric mb-5">
          About
        </p>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="font-display text-3xl md:text-5xl font-bold leading-tight tracking-tight">
          Turning ideas into polished digital products,{' '}
          <span className="grad-text">across every category</span>.
        </h2>
      </Reveal>
      <Reveal delay={200}>
        <p className="mt-8 text-mist/70 text-lg leading-[1.75]">
          Stacktree Labs is a forward-thinking software studio that designs
          and ships products people love — from addictive mobile games to
          powerful SaaS platforms to next-gen entertainment experiences. We
          believe the best work happens when product instinct meets
          engineering craft, and we ship at both ends of that spectrum.
        </p>
      </Reveal>
    </section>
  );
}

// ─── Section: What We Build ────────────────────────────────────────────
const CATEGORIES = [
  {
    icon: '🎮',
    title: 'Games',
    blurb: 'Engaging mobile and desktop games with tight, feel-good mechanics.',
  },
  {
    icon: '🚀',
    title: 'SaaS Platforms',
    blurb: 'Scalable cloud software with the polish of a consumer product.',
  },
  {
    icon: '🎬',
    title: 'Entertainment Apps',
    blurb: 'Streaming, social, and media experiences that pull people in.',
  },
  {
    icon: '🛠️',
    title: 'Utility & Productivity',
    blurb: 'Smart everyday tools that quietly simplify the boring parts.',
  },
  {
    icon: '📊',
    title: 'Business Solutions',
    blurb: 'Dashboards and apps that move the needle for teams and ops.',
  },
];

function WhatWeBuild() {
  return (
    <section id="what-we-build" className="relative z-10 px-6 py-32 max-w-7xl mx-auto">
      <Reveal>
        <p className="font-display tracking-[0.28em] text-[11px] uppercase text-electric mb-5 text-center">
          What we build
        </p>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="font-display text-3xl md:text-5xl font-bold leading-tight tracking-tight text-center max-w-3xl mx-auto">
          Five categories. <span className="grad-text">One studio.</span>
        </h2>
      </Reveal>

      <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {CATEGORIES.map((c, i) => (
          <Reveal key={c.title} delay={i * 80}>
            <TiltCard
              className="group relative h-full rounded-2xl border border-white/8 bg-ink-800/60 p-7
                         backdrop-blur-sm hover:border-electric/40"
            >
              <div className="text-4xl mb-5 transition-transform duration-300 group-hover:scale-110 group-hover:-translate-y-1">
                {c.icon}
              </div>
              <h3 className="font-display text-xl font-semibold mb-2">
                {c.title}
              </h3>
              <p className="text-mist/65 text-[15px] leading-relaxed">
                {c.blurb}
              </p>
              {/* corner accent */}
              <div className="absolute top-5 right-5 h-1.5 w-1.5 rounded-full bg-electric/50
                              group-hover:bg-neon group-hover:shadow-neon transition-all duration-300" />
            </TiltCard>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── Section: Featured Product (Arrow Drift) ──────────────────────────
function FeaturedProduct() {
  return (
    <section id="featured" className="relative z-10 px-6 py-32 max-w-7xl mx-auto">
      <Reveal>
        <p className="font-display tracking-[0.28em] text-[11px] uppercase text-neon mb-5 text-center">
          Featured · Live now
        </p>
      </Reveal>

      <Reveal delay={120}>
        <div className="relative overflow-hidden rounded-3xl border border-electric/25 bg-gradient-to-br from-ink-700 via-ink-800 to-ink-900 p-8 md:p-14 shadow-[0_30px_80px_-20px_rgba(0,191,255,0.35)]">
          {/* glow blob */}
          <div className="absolute -top-32 -right-32 h-96 w-96 rounded-full pointer-events-none"
               style={{ background: 'radial-gradient(circle, rgba(0,191,255,0.35) 0%, transparent 65%)' }} />

          <div className="relative grid md:grid-cols-2 gap-12 items-center">
            {/* Mock game icon — pure CSS/SVG */}
            <div className="flex justify-center md:justify-start">
              <div className="relative">
                <div className="absolute inset-0 rounded-[28%] blur-2xl"
                     style={{ background: 'linear-gradient(135deg, #00BFFF, #39FF14)' }} />
                <div className="relative h-44 w-44 md:h-52 md:w-52 rounded-[28%] flex items-center justify-center"
                     style={{
                       background: 'linear-gradient(135deg, #6F4CF2 0%, #00BFFF 60%, #39FF14 100%)',
                       boxShadow: '0 30px 80px -20px rgba(0,191,255,0.6), inset 0 0 30px rgba(255,255,255,0.15)',
                     }}>
                  <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                       stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </div>
              </div>
            </div>

            <div>
              <h3 className="font-display text-3xl md:text-5xl font-bold leading-tight tracking-tight">
                Arrow <span className="grad-text">Drift</span>
              </h3>
              <p className="mt-5 text-mist/75 text-lg leading-relaxed max-w-md">
                A fast-paced arrow puzzle. Tap. Slide. Don't crash.
                500 hand-tuned levels, daily ranked challenges, and a
                global ELO ladder.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <span className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-ink-900/80 px-4 py-2 text-xs text-mist/80">
                  <span className="h-1.5 w-1.5 rounded-full bg-neon shadow-neon" />
                  Google Play
                </span>
                <span className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-ink-900/80 px-4 py-2 text-xs text-mist/60">
                  <span className="h-1.5 w-1.5 rounded-full bg-mist/40" />
                  App Store · Coming soon
                </span>
              </div>
              <a
                href="#"
                className="group mt-10 inline-flex items-center gap-3 rounded-full
                           bg-gradient-to-r from-electric to-neon px-7 py-3.5
                           font-display font-semibold text-ink-900
                           shadow-glow transition-all duration-300
                           hover:scale-[1.04] hover:shadow-[0_0_42px_rgba(57,255,20,0.55)]"
              >
                Play now
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"
                     className="transition-transform group-hover:translate-x-1">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─── Section: Coming Soon ──────────────────────────────────────────────
const TEASERS = [
  { tag: 'Game',         hint: 'Genre TBD · Mobile',   pulse: 'electric' },
  { tag: 'SaaS',         hint: 'For teams',            pulse: 'neon'     },
  { tag: 'Entertainment', hint: 'A new way to watch', pulse: 'electric' },
  { tag: 'Utility',      hint: 'Quietly useful',       pulse: 'neon'     },
];

function ComingSoon() {
  return (
    <section id="roadmap" className="relative z-10 px-6 py-32 max-w-7xl mx-auto">
      <Reveal>
        <p className="font-display tracking-[0.28em] text-[11px] uppercase text-electric mb-5 text-center">
          Roadmap
        </p>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="font-display text-3xl md:text-5xl font-bold leading-tight tracking-tight text-center max-w-3xl mx-auto">
          Big things are <span className="grad-text">loading…</span>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="mt-5 text-center text-mist/60 max-w-xl mx-auto">
          A pipeline spanning gaming, productivity, entertainment, and SaaS.
          We'll lift the curtain when each is ready to ship.
        </p>
      </Reveal>

      <div className="mt-16 grid grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6">
        {TEASERS.map((t, i) => (
          <Reveal key={t.tag} delay={i * 90}>
            <div className="group relative h-44 md:h-56 rounded-2xl border border-white/8
                            bg-ink-800/50 backdrop-blur-sm overflow-hidden
                            animate-pulseGlow hover:border-electric/50 transition-colors">
              {/* shimmer */}
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                   style={{
                     background: `radial-gradient(ellipse at 50% 50%,
                       ${t.pulse === 'neon' ? 'rgba(57,255,20,0.18)' : 'rgba(0,191,255,0.18)'} 0%,
                       transparent 70%)`,
                   }} />
              <div className="relative h-full flex flex-col items-center justify-center gap-3 p-6">
                <div className={`h-12 w-12 rounded-full flex items-center justify-center text-2xl font-display font-bold
                                 ${t.pulse === 'neon' ? 'bg-neon/15 text-neon' : 'bg-electric/15 text-electric'}`}>
                  ?
                </div>
                <p className="text-xs font-display tracking-[0.22em] uppercase text-mist/60">
                  {t.tag}
                </p>
                <p className="text-[11px] text-mist/40">
                  {t.hint}
                </p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={300}>
        <p className="mt-10 text-center text-mist/40 text-sm italic">
          Stay tuned.
        </p>
      </Reveal>
    </section>
  );
}

// ─── Section: Why Stacktree Labs ───────────────────────────────────────
const WHYS = [
  {
    title: 'Multi-category expertise',
    blurb: 'Games, SaaS, entertainment, tools — we ship across categories without losing focus.',
    svg: (
      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
    ),
  },
  {
    title: 'User-first design',
    blurb: 'Every product starts with a player, an operator, or an end-user — never with a spec sheet.',
    svg: (
      <>
        <circle cx="12" cy="8" r="4" />
        <path d="M4 22a8 8 0 0 1 16 0" />
      </>
    ),
  },
  {
    title: 'Rapid iteration',
    blurb: 'We ship, measure, and improve in tight loops. No sacred-cow features.',
    svg: (
      <>
        <path d="M21 12a9 9 0 1 1-3-6.7" />
        <polyline points="21 4 21 11 14 11" />
      </>
    ),
  },
  {
    title: 'Production-grade',
    blurb: 'Our prototypes scale. Test coverage, observability, security baked in from day one.',
    svg: (
      <>
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      </>
    ),
  },
];

function WhyUs() {
  return (
    <section id="why" className="relative z-10 px-6 py-32 max-w-7xl mx-auto">
      <Reveal>
        <p className="font-display tracking-[0.28em] text-[11px] uppercase text-electric mb-5 text-center">
          Why Stacktree Labs
        </p>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="font-display text-3xl md:text-5xl font-bold leading-tight tracking-tight text-center max-w-3xl mx-auto">
          Built for the <span className="grad-text">long game</span>.
        </h2>
      </Reveal>

      <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
        {WHYS.map((w, i) => (
          <Reveal key={w.title} delay={i * 100}>
            <div className="group flex gap-5 rounded-2xl border border-white/8 bg-ink-800/40 p-7
                            hover:border-electric/40 hover:bg-ink-800/70 transition-all duration-300">
              <div className="flex-shrink-0 h-12 w-12 rounded-xl bg-electric/10 border border-electric/30
                              flex items-center justify-center text-electric
                              group-hover:bg-electric/20 group-hover:shadow-glowSoft transition-all duration-300">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  {w.svg}
                </svg>
              </div>
              <div>
                <h3 className="font-display text-lg font-semibold mb-1">
                  {w.title}
                </h3>
                <p className="text-mist/60 text-[15px] leading-relaxed">
                  {w.blurb}
                </p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── Section: Footer / Contact ─────────────────────────────────────────
function Footer() {
  const social = [
    { label: 'X / Twitter', href: '#', svg: <path d="M18 6 6 18M6 6l12 12" /> },
    { label: 'Instagram', href: '#', svg: <><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" /></> },
    { label: 'LinkedIn', href: '#', svg: <><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /><path d="M22 21v-7a4 4 0 0 0-8 0v7M14 9h0v12" /></> },
    { label: 'GitHub', href: '#', svg: <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" /> },
  ];

  return (
    <footer id="contact" className="relative z-10 mt-20 border-t border-white/8 px-6 py-20">
      <div className="max-w-5xl mx-auto">
        <Reveal>
          <p className="font-display tracking-[0.28em] text-[11px] uppercase text-electric mb-5 text-center">
            Get in touch
          </p>
        </Reveal>
        <Reveal delay={80}>
          <h2 className="font-display text-3xl md:text-5xl font-bold tracking-tight text-center">
            Have a project in mind?
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <a
            href="mailto:musaama0@gmail.com"
            className="block mt-8 text-center font-display text-2xl md:text-4xl grad-text
                       transition-transform hover:scale-[1.02]"
          >
            musaama0@gmail.com
          </a>
        </Reveal>

        <Reveal delay={260}>
          <div className="mt-14 flex justify-center gap-4">
            {social.map((s) => (
              <a
                key={s.label}
                href={s.href}
                aria-label={s.label}
                className="group h-11 w-11 rounded-xl border border-white/10 bg-ink-800/60
                           flex items-center justify-center text-mist/60
                           transition-all duration-300
                           hover:border-electric/60 hover:text-electric hover:shadow-glowSoft hover:-translate-y-1"
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  {s.svg}
                </svg>
              </a>
            ))}
          </div>
        </Reveal>

        <Reveal delay={360}>
          <div className="mt-16 flex flex-col md:flex-row md:justify-between items-center gap-4 text-xs text-mist/40">
            <div className="flex items-center gap-2 font-display tracking-[0.2em] uppercase">
              <span className="h-1.5 w-1.5 rounded-full bg-neon shadow-neon" />
              Stacktree Labs
            </div>
            <span>© 2026 Stacktree Labs. All rights reserved.</span>
          </div>
        </Reveal>
      </div>
    </footer>
  );
}

// ─── App root ──────────────────────────────────────────────────────────
function App() {
  return (
    <main className="relative">
      <ParticleField />
      <div className="relative z-10">
        <Hero />
        <About />
        <WhatWeBuild />
        <FeaturedProduct />
        <ComingSoon />
        <WhyUs />
        <Footer />
      </div>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);