'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { 
  Home, Droplet, Sun, Waves, Sprout, Hammer, Shield, Wrench, AlertCircle,
  FileText, Users, BarChart3, CreditCard, MessageCircle, CheckCircle, Globe
} from 'lucide-react';

const SERVICES = [
  { icon: Home, title: 'Roofing Solutions', description: 'Complete roofing services and repairs' },
  { icon: Droplet, title: 'Gutter & Rainwater', description: 'Installation and maintenance systems' },
  { icon: Sun, title: 'Solar Panel Solutions', description: 'Sustainable energy installations' },
  { icon: Waves, title: 'Pool Solutions', description: 'Design, build, and maintenance' },
  { icon: Sprout, title: 'Irrigation Solutions', description: 'Smart watering systems' },
  { icon: Hammer, title: 'Paving Solutions', description: 'Driveways, pathways, and surfaces' },
  { icon: Shield, title: 'Fencing & Walls', description: 'Security and boundary solutions' },
  { icon: Wrench, title: 'Renovations', description: 'Complete property transformations' },
  { icon: AlertCircle, title: 'Emergency Services', description: '24/7 urgent repair response' },
];

const FEATURES = [
  {
    icon: FileText,
    title: 'Professional Quoting',
    subtitle: 'Quote2ContractPro handles the quote',
    description: 'Our experts assess your project and provide detailed, professional quotes—no shopping around multiple contractors needed.',
  },
  {
    icon: Users,
    title: 'Vetted Contractor Network',
    subtitle: 'Pre-screened professionals only',
    description: 'Every contractor is verified, background-checked, and performance-rated. They purchase project contracts through our secure platform.',
  },
  {
    icon: BarChart3,
    title: 'Integrated Project CRM',
    subtitle: 'Manage everything in one place',
    description: 'Calendar scheduling, milestone tracking, document management, and communication tools for both clients and contractors.',
  },
  {
    icon: CreditCard,
    title: 'Secure Payment Processing',
    subtitle: 'Protected transactions with Cuphoo',
    description: 'Milestone-based payments, escrow protection, automated invoicing, and integrated accounting—safe for everyone.',
  },
];

const STEPS = [
  {
    title: 'Request Your Quote',
    subtitle: 'Chat with our intelligent assistant',
    description: 'Tell us about your project through our guided chat bot. We will ask the right questions to understand your needs, timeline, and budget.',
  },
  {
    title: 'Receive Q2C Quote',
    subtitle: 'Professional assessment and pricing',
    description: 'Quote2ContractPro evaluates your project and provides a detailed, transparent quote within 24 hours—backed by our expertise.',
  },
  {
    title: 'Accept & Contract',
    subtitle: 'Review and approve with confidence',
    description: 'Once you accept, we formalize everything with a secure contract that protects both you and the contractor.',
  },
  {
    title: 'Contractor Assignment',
    subtitle: 'Matched with the right professional',
    description: 'A verified contractor from our network purchases your project contract and commits to the agreed terms and timeline.',
  },
  {
    title: 'Track to Completion',
    subtitle: 'Full visibility and control',
    description: 'Both you and your contractor access our CRM to manage schedules, milestones, payments, and communications until project completion.',
  },
];

const WHY_CARDS = [
  {
    icon: '🎯',
    title: 'No Bidding Wars',
    subtitle: 'We quote it right the first time',
    description: 'Unlike contractor marketplaces, we provide the quote based on fair market pricing and project requirements. No contractor competition, no lowball bids, no surprises.',
  },
  {
    icon: '🛡️',
    title: 'Quality Assurance',
    subtitle: 'We stand behind every project',
    description: 'Quote2ContractPro manages the contract and holds contractors accountable. If something goes wrong, we are here to resolve it.',
  },
  {
    icon: '🌍',
    title: 'Global Platform, Local Service',
    subtitle: 'Operating in SA, USA, UK, and Australia',
    description: 'International platform standards with local contractor networks and regional expertise in each market.',
  },
];

const REGIONS = [
  {
    flag: '🇿🇦',
    name: 'South Africa',
    partner: 'Carredager',
    coverage: 'Serving Johannesburg, Cape Town, Durban, and surrounding areas',
    link: '/south-africa',
  },
  {
    flag: '🇺🇸',
    name: 'United States',
    partner: 'BuildRight USA',
    coverage: 'Serving major cities across all 50 states',
    link: '/usa',
  },
  {
    flag: '🇬🇧',
    name: 'United Kingdom',
    partner: 'Goeknes',
    coverage: 'Serving London, Manchester, Birmingham, and beyond',
    link: '/united-kingdom',
  },
  {
    flag: '🇦🇺',
    name: 'Australia',
    partner: 'Kail sitoae',
    coverage: 'Serving Sydney, Melbourne, Brisbane, and more',
    link: '/australia',
  },
];

const TESTIMONIALS = [
  {
    quote: 'Quote2ContractPro made our roof replacement so easy. One quote, one contractor, one platform for everything. No stress, just results.',
    author: 'Sarah M.',
    location: 'Cape Town',
    service: 'Roofing Solution',
  },
  {
    quote: 'As a contractor, purchasing contracts through Q2C means I am working with serious clients and getting paid securely. It has transformed my business.',
    author: 'James T.',
    location: 'London',
    service: 'Verified Contractor',
  },
  {
    quote: 'Emergency pool repair handled perfectly. From quote to completion in 5 days. The CRM kept us updated every step of the way.',
    author: 'Michael K.',
    location: 'Sydney',
    service: 'Pool Solutions',
  },
];

export function MarketingHomepage() {
  const [chatOpen, setChatOpen] = useState(false);

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section - Teal themed like the logo */}
      <section className="relative overflow-hidden bg-[#1e5a5a]">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#c8d946]/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3" />
        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[#c8d946]/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/3" />
        
        <div className="container relative z-10 mx-auto px-4 py-16 md:py-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white">
                From Quote <span className="text-[#c8d946]">2</span> Contract<br />
                — <span className="text-[#c8d946]">Seamless, Global, Trusted.</span>
              </h1>
              
              <p className="text-xl text-white/90">
                We professionally quote your project, connect you with verified contractors, and manage everything from contract to completion—all in one platform.
              </p>
              
              <div className="flex flex-wrap gap-4">
                <Link href="/get-quote">
                  <Button size="lg" className="text-lg px-8 bg-[#c8d946] hover:bg-[#b5c73f] text-[#1e5a5a] font-semibold">
                    Get a Quote
                  </Button>
                </Link>
                <Link href="#how-it-works">
                  <Button size="lg" variant="outline" className="text-lg px-8 border-white text-white hover:bg-white hover:text-[#1e5a5a]">
                    How It Works
                  </Button>
                </Link>
              </div>
              
              {/* Trust Bar */}
              <div className="flex flex-wrap gap-6 pt-6 border-t border-white/30">
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-[#c8d946]" />
                  <span className="text-sm text-white">Trust Score: <strong className="text-[#c8d946]">98%</strong></span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-[#c8d946]" />
                  <span className="text-sm text-white">Active: <strong className="text-[#c8d946]">1,247</strong></span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-[#c8d946]" />
                  <span className="text-sm text-white">Rating: <strong className="text-[#c8d946]">4.9/5</strong></span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-[#c8d946]" />
                  <span className="text-sm text-white">Response: <strong className="text-[#c8d946]">&lt;2 hours</strong></span>
                </div>
              </div>
            </div>
            
            {/* Hero Visual */}
            <div className="bg-white rounded-3xl shadow-2xl p-8 flex flex-col items-center justify-center min-h-[400px]">
              <div className="text-center space-y-6">
                <div className="w-20 h-20 bg-[#1e5a5a] rounded-full flex items-center justify-center mx-auto">
                  <MessageCircle className="w-10 h-10 text-white" />
                </div>
                <h3 className="text-2xl font-bold text-[#1e5a5a]">Start Your Quote</h3>
                <p className="text-muted-foreground">
                  Chat with our intelligent assistant to get a professional quote in minutes
                </p>
                <Link href="/get-quote">
                  <Button size="lg" className="bg-[#c8d946] hover:bg-[#b5c73f] text-[#1e5a5a] font-semibold">Begin Chat</Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              Professional Solutions for Every Project
            </h2>
            <p className="text-xl text-muted-foreground">
              Comprehensive services backed by vetted contractors
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SERVICES.map((service, index) => (
              <Card 
                key={index} 
                className="group hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer border-2 hover:border-[#c8d946]"
              >
                <CardContent className="p-6 text-center space-y-4">
                  <div className="w-16 h-16 bg-[#1e5a5a]/10 rounded-full flex items-center justify-center mx-auto group-hover:bg-[#c8d946]/20 transition-colors">
                    <service.icon className="w-8 h-8 text-[#1e5a5a] group-hover:text-[#1e5a5a]" />
                  </div>
                  <h3 className="text-xl font-semibold text-[#1e5a5a]">{service.title}</h3>
                  <p className="text-muted-foreground">{service.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-gradient-to-br from-muted/30 to-background">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              Everything You Need to Scale
            </h2>
            <p className="text-xl text-muted-foreground">
              Built for clients who demand quality and contractors who deliver results
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {FEATURES.map((feature, index) => (
              <Card key={index} className="bg-white shadow-lg hover:shadow-xl transition-all">
                <CardContent className="p-6 space-y-4">
                  <div className="w-12 h-12 bg-[#1e5a5a]/10 rounded-lg flex items-center justify-center">
                    <feature.icon className="w-6 h-6 text-[#1e5a5a]" />
                  </div>
                  <h3 className="text-lg font-semibold text-[#1e5a5a]">{feature.title}</h3>
                  <div className="text-[#c8d946] font-semibold text-sm">{feature.subtitle}</div>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section id="how-it-works" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              How It Works
            </h2>
            <p className="text-xl text-muted-foreground">
              Five simple steps from request to project completion
            </p>
          </div>
          
          <div className="max-w-4xl mx-auto space-y-8">
            {STEPS.map((step, index) => (
              <div key={index} className="flex gap-6 items-start">
                <div className="flex-shrink-0 w-16 h-16 bg-[#1e5a5a] rounded-full flex items-center justify-center text-white text-2xl font-bold shadow-lg">
                  {index + 1}
                </div>
                <div className="flex-1 space-y-2">
                  <h3 className="text-xl font-semibold text-[#1e5a5a]">{step.title}</h3>
                  <div className="text-[#c8d946] font-semibold">{step.subtitle}</div>
                  <p className="text-muted-foreground">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why Q2C Section */}
      <section className="py-20 bg-[#1e5a5a] text-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Why Choose Quote<span className="text-[#c8d946]">2</span>Contract<span className="text-[#c8d946]"> Pro</span>?
            </h2>
            <p className="text-xl opacity-90">
              We are not just a marketplace—we are your project partner
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-6">
            {WHY_CARDS.map((card, index) => (
              <Card key={index} className="bg-white/10 backdrop-blur-lg border-white/20 hover:bg-white/20 transition-all">
                <CardContent className="p-6 space-y-4">
                  <div className="text-5xl">{card.icon}</div>
                  <h3 className="text-xl font-semibold text-white">{card.title}</h3>
                  <div className="text-[#c8d946] font-semibold text-sm">{card.subtitle}</div>
                  <p className="text-white/90 leading-relaxed">{card.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Regions Section */}
      <section id="regions" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              Global Reach, Local Expertise
            </h2>
            <p className="text-xl text-muted-foreground">
              Connect with top contractors in your region
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {REGIONS.map((region, index) => (
              <Link key={index} href={region.link}>
                <Card className="group hover:shadow-xl hover:-translate-y-2 transition-all cursor-pointer border-2 hover:border-[#c8d946] h-full">
                  <CardContent className="p-6 space-y-4 h-full flex flex-col">
                    <div className="text-6xl">{region.flag}</div>
                    <h3 className="text-xl font-semibold text-[#1e5a5a]">{region.name}</h3>
                    <div className="text-sm text-muted-foreground">
                      Trusted partner: <span className="font-semibold">{region.partner}</span>
                    </div>
                    <p className="text-sm text-muted-foreground flex-1">{region.coverage}</p>
                    <div className="text-[#c8d946] font-semibold group-hover:gap-2 flex items-center transition-all">
                      Explore Region <span className="inline-block group-hover:translate-x-1 transition-transform">→</span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Social Proof Section */}
      <section className="py-20 bg-gradient-to-br from-muted/30 to-background">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              Trusted by Thousands
            </h2>
            <p className="text-xl text-muted-foreground">
              Real results from real clients and contractors
            </p>
          </div>
          
          {/* Stats */}
          <div className="grid md:grid-cols-4 gap-8 mb-16">
            <div className="text-center">
              <div className="text-5xl font-bold text-[#c8d946] mb-2">12,847</div>
              <div className="text-lg text-muted-foreground">Total Projects</div>
            </div>
            <div className="text-center">
              <div className="text-5xl font-bold text-[#c8d946] mb-2">98%</div>
              <div className="text-lg text-muted-foreground">Customer Satisfaction</div>
            </div>
            <div className="text-center">
              <div className="text-5xl font-bold text-[#c8d946] mb-2">4.9/5</div>
              <div className="text-lg text-muted-foreground">Average Rating</div>
            </div>
            <div className="text-center">
              <div className="text-5xl font-bold text-[#c8d946] mb-2">2,100+</div>
              <div className="text-lg text-muted-foreground">Verified Contractors</div>
            </div>
          </div>
          
          {/* Testimonials */}
          <div className="grid md:grid-cols-3 gap-6">
            {TESTIMONIALS.map((testimonial, index) => (
              <Card key={index} className="bg-white shadow-lg">
                <CardContent className="p-6 space-y-4">
                  <div className="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</div>
                  <p className="text-muted-foreground leading-relaxed">{testimonial.quote}</p>
                  <div className="pt-4 border-t space-y-1">
                    <div className="font-semibold">{testimonial.author}, {testimonial.location}</div>
                    <div className="text-sm text-muted-foreground">{testimonial.service}</div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Trust Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#1e5a5a]">
              Your Protection, Our Priority
            </h2>
            <p className="text-xl text-muted-foreground">
              Multiple layers of security and quality assurance
            </p>
          </div>
          
          <div className="grid md:grid-cols-4 gap-6">
            <div className="text-center space-y-4">
              <div className="w-16 h-16 bg-[#1e5a5a]/10 rounded-full flex items-center justify-center mx-auto">
                <CheckCircle className="w-8 h-8 text-[#1e5a5a]" />
              </div>
              <h3 className="text-lg font-semibold text-[#1e5a5a]">Q2C Verified Quotes</h3>
              <p className="text-sm text-muted-foreground">Professional assessment backed by market data</p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-16 h-16 bg-[#1e5a5a]/10 rounded-full flex items-center justify-center mx-auto">
                <Users className="w-8 h-8 text-[#1e5a5a]" />
              </div>
              <h3 className="text-lg font-semibold text-[#1e5a5a]">Background-Checked Contractors</h3>
              <p className="text-sm text-muted-foreground">Every professional verified and rated</p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-16 h-16 bg-[#1e5a5a]/10 rounded-full flex items-center justify-center mx-auto">
                <CreditCard className="w-8 h-8 text-[#1e5a5a]" />
              </div>
              <h3 className="text-lg font-semibold text-[#1e5a5a]">Secure Payment Processing</h3>
              <p className="text-sm text-muted-foreground">Escrow protection and milestone payments</p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-16 h-16 bg-[#1e5a5a]/10 rounded-full flex items-center justify-center mx-auto">
                <FileText className="w-8 h-8 text-[#1e5a5a]" />
              </div>
              <h3 className="text-lg font-semibold text-[#1e5a5a]">Contract Guarantee</h3>
              <p className="text-sm text-muted-foreground">Legal protection for every project</p>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 bg-[#1e5a5a] text-white text-center">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Ready to Transform Your Project?
          </h2>
          <p className="text-xl mb-8 opacity-90 max-w-2xl mx-auto">
            Join thousands of clients and contractors who trust Quote<span className="text-[#c8d946]">2</span>Contract<span className="text-[#c8d946]"> Pro</span> for seamless project delivery
          </p>
          <div className="flex flex-wrap gap-4 justify-center mb-4">
            <Link href="/get-quote">
              <Button size="lg" className="text-lg px-8 bg-[#c8d946] hover:bg-[#b5c73f] text-[#1e5a5a] font-semibold">
                Get Started Now
              </Button>
            </Link>
            <Link href="/auth/signup">
              <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent text-white border-white hover:bg-white hover:text-[#1e5a5a]">
                Create Contractor Account
              </Button>
            </Link>
          </div>
          <p className="text-sm opacity-80">
            No credit card required. Free quotes. Cancel anytime.
          </p>
        </div>
      </section>

      {/* Floating Chat Button */}
      <button
        onClick={() => setChatOpen(!chatOpen)}
        className="fixed bottom-6 right-6 w-16 h-16 bg-[#c8d946] hover:bg-[#b5c73f] text-[#1e5a5a] rounded-full shadow-2xl hover:scale-110 transition-all flex items-center justify-center z-50"
        title="Chat with us to get your quote"
      >
        <MessageCircle className="w-8 h-8" />
      </button>
    </div>
  );
}
