import React, { useEffect, useRef } from "react";

// React + Tailwind landing site for Duonix Studios with old‑school forum flair.

const socials = [
  { name: "Steam", href: "https://store.steampowered.com/app/2484900/10_Dead_Doves/" },
  { name: "Twitter/X", href: "https://twitter.com/duonixstudios" },
  { name: "YouTube", href: "https://www.youtube.com/@duonixstudios" },
  { name: "TikTok", href: "https://www.tiktok.com/@duonixstudios" },
  { name: "Press Kit", href: "https://picturesque-bus-555.notion.site/Duonix-Studios-Press-Kit-8b2b0d1c6c214d41a1d83b84a7e3aacb" },
];

const projects = [
  {
    title: "10 Dead Doves",
    tagline: "A 2000s‑tinged, fixed‑perspective narrative horror set in Appalachia.",
    cta: { label: "Visit Site", href: "https://10deaddoves.com" },
    badges: ["Narrative Horror", "Single‑Player", "Appalachia"]
  },
  {
    title: "Europa (codename)",
    tagline: "Sci‑fi survival‑exploration with dark zones, scanning, and 4D predators.",
    cta: { label: "Follow Devlog", href: "#devlog" },
    badges: ["In Development", "Survival", "Sci‑fi"]
  }
];

const posts = [
  {
    title: "Europa: First Look at Dark Zones",
    date: "Sep 28, 2025",
    excerpt: "We prototyped volumetric pockets where light collapses. New scanner visuals, AI stalking behavior, and a nasty edge case fixed in UE 5.6.",
    href: "#",
    author: "Mark",
    replies: 14,
    views: 1294,
    lastReply: { by: "Sean", time: "Sep 29, 2025 11:02" }
  },
  {
    title: "10DD: Patch 1.1 Notes",
    date: "Sep 10, 2025",
    excerpt: "Controller feel tweaks, checkpoint clarity, and a secret in the tall grass.",
    href: "#",
    author: "Mark",
    replies: 8,
    views: 842,
    lastReply: { by: "Community", time: "Sep 18, 2025 21:44" }
  },
  {
    title: "Studio Update: Growing Carefully",
    date: "Aug 22, 2025",
    excerpt: "What we’re hiring for, how we think about community, and why we like mailing lists over algorithms.",
    href: "#",
    author: "Duonix",
    replies: 23,
    views: 2310,
    lastReply: { by: "Mark", time: "Sep 2, 2025 09:15" }
  },
];

function useParallax(strength = 20) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const offset = (window.innerHeight - rect.top) * 0.002 * strength;
      el.style.transform = `translate3d(0, ${offset.toFixed(2)}rem, 0)`;
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [strength]);
  return ref;
}

function Section({ id, eyebrow, title, children, className = "" }) {
  return (
    <section id={id} className={`mx-auto max-w-6xl px-6 py-24 ${className}`}>
      <p className="mb-3 text-sm uppercase tracking-[.25em] text-white/60">{eyebrow}</p>
      <h2 className="text-3xl font-semibold leading-tight text-white md:text-5xl">{title}</h2>
      <div className="mt-8 text-white/85">{children}</div>
    </section>
  );
}

function Nav() {
  return (
    <header className="fixed inset-x-0 top-0 z-50 bg-[linear-gradient(to_bottom,rgba(5,8,12,.9),rgba(5,8,12,.55),transparent)] backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-3 font-mono text-sm">
        <a href="#home" className="group inline-flex items-center gap-2">
          <div className="h-5 w-5 rounded bg-gradient-to-br from-emerald-400 to-emerald-700 ring-2 ring-white/10" />
          <span className="text-white/90 group-hover:text-white">DUONIX BBS</span>
        </a>
        <nav className="hidden items-center gap-4 text-white/80 md:flex">
          <a className="hover:text-white" href="#projects">[Projects]</a>
          <a className="hover:text-white" href="#devlog">[Forum]</a>
          <a className="hover:text-white" href="#about">[About]</a>
          <a className="hover:text-white" href="#contact">[Contact]</a>
        </nav>
        <a href="#newsletter" className="rounded-sm border border-emerald-400/40 bg-emerald-500/90 px-2 py-1 text-xs font-bold uppercase tracking-wide text-white shadow-[inset_0_-2px_0_rgba(0,0,0,.2)] hover:bg-emerald-400">Join</a>
      </div>
    </header>
  );
}

function Hero() {
  const bgRef = useParallax(10); // slower parallax for background layer
  const statusRef = useParallax(18); // slightly faster for status chip
  return (
    <section id="home" className="relative isolate min-h-[92vh] overflow-hidden bg-[#0B0F14] font-mono">
      {/* Background image with parallax */}
      <div ref={bgRef} className="absolute inset-0 -z-10 overflow-hidden will-change-transform">
        <img
          src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=2400&auto=format&fit=crop"
          alt="Appalachian ridgeline at dusk"
          className="h-full w-full object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-[#0B0F14] via-transparent to-[#0B0F14]/40" />
      </div>

      {/* Foreground content */}
      <div className="mx-auto max-w-6xl px-6 pt-40 pb-28">
        <div className="mb-2 inline-flex items-center gap-2 rounded-sm border border-white/20 bg-black/30 px-2 py-0.5 text-xs text-white/70">
          <span className="bg-white/10 px-1">BBS</span> Duonix Forum v0.9
        </div>
        <h1 className="max-w-2xl text-4xl font-bold text-white md:text-6xl">Strange worlds. Strong characters. Stories that stay.</h1>
        <p className="mt-4 max-w-xl text-sm text-white/85">
          Indie co‑op crafting single-player experiences with heart, teeth, and mystery. Based in Nashville.
        </p>
        <div className="mt-6 flex gap-3 text-sm">
          <a href="https://10deaddoves.com" className="rounded-sm border border-white/30 bg-white px-4 py-2 font-bold text-[#0B0F14] shadow-inner hover:-translate-y-0.5">Play 10DD →</a>
          <a href="#projects" className="rounded-sm border border-white/20 px-4 py-2 font-bold text-white/90 hover:bg-white/5">Projects</a>
        </div>
        <div ref={statusRef} className="mt-4 text-xs text-white/60 will-change-transform">★ Now updating the Europa prototype</div>
      </div>
    </section>
  );
}

function Projects() {
  return (
    <Section id="projects" eyebrow="Projects" title="What we’re building">
      <ul className="divide-y divide-dashed divide-white/20 border border-white/20 bg-black/20 font-mono text-sm">
        {projects.map((p) => (
          <li key={p.title} className="p-4 hover:bg-white/5">
            <span className="font-bold text-emerald-300">[{p.badges[0]}]</span> <a href={p.cta.href} className="font-semibold text-white hover:underline">{p.title}</a>
            <p className="mt-1 text-white/70">{p.tagline}</p>
          </li>
        ))}
      </ul>
    </Section>
  );
}

function Devlog() {
  return (
    <Section id="devlog" eyebrow="Forum" title="Latest threads">
      <div className="grid grid-cols-12 bg-black/30 px-3 py-2 text-xs font-bold uppercase text-white/70">
        <div className="col-span-7">Thread</div>
        <div className="col-span-1 text-right">Replies</div>
        <div className="col-span-1 text-right">Views</div>
        <div className="col-span-3 text-right">Last Post</div>
      </div>
      <ul className="divide-y divide-dashed divide-white/20 font-mono text-sm">
        {posts.map((t,i) => (
          <li key={t.title} className="grid grid-cols-12 items-center px-3 py-2 hover:bg-white/5">
            <div className="col-span-7">
              {i===0 && <span className="mr-1 rounded-sm border border-emerald-400/50 bg-emerald-500/20 px-1 text-emerald-300">[STICKY]</span>}
              <a href={t.href} className="font-semibold text-white hover:underline">{t.title}</a>
              <div className="text-xs text-white/60">By {t.author} • {t.date} — {t.excerpt}</div>
            </div>
            <div className="col-span-1 text-right">{t.replies}</div>
            <div className="col-span-1 text-right">{t.views}</div>
            <div className="col-span-3 text-right text-xs text-white/60">{t.lastReply.time} by {t.lastReply.by}</div>
          </li>
        ))}
      </ul>
    </Section>
  );
}

function About() {
  return (
    <Section id="about" eyebrow="About" title="Who we are">
      <p className="font-mono text-sm text-white/80">Duonix is a tiny studio with big narrative instincts. We grew up on strange TV, weird fiction, and PS2 horror — but we build with modern craft.</p>
    </Section>
  );
}

function Newsletter() {
  return (
    <Section id="newsletter" eyebrow="Newsletter" title="Join the campfire list">
      <form className="space-y-3 font-mono text-sm">
        <input type="email" placeholder="you@trailmail.com" className="w-full rounded-sm border border-white/20 bg-black/40 px-3 py-2 text-white placeholder:text-white/40" />
        <button className="rounded-sm border border-emerald-400/40 bg-emerald-500/90 px-4 py-2 font-bold text-white hover:bg-emerald-400">Subscribe</button>
      </form>
    </Section>
  );
}

function Contact() {
  return (
    <Section id="contact" eyebrow="Contact" title="Talk to us">
      <ul className="space-y-2 font-mono text-sm">
        <li><a href="mailto:hello@duonixstudios.com" className="hover:underline">Email: hello@duonixstudios.com</a></li>
        <li><a href="https://discord.gg/" className="hover:underline">Discord: Join our community</a></li>
      </ul>
    </Section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-white/20 bg-black/30 px-6 py-4 font-mono text-xs text-white/60">
      <div className="mx-auto max-w-6xl">© {new Date().getFullYear()} Duonix Studios — Powered by coffee & weird dreams.</div>
    </footer>
  );
}

export default function DuonixStudiosSite() {
  return (
    <main className="min-h-screen bg-[#0B0F14] text-white antialiased">
      <Nav />
      <Hero />
      <Projects />
      <Devlog />
      <About />
      <Newsletter />
      <Contact />
      <Footer />
    </main>
  );
}