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 { Printer, Scan, Network, CheckCircle, Wrench, Clock, Settings, Users } from 'lucide-react';

const PrinterScannerInstallation = () => {
  useEffect(() => {
    document.title = 'Printer Install Corpus Christi | Bay Area Affiliates';
    
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
    }
    
    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) {
      ogTitle.setAttribute('content', 'Printer Installation Corpus Christi—Same-Day Setup');
    }
    
    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) {
      ogDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
    }
    
    const twitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (twitterTitle) {
      twitterTitle.setAttribute('content', 'Scanner Setup & Office Device Support Corpus Christi');
    }
    
    const twitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (twitterDescription) {
      twitterDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="bg-gradient-to-br from-indigo-900 via-indigo-800 to-indigo-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-indigo-700 text-white">
                <Printer className="w-4 h-4 mr-2" />
                DEVICE SETUP EXPERTS
              </Badge>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                Professional Printer & Scanner Installation
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-indigo-100">
                Hassle-free office device setup for Corpus Christi businesses
              </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">
                  <Settings className="w-5 h-5 mr-2" />
                  Schedule Installation
                </Button>
                <Button size="lg" variant="outline" className="text-indigo-900 border-white hover:bg-white">
                  Device Troubleshooting
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Service 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">End Office Device Frustrations</h2>
              
              <div className="grid md:grid-cols-2 gap-8 mb-12">
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                      <Printer className="w-8 h-8 text-indigo-600" />
                    </div>
                    <CardTitle>Complete Printer Setup</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">From basic inkjet to enterprise multifunction devices, we handle every aspect of printer installation and optimization.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Network printer configuration</li>
                      <li>• Driver installation & updates</li>
                      <li>• Print queue optimization</li>
                      <li>• Mobile printing setup</li>
                      <li>• Wireless connectivity</li>
                    </ul>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                      <Scan className="w-8 h-8 text-indigo-600" />
                    </div>
                    <CardTitle>Scanner Integration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Seamless scanner setup with document management integration for efficient digital workflows.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Flatbed & document scanner setup</li>
                      <li>• OCR software configuration</li>
                      <li>• Cloud storage integration</li>
                      <li>• Batch scanning automation</li>
                      <li>• Multi-format output setup</li>
                    </ul>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                      <Network className="w-8 h-8 text-indigo-600" />
                    </div>
                    <CardTitle>Network Configuration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Professional network setup ensures all devices work seamlessly across your office infrastructure.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Shared printer access</li>
                      <li>• Security configuration</li>
                      <li>• User permission setup</li>
                      <li>• Print server integration</li>
                      <li>• Remote printing capability</li>
                    </ul>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                      <Wrench className="w-8 h-8 text-indigo-600" />
                    </div>
                    <CardTitle>Ongoing Support</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Comprehensive troubleshooting and maintenance to keep your devices running smoothly.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Paper jam resolution</li>
                      <li>• Print quality optimization</li>
                      <li>• Driver conflict resolution</li>
                      <li>• Toner/ink replacement</li>
                      <li>• Preventive maintenance</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Installation 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 Installation 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">
                      <CheckCircle className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">1. Assessment</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Evaluate your office layout, network setup, and device requirements.</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">
                      <Settings className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">2. Configuration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Install drivers, configure network settings, and optimize device performance.</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">
                      <Users className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">3. User Setup</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Configure access for all users and train staff on device operation.</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. Testing</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Comprehensive testing and documentation of all functions and features.</p>
                  </CardContent>
                </Card>
              </div>
              
              <div className="bg-white p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-6 text-center">Common Device Issues We Solve</h3>
                <div className="grid md:grid-cols-2 gap-8">
                  <div>
                    <h4 className="font-semibold mb-4 text-indigo-600">Printer Problems</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" />
                        Won't connect to network
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Poor print quality
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Driver conflicts
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Frequent paper jams
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Mobile printing issues
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-4 text-indigo-600">Scanner Challenges</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" />
                        Software not recognizing device
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Poor scan quality
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Document feeder problems
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        File format issues
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Network scanning setup
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Device Compatibility */}
        <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">We Support All Major Brands</h2>
              
              <div className="grid md:grid-cols-3 gap-8 mb-12">
                <div className="bg-gray-50 p-6 rounded-lg text-center">
                  <h3 className="font-bold text-lg mb-4">Printer Brands</h3>
                  <div className="space-y-2 text-gray-700">
                    <div>HP • Canon • Epson</div>
                    <div>Brother • Lexmark • Xerox</div>
                    <div>Samsung • Ricoh • Dell</div>
                    <div>Kyocera • Sharp • Konica</div>
                  </div>
                </div>
                
                <div className="bg-gray-50 p-6 rounded-lg text-center">
                  <h3 className="font-bold text-lg mb-4">Scanner Types</h3>
                  <div className="space-y-2 text-gray-700">
                    <div>Flatbed Scanners</div>
                    <div>Document Feeders</div>
                    <div>All-in-One Devices</div>
                    <div>High-Speed Scanners</div>
                    <div>Photo Scanners</div>
                  </div>
                </div>
                
                <div className="bg-gray-50 p-6 rounded-lg text-center">
                  <h3 className="font-bold text-lg mb-4">Connection Types</h3>
                  <div className="space-y-2 text-gray-700">
                    <div>USB • Ethernet</div>
                    <div>Wi-Fi • Bluetooth</div>
                    <div>Network Shared</div>
                    <div>Cloud Printing</div>
                    <div>Mobile Apps</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Local Expertise */}
        <section className="py-16 bg-indigo-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">Corpus Christi's Office Device Specialists</h2>
              <p className="text-xl text-gray-600 mb-8">
                Bay Area Affiliates has been solving office equipment challenges for Coastal Bend businesses since 1999. 
                We know the unique needs of local SMBs and provide same-day service.
              </p>
              
              <div className="grid md:grid-cols-3 gap-8 mb-12">
                <div className="text-center">
                  <div className="text-4xl font-bold text-indigo-600 mb-2">1,200+</div>
                  <div className="text-gray-600">Devices Installed</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-indigo-600 mb-2">Same-Day</div>
                  <div className="text-gray-600">Service Available</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-indigo-600 mb-2">24/7</div>
                  <div className="text-gray-600">Technical 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>
                <p className="text-gray-700 mb-6">
                  On-site installation and support for businesses throughout the Corpus Christi area. 
                  We bring the expertise to your location.
                </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-indigo-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 Wrestling with Office Devices</h2>
              <p className="text-xl mb-8 text-indigo-100">
                Get professional printer and scanner installation from Corpus Christi's trusted IT experts. 
                Same-day service available for urgent business needs.
              </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 Installation
                </Button>
                <Button size="lg" variant="outline" className="text-indigo-900 border-white hover:bg-white">
                  Call (361) 765-8400
                </Button>
              </div>
              
              <p className="text-indigo-200">
                Free consultation • Same-day service • Local on-site support
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default PrinterScannerInstallation;