Wdipl-react/pages/ScheduleDiscoveryCall.tsx

import React, { useState } from "react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Input } from "../components/ui/input";
import { Textarea } from "../components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { Calendar, Clock, Video, Phone, MessageSquare, ArrowRight, CheckCircle, User, Mail, Building2, Target, Users, Lightbulb, TrendingUp } from "lucide-react";
import { navigateTo } from "../App";

export const ScheduleDiscoveryCall = () => {
  const [selectedDate, setSelectedDate] = useState("");
  const [selectedTime, setSelectedTime] = useState("");
  const [selectedExpert, setSelectedExpert] = useState("any");
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    phone: "",
    callPurpose: "",
    meetingType: "video"
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

  const timeSlots = [
    "9:00 AM", "9:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM",
    "12:00 PM", "12:30 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM",
    "3:00 PM", "3:30 PM", "4:00 PM", "4:30 PM", "5:00 PM", "5:30 PM"
  ];

  const experts = [
    {
      id: "john-smith",
      name: "John Smith",
      title: "Senior Solutions Architect",
      specialties: ["Enterprise Software", "Cloud Solutions", "System Architecture"],
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=300&q=80",
      experience: "12+ years"
    },
    {
      id: "sarah-chen",
      name: "Sarah Chen",
      title: "AI/ML Solutions Expert",
      specialties: ["Artificial Intelligence", "Machine Learning", "Data Science"],
      image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?auto=format&fit=crop&w=300&q=80",
      experience: "8+ years"
    },
    {
      id: "michael-rodriguez",
      name: "Michael Rodriguez",
      title: "Mobile App Development Lead",
      specialties: ["iOS Development", "Android Development", "Cross-Platform"],
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=300&q=80",
      experience: "10+ years"
    },
    {
      id: "emma-johnson",
      name: "Emma Johnson",
      title: "UI/UX Design Director",
      specialties: ["User Experience", "Design Strategy", "Prototyping"],
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=300&q=80",
      experience: "9+ years"
    }
  ];

  const callExpectations = [
    {
      icon: MessageSquare,
      title: "A friendly chat, not a sales pitch",
      description: "Our experts focus on understanding your needs and providing valuable insights"
    },
    {
      icon: Target,
      title: "Discussion about your project ideas, challenges, and goals",
      description: "We'll explore your vision and identify potential solutions together"
    },
    {
      icon: Lightbulb,
      title: "Expert insights and potential solutions",
      description: "Get professional recommendations based on our industry experience"
    },
    {
      icon: CheckCircle,
      title: "No obligation to proceed",
      description: "This is a consultation to help you make informed decisions"
    }
  ];

  const availableDates = [
    "2024-01-15", "2024-01-16", "2024-01-17", "2024-01-18", "2024-01-19",
    "2024-01-22", "2024-01-23", "2024-01-24", "2024-01-25", "2024-01-26",
    "2024-01-29", "2024-01-30", "2024-01-31", "2024-02-01", "2024-02-02"
  ];

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Simulate booking submission
    await new Promise(resolve => setTimeout(resolve, 2000));

    alert(`Great! Your discovery call has been scheduled for ${selectedDate} at ${selectedTime}. You'll receive a confirmation email shortly with meeting details.`);

    // Reset form
    setFormData({
      name: "", email: "", company: "", phone: "", callPurpose: "", meetingType: "video"
    });
    setSelectedDate("");
    setSelectedTime("");
    setSelectedExpert("any");
    setIsSubmitting(false);
  };

  const selectedExpertData = selectedExpert && selectedExpert !== "any" ? experts.find(expert => expert.id === selectedExpert) : null;

  return (
    <div className="dark min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <section className="pt-24 pb-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <div className="flex items-center justify-center gap-2 mb-6">
              <Calendar className="w-6 h-6 text-[#E5195E]" />
              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
                Free Consultation
              </Badge>
            </div>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
              Schedule a Discovery Call: Let's Connect & Explore Your Vision
            </h1>
            <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
              Ready to explore possibilities and discuss your project in detail? Book a free, no-obligation Discovery Call with one of WDI's expert consultants. We'll listen to your needs, answer your questions, and identify how our services can best align with your business objectives.
            </p>
            <div className="flex items-center justify-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4" />
                <span>30-45 minutes</span>
              </div>
              <div className="flex items-center gap-2">
                <Video className="w-4 h-4" />
                <span>Video or Phone</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4" />
                <span>No obligation</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Main Booking Section */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="grid lg:grid-cols-3 gap-12">

            {/* Booking Form */}
            <div className="lg:col-span-2">
              <Card className="bg-background/50 border-white/10">
                <CardContent className="p-8">
                  <h2 className="text-2xl font-bold text-white mb-6">Book Your Discovery Call</h2>

                  <form onSubmit={handleSubmit} className="space-y-8">

                    {/* Contact Information */}
                    <div>
                      <h3 className="text-lg font-semibold text-white mb-4">Contact Information</h3>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Name *</label>
                          <Input
                            required
                            value={formData.name}
                            onChange={(e) => handleInputChange("name", e.target.value)}
                            placeholder="Your full name"
                            className="bg-card/50 border-white/10"
                          />
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Email *</label>
                          <Input
                            type="email"
                            required
                            value={formData.email}
                            onChange={(e) => handleInputChange("email", e.target.value)}
                            placeholder="your.email@example.com"
                            className="bg-card/50 border-white/10"
                          />
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Company Name *</label>
                          <Input
                            required
                            value={formData.company}
                            onChange={(e) => handleInputChange("company", e.target.value)}
                            placeholder="Your company name"
                            className="bg-card/50 border-white/10"
                          />
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Phone Number</label>
                          <Input
                            type="tel"
                            value={formData.phone}
                            onChange={(e) => handleInputChange("phone", e.target.value)}
                            placeholder="+1 (555) 123-4567"
                            className="bg-card/50 border-white/10"
                          />
                        </div>
                      </div>
                    </div>

                    {/* Meeting Preferences */}
                    <div>
                      <h3 className="text-lg font-semibold text-white mb-4">Meeting Preferences</h3>
                      <div className="grid md:grid-cols-2 gap-4 mb-4">
                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Preferred Meeting Type *</label>
                          <Select value={formData.meetingType} onValueChange={(value) => handleInputChange("meetingType", value)}>
                            <SelectTrigger className="bg-card/50 border-white/10 text-white">
                              <SelectValue placeholder="Select meeting type" className="text-white" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="video">Video Call (Preferred)</SelectItem>
                              <SelectItem value="phone">Phone Call</SelectItem>
                              <SelectItem value="in-person">In-Person (if local)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Preferred Expert</label>
                          <Select value={selectedExpert} onValueChange={setSelectedExpert}>
                            <SelectTrigger className="bg-card/50 border-white/10 text-white">
                              <SelectValue placeholder="Any available expert" className="text-white" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="any">Any available expert</SelectItem>
                              {experts.map((expert) => (
                                <SelectItem key={expert.id} value={expert.id}>
                                  {expert.name} - {expert.title}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-white mb-2">Brief purpose of the call *</label>
                        <Textarea
                          required
                          value={formData.callPurpose}
                          onChange={(e) => handleInputChange("callPurpose", e.target.value)}
                          placeholder="Tell us about your project, challenges, or what you'd like to discuss..."
                          rows={3}
                          className="bg-card/50 border-white/10"
                        />
                      </div>
                    </div>

                    {/* Date Selection */}
                    <div>
                      <h3 className="text-lg font-semibold text-white mb-4">Select Date & Time</h3>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Preferred Date *</label>
                          <Select value={selectedDate} onValueChange={setSelectedDate}>
                            <SelectTrigger className="bg-card/50 border-white/10 text-white">
                              <SelectValue placeholder="Select a date" className="text-white" />
                            </SelectTrigger>
                            <SelectContent>
                              {availableDates.map((date) => (
                                <SelectItem key={date} value={date}>
                                  {new Date(date).toLocaleDateString('en-US', {
                                    weekday: 'long',
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric'
                                  })}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-white mb-2">Preferred Time (EST) *</label>
                          <Select value={selectedTime} onValueChange={setSelectedTime}>
                            <SelectTrigger className="bg-card/50 border-white/10 text-white">
                              <SelectValue placeholder="Select a time" className="text-white" />
                            </SelectTrigger>
                            <SelectContent>
                              {timeSlots.map((time) => (
                                <SelectItem key={time} value={time}>
                                  {time}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>

                    {/* Submit Button */}
                    <Button
                      type="submit"
                      disabled={!selectedDate || !selectedTime || isSubmitting}
                      className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white disabled:opacity-50"
                    >
                      {isSubmitting ? "Booking Your Call..." : "Book Your Free Consultation Now"}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

            {/* Sidebar Info */}
            <div className="space-y-8">

              {/* Selected Expert Info */}
              {selectedExpertData && (
                <Card className="bg-background/50 border-white/10">
                  <CardContent className="p-6">
                    <h3 className="text-lg font-semibold text-white mb-4">Your Expert Consultant</h3>
                    <div className="flex items-start gap-4">
                      <img
                        src={selectedExpertData.image}
                        alt={selectedExpertData.name}
                        className="w-16 h-16 rounded-full object-cover"
                      />
                      <div className="flex-1">
                        <h4 className="text-white font-medium">{selectedExpertData.name}</h4>
                        <p className="text-[#E5195E] text-sm mb-2">{selectedExpertData.title}</p>
                        <p className="text-muted-foreground text-sm mb-2">{selectedExpertData.experience} experience</p>
                        <div className="flex flex-wrap gap-1">
                          {selectedExpertData.specialties.map((specialty, index) => (
                            <Badge key={index} variant="outline" className="border-white/20 text-white/70 text-xs">
                              {specialty}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* What to Expect */}
              <Card className="bg-background/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4">What to Expect from Your Call</h3>
                  <div className="space-y-4">
                    {callExpectations.map((item, index) => {
                      const Icon = item.icon;
                      return (
                        <div key={index} className="flex items-start gap-3">
                          <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center flex-shrink-0">
                            <Icon className="w-4 h-4 text-[#E5195E]" />
                          </div>
                          <div>
                            <h4 className="text-white font-medium text-sm mb-1">{item.title}</h4>
                            <p className="text-muted-foreground text-xs">{item.description}</p>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>

              {/* Alternative Contact */}
              <Card className="bg-background/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4">Prefer Email?</h3>
                  <p className="text-muted-foreground text-sm mb-4">
                    If scheduling isn't convenient, you can reach us directly via email.
                  </p>
                  <a href="mailto:ideas@wdipl.com" className="block w-full">
                    <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10">
                      <Mail className="w-4 h-4 mr-2" />
                      Send Email to ideas@wdipl.com
                    </Button>
                  </a>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Our Experts Section */}
      {/* <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">Meet Our Expert Consultants</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Our experienced consultants are ready to discuss your project and provide valuable insights based on years of industry experience.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {experts.map((expert) => (
              <Card key={expert.id} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 text-center">
                <CardContent className="p-6">
                  <img 
                    src={expert.image} 
                    alt={expert.name}
                    className="w-20 h-20 rounded-full object-cover mx-auto mb-4"
                  />
                  <h3 className="text-white font-semibold mb-1">{expert.name}</h3>
                  <p className="text-[#E5195E] text-sm mb-2">{expert.title}</p>
                  <p className="text-muted-foreground text-xs mb-3">{expert.experience} experience</p>
                  <div className="flex flex-wrap gap-1 justify-center">
                    {expert.specialties.slice(0, 2).map((specialty, index) => (
                      <Badge key={index} variant="outline" className="border-white/20 text-white/70 text-xs">
                        {specialty}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section> */}

      {/* Process Section */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">How It Works</h2>
            <p className="text-muted-foreground">Simple steps to get started with your discovery call</p>
          </div>

          <div className="grid md:grid-cols-4 gap-8">
            {[
              { step: 1, title: "Book Your Call", description: "Choose your preferred date, time, and expert" },
              { step: 2, title: "Receive Confirmation", description: "Get meeting details and calendar invite via email" },
              { step: 3, title: "Join the Call", description: "Connect with our expert at the scheduled time" },
              { step: 4, title: "Explore Solutions", description: "Discuss your needs and potential next steps" }
            ].map((item, index) => (
              <div key={index} className="text-center">
                <div className="w-12 h-12 rounded-full bg-[#E5195E] text-white font-bold text-lg flex items-center justify-center mx-auto mb-4">
                  {item.step}
                </div>
                <h3 className="text-white font-semibold mb-2">{item.title}</h3>
                <p className="text-muted-foreground text-sm">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-white mb-6">
              Ready to Transform Your Ideas into Reality?
            </h2>
            <p className="text-lg text-muted-foreground mb-8">
              Don't wait! Book your free discovery call today and take the first step toward bringing your vision to life.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                onClick={() => navigateTo("/start-a-project")}
              >
                Book Your Free Consultation Now
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                See Our Available Times
              </Button>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};