import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { 
  Mail, Sparkles, Rocket, Cpu, Shield, MoveRight, 
  Sun, Moon, Map, Github, Linkedin, Twitter 
} from "lucide-react";

/**
 * Spidroid.com 2.0 – Single-file React page
 * Tech: TailwindCSS, Framer Motion, shadcn/ui, lucide-react
 * 
 * Notes:
 * - Plug into Next.js 14/15 app route or CRA. Default export renders the whole landing.
 * - Uses Tailwind utility classes; ensure Tailwind is enabled globally.
 * - All content is placeholder copy structured for quick CMS swap.
 */

// ---- Small design tokens
const brand = {
  red: "#FF3131",
  blue: "#3A7BFF",
  ink: "#0E0E10",
  paper: "#F5F5F7",
};

function useParallax(yStart = -100, yEnd = 100) {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [yStart, yEnd]);
  return y;
}

const Nav = () => (
  <div className="fixed top-0 left-0 right-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/40 dark:supports-[backdrop-filter]:bg-black/30 border-b border-black/5 dark:border-white/10">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex h-16 items-center justify-between">
      <div className="flex items-center gap-3">
        <div className="h-8 w-8 rounded-xl bg-gradient-to-tr from-red-500 to-blue-500 ring-2 ring-black/10 dark:ring-white/10" />
        <span className="font-black tracking-tight text-xl">Spidroid</span>
        <span className="ml-2 text-xs uppercase tracking-[0.2em] text-black/50 dark:text-white/50">Technologies</span>
      </div>
      <div className="hidden md:flex items-center gap-8">
        {[
          { label: "Solutions", href: "#solutions" },
          { label: "Roadmap", href: "#roadmap" },
          { label: "Team", href: "#team" },
          { label: "Careers", href: "#careers" },
          { label: "Contact", href: "#contact" },
        ].map((i) => (
          <a key={i.label} href={i.href} className="text-sm text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white transition-colors">
            {i.label}
          </a>
        ))}
      </div>
      <div className="flex items-center gap-2">
        <ThemeToggle />
        <Button className="ml-1 rounded-2xl shadow-sm" asChild>
          <a href="#contact" className="flex items-center gap-2"><Sparkles className="h-4 w-4"/> Engage</a>
        </Button>
      </div>
    </div>
  </div>
);

const ThemeToggle = () => {
  const [dark, setDark] = React.useState(true);
  
  React.useEffect(() => {
    const root = document.documentElement;
    if (dark) root.classList.add("dark");
    else root.classList.remove("dark");
  }, [dark]);
  
  return (
    <Button variant="ghost" size="icon" className="rounded-xl" onClick={() => setDark((d) => !d)} aria-label="Toggle theme">
      {dark ? <Sun className="h-5 w-5"/> : <Moon className="h-5 w-5"/>}
    </Button>
  );
};

const Hero = () => {
  const y1 = useParallax(-40, 40);
  const y2 = useParallax(20, -20);
  
  return (
    <section className="relative isolate overflow-hidden bg-gradient-to-b from-white to-white dark:from-black dark:to-zinc-950 pt-28 md:pt-36 pb-20">
      {/* Glow orbs */}
      <motion.div style={{ y: y1 }} className="pointer-events-none absolute -top-32 -left-32 h-96 w-96 rounded-full blur-3xl bg-[radial-gradient(circle_at_center,rgba(255,49,49,0.35),transparent_60%)]"/>
      <motion.div style={{ y: y2 }} className="pointer-events-none absolute -bottom-40 -right-20 h-[30rem] w-[30rem] rounded-full blur-3xl bg-[radial-gradient(circle_at_center,rgba(58,123,255,0.35),transparent_60%)]"/>

      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid items-center gap-8 md:grid-cols-2">
          <div className="space-y-6">
            <div className="inline-flex items-center gap-2 rounded-full border border-black/10 dark:border-white/10 px-3 py-1 text-xs text-black/60 dark:text-white/60">
              <Shield className="h-3.5 w-3.5"/> Enterprise‑grade by design
            </div>
            <h1 className="text-4xl sm:text-6xl font-black tracking-tight leading-[1.05]">
              Building the <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-red-400 to-blue-500">Operating System</span> of the Future
            </h1>
            <p className="text-lg text-black/70 dark:text-white/70 max-w-xl">
              We ship frontier experiences across mobile, web and AI. From Horizon to Starry, our stack operationalizes ambition into outcomes.
            </p>
            <div className="flex flex-wrap gap-3">
              <Button className="rounded-2xl" asChild>
                <a href="#solutions" className="flex items-center gap-2"><Rocket className="h-4 w-4"/> Explore Innovations</a>
              </Button>
              <Button variant="outline" className="rounded-2xl" asChild>
                <a href="#roadmap" className="flex items-center gap-2"><Map className="h-4 w-4"/> View Roadmap</a>
              </Button>
            </div>
          </div>

          {/* Futuristic visual panel */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative rounded-[2rem] border border-black/10 dark:border-white/10 bg-gradient-to-b from-zinc-100 to-zinc-50 dark:from-zinc-900 dark:to-black p-3"
          >
            <div className="relative aspect-[4/3] overflow-hidden rounded-[1.6rem]">
              {/* Placeholder synthetic graphic */}
              <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555255707-c07966088b7b?q=80&w=1600&auto=format&fit=crop')] bg-cover bg-center opacity-70"/>
              <div className="absolute inset-0 backdrop-blur-[2px]"/>
              <div className="absolute inset-0 bg-gradient-to-tr from-red-500/30 via-transparent to-blue-500/30"/>
              <div className="absolute bottom-4 left-4 right-4 flex items-center justify-between rounded-xl bg-white/70 dark:bg-zinc-900/70 px-4 py-3">
                <div className="flex items-center gap-2 text-sm"><Cpu className="h-4 w-4"/> RED‑X Visor Engine</div>
                <Button size="sm" className="rounded-xl">Preview</Button>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

const SectionHeader = ({ eyebrow, title, copy }: { eyebrow: string; title: string; copy?: string }) => (
  <div className="mb-10 flex flex-col items-start gap-3">
    <span className="rounded-full border border-black/10 dark:border-white/10 px-3 py-1 text-xs tracking-wide text-black/60 dark:text-white/60">{eyebrow}</span>
    <h2 className="text-3xl sm:text-5xl font-black tracking-tight">{title}</h2>
    {copy && <p className="max-w-2xl text-black/70 dark:text-white/70">{copy}</p>}
  </div>
);

const Solutions = () => (
  <section id="solutions" className="relative py-20 bg-white dark:bg-zinc-950">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <SectionHeader
        eyebrow="Product Universe"
        title="From bold concepts to shipping systems"
        copy="A modular portfolio engineered for scale and velocity."
      />
      
      <div className="grid gap-6 md:grid-cols-3">
        {[
          {
            name: "Horizon",
            tagline: "Next‑gen social OS for creators",
            bullets: ["Modular posts", "Realtime feed", "AI assist"],
          },
          {
            name: "Starry",
            tagline: "Authentic connections. Signal over noise.",
            bullets: ["Smart discovery", "Privacy‑first", "Creator tools"],
          },
          {
            name: "Admin Dashboard",
            tagline: "Cross‑platform command center",
            bullets: ["Analytics", "Moderation", "Growth ops"],
          },
        ].map((p) => (
          <motion.div key={p.name} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
            <Card className="group rounded-3xl border-black/10 dark:border-white/10 bg-gradient-to-br from-white to-zinc-50 dark:from-zinc-900 dark:to-black overflow-hidden">
              <CardHeader className="pb-0">
                <CardTitle className="flex items-center justify-between text-2xl">
                  <span>{p.name}</span>
                  <span className="text-xs font-medium text-black/50 dark:text-white/50">Alpha</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="pt-4">
                <div className="h-36 rounded-2xl bg-[linear-gradient(120deg,rgba(255,49,49,0.18),rgba(58,123,255,0.18))] ring-1 ring-black/5 dark:ring-white/5 relative overflow-hidden">
                  <motion.div
                    className="absolute -inset-8 rounded-full bg-[conic-gradient(at_50%_50%,rgba(255,49,49,0.35),rgba(58,123,255,0.35),transparent_60%)] blur-2xl"
                    animate={{ rotate: 360 }}
                    transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
                  />
                </div>
                <p className="mt-4 text-sm text-black/70 dark:text-white/70">{p.tagline}</p>
                <ul className="mt-3 flex flex-wrap gap-2">
                  {p.bullets.map((b) => (
                    <li key={b} className="text-xs rounded-full px-2.5 py-1 border border-black/10 dark:border-white/10">{b}</li>
                  ))}
                </ul>
                <div className="mt-5 flex items-center justify-between">
                  <Button size="sm" className="rounded-xl">Learn more</Button>
                  <a href="#contact" className="text-sm inline-flex items-center gap-1 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white">Talk to us <MoveRight className="h-4 w-4"/></a>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

const Roadmap = () => (
  <section id="roadmap" className="relative py-24 bg-gradient-to-b from-white to-zinc-100 dark:from-zinc-950 dark:to-black">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <SectionHeader eyebrow="Roadmap" title="Operationalizing the vision" copy="Milestones that compound. Velocity that compounds faster." />
      <div className="relative">
        <div className="absolute left-4 sm:left-1/2 sm:-translate-x-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-red-500/50 via-white/20 to-blue-500/50 dark:via-zinc-800" />
        <div className="space-y-10">
          {[
            { q: "Q4 • 2025", t: "Horizon AI Co‑pilot", d: "On‑device inference for creation, moderation and safety." },
            { q: "Q1 • 2026", t: "Admin Command Center", d: "Unified analytics & growth operations across platforms." },
            { q: "Q3 • 2026", t: "Starry Global Launch", d: "Phased go‑to‑market across Africa, EU and U.S." },
            { q: "2027", t: "SpidroidOS Public Preview", d: "Convergent interface: mobile + ambient + web." },
          ].map((m, idx) => (
            <motion.div key={m.t} initial={{ opacity: 0, x: idx % 2 ? 40 : -40 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }} className={`relative sm:grid sm:grid-cols-2 sm:gap-10 ${idx % 2 ? "sm:pl-16" : "sm:pr-16"}`}>
              <div className={`p-6 rounded-2xl border border-black/10 dark:border-white/10 bg-white/70 dark:bg-zinc-900/60 backdrop-blur`}>
                <div className="text-xs uppercase tracking-widest text-black/60 dark:text-white/60">{m.q}</div>
                <div className="mt-1 font-bold text-xl">{m.t}</div>
                <p className="mt-2 text-sm text-black/70 dark:text-white/70">{m.d}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const TeamCareers = () => (
  <section id="team" className="py-24 bg-white dark:bg-zinc-950">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <SectionHeader eyebrow="People" title="A small team shipping outsized impact" />
      <div className="grid gap-6 md:grid-cols-3">
        {[1,2,3].map((i) => (
          <Card key={i} className="rounded-3xl overflow-hidden border-black/10 dark:border-white/10">
            <CardContent className="p-0">
              <div className="h-48 bg-[url('https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1400&auto=format&fit=crop')] bg-cover bg-center"/>
              <div className="p-5">
                <div className="font-semibold">Vision Lead #{i}</div>
                <div className="text-sm text-black/60 dark:text-white/60">Product & Systems</div>
                <div className="mt-3 flex gap-3 text-black/60 dark:text-white/60">
                  <a href="#" aria-label="Twitter"><Twitter className="h-4 w-4"/></a>
                  <a href="#" aria-label="LinkedIn"><Linkedin className="h-4 w-4"/></a>
                  <a href="#" aria-label="GitHub"><Github className="h-4 w-4"/></a>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      
      <div id="careers" className="mt-16">
        <SectionHeader eyebrow="Careers" title="Join the builders" copy="Own charter‑level problems. Ship generational products." />
        <div className="grid gap-6 md:grid-cols-2">
          {[
            { role: "Senior Android Engineer (Java)", tag: "Horizon" },
            { role: "Full‑Stack Engineer (Next.js)", tag: "Admin" },
            { role: "3D/Visual Designer", tag: "Brand" },
            { role: "Product Manager", tag: "Growth" },
          ].map((r) => (
            <Card key={r.role} className="rounded-2xl border-black/10 dark:border-white/10">
              <CardContent className="p-5 flex items-center justify-between">
                <div>
                  <div className="font-semibold">{r.role}</div>
                  <div className="text-xs text-black/60 dark:text-white/60">Track: {r.tag}</div>
                </div>
                <Button variant="outline" className="rounded-xl" asChild>
                  <a href="#contact">Apply</a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Contact = () => (
  <section id="contact" className="relative py-24 bg-gradient-to-b from-white to-zinc-100 dark:from-zinc-950 dark:to-black">
    <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
      <SectionHeader eyebrow="Let's collaborate" title="Spin up a build with us" copy="Zero‑friction engagement. High‑velocity outcomes." />
      <Card className="rounded-3xl border-black/10 dark:border-white/10 overflow-hidden">
        <CardContent className="p-6 md:p-10 grid gap-6 md:grid-cols-3">
          <div className="md:col-span-2 space-y-4">
            <div className="grid gap-3 md:grid-cols-2">
              <Input placeholder="Your name" className="rounded-xl"/>
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-black/50 dark:text-white/50"/>
                <Input placeholder="Email" type="email" className="rounded-xl"/>
              </div>
            </div>
            <Input placeholder="Company / Project" className="rounded-xl"/>
            <Input placeholder="What are you building?" className="rounded-xl"/>
            <div className="flex gap-3">
              <Button className="rounded-2xl">Book Intro</Button>
              <Button variant="outline" className="rounded-2xl">Download Deck</Button>
            </div>
          </div>
          <div className="rounded-2xl border border-black/10 dark:border-white/10 p-5 bg-white/60 dark:bg-zinc-900/50 backdrop-blur">
            <div className="font-semibold">Why Spidroid</div>
            <ul className="mt-3 space-y-2 text-sm text-black/70 dark:text-white/70">
              <li>• Full‑stack velocity: mobile, web, AI</li>
              <li>• Enterprise security posture</li>
              <li>• Global‑ready infra & analytics</li>
              <li>• Founder‑led engagement</li>
            </ul>
          </div>
        </CardContent>
      </Card>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-white dark:bg-zinc-950 border-t border-black/10 dark:border-white/10">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
        <div>
          <div className="font-black text-lg tracking-tight">Spidroid Technologies</div>
          <p className="text-sm text-black/60 dark:text-white/60">© {new Date().getFullYear()} Spidroid Technologies Ltd. All rights reserved.</p>
        </div>
        <div className="flex items-center gap-4 text-black/60 dark:text-white/60">
          <a href="#" className="hover:text-black dark:hover:text-white" aria-label="Twitter"><Twitter className="h-5 w-5"/></a>
          <a href="#" className="hover:text-black dark:hover:text-white" aria-label="LinkedIn"><Linkedin className="h-5 w-5"/></a>
          <a href="#" className="hover:text-black dark:hover:text-white" aria-label="GitHub"><Github className="h-5 w-5"/></a>
        </div>
      </div>
    </div>
  </footer>
);

export default function SpidroidHomepage() {
  return (
    <main className="min-h-screen text-zinc-900 dark:text-zinc-50 selection:bg-red-500/20 selection:text-red-600 dark:selection:text-red-300">
      <Nav />
      <Hero />
      <Solutions />
      <Roadmap />
      <TeamCareers />
      <Contact />
      <Footer />
    </main>
  );
}