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 { Zap, HardDrive, TrendingUp, CheckCircle, DollarSign, Clock, Gauge, BarChart } from 'lucide-react';

const PerformanceUpgrades = () => {
  useEffect(() => {
    document.title = 'SSD Upgrade Corpus Christi | Bay Area Affiliates';

    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
    }

    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) {
      ogTitle.setAttribute('content', 'SSD Upgrade Corpus Christi—Boost SMB Performance');
    }

    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) {
      ogDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
    }

    const twitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (twitterTitle) {
      twitterTitle.setAttribute('content', 'Desktop Speed & Laptop Optimization Corpus Christi');
    }

    const twitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (twitterDescription) {
      twitterDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main role="main">
        {/* Hero Section */}
        <section className="bg-gradient-to-br from-purple-900 via-purple-800 to-purple-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-purple-700 text-white">
                <Zap className="w-4 h-4 mr-2" />
                PERFORMANCE SPECIALISTS
              </Badge>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                SSD Upgrades & Performance Optimization
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-purple-100">
                Transform slow devices into productivity powerhouses 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">
                  <HardDrive className="w-5 h-5 mr-2" />
                  Get Speed Upgrade
                </Button>
                <Button size="lg" variant="outline" className="text-purple-900 border-white hover:bg-white">
                  Free Speed Test
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Performance Benefits */}
        <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">Transform Your Business Performance</h2>

              <div className="grid md:grid-cols-2 gap-8 mb-12">
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                      <Gauge className="w-8 h-8 text-purple-600" />
                    </div>
                    <CardTitle>10x Faster Boot Times</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">SSD upgrades reduce boot times from 2-3 minutes to under 30 seconds, getting your team productive faster.</p>
                    <div className="bg-purple-50 p-4 rounded-lg">
                      <div className="flex justify-between text-sm mb-2">
                        <span>Traditional HDD</span>
                        <span className="text-red-600">2-3 minutes</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>SSD Upgrade</span>
                        <span className="text-green-600">15-30 seconds</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                      <TrendingUp className="w-8 h-8 text-purple-600" />
                    </div>
                    <CardTitle>Application Performance</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Programs load instantly, file transfers complete in seconds, and multitasking becomes seamless.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Excel/Word open in 2-3 seconds</li>
                      <li>• QuickBooks loads 5x faster</li>
                      <li>• File copies complete instantly</li>
                      <li>• No more "spinning wheel" delays</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                      <DollarSign className="w-8 h-8 text-purple-600" />
                    </div>
                    <CardTitle>ROI for SMBs</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Calculate the business impact of faster computers on your bottom line.</p>
                    <div className="bg-green-50 p-4 rounded-lg">
                      <div className="text-sm space-y-1">
                        <div><strong>5 employees</strong> × 30 min/day saved</div>
                        <div><strong>2.5 hours</strong> daily productivity gain</div>
                        <div><strong>$25/hour</strong> × 2.5 hours = <span className="text-green-600 font-bold">$62.50/day ROI</span></div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                      <CheckCircle className="w-8 h-8 text-purple-600" />
                    </div>
                    <CardTitle>Reliability Benefits</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">SSDs have no moving parts, making them more durable and reliable than traditional hard drives.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• 99.9% less likely to fail</li>
                      <li>• Shock and vibration resistant</li>
                      <li>• Lower power consumption</li>
                      <li>• Silent operation</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Upgrade Process */}
        <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">Professional Upgrade Process</h2>

              <div className="grid md:grid-cols-4 gap-8 mb-12">
                <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">
                      <BarChart className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">1. Speed Analysis</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Comprehensive performance testing to identify bottlenecks and optimal upgrade path.</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">
                      <HardDrive className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">2. SSD Selection</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Right-sized SSD recommendation based on your usage patterns and budget.</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">
                      <Zap className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">3. Data Migration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Seamless transfer of all files, programs, and settings to the new SSD.</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">
                      <CheckCircle className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">4. Optimization</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">System tuning and performance validation to maximize your upgrade investment.</p>
                  </CardContent>
                </Card>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-6 text-center">Performance Upgrade Options</h3>
                <div className="grid md:grid-cols-3 gap-6">
                  <div className="border-2 border-gray-200 p-6 rounded-lg">
                    <h4 className="font-bold text-lg mb-4 text-purple-600">Essential</h4>
                    <ul className="space-y-2 text-sm mb-4">
                      <li>• 256GB SSD upgrade</li>
                      <li>• Data migration</li>
                      <li>• Basic optimization</li>
                      <li>• 1-year warranty</li>
                    </ul>
                    <div className="text-center">
                      <div className="text-2xl font-bold">$199</div>
                      <div className="text-sm text-gray-600">per device</div>
                    </div>
                  </div>

                  <div className="border-2 border-purple-500 p-6 rounded-lg bg-purple-50">
                    <h4 className="font-bold text-lg mb-4 text-purple-600">Professional</h4>
                    <ul className="space-y-2 text-sm mb-4">
                      <li>• 512GB SSD upgrade</li>
                      <li>• Complete data migration</li>
                      <li>• Advanced optimization</li>
                      <li>• RAM upgrade (if needed)</li>
                      <li>• 2-year warranty</li>
                    </ul>
                    <div className="text-center">
                      <div className="text-2xl font-bold">$349</div>
                      <div className="text-sm text-gray-600">per device</div>
                    </div>
                  </div>

                  <div className="border-2 border-gray-200 p-6 rounded-lg">
                    <h4 className="font-bold text-lg mb-4 text-purple-600">Enterprise</h4>
                    <ul className="space-y-2 text-sm mb-4">
                      <li>• 1TB SSD upgrade</li>
                      <li>• Full system migration</li>
                      <li>• Premium optimization</li>
                      <li>• Memory & other upgrades</li>
                      <li>• 3-year warranty</li>
                      <li>• Priority support</li>
                    </ul>
                    <div className="text-center">
                      <div className="text-2xl font-bold">$549</div>
                      <div className="text-sm text-gray-600">per device</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Local Expertise */}
        <section className="py-16">
          <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 Performance Experts in the Coastal Bend</h2>
              <p className="text-xl text-gray-600 mb-8">
                Bay Area Affiliates has optimized thousands of computers for Corpus Christi businesses since 1999.
                We know which upgrades deliver the best ROI for your specific needs.
              </p>

              <div className="grid md:grid-cols-3 gap-8 mb-12">
                <div className="text-center">
                  <div className="text-4xl font-bold text-purple-600 mb-2">2,500+</div>
                  <div className="text-gray-600">Devices Upgraded</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-purple-600 mb-2">95%</div>
                  <div className="text-gray-600">Performance Improvement</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-purple-600 mb-2">48hr</div>
                  <div className="text-gray-600">Average Turnaround</div>
                </div>
              </div>

              <div className="bg-purple-50 p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-4">Serving All Coastal Bend SMBs</h3>
                <p className="text-gray-700 mb-6">
                  From single-device upgrades to fleet optimization, we provide on-site and in-shop services
                  throughout the Corpus Christi area.
                </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-purple-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">Stop Waiting for Slow Computers</h2>
              <p className="text-xl mb-8 text-purple-100">
                Transform your business productivity with professional SSD upgrades. Same-day service available
                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">
                  <Clock className="w-5 h-5 mr-2" />
                  Schedule Upgrade Today
                </Button>
                <Button size="lg" variant="outline" className="text-purple-900 border-white hover:bg-white">
                  Call (361) 765-8400
                </Button>
              </div>

              <p className="text-purple-200">
                Free speed analysis • Same-day service • Local pickup & delivery
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default PerformanceUpgrades;