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

export default function Marketing() {
  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/slide1.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">Marketing Solutions</h1>
            <p className="text-lg md:text-xl text-white/80 max-w-3xl mx-auto">
              Discover how our comprehensive marketing strategies can accelerate your business growth and elevate your brand.
            </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">
            At Oblix, we craft tailored marketing campaigns that leverage data-driven insights and creative storytelling. Our services include digital strategy development, brand identity and design, multi‑channel advertising, and campaign analytics. We work closely with you to understand your audience and create messaging that resonates.
          </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">Digital Strategy</h3>
              <p className="text-muted-foreground">
                We analyse your market and competitors to define a strategy that positions your business for success online.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Brand Development</h3>
              <p className="text-muted-foreground">
                Our creative team builds cohesive brand identities that tell your story and engage customers.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Campaign Management</h3>
              <p className="text-muted-foreground">
                From planning to execution, we manage campaigns across search, social, email and more, ensuring maximum ROI.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Analytics & Reporting</h3>
              <p className="text-muted-foreground">
                Detailed reporting keeps you informed on performance metrics and helps refine strategies over time.
              </p>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}