"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Users, 
  Globe, 
  Award, 
  BookOpen, 
  MapPin, 
  Camera, 
  Heart, 
  Star,
  CheckCircle,
  ArrowRight
} from "lucide-react";

export default function TravelCoauthorLanding() {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    city: "",
    experience: "",
    platforms: "",
    motivation: "",
    agreement: false
  });

  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target;
    const checked = (e.target as HTMLInputElement).checked;
    
    setFormData({
      ...formData,
      [name]: type === "checkbox" ? checked : value
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real app, you would send this data to your backend
    console.log("Form submitted:", formData);
    setIsSubmitted(true);
  };

  if (isSubmitted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 flex items-center justify-center p-4 font-['Poppins']">
        <Card className="w-full max-w-2xl shadow-2xl border-2 border-orange-200">
          <CardContent className="p-8 text-center">
            <div className="flex justify-center mb-6">
              <CheckCircle className="h-20 w-20 text-orange-500" />
            </div>
            <h2 className="text-4xl font-bold mb-4 text-orange-900">Application Received!</h2>
            <p className="text-xl text-muted-foreground mb-8">
              Thank you for your interest in becoming a co-author. We'll review your application and get back to you soon.
            </p>
            <Button 
              onClick={() => setIsSubmitted(false)}
              className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white py-3 px-8 text-lg font-semibold shadow-lg"
            >
              Submit Another Application
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 font-['Poppins']">
      {/* Header */}
      <header className="relative py-20 px-4 text-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-orange-400/20 to-amber-400/20"></div>
        <div className="max-w-6xl mx-auto relative z-10">
          <div className="flex justify-center mb-8">
            <div className="bg-gradient-to-r from-orange-500 to-amber-500 w-24 h-24 rounded-full flex items-center justify-center">
              <BookOpen className="h-12 w-12 text-white" />
            </div>
          </div>
          <h1 className="text-4xl md:text-7xl font-extrabold text-orange-900 mb-6 leading-tight">
            Become a Co-Author of Our Travel & Lifestyle Guide Series
          </h1>
          <p className="text-xl md:text-3xl text-orange-700 max-w-4xl mx-auto font-medium mb-10">
            We're inviting passionate locals to share their insider knowledge and unique perspectives with our global community of travelers.
          </p>
          <Button 
            onClick={() => document.getElementById("apply-section")?.scrollIntoView({ behavior: 'smooth' })}
            className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white py-4 px-10 text-xl font-bold shadow-xl transform hover:scale-105 transition-all duration-300"
          >
            Apply Now <ArrowRight className="ml-2 h-6 w-6" />
          </Button>
        </div>
      </header>

      {/* Hero Image Section */}
      <section className="py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="bg-gradient-to-r from-orange-400 to-amber-500 rounded-3xl shadow-2xl overflow-hidden">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-8 items-center">
              <div className="text-white">
                <h2 className="text-3xl md:text-5xl font-bold mb-6">Share Your City's Story</h2>
                <p className="text-xl mb-8 opacity-90">
                  Join thousands of locals who are changing how the world experiences their hometowns through authentic storytelling.
                </p>
                <div className="flex flex-wrap gap-4">
                  <div className="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                    <Users className="h-5 w-5 mr-2" />
                    <span>10,000+ Co-authors</span>
                  </div>
                  <div className="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                    <Globe className="h-5 w-5 mr-2" />
                    <span>150+ Countries</span>
                  </div>
                  <div className="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                    <BookOpen className="h-5 w-5 mr-2" />
                    <span>5000+ Stories</span>
                  </div>
                </div>
              </div>
              <div className="flex justify-center">
                <div className="relative">
                  <div className="w-64 h-64 md:w-80 md:h-80 bg-orange-200 border-4 border-white rounded-2xl shadow-2xl transform rotate-6"></div>
                  <div className="absolute top-4 -right-4 w-64 h-64 md:w-80 md:h-80 bg-amber-200 border-4 border-white rounded-2xl shadow-2xl transform -rotate-6"></div>
                  <div className="absolute top-8 right-2 w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-orange-300 to-amber-300 border-4 border-white rounded-2xl shadow-2xl"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <main className="pb-20 px-4">
        {/* Why Join Section */}
        <section className="max-w-7xl mx-auto mb-24">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-orange-900 mb-6">Why Join Our Community?</h2>
            <p className="text-xl text-orange-700 max-w-3xl mx-auto">
              Be part of a movement that celebrates authentic travel experiences and local perspectives
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <div className="flex justify-center mb-4">
                  <div className="bg-gradient-to-r from-orange-500 to-amber-500 w-16 h-16 rounded-full flex items-center justify-center">
                    <Globe className="h-8 w-8 text-white" />
                  </div>
                </div>
                <CardTitle className="text-center text-2xl text-orange-800">Global Platform</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground text-lg">
                  Share your local expertise with our international audience of curious travelers
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <div className="flex justify-center mb-4">
                  <div className="bg-gradient-to-r from-orange-500 to-amber-500 w-16 h-16 rounded-full flex items-center justify-center">
                    <Award className="h-8 w-8 text-white" />
                  </div>
                </div>
                <CardTitle className="text-center text-2xl text-orange-800">Professional Growth</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground text-lg">
                  Develop your writing skills and build your portfolio with published work
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <div className="flex justify-center mb-4">
                  <div className="bg-gradient-to-r from-orange-500 to-amber-500 w-16 h-16 rounded-full flex items-center justify-center">
                    <Users className="h-8 w-8 text-white" />
                  </div>
                </div>
                <CardTitle className="text-center text-2xl text-orange-800">Community</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground text-lg">
                  Connect with fellow travel enthusiasts and creative professionals worldwide
                </p>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* Who We're Looking For Section */}
        <section className="max-w-5xl mx-auto mb-24">
          <div className="bg-gradient-to-br from-orange-500 to-amber-500 rounded-3xl shadow-2xl p-10 text-white">
            <h2 className="text-4xl md:text-5xl font-bold mb-10 text-center">
              Who We're Looking For
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <Star className="h-8 w-8 text-amber-200" />
                  </div>
                  <p className="ml-4 text-xl">
                    <span className="font-bold">Local Experts:</span> People who know their city inside out - from hidden gems to local traditions
                  </p>
                </div>
                
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <Star className="h-8 w-8 text-amber-200" />
                  </div>
                  <p className="ml-4 text-xl">
                    <span className="font-bold">Storytellers:</span> Individuals who can craft compelling narratives that bring places to life
                  </p>
                </div>
              </div>
              
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <Star className="h-8 w-8 text-amber-200" />
                  </div>
                  <p className="ml-4 text-xl">
                    <span className="font-bold">Cultural Ambassadors:</span> People passionate about sharing their local culture, food, and lifestyle
                  </p>
                </div>
                
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <Star className="h-8 w-8 text-amber-200" />
                  </div>
                  <p className="ml-4 text-xl">
                    <span className="font-bold">Creative Professionals:</span> Photographers, videographers, and writers who want to showcase their hometown
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* What You'll Get Section */}
        <section className="max-w-7xl mx-auto mb-24">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-orange-900 mb-6">What You'll Get</h2>
            <p className="text-xl text-orange-700 max-w-3xl mx-auto">
              We believe in mutual benefit - here's what we offer our co-authors
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <CardTitle className="flex items-center text-2xl text-orange-800">
                  <BookOpen className="mr-3 h-8 w-8 text-orange-500" />
                  Published Work
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-lg">
                  See your stories published in our premium travel guides with professional editing and design
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <CardTitle className="flex items-center text-2xl text-orange-800">
                  <Camera className="mr-3 h-8 w-8 text-orange-500" />
                  Creative Freedom
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-lg">
                  Full creative control over your content with our editorial support to make it shine
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <CardTitle className="flex items-center text-2xl text-orange-800">
                  <MapPin className="mr-3 h-8 w-8 text-orange-500" />
                  Global Exposure
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-lg">
                  Reach our international audience of travelers and lifestyle enthusiasts
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-orange-200 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader>
                <CardTitle className="flex items-center text-2xl text-orange-800">
                  <Heart className="mr-3 h-8 w-8 text-orange-500" />
                  Community Connection
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-lg">
                  Join a network of like-minded creators and get invited to exclusive events
                </p>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* More Than Just a List Section */}
        <section className="max-w-5xl mx-auto mb-24">
          <div className="bg-gradient-to-r from-orange-800 to-amber-800 rounded-3xl shadow-2xl p-12 text-white">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-center">
              This is More Than Just a List
            </h2>
            
            <div className="space-y-8">
              <p className="text-xl leading-relaxed">
                We're building a movement of locals who want to change how the world experiences their cities. 
                This isn't about generic travel content - it's about the stories only you can tell.
              </p>
              
              <p className="text-xl leading-relaxed">
                When you become a co-author, you're not just contributing articles. You're becoming part of a 
                global community that values authentic experiences over tourist traps, local wisdom over generic 
                recommendations.
              </p>
              
              <p className="text-xl leading-relaxed">
                We're looking for people who are passionate about their hometowns and want to share that passion 
                with travelers who are genuinely interested in experiencing places like locals do.
              </p>
              
              <div className="pt-6">
                <Button 
                  onClick={() => document.getElementById("apply-section")?.scrollIntoView({ behavior: 'smooth' })}
                  className="bg-white text-orange-900 hover:bg-amber-100 py-4 px-10 text-xl font-bold shadow-xl"
                >
                  Join Our Movement
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Application Form */}
        <section id="apply-section" className="max-w-4xl mx-auto mb-24">
          <div className="bg-gradient-to-br from-orange-500 to-amber-500 rounded-3xl shadow-2xl p-10">
            <Card className="border-0 shadow-none bg-white/90 backdrop-blur-sm">
              <CardHeader className="text-center">
                <CardTitle className="text-3xl md:text-4xl text-orange-900">
                  Apply to Become a Co-Author
                </CardTitle>
                <CardDescription className="text-xl">
                  Tell us about yourself and why you'd be a great fit
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-8">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="space-y-2">
                      <Label htmlFor="fullName" className="text-orange-800 text-lg">Full Name *</Label>
                      <Input 
                        id="fullName" 
                        name="fullName" 
                        value={formData.fullName}
                        onChange={handleChange}
                        required 
                        className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 h-14 text-lg"
                        placeholder="Your full name"
                      />
                    </div>
                    
                    <div className="space-y-2">
                      <Label htmlFor="email" className="text-orange-800 text-lg">Email *</Label>
                      <Input 
                        id="email" 
                        name="email" 
                        type="email"
                        value={formData.email}
                        onChange={handleChange}
                        required 
                        className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 h-14 text-lg"
                        placeholder="your.email@example.com"
                      />
                    </div>
                    
                    <div className="space-y-2 md:col-span-2">
                      <Label htmlFor="city" className="text-orange-800 text-lg">City/Country You Represent *</Label>
                      <Input 
                        id="city" 
                        name="city" 
                        value={formData.city}
                        onChange={handleChange}
                        required 
                        className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 h-14 text-lg"
                        placeholder="e.g. Tokyo, Japan"
                      />
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="experience" className="text-orange-800 text-lg">
                      What travel/lifestyle experience do you want to share? *
                    </Label>
                    <Textarea 
                      id="experience" 
                      name="experience" 
                      value={formData.experience}
                      onChange={handleChange}
                      required 
                      rows={5}
                      placeholder="Tell us about the unique experiences, hidden gems, or cultural insights you'd like to share..."
                      className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 text-lg"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="platforms" className="text-orange-800 text-lg">
                      Do you have any existing platforms (blog, Instagram, etc.)? (Optional)
                    </Label>
                    <Input 
                      id="platforms" 
                      name="platforms" 
                      value={formData.platforms}
                      onChange={handleChange}
                      placeholder="Website, Instagram handle, portfolio link, etc."
                      className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 h-14 text-lg"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="motivation" className="text-orange-800 text-lg">
                      Why do you want to become a co-author? *
                    </Label>
                    <Textarea 
                      id="motivation" 
                      name="motivation" 
                      value={formData.motivation}
                      onChange={handleChange}
                      required 
                      rows={5}
                      placeholder="What drives your passion for sharing your local experiences?"
                      className="border-2 border-orange-200 focus:ring-orange-500 focus:border-orange-500 text-lg"
                    />
                  </div>
                  
                  <div className="flex items-start space-x-4 p-4 bg-orange-50 rounded-xl">
                    <input 
                      type="checkbox" 
                      id="agreement" 
                      name="agreement" 
                      checked={formData.agreement}
                      onChange={handleChange}
                      className="mt-1 h-6 w-6 text-orange-500 rounded focus:ring-orange-500 border-2 border-orange-300"
                      required
                    />
                    <Label htmlFor="agreement" className="text-orange-800 text-lg">
                      I agree to the terms and understand that this is a voluntary collaboration with potential for future paid opportunities *
                    </Label>
                  </div>
                  
                  <Button 
                    type="submit" 
                    className="w-full bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white py-6 text-xl font-bold shadow-xl transform hover:scale-105 transition-all duration-300"
                  >
                    Submit Application
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </section>
      </main>

      {/* Footer CTA */}
      <footer className="bg-gradient-to-r from-orange-900 to-amber-900 text-white py-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <h3 className="text-4xl md:text-5xl font-bold mb-6">
            Ready to Share Your City's Story?
          </h3>
          <p className="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">
            Join our community of local experts and help travelers experience the world through authentic perspectives.
          </p>
          <Button 
            onClick={() => document.getElementById("apply-section")?.scrollIntoView({ behavior: 'smooth' })}
            className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white py-5 px-12 text-2xl font-bold shadow-2xl transform hover:scale-105 transition-all duration-300"
          >
            Apply Now <ArrowRight className="ml-3 h-8 w-8" />
          </Button>
          <p className="mt-8 text-amber-200 text-lg">
            No experience necessary - just passion for your hometown!
          </p>
        </div>
      </footer>
    </div>
  );
}