import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  Calendar, 
  FileText, 
  Download, 
  ExternalLink,
  Clock,
  CheckCircle2,
  AlertCircle
} from "lucide-react";

const InfoCenter = () => {
  const upcomingDates = [
    { date: "January 15, 2025", event: "Q4 2024 Estimated Tax Payment Due", type: "deadline" },
    { date: "January 31, 2025", event: "W-2 and 1099 Forms Due to Employees", type: "deadline" },
    { date: "February 15, 2025", event: "1099 Forms Due to IRS", type: "deadline" },
    { date: "March 15, 2025", event: "S-Corporation and Partnership Returns Due", type: "deadline" },
    { date: "April 15, 2025", event: "Individual Tax Returns Due", type: "deadline" },
    { date: "April 15, 2025", event: "Q1 2025 Estimated Tax Payment Due", type: "deadline" },
    { date: "June 15, 2025", event: "Q2 2025 Estimated Tax Payment Due", type: "deadline" },
    { date: "September 15, 2025", event: "Q3 2025 Estimated Tax Payment Due", type: "deadline" },
    { date: "October 15, 2025", event: "Extended Individual Returns Due", type: "deadline" },
    { date: "December 15, 2025", event: "Q4 2025 Estimated Tax Payment Due", type: "deadline" }
  ];

  const taxOrganizerSections = [
    "Personal Information",
    "Income Sources",
    "Business Income & Expenses",
    "Investment Information",
    "Deductions & Credits",
    "Prior Year Information",
    "Document Checklist"
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section className="py-24 bg-gradient-subtle">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-display-xl font-display font-bold text-forest mb-6">
              Info Center
            </h1>
            <p className="text-body-lg text-sage max-w-3xl mx-auto">
              Stay organized and informed with our comprehensive tax calendar, client organizer, and access to essential IRS forms and publications.
            </p>
          </div>
        </section>

        {/* Events Calendar */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Events Calendar
                </h2>
                <p className="text-body-lg text-sage">
                  The interactive calendar highlights federal and state tax due dates, special firm events and other important dates that may be of interest to you. Because the calendar is continually updated, check back often to keep track of filing requirements, deadlines and other events that will help you stay current and up-to-date.
                </p>
              </div>

              <Card className="rounded-2xl card-elevation">
                <CardContent className="p-8">
                  <div className="flex items-center gap-3 mb-6">
                    <Calendar className="w-6 h-6 text-brass" strokeWidth={1.5} />
                    <h3 className="text-display-md font-display font-semibold text-forest">
                      2025 Tax Calendar
                    </h3>
                  </div>
                  
                  <div className="space-y-4">
                    {upcomingDates.map((item, index) => (
                      <div key={index} className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 hover:bg-muted/50 gentle-transition">
                        <div className="flex-shrink-0">
                          {item.type === 'deadline' ? (
                            <AlertCircle className="w-5 h-5 text-destructive" strokeWidth={1.5} />
                          ) : (
                            <CheckCircle2 className="w-5 h-5 text-brass" strokeWidth={1.5} />
                          )}
                        </div>
                        <div className="flex-1">
                          <div className="font-medium text-forest">{item.event}</div>
                          <div className="text-sm text-sage">{item.date}</div>
                        </div>
                        <div className="text-sm text-sage">
                          {item.type === 'deadline' ? 'Deadline' : 'Event'}
                        </div>
                      </div>
                    ))}
                  </div>
                  
                  <div className="mt-6 p-4 bg-brass/10 rounded-xl">
                    <p className="text-sm text-sage">
                      <strong>Note:</strong> Dates may vary for certain circumstances. Always consult with your tax professional for specific deadlines applicable to your situation.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Client Tax Organizer */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Client Tax Organizer
                </h2>
                <p className="text-body-lg text-sage">
                  A tax organizer can facilitate the process of pulling together your tax information. This basic tax organizer is designed for new clients and allows you to enter your information right on the screen. You can then print the completed tax organizer and fax or mail it to the office. Current clients should contact the office to request a "proforma" tax organizer that includes prior year information and carryover data.
                </p>
              </div>

              <div className="grid md:grid-cols-2 gap-8">
                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <div className="flex items-center gap-3 mb-6">
                      <FileText className="w-6 h-6 text-brass" strokeWidth={1.5} />
                      <h3 className="text-display-md font-display font-semibold text-forest">
                        New Client Organizer
                      </h3>
                    </div>
                    
                    <p className="text-sage mb-6">
                      Complete this organizer if you're a new client or haven't used our services in the past two years.
                    </p>
                    
                    <div className="space-y-3 mb-6">
                      {taxOrganizerSections.map((section, index) => (
                        <div key={index} className="flex items-center gap-3">
                          <CheckCircle2 className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                          <span className="text-sage">{section}</span>
                        </div>
                      ))}
                    </div>
                    
                    <Button className="w-full btn-shadow">
                      <Download className="mr-2 w-4 h-4" />
                      Download New Client Organizer
                    </Button>
                  </CardContent>
                </Card>

                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <div className="flex items-center gap-3 mb-6">
                      <Clock className="w-6 h-6 text-brass" strokeWidth={1.5} />
                      <h3 className="text-display-md font-display font-semibold text-forest">
                        Returning Client Organizer
                      </h3>
                    </div>
                    
                    <p className="text-sage mb-6">
                      For existing clients with prior year information and carryover data included.
                    </p>
                    
                    <div className="space-y-3 mb-6">
                      <div className="flex items-center gap-3">
                        <CheckCircle2 className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">Prior year information included</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <CheckCircle2 className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">Carryover data pre-filled</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <CheckCircle2 className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">Customized for your situation</span>
                      </div>
                    </div>
                    
                    <Button variant="outline" className="w-full">
                      Request Proforma Organizer
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Federal Tax Forms & IRS Publications */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Federal Tax Forms & IRS Publications
                </h2>
                <p className="text-body-lg text-sage">
                  Looking for a federal tax form? Browse this online tax forms library to find downloadable IRS forms. The forms are presented in PDF format and are acceptable for filing with the IRS. You may also choose from dozens of helpful tax publications developed by the IRS to help taxpayers have a better understanding of various tax issues.
                </p>
              </div>

              <div className="grid md:grid-cols-2 gap-8">
                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <h3 className="text-display-md font-display font-semibold text-forest mb-6">
                      Popular Tax Forms
                    </h3>
                    
                    <div className="space-y-3">
                      {[
                        "Form 1040 - Individual Income Tax Return",
                        "Form 1040-ES - Estimated Tax for Individuals",
                        "Form 1120 - U.S. Corporation Income Tax Return",
                        "Form 1120S - U.S. Income Tax Return for an S Corporation",
                        "Form 1065 - U.S. Return of Partnership Income",
                        "Form W-2 - Wage and Tax Statement",
                        "Form 1099-MISC - Miscellaneous Income",
                        "Form 941 - Employer's Quarterly Federal Tax Return"
                      ].map((form, index) => (
                        <div key={index} className="flex items-center justify-between p-3 rounded-xl hover:bg-muted/50 gentle-transition cursor-pointer">
                          <span className="text-sage">{form}</span>
                          <ExternalLink className="w-4 h-4 text-brass" strokeWidth={1.5} />
                        </div>
                      ))}
                    </div>
                    
                    <Button variant="outline" className="w-full mt-6">
                      Browse All Forms
                    </Button>
                  </CardContent>
                </Card>

                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <h3 className="text-display-md font-display font-semibold text-forest mb-6">
                      IRS Publications
                    </h3>
                    
                    <div className="space-y-3">
                      {[
                        "Publication 17 - Your Federal Income Tax",
                        "Publication 334 - Tax Guide for Small Business",
                        "Publication 535 - Business Expenses",
                        "Publication 587 - Business Use of Your Home",
                        "Publication 946 - How to Depreciate Property",
                        "Publication 970 - Tax Benefits for Education",
                        "Publication 225 - Farmer's Tax Guide",
                        "Publication 526 - Charitable Contributions"
                      ].map((pub, index) => (
                        <div key={index} className="flex items-center justify-between p-3 rounded-xl hover:bg-muted/50 gentle-transition cursor-pointer">
                          <span className="text-sage">{pub}</span>
                          <ExternalLink className="w-4 h-4 text-brass" strokeWidth={1.5} />
                        </div>
                      ))}
                    </div>
                    
                    <Button variant="outline" className="w-full mt-6">
                      Browse All Publications
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default InfoCenter;
