import { useEffect } from 'react';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Monitor, HardDrive, Cpu, CheckCircle, DollarSign, Truck, Shield, Award } from 'lucide-react';

const DesktopHardware = () => {
  useEffect(() => {
    document.title = 'Desktop Hardware Corpus Christi | Bay Area Affiliates';
    
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
    }
    
    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) {
      ogTitle.setAttribute('content', 'Refurbished Desktops Corpus Christi—Quality Business Hardware');
    }
    
    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) {
      ogDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
    }
    
    const twitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (twitterTitle) {
      twitterTitle.setAttribute('content', 'Affordable PC Business Hardware Corpus Christi');
    }
    
    const twitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (twitterDescription) {
      twitterDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 text-white py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <Badge className="mb-4 bg-gray-700 text-white">
                <Monitor className="w-4 h-4 mr-2" />
                HARDWARE SPECIALISTS
              </Badge>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                Quality Desktop Hardware Solutions
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-gray-100">
                New & refurbished business desktops for Corpus Christi SMBs
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
                  <Truck className="w-5 h-5 mr-2" />
                  Browse Hardware
                </Button>
                <Button size="lg" variant="outline" className="text-gray-900 border-white hover:bg-white">
                  Custom Quote
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Hardware Options */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl font-bold text-center mb-12">Professional Desktop Solutions</h2>
              
              <div className="grid md:grid-cols-2 gap-8 mb-12">
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <Monitor className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Refurbished Business Desktops</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Enterprise-grade computers from major corporations, professionally refurbished with warranties.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Dell OptiPlex series</li>
                      <li>• HP EliteDesk models</li>
                      <li>• Lenovo ThinkCentre systems</li>
                      <li>• Intel Core i5/i7 processors</li>
                      <li>• SSD upgrades available</li>
                      <li>• Windows 11 Pro licensed</li>
                    </ul>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <Cpu className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>New Business Systems</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Latest business-class desktops configured specifically for your industry needs and workflows.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Custom specifications</li>
                      <li>• Latest processors (Intel/AMD)</li>
                      <li>• Professional graphics options</li>
                      <li>• Extended warranties available</li>
                      <li>• Industry-specific configurations</li>
                      <li>• 24/7 technical support</li>
                    </ul>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <DollarSign className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Cost-Effective Solutions</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Maximize your IT budget with quality hardware that delivers professional performance at affordable prices.</p>
                    <div className="bg-green-50 p-4 rounded-lg">
                      <h4 className="font-semibold text-green-700 mb-2">Savings Comparison</h4>
                      <div className="text-sm space-y-1">
                        <div><strong>New System:</strong> $1,200 - $2,000</div>
                        <div><strong>Refurbished:</strong> $400 - $800</div>
                        <div className="text-green-600 font-bold">Save 50-70% with same performance</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <Shield className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Warranty & Support</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">All systems include comprehensive warranties and local technical support for peace of mind.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• 12-month hardware warranty</li>
                      <li>• Free local pickup/delivery</li>
                      <li>• On-site service available</li>
                      <li>• Remote technical support</li>
                      <li>• Loaner systems during repairs</li>
                      <li>• Parts & labor included</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Hardware Categories */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl font-bold text-center mb-12">Desktop Categories for Every Business Need</h2>
              
              <div className="grid md:grid-cols-3 gap-8 mb-12">
                <div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
                  <h3 className="font-bold text-lg mb-4">Essential Business</h3>
                  <p className="text-gray-600 mb-4">Perfect for office productivity, email, and basic business applications.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• Intel Core i3 or AMD equivalent</li>
                    <li>• 8GB RAM (upgradeable)</li>
                    <li>• 256GB SSD</li>
                    <li>• Windows 11 Pro</li>
                    <li>• Office suite ready</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600">$399-$599</div>
                    <div className="text-sm text-gray-500">Starting price</div>
                  </div>
                </div>
                
                <div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
                  <h3 className="font-bold text-lg mb-4">Professional Plus</h3>
                  <p className="text-gray-600 mb-4">Enhanced performance for demanding business applications and multitasking.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• Intel Core i5 or AMD equivalent</li>
                    <li>• 16GB RAM</li>
                    <li>• 512GB SSD</li>
                    <li>• Dedicated graphics optional</li>
                    <li>• Multiple monitor support</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-orange-600">$649-$899</div>
                    <div className="text-sm text-gray-500">Starting price</div>
                  </div>
                </div>
                
                <div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
                  <h3 className="font-bold text-lg mb-4">Workstation Class</h3>
                  <p className="text-gray-600 mb-4">High-performance systems for CAD, design, development, and intensive applications.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• Intel Core i7/Xeon processors</li>
                    <li>• 32GB+ RAM</li>
                    <li>• 1TB+ SSD</li>
                    <li>• Professional graphics cards</li>
                    <li>• ECC memory options</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-purple-600">$999-$1,599</div>
                    <div className="text-sm text-gray-500">Starting price</div>
                  </div>
                </div>
              </div>
              
              <div className="bg-white p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-6 text-center">Why Choose Refurbished Business Hardware?</h3>
                <div className="grid md:grid-cols-2 gap-8">
                  <div>
                    <h4 className="font-semibold mb-4 text-blue-600">Quality Assurance</h4>
                    <ul className="space-y-3 text-gray-700">
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Enterprise-grade components built to last
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Professional refurbishment process
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Stress tested before delivery
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Clean OS installation
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-4 text-blue-600">Business Benefits</h4>
                    <ul className="space-y-3 text-gray-700">
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Identical performance to new systems
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Standard business software compatibility
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Environmentally responsible choice
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Bulk pricing for multiple units
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Installation & Support */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl font-bold text-center mb-12">Complete Installation & Setup Service</h2>
              
              <div className="grid md:grid-cols-4 gap-8">
                <Card className="text-center">
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <CheckCircle className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">1. Selection</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Assess your needs and recommend the optimal hardware configuration for your business.</p>
                  </CardContent>
                </Card>
                
                <Card className="text-center">
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Cpu className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">2. Configuration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Install and configure software, security settings, and business applications.</p>
                  </CardContent>
                </Card>
                
                <Card className="text-center">
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Truck className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">3. Deployment</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">On-site installation, network integration, and user account setup.</p>
                  </CardContent>
                </Card>
                
                <Card className="text-center">
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Shield className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">4. Support</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Ongoing maintenance, updates, and technical support throughout the warranty period.</p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Local Expertise */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-3xl font-bold mb-8">Trusted Hardware Supplier for Coastal Bend SMBs</h2>
              <p className="text-xl text-gray-600 mb-8">
                Bay Area Affiliates has supplied and serviced business computers throughout the Corpus Christi area since 1999. 
                We understand local business needs and provide personalized hardware solutions.
              </p>
              
              <div className="grid md:grid-cols-3 gap-8 mb-12">
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">5,000+</div>
                  <div className="text-gray-600">Systems Deployed</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">98%</div>
                  <div className="text-gray-600">Client Satisfaction</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">25+</div>
                  <div className="text-gray-600">Years Experience</div>
                </div>
              </div>
              
              <div className="bg-white p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-4">Local Hardware Support Throughout the Coastal Bend</h3>
                <p className="text-gray-700 mb-6">
                  From single desktop replacements to complete office refreshes, we provide comprehensive 
                  hardware solutions with local pickup, delivery, and installation services.
                </p>
                <div className="flex flex-wrap justify-center gap-4">
                  <Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
                  <Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
                  <Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
                  <Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
                  <Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
                  <Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-gray-900 text-white">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-3xl font-bold mb-6">Upgrade Your Business Hardware Today</h2>
              <p className="text-xl mb-8 text-gray-100">
                Get quality business desktops with professional installation and local support. 
                Free consultation and custom quotes for Corpus Christi area businesses.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
                <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
                  <Award className="w-5 h-5 mr-2" />
                  Get Hardware Quote
                </Button>
                <Button size="lg" variant="outline" className="text-gray-900 border-white hover:bg-white">
                  Call (361) 765-8400
                </Button>
              </div>
              
              <p className="text-gray-200">
                Free consultation • Local delivery • Professional installation • 12-month warranty
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default DesktopHardware;