import React, { useRef } from 'react';
import { Button } from "@/components/ui/button";
import { FileText, MessageSquare, Smartphone, MapPin, Wifi, Languages, Clock } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';
import { PhoneMockupSlider } from './PhoneMockupSlider';
import { TestimonialSlider } from './TestimonialSlider';
import { SignupCounter } from './SignupCounter';
import founderImage from '@/assets/founder-sanele.png';

interface LandingPageProps {
  onGetStarted: (mode?: 'login' | 'signup') => void;
}

const LandingPage: React.FC<LandingPageProps> = ({ onGetStarted }) => {
  const { t } = useTranslation();
  const mockupRef = useRef<HTMLDivElement>(null);

  const handleGetStarted = (mode: 'login' | 'signup' = 'signup') => {
    onGetStarted(mode);
  };

  const scrollToMockup = () => {
    mockupRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  return (
    <div className="flex flex-col min-h-screen bg-background text-foreground">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-14 items-center relative">
          <div className="mr-4 flex items-center">
            <img 
              src="/hustleboss-logo-32.webp" 
              alt="HustleBoss Logo" 
              className="h-8 w-8 rounded-full mr-2"
              width="32"
              height="32"
            />
            <span className="font-bold text-lg">HustleBoss</span>
          </div>
          <div className="flex flex-1 items-center justify-end space-x-2 relative z-10">
            <Button 
              variant="ghost" 
              onClick={() => handleGetStarted('login')}
              className="cursor-pointer"
            >
              {t('auth.login')}
            </Button>
            <Button 
              onClick={() => handleGetStarted('signup')}
              className="cursor-pointer"
            >
              {t('auth.signup')}
            </Button>
          </div>
        </div>
      </header>

      <main className="flex-1">
        {/* SECTION 1 - HERO */}
        <section className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="flex flex-col space-y-6 text-center lg:text-left">
                <div className="space-y-4">
                  <h1 className="text-4xl font-bold tracking-tight sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary via-primary/80 to-primary/60 bg-clip-text text-transparent">
                    Turn Your Hustle Into a Business — Fast.
                  </h1>
                  <p className="text-xl text-muted-foreground max-w-[600px] mx-auto lg:mx-0">
                    Built for South Africans 🇿🇦 who quote, invoice & grow on the go.
                  </p>
                  <p className="text-lg text-foreground/80 max-w-[600px] mx-auto lg:mx-0">
                    Send invoices, close deals, and get paid — all in Rands, offline, and straight from your phone.
                    HustleBoss helps you go from street-smart to business-smart in minutes.
                  </p>
                </div>
                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                  <Button 
                    size="lg" 
                    className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg h-12 px-8"
                    onClick={() => handleGetStarted('signup')}
                  >
                    Start Your Free Hustle Today
                  </Button>
                  <Button 
                    variant="outline" 
                    size="lg"
                    className="text-lg h-12 px-8"
                    onClick={scrollToMockup}
                  >
                    See a Demo
                  </Button>
                </div>
              </div>
              
              <div ref={mockupRef} className="flex justify-center animate-fade-in">
                <PhoneMockupSlider />
              </div>
            </div>
          </div>
        </section>

        {/* Trust Badges */}
        <section className="w-full py-8 md:py-12 bg-muted/30">
          <div className="container px-4 md:px-6">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="flex items-center gap-3 justify-center">
                <div className="rounded-full bg-green-100 dark:bg-green-900/30 p-3">
                  <MapPin className="h-6 w-6 text-green-600 dark:text-green-400" />
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-sm">🇿🇦 SA-Ready</h3>
                  <p className="text-xs text-muted-foreground">Rands & PayFast</p>
                </div>
              </div>
              <div className="flex items-center gap-3 justify-center">
                <div className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3">
                  <Wifi className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-sm">📶 Offline-First</h3>
                  <p className="text-xs text-muted-foreground">No WiFi needed</p>
                </div>
              </div>
              <div className="flex items-center gap-3 justify-center">
                <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3">
                  <Languages className="h-6 w-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-sm">💬 Multilingual</h3>
                  <p className="text-xs text-muted-foreground">isiZulu, Afrikaans</p>
                </div>
              </div>
              <div className="flex items-center gap-3 justify-center">
                <div className="rounded-full bg-orange-100 dark:bg-orange-900/30 p-3">
                  <Clock className="h-6 w-6 text-orange-600 dark:text-orange-400" />
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-sm">⚡ 5-min Setup</h3>
                  <p className="text-xs text-muted-foreground">Start instantly</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* SECTION 2 - TRUST BUILDER */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted/50">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-8 text-center">
              <div className="space-y-4">
                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                  Built for South African hustlers, trusted by entrepreneurs across Mzansi
                </h2>
                <p className="text-xl text-muted-foreground max-w-[700px]">
                  Join 1,000+ South African hustlers already using HustleBoss to work smarter — not harder.
                </p>
              </div>
              <TestimonialSlider />
            </div>
          </div>
        </section>

        {/* SECTION 3 - FEATURES */}
        <section className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-6 text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                Features That Fuel Your Hustle
              </h2>
              <p className="text-xl text-muted-foreground max-w-[700px]">
                Everything you need to quote, invoice, and grow — made for Mzansi conditions.
              </p>
            </div>
            <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-3">
              <div className="group relative overflow-hidden rounded-lg border bg-background p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="rounded-full bg-primary/10 p-4">
                    <FileText className="h-10 w-10 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold">Quotes & Invoices</h3>
                  <p className="text-muted-foreground">
                    Send professional invoices in Rands with your logo, payment terms, and bank details.
                  </p>
                  <p className="text-sm font-medium text-primary">🧾 "Look pro. Get paid faster."</p>
                </div>
              </div>
              <div className="group relative overflow-hidden rounded-lg border bg-background p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="rounded-full bg-primary/10 p-4">
                    <MessageSquare className="h-10 w-10 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold">Reminders & Follow-Ups</h3>
                  <p className="text-muted-foreground">
                    Never lose money again. HustleBoss automatically reminds clients to pay — even via WhatsApp.
                  </p>
                  <p className="text-sm font-medium text-primary">📱 "Your silent collections assistant."</p>
                </div>
              </div>
              <div className="group relative overflow-hidden rounded-lg border bg-background p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="rounded-full bg-primary/10 p-4">
                    <Smartphone className="h-10 w-10 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold">Offline Mode</h3>
                  <p className="text-muted-foreground">
                    Your hustle doesn't stop for load-shedding or bad signal. Everything syncs later.
                  </p>
                  <p className="text-sm font-medium text-primary">⚡ "Works anywhere, anytime."</p>
                </div>
              </div>
            </div>
            <div className="text-center mt-10">
              <Button 
                size="lg" 
                className="bg-primary text-primary-foreground hover:bg-primary/90"
                onClick={() => handleGetStarted('signup')}
              >
                Start Free Today
              </Button>
            </div>
          </div>
        </section>

        {/* SECTION 4 - FOUNDER STORY + FINAL CTA */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted/50">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-8">
              <div className="text-center space-y-4 mb-8">
                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                  From the Grind to Greatness — The Story Behind HustleBoss
                </h2>
              </div>
              
              <div className="grid lg:grid-cols-2 gap-12 items-center max-w-5xl">
                <div className="flex justify-center lg:justify-end">
                  <div className="relative max-w-md">
                    <div className="relative rounded-2xl overflow-hidden shadow-2xl ring-1 ring-border/50">
                      <img 
                        src={founderImage} 
                        alt="Sanele Sibisi - Founder of HustleBoss" 
                        className="w-full h-auto object-contain"
                      />
                    </div>
                    <div className="absolute -bottom-6 -right-6 text-6xl opacity-20 pointer-events-none z-0">🇿🇦</div>
                  </div>
                </div>
                
                <div className="space-y-6 text-lg lg:text-left text-center">
                  <p className="text-foreground/90 leading-relaxed">
                    "I started HustleBoss because I got tired of watching South African hustlers lose money, time, and clients just because we didn't have the right tools.
                  </p>
                  <p className="text-foreground/90 leading-relaxed">
                    We needed something that speaks our language — something that works with no data, during load-shedding, and in Rands.
                  </p>
                  <p className="text-foreground/90 leading-relaxed">
                    HustleBoss is more than software — it's a movement to help every Mzansi hustler run their business like a boss."
                  </p>
                  <p className="font-semibold text-xl">
                    — Sanele Sibisi, Founder of HustleBoss 🇿🇦
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Final CTA */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-8 text-center">
              <div className="space-y-4 max-w-3xl">
                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                  Hustlers don't wait. Hustlers act.
                </h2>
                <p className="text-xl text-muted-foreground">
                  Get HustleBoss free today and turn your grind into growth — faster, smarter, and in your language.
                </p>
              </div>
              
              <div className="flex flex-col sm:flex-row gap-4">
                <Button 
                  size="lg" 
                  className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg px-10 h-14"
                  onClick={() => handleGetStarted('signup')}
                >
                  Start Free Today
                </Button>
                <Button 
                  variant="outline" 
                  size="lg"
                  className="text-lg px-10 h-14"
                  onClick={scrollToMockup}
                >
                  See Demo
                </Button>
              </div>

              <div className="space-y-4 pt-8">
                <SignupCounter />
                <p className="text-sm text-muted-foreground">
                  No credit card needed. Cancel anytime.
                </p>
                <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground">
                  <span className="font-medium">Trusted integrations:</span>
                  <span>FNB</span>
                  <span>Capitec</span>
                  <span>PayFast</span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
        <p className="text-xs text-muted-foreground">&copy; 2025 NexusGrid. All rights reserved.</p>
        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
          <a className="text-xs hover:underline underline-offset-4" href="mailto:hustlebosssa@gmail.com">
            hustlebosssa@gmail.com
          </a>
          <a className="text-xs hover:underline underline-offset-4" href="tel:+27678521290">
            +27678521290
          </a>
        </nav>
      </footer>
    </div>
  );
};

export default LandingPage;