import { Metadata } from 'next'
import { generateMetadata } from '@/lib/seo'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { CustomSolutionCTA } from '@/components/ui/custom-solution-cta'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Shield, Zap, Users, Globe, Server, Cpu } from 'lucide-react'

export const metadata: Metadata = generateMetadata({
  title: 'About Us - SiliconPin',
  description:
    'Learn more about SiliconPin, our mission, values, and the team behind our high-performance hosting solutions and developer services.',
})

export default function AboutPage() {
  const coreValues = [
    {
      title: 'Reliability',
      description: 'We understand that downtime means lost business. That\'s why we prioritize reliability in everything we do, from our infrastructure to our customer service.',
      icon: Server,
      color: 'text-blue-600'
    },
    {
      title: 'Security',
      description: 'In an increasingly digital world, security is paramount. We implement robust security measures to protect our clients\' data and applications.',
      icon: Shield,
      color: 'text-green-600'
    },
    {
      title: 'Innovation',
      description: 'We continuously explore new technologies and methodologies to improve our services and provide our clients with cutting-edge solutions.',
      icon: Zap,
      color: 'text-purple-600'
    },
    {
      title: 'Customer Focus',
      description: 'Our clients\' success is our success. We work closely with our clients to understand their needs and provide tailored solutions that help them achieve their goals.',
      icon: Users,
      color: 'text-orange-600'
    }
  ]

  const whyChooseUs = [
    '24/7 expert technical support',
    '99.9% uptime guarantee',
    'Scalable infrastructure to grow with your business',
    'Comprehensive security measures including DDoS protection and SSL certificates',
    'Expertise across various technologies including PHP, Node.js, Python, and Kubernetes',
    'Commitment to customer success through personalized service'
  ]

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="container max-w-6xl pt-24 pb-8">
        {/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold tracking-tight mb-4">About SiliconPin</h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            We promote awareness about digital freedom by providing software and hardware development and research
          </p>
        </div>

        <div className="space-y-8">
          {/* Our Story */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Our Story</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-muted-foreground leading-relaxed">
                SiliconPin was founded in 2021 with a clear mission: to provide businesses of all sizes with reliable, 
                high-performance hosting solutions that enable growth and innovation. What started as a small team of 
                passionate developers and system administrators has grown into a trusted hosting provider serving clients 
                across various industries.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                Based in Habra, West Bengal, India, our team combines technical expertise with a deep understanding of 
                business needs to deliver hosting solutions that are not just technically sound but also aligned with 
                our clients' business objectives.
              </p>
            </CardContent>
          </Card>

          {/* Our Mission */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Our Mission</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground leading-relaxed">
                At SiliconPin, our mission is to empower businesses through technology by providing reliable, secure, 
                and scalable hosting solutions. We believe that technology should enable businesses to focus on what 
                they do best, without worrying about infrastructure management or technical complexities.
              </p>
            </CardContent>
          </Card>

          {/* Our Values */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Our Values</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {coreValues.map((value, index) => {
                  const Icon = value.icon
                  return (
                    <div key={index} className="space-y-3">
                      <div className="flex items-center space-x-3">
                        <div className={`p-2 rounded-lg bg-primary/10`}>
                          <Icon className={`w-5 h-5 ${value.color}`} />
                        </div>
                        <h3 className="text-lg font-medium">{value.title}</h3>
                      </div>
                      <p className="text-muted-foreground leading-relaxed">
                        {value.description}
                      </p>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>

          {/* Why Choose Us */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Why Choose SiliconPin?</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {whyChooseUs.map((reason, index) => (
                  <div key={index} className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-green-600 rounded-full mt-2 shrink-0"></div>
                    <span className="text-muted-foreground">{reason}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Location & Contact */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl flex items-center">
                <Globe className="w-6 h-6 mr-2 text-blue-600" />
                Our Location
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h3 className="font-medium mb-2">Headquarters</h3>
                  <p className="text-muted-foreground">
                    121 Lalbari, GourBongo Road<br />
                    Habra, West Bengal 743271<br />
                    India
                  </p>
                </div>
                <div>
                  <h3 className="font-medium mb-2">Get in Touch</h3>
                  <div className="space-y-2 text-muted-foreground">
                    <p>Phone: +91-700-160-1485</p>
                    <p>Email: support@siliconpin.com</p>
                    <div className="flex gap-2 mt-4">
                      <Badge variant="outline">Founded 2021</Badge>
                      <Badge variant="outline">India Based</Badge>
                      <Badge variant="outline">24/7 Support</Badge>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* CTA Section */}
          <CustomSolutionCTA
            title="Ready to Get Started?"
            description="Join hundreds of businesses who trust SiliconPin for their hosting and development needs"
            buttonText="Get in Touch"
            buttonHref="/contact"
          />
        </div>
      </main>
      <Footer />
    </div>
  )
}