"use client";

import { motion } from "framer-motion";
import { Brain, Code2, Mic, Zap, ArrowRight, Sparkles } from "lucide-react";
import { LogoIcon } from "@/components/shared/logo";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { Button } from "@/components/ui/button";

const pipelineSteps = [
  {
    icon: Mic,
    title: "Audio Extraction",
    desc: "yt-dlp fetches the video and ffmpeg extracts the audio track at optimal quality.",
    color: "text-red-400",
    bg: "bg-red-500/10",
    border: "border-red-500/20",
  },
  {
    icon: Brain,
    title: "Transcription",
    desc: "OpenAI Whisper (large-v3) or AssemblyAI transcribes with word-level timestamps.",
    color: "text-violet-400",
    bg: "bg-violet-500/10",
    border: "border-violet-500/20",
  },
  {
    icon: Zap,
    title: "AI Analysis",
    desc: "Our LLM pipeline scores each segment for virality signals: hooks, quotability, story arc.",
    color: "text-yellow-400",
    bg: "bg-yellow-500/10",
    border: "border-yellow-500/20",
  },
  {
    icon: Code2,
    title: "Structured Output",
    desc: "Returns JSON: {start_time, end_time, transcript, virality_score, reason} per clip.",
    color: "text-cyan-400",
    bg: "bg-cyan-500/10",
    border: "border-cyan-500/20",
  },
];

const team = [
  {
    name: "Rajan Gupta",
    role: "Founder & CEO",
    bio: "Former ML engineer. Built content tools used by 500K+ creators.",
    initials: "RG",
  },
  {
    name: "Meera Krishnan",
    role: "Head of AI",
    bio: "PhD in NLP. Previously at DeepMind. Obsessed with language models.",
    initials: "MK",
  },
  {
    name: "Aryan Bose",
    role: "Lead Engineer",
    bio: "Full-stack + Python. Built the processing pipeline from the ground up.",
    initials: "AB",
  },
  {
    name: "Tanya Mishra",
    role: "Growth",
    bio: "Content creator turned growth hacker. 200K subs before joining ReelsCutter.",
    initials: "TM",
  },
];

export default function AboutPage() {
  return (
    <div className="min-h-screen pt-24 pb-16 px-4">
      <div className="fixed inset-0 bg-radial-violet pointer-events-none" />
      <div className="fixed inset-0 bg-grid pointer-events-none opacity-40" />

      <div className="container mx-auto max-w-5xl relative">
        {/* Hero */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-20"
        >
          <Badge className="bg-violet-500/15 text-violet-300 border-violet-500/30 mb-4">
            <Sparkles className="w-3.5 h-3.5 mr-1.5" />
            About ReelsCutter
          </Badge>
          <h1 className="text-4xl md:text-5xl font-black mb-6">
            We Help Creators <span className="gradient-text">Work Smarter</span>
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            ReelsCutter was born from a simple frustration: great long-form content deserves to be
            discovered. We built AI that finds those moments so creators spend less time scrubbing
            timelines and more time creating.
          </p>
        </motion.div>

        {/* Mission */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="glass-card p-10 mb-16 text-center gradient-border"
        >
          <LogoIcon size={40} className="mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-white mb-4">Our Mission</h2>
          <p className="text-zinc-300 text-lg leading-relaxed max-w-2xl mx-auto">
            Every long-form video has 3–7 moments that could go viral. Our mission is to surface those
            moments instantly using AI — so every creator, regardless of editing skill or resources,
            can compete at the highest level of short-form content.
          </p>
        </motion.div>

        {/* Pipeline Diagram */}
        <div className="mb-20">
          <h2 className="text-2xl font-bold text-center mb-3">
            How the <span className="gradient-text">AI Pipeline</span> Works
          </h2>
          <p className="text-zinc-400 text-center text-sm mb-10 max-w-xl mx-auto">
            Our Python backend processes your video through a 4-stage pipeline, all running on GPU-accelerated infrastructure.
          </p>

          <div className="relative">
            {/* Connector */}
            <div className="hidden md:block absolute top-1/2 left-8 right-8 h-px bg-gradient-to-r from-red-500/30 via-violet-500/30 to-cyan-500/30 -translate-y-1/2" />

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {pipelineSteps.map((step, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.4, delay: i * 0.1 }}
                  className="relative"
                >
                  <div className={`glass-card p-5 text-center border ${step.border}`}>
                    <div className={`w-12 h-12 rounded-xl ${step.bg} border ${step.border} flex items-center justify-center mx-auto mb-3`}>
                      <step.icon className={`w-6 h-6 ${step.color}`} />
                    </div>
                    <div className="text-xs text-zinc-600 font-mono mb-1">Step {i + 1}</div>
                    <h3 className="text-sm font-semibold text-white mb-1">{step.title}</h3>
                    <p className="text-xs text-zinc-500 leading-relaxed">{step.desc}</p>
                  </div>
                  {i < pipelineSteps.length - 1 && (
                    <ArrowRight className="hidden md:block absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-4 h-4 text-zinc-600 z-10" />
                  )}
                </motion.div>
              ))}
            </div>
          </div>

          {/* API response shape */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="mt-8 glass-card p-6 font-mono text-sm border border-cyan-500/20"
          >
            <p className="text-zinc-500 mb-3 text-xs">&#47;&#47; API Response Shape</p>
            <pre className="text-cyan-300 overflow-x-auto leading-relaxed">
{`{
  "clips": [
    {
      "start_time": 124,      // seconds
      "end_time": 189,
      "transcript": "The biggest mistake most founders make...",
      "virality_score": 94,  // 0-100
      "reason": "High emotional hook with personal failure story"
    }
  ]
}`}
            </pre>
          </motion.div>
        </div>

        {/* Team */}
        <div className="mb-16">
          <h2 className="text-2xl font-bold text-center mb-10">
            Meet the <span className="gradient-text">Team</span>
          </h2>
          <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-5">
            {team.map((member, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.08 }}
                className="glass-card-hover p-6 text-center"
              >
                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-600 to-cyan-500 flex items-center justify-center text-lg font-bold text-white mx-auto mb-4 shadow-lg shadow-violet-900/30">
                  {member.initials}
                </div>
                <h3 className="text-sm font-semibold text-white mb-0.5">{member.name}</h3>
                <p className="text-xs text-violet-400 mb-3">{member.role}</p>
                <p className="text-xs text-zinc-500 leading-relaxed">{member.bio}</p>
              </motion.div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center glass-card p-10"
        >
          <h2 className="text-2xl font-bold mb-4">
            Want to <span className="gradient-text">Join Us?</span>
          </h2>
          <p className="text-zinc-400 mb-6 max-w-sm mx-auto">
            We&apos;re a small, remote-first team solving real problems for creators. Always hiring great people.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/contact">
              <Button className="bg-gradient-to-r from-violet-600 to-violet-500 text-white border-0">
                Get in Touch
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Link>
          </div>
        </motion.div>
      </div>
    </div>
  );
}