import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function Financial() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <section className="pt-32 pb-20 px-4 md:px-8 bg-cover bg-center" style={{ backgroundImage: 'url(/images/slide3.png)' }}>
        <div className="bg-black/50 backdrop-blur-sm h-full w-full py-20">
          <div className="container max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-6xl font-bold text-white">Financial Consultation</h1>
            <p className="text-lg md:text-xl text-white/80 max-w-3xl mx-auto">
              Optimise your operations, manage assets and achieve financial goals with our expert guidance.
            </p>
            <Button
              onClick={() => document.getElementById('content')?.scrollIntoView({ behavior: 'smooth' })}
              className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 inline-flex items-center gap-2"
            >
              Learn More
              <ArrowRight size={20} />
            </Button>
          </div>
        </div>
      </section>
      <section id="content" className="py-20 px-4 md:px-8">
        <div className="container max-w-5xl mx-auto space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold">Our Approach</h2>
          <p className="text-muted-foreground">
            Our financial consultants work with you to develop comprehensive plans that align with your objectives. From budgeting and forecasting to risk management and investment strategy, we provide the expertise you need to make informed decisions and drive profitability.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Financial Planning</h3>
              <p className="text-muted-foreground">
                We evaluate your current position and map out a roadmap to meet short‑ and long‑term financial goals.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Risk Management</h3>
              <p className="text-muted-foreground">
                Our experts identify potential risks and implement strategies to mitigate them, safeguarding your organisation.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Investment Strategy</h3>
              <p className="text-muted-foreground">
                We design diversified portfolios tailored to your risk tolerance and growth objectives.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Reporting & Analysis</h3>
              <p className="text-muted-foreground">
                Detailed financial reporting empowers you with insight into performance and areas for improvement.
              </p>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}