import React from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
import { Input } from './ui/input'
import { Label } from './ui/label'
import { Building2, Globe, Briefcase, Users, Home, DollarSign, CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen } from 'lucide-react'

function Step1Form({ formData, handleInputChange, formError }) {
  return (
    <>
      {/* How Do You Want to Get Involved? */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground">How Do You Want to Get Involved?</h2>
          </div>
          {formError && (
            <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-200 mb-8">
              <AlertCircle className="h-5 w-5" />
              <span>{formError}</span>
            </div>
          )}
          <p className="text-lg text-muted-foreground mb-8 text-center flex items-center justify-center gap-2">
            <ArrowRight className="h-6 w-6 text-blue-600" /> <span className="font-bold">Please select one or more categories below that best describe your interest to reveal specific questions.</span>
          </p>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('realEstateDeveloper') ? 'border-blue-600 ring-2 ring-blue-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'realEstateDeveloper')}
            >
              <CardHeader>
                <Building2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
                <CardTitle className="text-blue-600">Real Estate Developer</CardTitle>
              </CardHeader>
              <CardContent>
                Transform your properties into digital utilities.
              </CardContent>
            </Card>
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('government') ? 'border-green-600 ring-2 ring-green-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'government')}
            >
              <CardHeader>
                <Shield className="w-16 h-16 mx-auto mb-4 text-green-600" />
                <CardTitle className="text-green-600">Government/Public Sector</CardTitle>
              </CardHeader>
              <CardContent>
                Build sovereign digital infrastructure.
              </CardContent>
            </Card>
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('enterprise') ? 'border-purple-600 ring-2 ring-purple-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'enterprise')}
            >
              <CardHeader>
                <Briefcase className="w-16 h-16 mx-auto mb-4 text-purple-600" />
                <CardTitle className="text-purple-600">Enterprise Customer</CardTitle>
              </CardHeader>
              <CardContent>
                Deploy private, secure cloud infrastructure.
              </CardContent>
            </Card>
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('telecom') ? 'border-orange-600 ring-2 ring-orange-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'telecom')}
            >
              <CardHeader>
                <Network className="w-16 h-16 mx-auto mb-4 text-orange-600" />
                <CardTitle className="text-orange-600">Telecom/ISP</CardTitle>
              </CardHeader>
              <CardContent>
                Extend your network with edge computing.
              </CardContent>
            </Card>
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('investor') ? 'border-teal-600 ring-2 ring-teal-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'investor')}
            >
              <CardHeader>
                <DollarSign className="w-16 h-16 mx-auto mb-4 text-teal-600" />
                <CardTitle className="text-teal-600">Investor/Partner</CardTitle>
              </CardHeader>
              <CardContent>
                Join the ThreeFold ecosystem.
              </CardContent>
            </Card>
            <Card 
              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('individual') ? 'border-indigo-600 ring-2 ring-indigo-600' : ''}`}
              onClick={() => handleInputChange('interestCategory', 'individual')}
            >
              <CardHeader>
                <Users className="w-16 h-16 mx-auto mb-4 text-indigo-600" />
                <CardTitle className="text-indigo-600">Individual/Community</CardTitle>
              </CardHeader>
              <CardContent>
                Start with residential deployment.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact Form - General Information */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <div className="max-w-4xl mx-auto">
          <Card className="bg-card text-card-foreground shadow-xl">
            <CardHeader>
              <CardTitle className="text-2xl text-center">Your Contact Details</CardTitle>
              <CardDescription className="text-center text-lg">
                Provide your basic contact information.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="name">Full Name *</Label>
                    <Input
                      id="name"
                      placeholder="Your full name"
                      value={formData.name}
                      onChange={(e) => handleInputChange('name', e.target.value)}
                      required
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="email">Email Address *</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="your@email.com"
                      value={formData.email}
                      onChange={(e) => handleInputChange('email', e.target.value)}
                      required
                    />
                  </div>
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="company">Organization</Label>
                  <Input
                    id="company"
                    placeholder="Your company or organization"
                    value={formData.company}
                    onChange={(e) => handleInputChange('company', e.target.value)}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </>
  )
}

export default Step1Form