import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Mail, FileText, Calendar, Users } from "lucide-react";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

const EmployeeNotice = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      
      {/* Hero Section */}
      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
        <div 
          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
          style={{ transform: `translateY(${scrollY * 0.1}px)` }}
        >
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
              Employee <span className="text-glow">Notices</span>
            </h1>
            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
              Important information and updates for NQS Inspection Ltd employees
            </p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Memo Header */}
          <div className="text-center mb-12">
            <h2 className="text-6xl font-bold text-gray-900 mb-8" style={{ fontFamily: 'serif' }}>
              MEMO
            </h2>
            <div className="bg-white rounded-lg shadow-lg p-8 border border-gray-200">
              <div className="text-left space-y-4">
                <div className="text-lg text-gray-900">
                  <strong className="text-gray-900">TO:</strong> <span className="text-gray-700">Employees</span>
                </div>
                <div className="text-lg text-gray-900">
                  <strong className="text-gray-900">SUBJECT:</strong> <em className="text-gray-700">FORM 1095-C; EMPLOYER-PROVIDED HEALTH INSURANCE OFFER AND COVERAGE</em>
                </div>
              </div>
            </div>
          </div>

          {/* Memo Content */}
          <Card className="mb-8 bg-white border-2 border-primary/20 shadow-lg">
            <CardContent className="p-8">
              <div className="prose prose-lg max-w-none">
                <p className="text-gray-900 leading-relaxed mb-6">
                  Due to the <em className="text-primary font-semibold">Employer Reporting and Improvement Act</em> and the <em className="text-primary font-semibold">Paperwork Burden Reduction Act of 2024</em>, 
                  we are informing you of upcoming changes to how the Form 1095-C will be distributed.
                </p>

                <h3 className="text-2xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">What is the 1095-C?</h3>
                <p className="text-gray-900 leading-relaxed mb-6">
                  Form 1095-C provides information about the health insurance coverage we offered you during the year. 
                  You are not required to file this statement with your personal taxes.
                </p>

                <h3 className="text-2xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">How to Request your Form 1095-C:</h3>
                <div className="bg-gray-50 rounded-lg p-6 mb-6">
                  <p className="text-gray-700 leading-relaxed mb-4">
                    If you want to request a copy of the 1095-C form, please email your request to:
                  </p>
                  <div className="flex items-center space-x-2 mb-4">
                    <Mail className="w-5 h-5 text-primary" />
                    <span className="font-semibold text-lg text-primary bg-primary/10 px-3 py-2 rounded-lg border border-primary/20">LIZA@GREGKNOPPCPA.COM</span>
                  </div>
                </div>

                <p className="text-gray-900 leading-relaxed mb-4">
                  In your request, please indicate how you want the 1095-C copy provided to you:
                </p>
                <ol className="list-decimal list-inside space-y-2 text-gray-900 mb-6">
                  <li>Please provide a valid email address; or</li>
                  <li>Please provide your current mailing address.</li>
                </ol>

                <div className="bg-primary/5 border-l-4 border-primary p-4 mb-6">
                  <p className="text-gray-900">
                    <strong className="text-primary">Note:</strong> A copy of the Form 1095-C will be provided by IRS due date or 30 days from your written request, whichever is later.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Additional Information */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
              <CardContent className="p-6">
                <FileText className="w-8 h-8 text-primary mx-auto mb-3" />
                <h4 className="font-semibold text-gray-900 mb-2">Form 1095-C</h4>
                <p className="text-sm text-gray-700">Health insurance coverage information</p>
              </CardContent>
            </Card>
            
            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
              <CardContent className="p-6">
                <Calendar className="w-8 h-8 text-primary mx-auto mb-3" />
                <h4 className="font-semibold text-gray-900 mb-2">Annual Distribution</h4>
                <p className="text-sm text-gray-700">Provided by IRS due date</p>
              </CardContent>
            </Card>
            
            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
              <CardContent className="p-6">
                <Users className="w-8 h-8 text-primary mx-auto mb-3" />
                <h4 className="font-semibold text-gray-900 mb-2">All Employees</h4>
                <p className="text-sm text-gray-700">Covered under company health plan</p>
              </CardContent>
            </Card>
          </div>

          {/* Contact Information */}
          <Card className="bg-white border-2 border-primary/20 shadow-lg">
            <CardContent className="p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">Need Help?</h3>
              <p className="text-gray-900 mb-4">
                If you have any questions about Form 1095-C or need assistance with your request, 
                please contact our HR department or reach out to the email address provided above.
              </p>
              <div className="flex flex-wrap gap-2">
                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                  HR Support Available
                </Badge>
                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                  Quick Response Time
                </Badge>
                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                  Secure Processing
                </Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default EmployeeNotice;
