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 { Clock, Shield, Zap, CheckCircle, AlertTriangle } from 'lucide-react';

const Windows11Transition = () => {
  useEffect(() => {
    document.title = 'Windows 11 Upgrade Corpus Christi | Bay Area Affiliates';
    
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
    }
    
    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) {
      ogTitle.setAttribute('content', 'Windows 11 Upgrade: Secure Your Business Before Deadline');
    }
    
    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) {
      ogDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
    }
    
    const twitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (twitterTitle) {
      twitterTitle.setAttribute('content', 'Corpus Christi Windows 11 Upgrade—Urgent for Business Security');
    }
    
    const twitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (twitterDescription) {
      twitterDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-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-red-600 text-white">
                <AlertTriangle className="w-4 h-4 mr-2" />
                URGENT: DEADLINE APPROACHING
              </Badge>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                Upgrade to Windows 11 Before the Deadline
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-blue-100">
                Windows 10 support ends October 14, 2025. Secure your business now.
              </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">
                  <Clock className="w-5 h-5 mr-2" />
                  Schedule Upgrade Today
                </Button>
                <Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
                  Free Assessment
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Critical Information */}
        <section className="py-16 bg-red-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="bg-red-100 border-l-4 border-red-500 p-6 mb-8">
                <div className="flex items-center mb-4">
                  <AlertTriangle className="w-8 h-8 text-red-600 mr-3" />
                  <h2 className="text-2xl font-bold text-red-800">Windows 10 Support Ends Oct 14, 2025</h2>
                </div>
                <p className="text-red-700 text-lg">
                  After this date, Microsoft will no longer provide security updates, bug fixes, or technical support for Windows 10. 
                  Your business will be vulnerable to security threats and compliance issues.
                </p>
              </div>
              
              <div className="grid md:grid-cols-2 gap-8">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-red-600">Risks of Staying on Windows 10</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex items-center text-red-700">
                      <AlertTriangle className="w-5 h-5 mr-2" />
                      Security vulnerabilities
                    </div>
                    <div className="flex items-center text-red-700">
                      <AlertTriangle className="w-5 h-5 mr-2" />
                      Compliance violations
                    </div>
                    <div className="flex items-center text-red-700">
                      <AlertTriangle className="w-5 h-5 mr-2" />
                      Software incompatibilities
                    </div>
                    <div className="flex items-center text-red-700">
                      <AlertTriangle className="w-5 h-5 mr-2" />
                      No technical support
                    </div>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <CardTitle className="text-green-600">Benefits of Windows 11</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex items-center text-green-700">
                      <CheckCircle className="w-5 h-5 mr-2" />
                      Enhanced security features
                    </div>
                    <div className="flex items-center text-green-700">
                      <CheckCircle className="w-5 h-5 mr-2" />
                      Better performance
                    </div>
                    <div className="flex items-center text-green-700">
                      <CheckCircle className="w-5 h-5 mr-2" />
                      Modern user interface
                    </div>
                    <div className="flex items-center text-green-700">
                      <CheckCircle className="w-5 h-5 mr-2" />
                      Continued support through 2031
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Migration Process */}
        <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">Seamless Migration for Local SMBs</h2>
              
              <div className="grid md:grid-cols-3 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">
                      <CheckCircle className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>1. Assessment</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p>We evaluate your current hardware and software for Windows 11 compatibility.</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>2. Planning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p>Custom migration plan tailored to minimize business disruption.</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>3. Migration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p>Professional upgrade with data backup and post-migration support.</p>
                  </CardContent>
                </Card>
              </div>
              
              <div className="bg-blue-50 p-8 rounded-lg">
                <h3 className="text-2xl font-bold mb-4">Enhanced Security & Features</h3>
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-2">Security Improvements</h4>
                    <ul className="space-y-2 text-gray-700">
                      <li>• TPM 2.0 chip requirement</li>
                      <li>• Secure Boot enabled</li>
                      <li>• Windows Hello biometric authentication</li>
                      <li>• Microsoft Defender improvements</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Performance Features</h4>
                    <ul className="space-y-2 text-gray-700">
                      <li>• Faster boot times</li>
                      <li>• Better memory management</li>
                      <li>• Improved battery life</li>
                      <li>• Enhanced productivity tools</li>
                    </ul>
                  </div>
                </div>
              </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 by Corpus Christi Businesses for 25+ Years</h2>
              <p className="text-xl text-gray-600 mb-8">
                Bay Area Affiliates has been helping local businesses navigate technology transitions since 1999. 
                We understand the unique needs of Coastal Bend SMBs.
              </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">25+</div>
                  <div className="text-gray-600">Years Experience</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">500+</div>
                  <div className="text-gray-600">Businesses Served</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">24/7</div>
                  <div className="text-gray-600">Local Support</div>
                </div>
              </div>
              
              <div className="bg-white p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
                <div className="flex flex-wrap justify-center gap-4">
                  <Badge variant="secondary">Corpus Christi</Badge>
                  <Badge variant="secondary">Portland</Badge>
                  <Badge variant="secondary">Rockport</Badge>
                  <Badge variant="secondary">Aransas Pass</Badge>
                  <Badge variant="secondary">Kingsville</Badge>
                  <Badge variant="secondary">Port Aransas</Badge>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-blue-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">Don't Wait Until It's Too Late</h2>
              <p className="text-xl mb-8 text-blue-100">
                Schedule your Windows 11 upgrade assessment today. Protect your business before the October 14, 2025 deadline.
              </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 Now
                </Button>
                <Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
                  Call (361) 765-8400
                </Button>
              </div>
              
              <p className="text-blue-200">
                Free consultation • Same-day response • Local experts
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Windows11Transition;