import React, { useRef, useState } from 'react';
import { Button } from "@/components/ui/button";
import {
  Zap, Bolt, Droplet, Trees, Sparkles, Scissors, Wrench, Sun, Video, Paintbrush, HardHat, Briefcase,
  Bell, MessageCircleOff, Clock3, Search, Wifi, BatteryCharging,
  PhoneCall, FileText, CheckCircle2, Receipt, BellRing, Wallet, Brain,
  Rocket, Timer, HeartHandshake, ShieldCheck, Star, Play
} from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';
import { PhoneMockupSlider } from './PhoneMockupSlider';
import { SampleQuoteModal } from './SampleQuoteModal';
import founderImage from '@/assets/founder-sanele.png';

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

const trustBadges = [
  'Works Offline',
  'Built for South Africa 🇿🇦',
  'No Credit Card Required',
  'English · isiZulu · Afrikaans',
];

const industries = [
  { icon: Zap, label: 'Electricians' },
  { icon: Droplet, label: 'Plumbers' },
  { icon: Trees, label: 'Garden Services' },
  { icon: Sparkles, label: 'Cleaning' },
  { icon: Scissors, label: 'Hair Salons' },
  { icon: Scissors, label: 'Barbers' },
  { icon: Wrench, label: 'Mechanics' },
  { icon: Sun, label: 'Solar Installers' },
  { icon: Video, label: 'CCTV Installers' },
  { icon: Paintbrush, label: 'Painters' },
  { icon: HardHat, label: 'Contractors' },
  { icon: Briefcase, label: 'Service Businesses' },
];

const painPoints = [
  { icon: Bell, text: 'You forget to follow up with customers.' },
  { icon: MessageCircleOff, text: 'Customers say they never received the quote.' },
  { icon: Clock3, text: 'Late payments are difficult to track.' },
  { icon: MessageCircleOff, text: 'Everything is scattered across WhatsApp.' },
  { icon: Search, text: "You can't remember previous jobs." },
  { icon: BatteryCharging, text: 'Load shedding interrupts your work.' },
];

const workflow = [
  { icon: PhoneCall, label: 'Customer calls' },
  { icon: FileText, label: 'Create Quote' },
  { icon: CheckCircle2, label: 'Customer Accepts' },
  { icon: Receipt, label: 'Convert to Invoice' },
  { icon: BellRing, label: 'Automatic Reminder' },
  { icon: Wallet, label: 'Customer Pays' },
  { icon: Brain, label: 'Remembered Forever' },
];

const benefits = [
  { icon: Rocket, title: 'Professional quotes in under a minute', text: 'Send polished PDFs your customers take seriously.' },
  { icon: Timer, title: 'Get paid faster', text: 'Automatic reminders chase payment for you — politely.' },
  { icon: Brain, title: 'Never forget a customer', text: 'Every job, quote and note is remembered automatically.' },
  { icon: BatteryCharging, title: 'Works during load shedding', text: 'Fully offline. Syncs the moment you get signal back.' },
  { icon: HeartHandshake, title: 'Organised without effort', text: 'No spreadsheets. No exercise books. No stress.' },
  { icon: ShieldCheck, title: 'Built for South African businesses', text: 'Rands, PayFast, FNB, Capitec — designed for how we work.' },
];

const memoryItems = [
  'Quotes', 'Invoices', 'Jobs', 'Payments', 'Photos', 'Voice Notes',
  'Warranty Info', 'Timeline', 'Follow-ups', 'Lifetime Revenue',
];

const testimonials = [
  { name: 'Ayanda M.', type: 'Home Bakery', province: 'KwaZulu-Natal', quote: 'I stopped chasing payments in two weeks. Reminders just work.', rating: 5 },
  { name: 'Thabo N.', type: 'Electrician', province: 'Gauteng', quote: 'Quotes in minutes. Even during load shedding. My clients think I hired an assistant.', rating: 5 },
  { name: 'Lerato K.', type: 'Cleaning Services', province: 'Western Cape', quote: 'HustleBoss made me look professional. Repeat clients doubled.', rating: 5 },
];

const LandingPage: React.FC<LandingPageProps> = ({ onGetStarted }) => {
  const { t } = useTranslation();
  const mockupRef = useRef<HTMLDivElement>(null);
  const [sampleOpen, setSampleOpen] = useState(false);

  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">
          <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">
            <Button variant="ghost" onClick={() => handleGetStarted('login')}>{t('auth.login')}</Button>
            <Button onClick={() => handleGetStarted('signup')}>{t('auth.signup')}</Button>
          </div>
        </div>
      </header>

      <main className="flex-1">
        {/* 1 — HERO */}
        <section className="w-full pt-10 pb-16 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">
                <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">
                  Run Your Entire Business From Your Phone.
                </h1>
                <p className="text-xl text-muted-foreground max-w-[600px] mx-auto lg:mx-0">
                  Create professional quotes, send invoices, remember every customer and get paid faster.
                </p>
                <p className="text-base text-foreground/70 max-w-[600px] mx-auto lg:mx-0">
                  Built for South African businesses that work on the go.
                </p>

                <div className="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start">
                  <Button size="lg" className="text-base h-12 px-6" onClick={() => handleGetStarted('signup')}>
                    Start Your FREE 1-Month Trial
                  </Button>
                  <Button variant="outline" size="lg" className="text-base h-12 px-6" onClick={() => setSampleOpen(true)}>
                    See a Real Quote
                  </Button>
                </div>

                <button
                  onClick={scrollToMockup}
                  className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mx-auto lg:mx-0"
                >
                  <Play className="h-4 w-4" /> Watch 60-second demo
                </button>

                <div className="flex flex-wrap gap-x-4 gap-y-2 justify-center lg:justify-start text-sm text-muted-foreground pt-2">
                  {trustBadges.map(b => (
                    <span key={b} className="inline-flex items-center gap-1">
                      <CheckCircle2 className="h-4 w-4 text-green-600" /> {b}
                    </span>
                  ))}
                </div>
              </div>

              <div ref={mockupRef} className="flex justify-center animate-fade-in">
                <PhoneMockupSlider />
              </div>
            </div>
          </div>
        </section>

        {/* 2 — WHO IT IS FOR */}
        <section className="w-full py-16 md:py-24 bg-muted/40">
          <div className="container px-4 md:px-6">
            <div className="text-center mb-12 space-y-3">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Built for businesses that get their hands dirty.</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                If you currently run your business using WhatsApp, phone contacts, memory or an exercise book — HustleBoss was built for you.
              </p>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-w-4xl mx-auto">
              {industries.map(({ icon: Icon, label }) => (
                <div key={label} className="flex items-center gap-3 p-4 rounded-xl border bg-background hover:border-primary/40 hover:shadow-sm transition-all">
                  <div className="rounded-lg bg-primary/10 p-2"><Icon className="h-5 w-5 text-primary" /></div>
                  <span className="text-sm font-medium">{label}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 3 — PROBLEM */}
        <section className="w-full py-16 md:py-24">
          <div className="container px-4 md:px-6 max-w-4xl">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Does this sound familiar?</h2>
            </div>
            <div className="grid sm:grid-cols-2 gap-4">
              {painPoints.map(({ icon: Icon, text }, i) => (
                <div key={i} className="flex items-start gap-3 p-5 rounded-xl border bg-background">
                  <Icon className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
                  <p className="text-base">{text}</p>
                </div>
              ))}
            </div>
            <div className="text-center mt-10">
              <p className="text-2xl font-bold">HustleBoss fixes all of this.</p>
              <Button size="lg" className="mt-6" onClick={() => handleGetStarted('signup')}>Start Your FREE Trial</Button>
            </div>
          </div>
        </section>

        {/* 4 — HOW IT WORKS */}
        <section className="w-full py-16 md:py-24 bg-muted/40">
          <div className="container px-4 md:px-6">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">How HustleBoss Works</h2>
              <p className="text-muted-foreground mt-3">From first call to paid — automated end-to-end.</p>
            </div>
            <div className="max-w-3xl mx-auto space-y-3">
              {workflow.map(({ icon: Icon, label }, i) => (
                <React.Fragment key={label}>
                  <div className="flex items-center gap-4 p-4 rounded-xl border bg-background shadow-sm">
                    <div className="rounded-full bg-primary/10 p-3 shrink-0">
                      <Icon className="h-6 w-6 text-primary" />
                    </div>
                    <div className="flex-1">
                      <p className="text-xs font-mono text-muted-foreground">Step {i + 1}</p>
                      <p className="font-semibold text-lg">{label}</p>
                    </div>
                  </div>
                  {i < workflow.length - 1 && (
                    <div className="flex justify-center">
                      <div className="w-px h-4 bg-primary/30" />
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        </section>

        {/* 5 — WHY PEOPLE CHOOSE */}
        <section className="w-full py-16 md:py-24">
          <div className="container px-4 md:px-6">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Why hustlers choose HustleBoss</h2>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
              {benefits.map(({ icon: Icon, title, text }) => (
                <div key={title} className="p-6 rounded-2xl border bg-background hover:shadow-lg hover:-translate-y-1 transition-all">
                  <div className="rounded-xl bg-primary/10 p-3 w-fit mb-4">
                    <Icon className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="text-lg font-bold mb-2">{title}</h3>
                  <p className="text-muted-foreground text-sm">{text}</p>
                </div>
              ))}
            </div>
            <div className="text-center mt-10">
              <Button size="lg" onClick={() => handleGetStarted('signup')}>Start Your FREE Trial</Button>
            </div>
          </div>
        </section>

        {/* 6 — BUSINESS MEMORY */}
        <section className="w-full py-16 md:py-24 bg-gradient-to-br from-primary/5 via-background to-primary/5">
          <div className="container px-4 md:px-6 max-w-5xl">
            <div className="text-center mb-10 space-y-3">
              <span className="inline-block text-xs font-semibold uppercase tracking-widest text-primary">The HustleBoss difference</span>
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
                Your business finally remembers everything.
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                Every customer automatically builds a complete history — no admin required.
              </p>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-8">
              {memoryItems.map(item => (
                <div key={item} className="rounded-xl border bg-background px-4 py-3 text-center text-sm font-medium">
                  {item}
                </div>
              ))}
            </div>
            <p className="text-center text-lg font-semibold">
              Open any customer and instantly remember your entire relationship.
            </p>
          </div>
        </section>

        {/* 7 — SOCIAL PROOF */}
        <section className="w-full py-16 md:py-24">
          <div className="container px-4 md:px-6">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Loved by hustlers across Mzansi</h2>
            </div>
            <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
              {testimonials.map(t => (
                <div key={t.name} className="p-6 rounded-2xl border bg-background shadow-sm flex flex-col">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center font-bold text-primary">
                      {t.name.charAt(0)}
                    </div>
                    <div>
                      <p className="font-semibold">{t.name}</p>
                      <p className="text-xs text-muted-foreground">{t.type} · {t.province}</p>
                    </div>
                  </div>
                  <p className="text-sm flex-1">"{t.quote}"</p>
                  <div className="flex gap-1 mt-4">
                    {Array.from({ length: t.rating }).map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 8 — OFFLINE */}
        <section className="w-full py-16 md:py-24 bg-muted/40">
          <div className="container px-4 md:px-6 max-w-4xl">
            <div className="text-center mb-10">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Built for South African realities.</h2>
            </div>
            <div className="grid sm:grid-cols-2 gap-4">
              {[
                { icon: Wifi, text: 'Works without internet.' },
                { icon: BatteryCharging, text: 'Designed for load shedding.' },
                { icon: Rocket, text: 'Low data usage.' },
                { icon: Bolt, text: 'Syncs automatically later.' },
                { icon: ShieldCheck, text: 'Optimised for affordable Android phones.' },
              ].map(({ icon: Icon, text }) => (
                <div key={text} className="flex items-center gap-3 p-5 rounded-xl border bg-background">
                  <Icon className="h-5 w-5 text-primary shrink-0" />
                  <p className="font-medium">{text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 9 — Trial callout */}
        <section className="w-full py-12 md:py-16">
          <div className="container px-4 md:px-6">
            <div className="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
              {['1-Month Free Trial', 'No Credit Card Required', 'Cancel Anytime'].map(t => (
                <div key={t} className="p-6 rounded-2xl border bg-background">
                  <CheckCircle2 className="h-6 w-6 text-green-600 mx-auto mb-2" />
                  <p className="font-semibold">{t}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 10 — FOUNDER */}
        <section className="w-full py-16 md:py-24 bg-muted/40">
          <div className="container px-4 md:px-6 max-w-5xl">
            <div className="grid md:grid-cols-2 gap-10 items-center">
              <div className="flex justify-center">
                <div className="relative max-w-xs">
                  <div className="rounded-2xl overflow-hidden shadow-xl ring-1 ring-border/50">
                    <img src={founderImage} alt="Sanele Sibisi, Founder of HustleBoss" className="w-full h-auto object-contain" />
                  </div>
                </div>
              </div>
              <div className="space-y-4 text-lg">
                <p>"I watched too many hardworking South Africans lose money because they were trying to run businesses using WhatsApp, memory and paper.</p>
                <p>I built HustleBoss so small businesses could look professional, stay organised and get paid faster."</p>
                <p className="font-semibold pt-2">— Sanele Sibisi, Founder 🇿🇦</p>
              </div>
            </div>
          </div>
        </section>

        {/* 11 — FINAL CTA */}
        <section className="w-full py-20 md:py-28 bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10">
          <div className="container px-4 md:px-6 text-center max-w-3xl">
            <h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">
              Stop Running Your Business From Memory.
            </h2>
            <p className="text-lg text-muted-foreground mb-8">
              Join thousands of South African business owners building better businesses with HustleBoss.
            </p>
            <Button size="lg" className="text-lg h-14 px-10" onClick={() => handleGetStarted('signup')}>
              Start Your FREE 1-Month Trial
            </Button>
            <p className="text-sm text-muted-foreground mt-6">
              No credit card required. Works offline. Setup takes less than five minutes.
            </p>
          </div>
        </section>
      </main>

      <footer className="flex flex-col 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>
      </footer>

      <SampleQuoteModal
        open={sampleOpen}
        onOpenChange={setSampleOpen}
        onCTA={() => { setSampleOpen(false); handleGetStarted('signup'); }}
      />
    </div>
  );
};

export default LandingPage;