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 { HardDrive, Cloud, Shield, CheckCircle, Database, Server, Lock, Archive } from 'lucide-react';

const NetworkAttachedStorage = () => {
  useEffect(() => {
    document.title = 'NAS Setup Corpus Christi | Bay Area Affiliates';

    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
    }

    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) {
      ogTitle.setAttribute('content', 'Network Attached Storage Setup Corpus Christi—Business Data Solutions');
    }

    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) {
      ogDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
    }

    const twitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (twitterTitle) {
      twitterTitle.setAttribute('content', 'NAS Backup Storage SMB Corpus Christi');
    }

    const twitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (twitterDescription) {
      twitterDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main role="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-blue-700 text-white">
                <Database className="w-4 h-4 mr-2" />
                DATA STORAGE EXPERTS
              </Badge>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                Network Attached Storage Solutions
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-blue-100">
                Secure, scalable backup and data storage 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 NAS Setup
                </Button>
                <Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
                  Data Recovery Help
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* NAS 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">Protect Your Business Data with Professional NAS</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">
                      <Archive className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Automated Backup Solutions</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Never lose business data again with automated, scheduled backups of all critical files and systems.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Real-time file synchronization</li>
                      <li>• Scheduled system backups</li>
                      <li>• Version control and history</li>
                      <li>• Email backup notifications</li>
                      <li>• QuickBooks data protection</li>
                      <li>• Cross-platform compatibility</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <Server className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Centralized File Storage</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Organize all business files in one secure, accessible location with user permissions and collaboration features.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Central document repository</li>
                      <li>• User access controls</li>
                      <li>• Remote file access</li>
                      <li>• Mobile device sync</li>
                      <li>• Team collaboration tools</li>
                      <li>• File sharing with clients</li>
                    </ul>
                  </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>Enterprise-Grade Security</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Military-grade encryption and security features keep your sensitive business data protected.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• AES 256-bit encryption</li>
                      <li>• Two-factor authentication</li>
                      <li>• RAID redundancy options</li>
                      <li>• Antivirus scanning</li>
                      <li>• Activity logging</li>
                      <li>• Network security integration</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                      <Cloud className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle>Business Continuity</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-4">Ensure your business keeps running even during hardware failures, disasters, or data corruption.</p>
                    <ul className="space-y-2 text-sm text-gray-700">
                      <li>• Instant file recovery</li>
                      <li>• Disaster recovery planning</li>
                      <li>• Hot-swap drive replacement</li>
                      <li>• Off-site backup replication</li>
                      <li>• 24/7 monitoring alerts</li>
                      <li>• Business impact minimization</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* NAS Solutions */}
        <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">NAS Solutions for Every Business Size</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 NAS</h3>
                  <p className="text-gray-600 mb-4">Perfect for small businesses with basic backup and file sharing needs.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• 2-bay NAS system</li>
                    <li>• 4TB total storage (RAID 1)</li>
                    <li>• Automated daily backups</li>
                    <li>• Mobile access apps</li>
                    <li>• Basic user management</li>
                    <li>• 12-month warranty</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600">$899</div>
                    <div className="text-sm text-gray-500">Complete setup</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 NAS</h3>
                  <p className="text-gray-600 mb-4">Advanced features for growing businesses with critical data protection needs.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• 4-bay NAS system</li>
                    <li>• 12TB total storage (RAID 5)</li>
                    <li>• Continuous data protection</li>
                    <li>• Advanced user permissions</li>
                    <li>• Cloud sync integration</li>
                    <li>• 24-month warranty</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-orange-600">$1,899</div>
                    <div className="text-sm text-gray-500">Complete setup</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">Enterprise NAS</h3>
                  <p className="text-gray-600 mb-4">High-performance storage for businesses with demanding data requirements.</p>
                  <ul className="space-y-2 text-sm text-gray-700 mb-4">
                    <li>• 8-bay NAS system</li>
                    <li>• 32TB+ storage (RAID 6)</li>
                    <li>• Real-time replication</li>
                    <li>• Hot-swappable drives</li>
                    <li>• 10GbE network connectivity</li>
                    <li>• 36-month warranty</li>
                  </ul>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-purple-600">$3,999+</div>
                    <div className="text-sm text-gray-500">Custom config</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 Businesses Choose NAS Over Cloud Storage</h3>
                <div className="grid md:grid-cols-2 gap-8">
                  <div>
                    <h4 className="font-semibold mb-4 text-blue-600">Cost Advantages</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" />
                        No monthly cloud storage fees
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        One-time investment vs ongoing costs
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Unlimited storage capacity
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        No bandwidth limitations
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-4 text-blue-600">Control & Performance</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" />
                        Complete data control
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Faster local network access
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Custom security policies
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
                        Works without internet
                      </li>
                    </ul>
                  </div>
                </div>

                <div className="mt-6 bg-blue-50 p-6 rounded-lg">
                  <h4 className="font-semibold text-blue-700 mb-3">ROI Calculation Example</h4>
                  <div className="grid md:grid-cols-2 gap-6 text-sm">
                    <div>
                      <div className="font-semibold mb-2">Cloud Storage (5 years):</div>
                      <div>1TB × $10/month × 60 months = <span className="text-red-600 font-bold">$3,600</span></div>
                    </div>
                    <div>
                      <div className="font-semibold mb-2">NAS Solution (5 years):</div>
                      <div>Professional NAS setup = <span className="text-green-600 font-bold">$1,899</span></div>
                      <div className="text-green-600 font-bold mt-2">Save $1,700+ over 5 years</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Implementation 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">Professional NAS Installation Process</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. Assessment</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Analyze your data storage needs, backup requirements, and growth projections.</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">
                      <Database className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">2. Configuration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Set up NAS hardware, configure RAID, and install necessary software 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">
                      <Archive className="w-8 h-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-lg">3. Migration</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Transfer existing data safely and set up automated backup schedules for all devices.</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. Training</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Train your team on accessing files, managing backups, and recovery procedures.</p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Data Recovery Services */}
        <section className="py-16 bg-red-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl font-bold text-center mb-8">Emergency Data Recovery Services</h2>
              <div className="text-center mb-8">
                <p className="text-xl text-gray-600">
                  Already experienced data loss? We provide emergency recovery services while setting up
                  your new NAS to prevent future disasters.
                </p>
              </div>

              <div className="grid md:grid-cols-2 gap-8">
                <div className="bg-white p-6 rounded-lg shadow">
                  <h3 className="text-xl font-bold mb-4 text-red-600">What We Recover</h3>
                  <ul className="space-y-2 text-gray-700">
                    <li>• Failed hard drives and SSDs</li>
                    <li>• Corrupted QuickBooks files</li>
                    <li>• Deleted business documents</li>
                    <li>• Email archives (Outlook/Exchange)</li>
                    <li>• Database files (SQL Server, Access)</li>
                    <li>• Photos and multimedia files</li>
                  </ul>
                </div>

                <div className="bg-white p-6 rounded-lg shadow">
                  <h3 className="text-xl font-bold mb-4 text-red-600">Recovery Process</h3>
                  <ul className="space-y-2 text-gray-700">
                    <li>• Free evaluation and diagnosis</li>
                    <li>• No recovery, no charge policy</li>
                    <li>• Clean room facility available</li>
                    <li>• Emergency 24-hour service</li>
                    <li>• Secure data handling protocols</li>
                    <li>• Backup setup to prevent recurrence</li>
                  </ul>
                </div>
              </div>

              <div className="mt-8 text-center">
                <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white">
                  <Lock className="w-5 h-5 mr-2" />
                  Emergency Data Recovery: (361) 765-8400
                </Button>
              </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">Data Storage Specialists Serving the Coastal Bend</h2>
              <p className="text-xl text-gray-600 mb-8">
                Bay Area Affiliates has protected business data for Corpus Christi companies since 1999.
                We understand the critical importance of data security and business continuity.
              </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">250+</div>
                  <div className="text-gray-600">NAS Systems Deployed</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">99.9%</div>
                  <div className="text-gray-600">Data Recovery Success</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-blue-600 mb-2">Zero</div>
                  <div className="text-gray-600">Data Loss with Our NAS</div>
                </div>
              </div>

              <div className="bg-blue-50 p-8 rounded-lg shadow-lg">
                <h3 className="text-2xl font-bold mb-4">Protecting Business Data Throughout the Coastal Bend</h3>
                <p className="text-gray-700 mb-6">
                  From small professional practices to growing enterprises, we provide comprehensive
                  data storage and backup solutions with local support and maintenance.
                </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-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 Risk Your Business Data</h2>
              <p className="text-xl mb-8 text-blue-100">
                Get professional NAS installation and data protection from Corpus Christi's trusted IT experts.
                Protect your business before disaster strikes.
              </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">
                  <Database className="w-5 h-5 mr-2" />
                  Schedule NAS Installation
                </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 • Professional installation • 24/7 monitoring • Local support
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default NetworkAttachedStorage;