import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { 
  BookOpen, 
  HelpCircle, 
  Calculator, 
  Newspaper,
  Download,
  ArrowRight,
  Search
} from "lucide-react";

const Resources = () => {
  const resourceCategories = [
    {
      icon: BookOpen,
      title: "Tax Guides",
      description: "Comprehensive guides to help you understand tax requirements and opportunities.",
      items: [
        "2025 Tax Changes for Individuals",
        "Small Business Tax Deduction Guide", 
        "Quarterly Tax Planning Checklist",
        "Year-End Tax Strategies"
      ]
    },
    {
      icon: HelpCircle,
      title: "Frequently Asked Questions",
      description: "Quick answers to the most common tax and accounting questions.",
      items: [
        "When should I file my taxes?",
        "What business expenses are deductible?",
        "How do I handle an IRS audit?",
        "Should I incorporate my business?"
      ]
    },
    {
      icon: Calculator,
      title: "Financial Calculators",
      description: "Interactive tools to help you plan and make informed financial decisions.",
      items: [
        "Tax Withholding Calculator",
        "Self-Employment Tax Calculator",
        "Business Loan Payment Calculator",
        "Retirement Savings Calculator"
      ]
    },
    {
      icon: Newspaper,
      title: "Tax Insights & Updates",
      description: "Stay informed with the latest tax law changes and strategic insights.",
      items: [
        "IRS Announces 2025 Tax Brackets",
        "New Business Tax Credits Available",
        "Estate Planning Updates",
        "Cryptocurrency Tax Guidelines"
      ]
    }
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section className="py-24 bg-gradient-subtle relative overflow-hidden">
          {/* Background watermark */}
          <div 
            className="absolute inset-0 opacity-5"
            style={{
              backgroundImage: "url('/lovable-uploads/1a07e78f-6231-4fe2-af77-441f6a6ead7a.png')",
              backgroundSize: "400px",
              backgroundPosition: "center right",
              backgroundRepeat: "no-repeat"
            }}
          />
          
          <div className="container mx-auto px-4 relative z-10">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              <div>
                <h1 className="text-display-xl font-display font-bold text-forest mb-6">
                  Resources & Updates
                </h1>
                
                <p className="text-body-lg text-sage mb-8 leading-relaxed">
                  Access our comprehensive library of tax guides, calculators, FAQs, and the latest insights to help you stay informed and make confident financial decisions.
                </p>
                
                {/* Newsletter Signup */}
                <div className="bg-card rounded-2xl p-6 card-elevation max-w-md">
                  <h3 className="font-display font-semibold text-forest mb-4">
                    Get Monthly Tax Updates
                  </h3>
                  <div className="flex gap-2">
                    <Input 
                      placeholder="Enter your email"
                      className="rounded-xl"
                    />
                    <Button size="sm" className="rounded-xl">
                      Subscribe
                    </Button>
                  </div>
                  <p className="text-xs text-sage mt-2">
                    No spam • Unsubscribe anytime
                  </p>
                </div>
              </div>
              
              {/* Search */}
              <div className="bg-card rounded-2xl p-8 card-elevation">
                <h3 className="font-display font-semibold text-forest mb-6 text-center">
                  Search Resources
                </h3>
                <div className="relative mb-6">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-sage w-5 h-5" />
                  <Input 
                    placeholder="Search guides, FAQs, calculators..."
                    className="pl-10 rounded-xl"
                  />
                </div>
                <div className="space-y-2">
                  <div className="text-sm text-sage">Popular searches:</div>
                  <div className="flex flex-wrap gap-2">
                    {["Tax deadlines", "Deductions", "IRS audit", "Business formation"].map((term) => (
                      <button key={term} className="px-3 py-1 bg-muted rounded-full text-sm text-sage hover:bg-brass/20 hover:text-brass gentle-transition">
                        {term}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Resource Categories */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-12">
              {resourceCategories.map((category, index) => {
                const Icon = category.icon;
                return (
                  <Card key={index} className="rounded-2xl card-elevation hover:shadow-lg gentle-transition">
                    <CardContent className="p-8">
                      <div className="flex items-center gap-4 mb-6">
                        <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center">
                          <Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                        </div>
                        <h3 className="text-display-md font-display font-semibold text-forest">
                          {category.title}
                        </h3>
                      </div>
                      
                      <p className="text-sage mb-6 leading-relaxed">
                        {category.description}
                      </p>
                      
                      <div className="space-y-3 mb-6">
                        {category.items.map((item, itemIndex) => (
                          <div key={itemIndex} className="flex items-center justify-between group cursor-pointer">
                            <span className="text-sage group-hover:text-forest gentle-transition">
                              {item}
                            </span>
                            <ArrowRight className="w-4 h-4 text-sage group-hover:text-forest group-hover:translate-x-1 gentle-transition" />
                          </div>
                        ))}
                      </div>
                      
                      <Button variant="outline" className="w-full">
                        View All {category.title}
                      </Button>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        </section>

        {/* Featured Download */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="bg-cream border-2 border-brass/30 rounded-2xl p-8 md:p-12 text-center card-elevation">
                <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <Download className="w-8 h-8 text-brass" strokeWidth={1.5} />
                </div>
                
                <h3 className="text-display-lg font-display font-semibold text-forest mb-4">
                  2025 Tax Preparation Checklist
                </h3>
                
                <p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
                  Get organized early with our comprehensive 15-page checklist covering all essential documents, deadlines, and new tax law changes for the 2025 filing season.
                </p>
                
                <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-6">
                  <Button size="lg" className="btn-shadow text-lg px-8 py-3 rounded-2xl">
                    <Download className="mr-2 w-5 h-5" />
                    Download Free PDF
                  </Button>
                  <Button variant="outline" size="lg" className="text-lg px-8 py-3 rounded-2xl">
                    Preview Checklist
                  </Button>
                </div>
                
                <div className="flex flex-wrap justify-center gap-6 text-sm text-sage">
                  <span>✓ Individual & Business Items</span>
                  <span>✓ New 2025 Changes</span>
                  <span>✓ Important Deadlines</span>
                  <span>✓ Deduction Tracker</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ Schema would go here for SEO */}
      </main>
      <Footer />
    </div>
  );
};

export default Resources;