import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import ScrollToTop from "@/components/ScrollToTop";
import { Eye, Keyboard, MousePointer, Volume2, Smartphone, Users } from "lucide-react";

const Accessibility = () => {
  const lastUpdated = "September 11, 2025";

  const features = [
    {
      icon: Eye,
      title: "Visual Accessibility",
      description: "High contrast colors, readable fonts, and scalable text for better visibility."
    },
    {
      icon: Keyboard,
      title: "Keyboard Navigation",
      description: "Full keyboard navigation support for users who cannot use a mouse."
    },
    {
      icon: MousePointer,
      title: "Screen Reader Support",
      description: "Structured content and proper labeling for screen reader compatibility."
    },
    {
      icon: Volume2,
      title: "Audio Alternatives",
      description: "Text alternatives for audio content and visual indicators for sound cues."
    },
    {
      icon: Smartphone,
      title: "Mobile Accessibility",
      description: "Responsive design that works across all devices and screen sizes."
    },
    {
      icon: Users,
      title: "Inclusive Design",
      description: "Designed with diverse abilities and needs in mind from the ground up."
    }
  ];

  const guidelines = [
    {
      title: "Web Content Accessibility Guidelines (WCAG) 2.1",
      level: "AA Compliance",
      description: "We strive to meet WCAG 2.1 Level AA standards for web accessibility."
    },
    {
      title: "Section 508 Compliance",
      level: "Federal Standards",
      description: "Following federal accessibility requirements for digital content."
    },
    {
      title: "Americans with Disabilities Act (ADA)",
      level: "Legal Compliance",
      description: "Committed to providing equal access as required by the ADA."
    }
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Banner */}
        <section className="relative py-24 bg-forest text-cream">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h1 className="text-display-xl font-display font-bold mb-6">
                Accessibility Statement
              </h1>
              <p className="text-body-lg text-cream/90 max-w-2xl mx-auto">
                We are committed to ensuring our website and services are accessible to everyone, regardless of ability or technology.
              </p>
              <p className="text-sm text-cream/70 mt-4">
                Last updated: {lastUpdated}
              </p>
            </div>
          </div>
        </section>

        {/* Commitment Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
                Our Commitment to Accessibility
              </h2>
              <p className="text-body-lg text-sage leading-relaxed mb-8">
                Greg Knopp, P.C. is dedicated to providing equal access to our digital services and ensuring that our website is accessible to people with disabilities. We believe that everyone deserves access to professional financial services, regardless of their abilities or the assistive technologies they use.
              </p>
              <p className="text-body-lg text-sage leading-relaxed">
                We continually work to improve the accessibility of our website and services, implementing best practices and staying current with accessibility standards and guidelines.
              </p>
            </div>
          </div>
        </section>

        {/* Accessibility Features */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
                Accessibility Features
              </h2>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                {features.map((feature, index) => (
                  <div key={index} className="bg-card rounded-2xl p-6 card-elevation">
                    <div className="w-12 h-12 bg-brass/20 rounded-xl flex items-center justify-center mb-4">
                      <feature.icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                    </div>
                    <h3 className="text-display-md font-display font-medium text-forest mb-3">
                      {feature.title}
                    </h3>
                    <p className="text-sage leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Standards and Guidelines */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
                Standards and Guidelines
              </h2>
              
              <div className="space-y-6">
                {guidelines.map((guideline, index) => (
                  <div key={index} className="bg-card rounded-2xl p-6 card-elevation">
                    <div className="flex flex-col md:flex-row md:items-center gap-4">
                      <div className="flex-1">
                        <h3 className="text-display-md font-display font-medium text-forest mb-2">
                          {guideline.title}
                        </h3>
                        <p className="text-sage leading-relaxed">
                          {guideline.description}
                        </p>
                      </div>
                      <div className="bg-brass/20 text-brass px-4 py-2 rounded-lg text-sm font-medium">
                        {guideline.level}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Detailed Information */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="bg-card rounded-2xl p-8 card-elevation space-y-8">
                
                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Specific Accessibility Measures
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <ul className="list-disc pl-6 space-y-2">
                      <li><strong>Alternative Text:</strong> All images include descriptive alt text for screen readers</li>
                      <li><strong>Keyboard Navigation:</strong> All interactive elements are accessible via keyboard</li>
                      <li><strong>Focus Indicators:</strong> Clear visual focus indicators for keyboard navigation</li>
                      <li><strong>Color Contrast:</strong> High contrast ratios that meet WCAG AA standards</li>
                      <li><strong>Text Scaling:</strong> Content remains readable when text is enlarged up to 200%</li>
                      <li><strong>Headings Structure:</strong> Logical heading hierarchy for screen reader navigation</li>
                      <li><strong>Form Labels:</strong> Clear, descriptive labels for all form elements</li>
                      <li><strong>Skip Links:</strong> Navigation shortcuts for screen reader users</li>
                    </ul>
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Browser and Assistive Technology Compatibility
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <p>Our website is designed to be compatible with:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li><strong>Screen Readers:</strong> NVDA, JAWS, VoiceOver, and other popular screen readers</li>
                      <li><strong>Browsers:</strong> Current versions of Chrome, Firefox, Safari, and Edge</li>
                      <li><strong>Operating Systems:</strong> Windows, macOS, iOS, and Android</li>
                      <li><strong>Assistive Devices:</strong> Voice recognition software, switch navigation devices</li>
                    </ul>
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Known Limitations
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <p>
                      We are continuously working to improve accessibility across our website. If you encounter any accessibility barriers, please let us know so we can address them promptly.
                    </p>
                    <p>
                      Some third-party content or embedded tools may have their own accessibility limitations. We work with vendors to ensure the best possible accessibility for all integrated services.
                    </p>
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Alternative Access Methods
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <p>
                      If you have difficulty accessing any content on our website, we offer alternative ways to obtain the information:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>Phone consultations: (361) 883-8999</li>
                      <li>Email communication: info@gregknopp.com</li>
                      <li>In-person meetings at our office</li>
                      <li>Document delivery in alternative formats</li>
                      <li>Assistance with online forms and submissions</li>
                    </ul>
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Ongoing Efforts
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <p>
                      We are committed to continuous improvement and regularly:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>Conduct accessibility audits and testing</li>
                      <li>Update our website to address identified issues</li>
                      <li>Train our team on accessibility best practices</li>
                      <li>Stay current with evolving accessibility standards</li>
                      <li>Seek feedback from users with disabilities</li>
                    </ul>
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-4">
                    Feedback and Contact Information
                  </h2>
                  <div className="prose prose-lg text-sage space-y-4">
                    <p>
                      Your feedback helps us improve accessibility for everyone. If you:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>Experience difficulty accessing any content</li>
                      <li>Have suggestions for improvement</li>
                      <li>Need content in an alternative format</li>
                      <li>Require assistance with our services</li>
                    </ul>
                    <p>Please contact us:</p>
                    <div className="bg-muted/50 rounded-lg p-6 not-prose">
                      <p className="font-medium text-forest mb-2">Greg Knopp, P.C.</p>
                      <p className="text-sage">Corpus Christi, TX</p>
                      <p className="text-sage">Phone: (361) 883-8999</p>
                      <p className="text-sage">Email: info@gregknopp.com</p>
                      <p className="text-sage mt-2 text-sm">
                        <em>We aim to respond to accessibility feedback within 48 hours.</em>
                      </p>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default Accessibility;
