import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import ScrollToTop from "@/components/ScrollToTop";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { TrendingUp, ArrowLeft, CheckCircle2, ArrowRight, Phone } from "lucide-react";
import { Link } from "react-router-dom";
import { useEffect } from "react";

const FinancialPlanning = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const features = [
    "Comprehensive financial analysis",
    "Investment strategy development",
    "Risk management planning",
    "Education funding strategies",
    "Insurance needs analysis",
    "Long-term wealth building"
  ];

  const benefits = [
    "Clear financial roadmap",
    "Organized approach to goals",
    "Risk mitigation strategies",
    "Optimized investment returns",
    "Financial security planning",
    "Peace of mind about the future"
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section 
          className="relative py-32 flex items-center justify-center"
          style={{
            backgroundImage: 'url(/lovable-uploads/financialtools-subpages.png)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
          }}
        >
          <div className="absolute inset-0 bg-black/60"></div>
          <div className="container mx-auto px-4 relative z-10">
            <div className="max-w-4xl mx-auto">
              <div className="flex items-center gap-4 mb-8">
                <Link 
                  to="/services" 
                  className="flex items-center gap-2 text-white hover:text-brass gentle-transition"
                >
                  <ArrowLeft className="w-5 h-5" />
                  <span className="font-medium">Back to Services</span>
                </Link>
              </div>
              
              <div className="flex items-center gap-4 mb-8">
                <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center">
                  <TrendingUp className="w-8 h-8 text-brass" strokeWidth={1.5} />
                </div>
                <div>
                  <h1 className="text-display-xl font-display font-bold text-white mb-2">
                    Financial Planning
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Structured financial plans to help you face any financial challenge at each stage of life
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Main Content */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              
              {/* Description */}
              <div className="mb-16">
                <p className="text-body-lg text-sage leading-relaxed mb-6">
                  A properly structured financial plan enables you to face any financial challenge that may present itself at each stage of your life. Through the financial planning process, we can help you assess your financial needs and develop strategies that will enable you to achieve your goals and strengthen your financial security.
                </p>
                <p className="text-body-lg text-sage leading-relaxed">
                  Our comprehensive approach to financial planning considers all aspects of your financial situation, from current cash flow management to long-term wealth accumulation and protection strategies.
                </p>
              </div>

              {/* Features Grid */}
              <div className="grid lg:grid-cols-2 gap-12 mb-16">
                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                    Our Financial Planning Services Include
                  </h2>
                  <div className="space-y-4">
                    {features.map((feature, index) => (
                      <div key={index} className="flex items-center gap-3">
                        <CheckCircle2 className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                    Key Benefits
                  </h2>
                  <div className="space-y-4">
                    {benefits.map((benefit, index) => (
                      <div key={index} className="flex items-center gap-3">
                        <CheckCircle2 className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">{benefit}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Additional Details */}
              <div className="bg-card rounded-2xl p-8 card-elevation mb-16">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Comprehensive Financial Strategy
                </h2>
                <div className="prose prose-lg text-sage space-y-4">
                  <p>
                    Financial planning is more than investment advice. It's about creating a comprehensive strategy that aligns with your values, goals, and life circumstances.
                  </p>
                  <p>
                    We take a holistic approach, examining your entire financial picture including income, expenses, savings, investments, insurance, and tax strategies to develop an integrated plan that works for your unique situation.
                  </p>
                  <p>
                    Our ongoing relationship ensures your financial plan evolves with your changing needs and market conditions, keeping you on track to achieve your long-term financial objectives.
                  </p>
                </div>
              </div>

              {/* CTA Section */}
              <div className="text-center">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Ready to Take Control of Your Financial Future?
                </h2>
                <p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
                  Let us help you develop a comprehensive financial plan that provides clarity and confidence for your financial journey.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button 
                    size="lg" 
                    className="bg-brass hover:bg-brass/90 text-white btn-shadow text-lg px-8 py-3 rounded-2xl"
                    onClick={() => window.location.href = '/contact'}
                  >
                    Schedule Consultation
                    <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                  <Button 
                    size="lg"
                    variant="outline"
                    className="border-brass text-brass hover:bg-brass/10 text-lg px-8 py-3 rounded-2xl"
                    onClick={() => window.open('tel:+13618839999')}
                  >
                    <Phone className="mr-2 w-5 h-5" />
                    (361) 883-8999
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default FinancialPlanning;
