import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { 
  MonitorPlay, 
  MessageSquare, 
  FileText, 
  Search, 
  BarChart, 
  Users,
  Globe
} from "lucide-react";

const Index = () => {
  return (
    <div className="min-h-screen bg-background font-sans text-foreground">
      {/* Navigation */}
      <header className="sticky top-0 z-50 w-full border-b bg-primary text-primary-foreground shadow-sm">
        <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
          <div className="flex items-center gap-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-primary font-bold text-xl">
              P
            </div>
            <div>
              <h1 className="text-lg font-semibold leading-tight">Praveen Karu</h1>
              <p className="text-xs text-primary-foreground/80">Lead Instructional Designer</p>
            </div>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
            <a href="#home" className="hover:text-white/80 transition-colors">Home</a>
            <a href="#about" className="hover:text-white/80 transition-colors">About</a>
            <a href="#portfolio" className="hover:text-white/80 transition-colors">Portfolio</a>
            <a href="#contact" className="hover:text-white/80 transition-colors">Contact</a>
            <div className="flex items-center gap-2 ml-4 border-l border-primary-foreground/30 pl-4">
              <a href="https://praveenkaru.in" target="_blank" rel="noreferrer" className="flex items-center gap-2 hover:text-white/80 transition-colors">
                <div className="h-6 w-6 rounded-full bg-white/20 flex items-center justify-center">
                  <Globe className="h-3 w-3" />
                </div>
                praveenkaru.in
              </a>
            </div>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section 
        id="home" 
        className="relative flex flex-col items-center justify-center py-32 px-4 text-center text-white"
        style={{
          backgroundImage: `url('https://vibe.filesafe.space/1783956710612224057/assets/1c7c3806-5895-436f-8679-e0bb432be827.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div className="absolute inset-0 bg-primary/80 mix-blend-multiply"></div>
        <div className="relative z-10 max-w-3xl mx-auto space-y-6">
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight">PRAVEEN KARU</h2>
          <p className="text-xl md:text-2xl font-light">Lead Instructional Designer</p>
          <Button size="lg" variant="secondary" className="mt-8 rounded-none px-8 font-semibold">
            View Portfolio
          </Button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-primary">
        <div className="container mx-auto px-4 md:px-6">
          <div className="mx-auto flex max-w-4xl flex-col md:flex-row items-center bg-secondary text-secondary-foreground rounded-none shadow-lg overflow-hidden">
            <div className="w-full md:w-1/2 h-64 md:h-auto relative min-h-[300px]">
              <img 
                src="https://vibe.filesafe.space/1783956710612224057/assets/5adc5427-538e-4666-92ac-deeac0aeae7f.png" 
                alt="Praveen Karu" 
                className="absolute inset-0 h-full w-full object-cover"
              />
            </div>
            <div className="w-full md:w-1/2 p-8 md:p-12 space-y-6">
              <h3 className="text-3xl font-bold leading-tight text-primary">
                Hi, I'm Praveen Karu,<br/>An Experienced Instructional Designer
              </h3>
              <p className="text-muted-foreground">
                We design engaging, effective, and scalable eLearning solutions that drive measurable business results for organizations worldwide. I specialize in interactive courses, storyboards, and learner-centered design to enhance knowledge retention. Explore my portfolio to see my work!
              </p>
              <Button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-none">
                Learn More
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-background text-center">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl">
          <h2 className="text-4xl font-bold text-primary mb-6">What Can I Help You Achieve?</h2>
          <p className="text-lg text-muted-foreground max-w-3xl mx-auto mb-16">
            I create engaging eLearning experiences that simplify complex topics, improve learner retention, and align with your training goals. Whether you need interactive courses, detailed storyboards, or instructional strategies, I can help design impactful learning solutions tailored to your needs.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-left">
            {/* Service 1 */}
            <div className="space-y-4">
              <MonitorPlay className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">eLearning Course Design</h4>
              <p className="text-muted-foreground text-sm">
                I specialize in crafting interactive and impactful eLearning courses tailored to your organization's learning objectives.
              </p>
            </div>
            {/* Service 2 */}
            <div className="space-y-4">
              <MessageSquare className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">Storyboard Development</h4>
              <p className="text-muted-foreground text-sm">
                Transform your concepts into visual blueprints with my precise and detailed storyboard development services.
              </p>
            </div>
            {/* Service 3 */}
            <div className="space-y-4">
              <FileText className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">Design Document Creation</h4>
              <p className="text-muted-foreground text-sm">
                I create comprehensive design documents that serve as a roadmap for developing engaging and effective learning materials.
              </p>
            </div>
            {/* Service 4 */}
            <div className="space-y-4">
              <Search className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">Training Needs Analysis</h4>
              <p className="text-muted-foreground text-sm">
                Conducting thorough training needs analysis to identify learning gaps and develop targeted learning solutions.
              </p>
            </div>
            {/* Service 5 */}
            <div className="space-y-4">
              <BarChart className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">Learning Experience Evaluation</h4>
              <p className="text-muted-foreground text-sm">
                Evaluating the effectiveness of learning experiences and refining the design to ensure maximum impact.
              </p>
            </div>
            {/* Service 6 */}
            <div className="space-y-4">
              <Users className="h-8 w-8 text-primary" />
              <h4 className="text-xl font-semibold text-primary">Consultation Services</h4>
              <p className="text-muted-foreground text-sm">
                Providing expert consultation to enhance your organization's learning and development strategies.
              </p>
            </div>
          </div>
          
          <div className="mt-16">
            <Button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-none px-8">
              Explore Projects
            </Button>
          </div>
        </div>
      </section>

      {/* Portfolio Item 1 */}
      <section className="py-20 bg-accent">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="w-full md:w-1/2 space-y-4">
              <h3 className="text-2xl font-bold text-primary">AI Avatar Video</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">
                Developed a dynamic AI avatar video by integrating advanced AI technology with creative design tools. Utilized D-ID for generating realistic AI avatars, Adobe Premiere Pro for professional video editing, and Canva for designing engaging visual elements. This project showcases my ability to blend technical skills with creative design to produce compelling multimedia content.
              </p>
              <p className="text-primary text-sm font-medium">Tools Used: D-ID, Clipchamp, Canva</p>
            </div>
            <div className="w-full md:w-1/2">
              <img src="https://vibe.filesafe.space/1783956710612224057/assets/85b8c9c8-1bd0-4b7d-ba70-713e4aa11b3e.jpg" alt="AI Avatar Video" className="w-full shadow-md" />
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Item 2 */}
      <section className="py-20 bg-secondary">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl">
          <div className="flex flex-col md:flex-row-reverse items-center gap-12">
            <div className="w-full md:w-1/2 space-y-4">
              <h3 className="text-2xl font-bold text-primary">Vyond Whiteboard Animation</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">
                Created an engaging whiteboard animation using Vyond, with a script developed by Microsoft Copilot. The video educates viewers on phishing attacks, covering key tactics, recognition tips, and preventive measures. This project demonstrates my ability to combine technical expertise with creative design to produce informative and visually appealing content.
              </p>
              <p className="text-primary text-sm font-medium">Tools Used: Co-Pilot, Vyond.</p>
            </div>
            <div className="w-full md:w-1/2">
              <img src="https://vibe.filesafe.space/1783956710612224057/assets/1645a48c-57ab-4b4c-a32e-b2db2e8a39af.jpg" alt="Vyond Whiteboard Animation" className="w-full shadow-md" />
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Item 3 */}
      <section className="py-20 bg-accent">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="w-full md:w-1/2 space-y-4">
              <h3 className="text-2xl font-bold text-primary">AI Avatar Video</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">
                Created a narrative-based video combining AI visuals and cinematic editing. I handled the script, scene design, and post-production to deliver an emotionally engaging story. This project showcases my skills in creative storytelling, visual design, and AI-powered content creation.
              </p>
              <p className="text-primary text-sm font-medium">Tools Used: Co-Pilot, Kling AI, Clipchamp.</p>
            </div>
            <div className="w-full md:w-1/2">
              <img src="https://vibe.filesafe.space/1783956710612224057/assets/4f7b6f2b-9298-4742-b3d8-6ed98dadf404.jpg" alt="AI Avatar Video" className="w-full shadow-md" />
            </div>
          </div>
        </div>
      </section>

      {/* Storyline 360 */}
      <section className="py-20 bg-accent">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl text-center">
          <h2 className="text-3xl font-bold text-primary mb-12">Storyline 360 eLearning Samples</h2>
          <div className="flex flex-col md:flex-row items-center gap-12 text-left">
            <div className="w-full md:w-1/2 space-y-4">
              <h3 className="text-2xl font-bold text-primary">Who's Really on the Line? - Self-paced course</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">
                Created an interactive e-learning module in Articulate Storyline 360 to train employees on secure customer verification practices. Used Copilot for content research to ensure regulatory accuracy and relevance. Designed engaging scenario-based visuals with Canva to enhance learner interaction. Integrated branching scenarios and knowledge checks to simulate real-world conversations.
              </p>
              <p className="text-primary text-sm font-medium">Tools Used: Co-Pilot, Canva, Articulate 360</p>
              <Button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-none mt-4">
                Take the course
              </Button>
            </div>
            <div className="w-full md:w-1/2">
              <img src="https://vibe.filesafe.space/1783956710612224057/assets/2adb833c-5f6e-4626-b930-9857bc65c72b.png" alt="Storyline 360 Sample" className="w-full shadow-md" />
            </div>
          </div>
        </div>
      </section>

      {/* Vyond Vernacular */}
      <section className="py-20 bg-secondary">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl text-center">
          <h2 className="text-3xl font-bold text-primary mb-12">Vyond Vernacular Language Videos</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <img src="https://vibe.filesafe.space/1783956710612224057/assets/30d5d622-80a9-4e86-ad39-fd2430b134e3.jpg" alt="Vernacular 1" className="w-full shadow-md" />
            <img src="https://vibe.filesafe.space/1783956710612224057/assets/0a562f8b-5194-46c8-aeae-7c8d5f9d71c4.jpg" alt="Vernacular 2" className="w-full shadow-md" />
            <img src="https://vibe.filesafe.space/1783956710612224057/assets/ef2d5827-9e16-45ac-b78a-cd2d9fb3392e.jpg" alt="Vernacular 3" className="w-full shadow-md" />
          </div>
        </div>
      </section>

      {/* Tools Section */}
      <section className="py-20 bg-background text-center">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl">
          <h2 className="text-3xl font-bold text-primary mb-12">Tools I've Mastered</h2>
          <div className="flex flex-wrap justify-center gap-8">
            {[
              { name: 'Adobe Illustrator', color: 'bg-yellow-500' },
              { name: 'Articulate 360', color: 'bg-pink-500' },
              { name: 'Powtoon', color: 'bg-purple-500' },
              { name: 'Canva', color: 'bg-blue-500' },
              { name: 'PowerPoint', color: 'bg-red-500' },
              { name: 'Vyond', color: 'bg-orange-500' },
              { name: 'Camtasia', color: 'bg-green-500' },
              { name: 'Clipchamp', color: 'bg-indigo-500' },
              { name: 'Rise 360', color: 'bg-orange-600' },
              { name: 'Captivate', color: 'bg-teal-600' }
            ].map((tool, i) => (
              <div key={i} className="flex flex-col items-center gap-2">
                <div className={`w-16 h-16 ${tool.color} rounded-lg flex items-center justify-center text-white font-bold text-xs text-center p-2 shadow-sm`}>
                  {tool.name}
                </div>
                <div className="flex text-yellow-400 text-xs">
                  ★★★★★
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LXD Studio Works */}
      <section id="portfolio" className="py-20 bg-secondary">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl text-center">
          <h2 className="text-3xl font-bold text-primary mb-12">LXD Studio Course Portfolio</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-left">
            {[
              { title: "Essential Soft-skills for Professional Workplace Environment", link: "https://lxdstudio.in/course-1/story.html" },
              { title: "Commodity Managers and Buyers", link: "https://lxdstudio.in/course-2/story.html" },
              { title: "Securing Mobile Applications and Devices in Enterprises", link: "https://lxdstudio.in/course-3/story.html" },
              { title: "Shipping – Top Delivery", link: "https://lxdstudio.in/course-4/story.html" },
              { title: "Template", link: "https://lxdstudio.in/course-5/story.html" }
            ].map((course, i) => (
              <div key={i} className="bg-background p-6 shadow-md border border-border flex flex-col justify-between">
                <h3 className="text-lg font-bold text-primary mb-4">{course.title}</h3>
                <a href={course.link} target="_blank" rel="noreferrer" className="text-blue-600 hover:underline text-sm font-medium">
                  Launch Course &rarr;
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 md:px-6 max-w-5xl text-center">
          <h2 className="text-3xl font-bold mb-12">Get In Touch</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="flex flex-col items-center">
              <Globe className="h-8 w-8 mb-4 opacity-80" />
              <h4 className="font-semibold mb-2">Website</h4>
              <a href="https://praveenkaru.in" target="_blank" rel="noreferrer" className="text-sm opacity-80 hover:underline">praveenkaru.in</a>
            </div>
            <div className="flex flex-col items-center">
              <MessageSquare className="h-8 w-8 mb-4 opacity-80" />
              <h4 className="font-semibold mb-2">Email Address</h4>
              <a href="mailto:karu.praveen143@gmail.com" className="text-sm opacity-80 hover:underline">karu.praveen143@gmail.com</a>
            </div>
            <div className="flex flex-col items-center">
              <MonitorPlay className="h-8 w-8 mb-4 opacity-80" />
              <h4 className="font-semibold mb-2">Phone Number</h4>
              <a href="tel:+917306156856" className="text-sm opacity-80 hover:underline">+91 7306156856</a>
            </div>
            <div className="flex flex-col items-center">
              <Search className="h-8 w-8 mb-4 opacity-80" />
              <h4 className="font-semibold mb-2">Location</h4>
              <p className="text-sm opacity-80">Hyderabad, India</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-primary text-primary-foreground py-6 text-center text-sm border-t border-primary-foreground/20">
        <p>&copy; {new Date().getFullYear()} by Praveen Karu.</p>
      </footer>

      {/* Chat Button */}
      <div className="fixed bottom-6 right-6">
        <Button size="icon" className="h-12 w-12 rounded-full bg-blue-600 hover:bg-blue-700 shadow-lg">
          <MessageSquare className="h-6 w-6 text-white" />
        </Button>
      </div>
    </div>
  );
};

export default Index;