import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { GraduationCap, Users, FolderOpen, Calendar, ArrowRight, Check, Heart, Target, Lightbulb, Shield } from "lucide-react";
import heroCommunity from "@/assets/hero-community.webp";
import vaWorking from "@/assets/va-working.webp";
import founder from "@/assets/founder.webp";
import communityCall from "@/assets/community-call.webp";

const Index = () => {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-background">
      {/* Nav */}
      <nav className="flex items-center justify-between px-4 sm:px-6 py-4 max-w-6xl mx-auto">
        <div className="flex items-center gap-2">
          <div className="h-9 w-9 rounded-lg bg-primary flex items-center justify-center">
            <span className="text-primary-foreground font-heading font-bold text-sm">VA</span>
          </div>
          <span className="font-heading font-bold text-lg">The VA Academy</span>
        </div>
        <div className="flex items-center gap-2 sm:gap-3">
          <Button variant="ghost" size="sm" onClick={() => navigate('/pricing')}>Pricing</Button>
          <Button variant="ghost" size="sm" onClick={() => navigate('/faq')}>FAQ</Button>
          <Button size="sm" onClick={() => navigate('/login')} className="bg-primary hover:bg-primary/90">Sign In</Button>
        </div>
      </nav>

      <main>
      {/* Hero with image */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <img src={heroCommunity} alt="Virtual assistants collaborating" width={1280} height={720} fetchPriority="high" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-secondary/85" />
        </div>
        <div className="relative max-w-5xl mx-auto px-4 sm:px-6 py-16 sm:py-28 text-center">
          <span className="inline-block bg-primary/20 text-primary-foreground border border-primary-foreground/20 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
            The Home for Virtual Assistants
          </span>
          <h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight text-secondary-foreground mb-6">
            Build a Thriving VA Business<br className="hidden sm:block" /> You're Proud Of
          </h1>
          <p className="text-secondary-foreground/80 text-lg sm:text-xl max-w-2xl mx-auto mb-8">
            Expert-led courses, ready-made resources, a supportive community and live events — everything you need to start, grow and scale your Virtual Assistant business.
          </p>
          <div className="flex flex-wrap gap-3 justify-center mb-10">
            <Button size="lg" onClick={() => navigate('/pricing')} className="bg-primary hover:bg-primary/90 text-lg px-8">
              Get Started Today <ArrowRight className="h-5 w-5 ml-2" />
            </Button>
            <Button size="lg" onClick={() => navigate('/login')}
              className="bg-primary hover:bg-primary/90 text-primary-foreground text-lg px-8 border-0">
              Sign In
            </Button>
          </div>
          {/* Proof strip */}
          <div className="flex flex-wrap gap-6 sm:gap-10 justify-center text-secondary-foreground/70 text-sm">
            <div className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" /> Expert-led training</div>
            <div className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" /> Supportive community</div>
            <div className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" /> Cancel anytime</div>
          </div>
        </div>
      </section>

      {/* Why The VA Academy Exists */}
      <section className="py-16 sm:py-24 px-4 sm:px-6">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 lg:gap-16 items-center">
          <div className="rounded-2xl overflow-hidden shadow-lg">
            <img src={vaWorking} alt="Virtual assistant working from home" width={800} height={600} loading="lazy" className="w-full h-full object-cover" />
          </div>
          <div className="space-y-5">
            <span className="text-primary font-semibold text-sm uppercase tracking-wider">Why We Exist</span>
            <h2 className="font-heading text-2xl md:text-3xl lg:text-4xl font-bold">
              Starting a VA Business Shouldn't Feel So Lonely
            </h2>
            <p className="text-muted-foreground text-base leading-relaxed">
              Too many Virtual Assistants start out full of ambition but quickly feel overwhelmed — unsure where to find clients, how to price their services, or whether they're doing it "right." The free advice online is scattered, contradictory, and rarely tailored to VAs.
            </p>
            <p className="text-muted-foreground text-base leading-relaxed">
              The VA Academy was created to change that. We believe every VA deserves access to clear, structured training, practical resources, and a community of people who truly understand the journey — without the gatekeeping or the hefty price tag.
            </p>
            <div className="grid grid-cols-2 gap-4 pt-2">
              {[
                { icon: Target, label: 'Clear roadmaps' },
                { icon: Heart, label: 'Real support' },
                { icon: Lightbulb, label: 'Practical skills' },
                { icon: Shield, label: 'Proven templates' },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-sm font-medium text-foreground">
                  <item.icon className="h-4 w-4 text-secondary" />
                  {item.label}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* How It Helps — Features */}
      <section className="bg-muted py-16 sm:py-24 px-4 sm:px-6">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-14">
            <span className="text-primary font-semibold text-sm uppercase tracking-wider">Everything in One Place</span>
            <h2 className="font-heading text-2xl md:text-3xl lg:text-4xl font-bold mt-3">
              How The VA Academy Helps You Succeed
            </h2>
            <p className="text-muted-foreground mt-3 max-w-xl mx-auto">
              No more piecing together free tips from Instagram. Get everything you need in one supportive platform.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: GraduationCap, title: 'Courses', desc: 'Step-by-step courses designed by experienced VAs who\'ve built real businesses. From finding clients to scaling up.' },
              { icon: Users, title: 'Community', desc: 'Connect, collaborate and get feedback from VAs at every stage. No question is too small — we all started somewhere.' },
              { icon: FolderOpen, title: 'Resource Library', desc: 'Done-for-you templates, contracts, scripts, checklists and guides. Stop reinventing the wheel.' },
              { icon: Calendar, title: 'Live Events', desc: 'Weekly Q&As, workshops, guest experts and networking sessions. Learn in real time with real people.' },
            ].map((f, i) => (
              <div key={i} className="text-center space-y-3 p-6 rounded-xl bg-card shadow-sm border">
                <div className="h-12 w-12 rounded-xl bg-secondary/10 flex items-center justify-center mx-auto">
                  <f.icon className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="font-heading font-semibold text-lg">{f.title}</h3>
                <p className="text-muted-foreground text-sm">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder Story */}
      <section className="py-16 sm:py-24 px-4 sm:px-6">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 lg:gap-16 items-center">
          <div className="space-y-5 order-2 md:order-1">
            <span className="text-primary font-semibold text-sm uppercase tracking-wider">Meet the Founder</span>
            <h2 className="font-heading text-2xl md:text-3xl lg:text-4xl font-bold">
              Built by a VA, for VAs
            </h2>
            <p className="text-muted-foreground text-base leading-relaxed">
              The VA Academy was founded by someone who's walked the path. After years of building a successful Virtual Assistant and Call Answering business from scratch, navigating uncertainty, imposter syndrome, and isolation, he knew there had to be a better way for others starting out.
            </p>
            <p className="text-muted-foreground text-base leading-relaxed">
              What started as sharing knowledge with a handful of VAs has grown into a thriving community. Every course, every resource, and every event is designed with one goal: to give you the clarity, confidence and tools to build a business that works for your life.
            </p>
            <Button onClick={() => navigate('/pricing')} className="bg-primary hover:bg-primary/90">
              Join the Academy <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </div>
          <div className="rounded-2xl overflow-hidden shadow-lg order-1 md:order-2">
            <img src={founder} alt="The VA Academy founder" width={800} height={800} loading="lazy" className="w-full h-full object-cover" />
          </div>
        </div>
      </section>

      {/* Who It's For */}
      <section className="bg-secondary text-secondary-foreground py-16 sm:py-24 px-4 sm:px-6">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-white font-semibold text-sm uppercase tracking-wider">Is This For You?</span>
            <h2 className="font-heading text-2xl md:text-3xl lg:text-4xl font-bold mt-3">
              The VA Academy Is Perfect For You If…
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 max-w-4xl mx-auto">
            {[
              "You're thinking about becoming a VA but don't know where to start",
              "You've started your VA business but struggle to find clients",
              "You want to raise your prices but lack the confidence",
              "You feel isolated and want to connect with other VAs",
              "You need ready-made templates and resources to save time",
              "You want structured training instead of scattered free advice",
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-3 bg-secondary-foreground/5 rounded-lg p-4">
                <Check className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                <span className="text-sm text-secondary-foreground/90">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Community Image + CTA */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <img src={communityCall} alt="VA community live call" width={800} height={600} loading="lazy" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-primary/85" />
        </div>
        <div className="relative max-w-3xl mx-auto text-center py-16 sm:py-24 px-4 sm:px-6 space-y-6">
          <h2 className="font-heading text-2xl md:text-3xl lg:text-4xl font-bold text-primary-foreground">
            Ready to Stop Going It Alone?
          </h2>
          <p className="text-primary-foreground/80 text-lg max-w-xl mx-auto">
            Join hundreds of Virtual Assistants who are learning, growing and building real businesses together inside The VA Academy.
          </p>
          <div className="flex flex-wrap gap-3 justify-center">
            <Button size="lg" onClick={() => navigate('/pricing')}
              className="bg-secondary hover:bg-secondary/90 text-secondary-foreground text-lg px-8">
              View Plans <ArrowRight className="h-5 w-5 ml-2" />
            </Button>
            <Button size="lg" variant="outline" onClick={() => navigate('/faq')}
              className="bg-secondary hover:bg-secondary/90 text-secondary-foreground border-0 text-lg px-8">
              Read the FAQ
            </Button>
          </div>
        </div>
      </section>

      </main>
      {/* Footer */}
      <footer className="py-8 px-6 border-t text-center text-sm text-muted-foreground">
        <p>© 2025 The VA Team. All rights reserved. | <a href="https://thevateam.co.uk" className="text-secondary underline hover:opacity-80">thevateam.co.uk</a> | <a href="/faq" onClick={(e) => { e.preventDefault(); navigate('/faq'); }} className="text-secondary underline hover:opacity-80 cursor-pointer">FAQ</a> | <a href="/terms" onClick={(e) => { e.preventDefault(); navigate('/terms'); }} className="text-secondary underline hover:opacity-80 cursor-pointer">Terms</a></p>
      </footer>
    </div>
  );
};

export default Index;