import { Heart, Brain, Moon, Flame, Users, Clock, CheckCircle, Star, MessageCircle, ArrowRight, Sparkles, Shield, Target } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import sushantaImg from "@/assets/sushanta.jpg";

const WORKSHOP_LINK = "https://www.innerbalanceacademy.in/courses/FREE-Stress-Relief-Workshop-69c1106a633db2849c6c24ea";
const WHATSAPP_LINK = "https://wa.me/919337419725?text=ନମସ୍କାର%2C%20ମୁଁ%20Free%20Workshop%20ବିଷୟରେ%20ଜାଣିବାକୁ%20ଚାହୁଁଛି";

const problemCards = [
  { icon: Brain, title: "ମାନସିକ ଚାପ", desc: "ସବୁବେଳେ tension ଏବଂ overthinking ରେ ରହୁଛନ୍ତି" },
  { icon: Moon, title: "ନିଦ୍ରାହୀନତା", desc: "ରାତିରେ ଠିକ୍ ସେ ନିଦ ହେଉନାହିଁ, ସକାଳେ ଥକ୍କା ଲାଗୁଛି" },
  { icon: Flame, title: "ରାଗ ଏବଂ ଅଶାନ୍ତି", desc: "ଛୋଟ ଛୋଟ ଜିନିଷରେ irritate ହୋଇଯାଉଛନ୍ତି" },
  { icon: Users, title: "ସମ୍ପର୍କରେ ସମସ୍ୟା", desc: "ପରିବାର ଏବଂ କର୍ମକ୍ଷେତ୍ରରେ ସମସ୍ୟା ବଢ଼ୁଛି" },
  { icon: Heart, title: "ଭିତରେ ଅଶାନ୍ତି", desc: "ବାହାରୁ ସବୁ ଠିକ୍ ଦେଖାଯାଉଛି, କିନ୍ତୁ ଭିତରେ peace ନାହିଁ" },
];

const timelineSteps = [
  { hour: "ପ୍ରଥମ ଘଣ୍ଟା", title: "LIVE Stress Release", desc: "EFT Tapping ଦ୍ୱାରା ତୁରନ୍ତ stress ମୁକ୍ତି ଅନୁଭବ କରନ୍ତୁ", icon: Sparkles },
  { hour: "ଦ୍ୱିତୀୟ ଘଣ୍ଟା", title: "Stress Triggers ଚିହ୍ନଟ", desc: "ଆପଣଙ୍କ stress ର ମୂଳ କାରଣ ଖୋଜନ୍ତୁ ଏବଂ ବୁଝନ୍ତୁ", icon: Target },
  { hour: "ତୃତୀୟ ଘଣ୍ଟା", title: "Long-Term Relief Roadmap", desc: "ଦୀର୍ଘକାଳୀନ ଶାନ୍ତି ପାଇଁ ଏକ ସ୍ପଷ୍ଟ ପଥ ପାଆନ୍ତୁ", icon: Shield },
];

const audienceList = [
  "40+ ବୟସର professionals ଯେଉଁମାନେ ଚାପରେ ଅଛନ୍ତି",
  "Burnout ଅନୁଭବ କରୁଥିବା ବ୍ୟକ୍ତିମାନେ",
  "Medicine ବିନା ଶାନ୍ତି ଚାହୁଁଥିବା ମାନେ",
  "ନିଜ ଜୀବନରେ balance ଆଣିବାକୁ ଚାହୁଁଥିବା ସମସ୍ତେ",
  "ମାନସିକ ସ୍ୱାସ୍ଥ୍ୟ ପ୍ରତି ସଚେତନ ବ୍ୟକ୍ତିମାନେ",
];

const testimonials = [
  { name: "ସୁନୀତା ଦାସ", text: "ଏହି workshop ମୋ ଜୀବନ ବଦଳାଇ ଦେଲା। ମୁଁ ପ୍ରଥମ ଥର ପାଇଁ ସତରେ relax ଅନୁଭବ କଲି।", role: "Teacher, Bhubaneswar" },
  { name: "ରାଜେଶ ପଟ୍ଟନାୟକ", text: "EFT Tapping ବିଷୟରେ ଜାଣି ବହୁତ ଭଲ ଲାଗିଲା। ସୁଶାନ୍ତ ସର୍ ଖୁବ ଭଲ ଭାବରେ ବୁଝାଇଲେ।", role: "IT Professional, Cuttack" },
  { name: "ମମତା ମହାପାତ୍ର", text: "ମୋର ନିଦ ସମସ୍ୟା ବହୁତ କମ ହୋଇଗଲା। ଧନ୍ୟବାଦ Inner Balance Academy!", role: "Business Owner, Puri" },
];

const Index = () => {
  return (
    <div className="min-h-screen bg-background text-foreground overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative py-16 md:py-24 px-4">
        <div className="absolute inset-0 bg-gradient-to-br from-wellness-mint via-background to-wellness-warm opacity-70" />
        <div className="relative max-w-4xl mx-auto text-center">
          <p className="text-sm md:text-base font-semibold tracking-widest uppercase text-primary mb-4">
            Inner Balance Academy
          </p>
          <h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
            🔥 ମାଗଣା LIVE <br className="md:hidden" />
            <span className="text-primary">Stress Relief Workshop</span>
          </h1>
          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-4">
            ପ୍ରତି ରବିବାର — 40+ ବୟସର professionals ଏବଂ stress ରେ ଥିବା ପ୍ରତିଟି ବ୍ୟକ୍ତିଙ୍କ ପାଇଁ
          </p>
          <p className="text-base text-muted-foreground mb-8">
            🕐 3 ଘଣ୍ଟା LIVE Session &nbsp;•&nbsp; 🎯 EFT Tapping Technique &nbsp;•&nbsp; 💯 ସମ୍ପୂର୍ଣ୍ଣ FREE
          </p>
          <a href={WORKSHOP_LINK} target="_blank" rel="noopener noreferrer">
            <Button size="lg" className="text-lg px-10 py-6 rounded-full shadow-lg hover:shadow-xl transition-all hover:scale-105">
              ଏବେ FREE ରେ Join କରନ୍ତୁ <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </a>
          <p className="mt-4 text-sm text-muted-foreground">🔒 କୌଣସି payment ନାହିଁ — 100% ମାଗଣା</p>
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-16 md:py-20 px-4 bg-wellness-warm/50">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold text-center mb-4">
            ଆପଣ କି ଏହି ସମସ୍ୟାରେ ଅଛନ୍ତି?
          </h2>
          <p className="text-center text-muted-foreground mb-12 text-lg">
            ଯଦି ଏଥିରୁ ଗୋଟିଏ ବି ଆପଣଙ୍କ ସହ match କରୁଛି, ତେବେ ଏହି workshop ଆପଣଙ୍କ ପାଇଁ
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {problemCards.map((item, i) => (
              <Card key={i} className="border-none shadow-md hover:shadow-lg transition-shadow bg-card">
                <CardContent className="p-6 flex flex-col items-center text-center">
                  <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <item.icon className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="font-bold text-lg mb-2">{item.title}</h3>
                  <p className="text-muted-foreground text-sm">{item.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Workshop Details */}
      <section className="py-16 md:py-20 px-4">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold text-center mb-4">
            କାର୍ଯ୍ୟଶାଳାରେ କଣ ହେବ?
          </h2>
          <p className="text-center text-muted-foreground mb-12 text-lg">
            3 ଘଣ୍ଟାର ଏହି LIVE session ରେ ଆପଣ ଶିଖିବେ
          </p>
          <div className="space-y-6">
            {timelineSteps.map((step, i) => (
              <div key={i} className="flex gap-4 md:gap-6 items-start">
                <div className="flex flex-col items-center">
                  <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold shrink-0">
                    <step.icon className="h-6 w-6" />
                  </div>
                  {i < timelineSteps.length - 1 && <div className="w-0.5 h-16 bg-border mt-2" />}
                </div>
                <div className="pb-4">
                  <span className="text-xs font-semibold uppercase tracking-wider text-primary">{step.hour}</span>
                  <h3 className="text-xl font-bold mt-1">{step.title}</h3>
                  <p className="text-muted-foreground mt-1">{step.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who Is This For */}
      <section className="py-16 md:py-20 px-4 bg-wellness-mint/50">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold text-center mb-12">
            କାହା ପାଇଁ ଏହା?
          </h2>
          <div className="space-y-4">
            {audienceList.map((item, i) => (
              <div key={i} className="flex items-start gap-3 bg-card rounded-lg p-4 shadow-sm">
                <CheckCircle className="h-6 w-6 text-primary shrink-0 mt-0.5" />
                <p className="text-lg">{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Instructor Section */}
      <section className="py-16 md:py-20 px-4">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-2xl md:text-4xl font-bold mb-8">ଆପଣଙ୍କ Guide</h2>
          <div className="bg-card rounded-2xl p-8 shadow-lg">
            <img src={sushantaImg} alt="Sushanta Kumar Padhan" className="w-32 h-32 rounded-full object-cover mx-auto mb-6 shadow-md border-4 border-primary/20" />
            <h3 className="text-2xl font-bold">Sushanta Kumar Padhan</h3>
            <p className="text-primary font-semibold mt-1 mb-4">Founder, Inner Balance Academy</p>
            <p className="text-muted-foreground leading-relaxed max-w-lg mx-auto">
              EFT Stress Relief ର ମିଶନ ସହ ଶତାଧିକ ବ୍ୟକ୍ତିଙ୍କୁ ମାନସିକ ଶାନ୍ତି ପାଇବାରେ ସାହାଯ୍ୟ କରିଛନ୍ତି। 
              ସେ ବିଶ୍ୱାସ କରନ୍ତି ଯେ ପ୍ରତ୍ୟେକ ବ୍ୟକ୍ତି ଶାନ୍ତି ଏବଂ ସନ୍ତୁଳନ ପାଇବାର ହକ୍‍ଦାର।
            </p>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-16 md:py-20 px-4 bg-wellness-warm/50">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold text-center mb-12">
            ଅଂଶଗ୍ରହଣକାରୀମାନେ କହନ୍ତି
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <Card key={i} className="border-none shadow-md bg-card">
                <CardContent className="p-6">
                  <div className="flex gap-1 mb-4">
                    {[...Array(5)].map((_, j) => (
                      <Star key={j} className="h-4 w-4 fill-primary text-primary" />
                    ))}
                  </div>
                  <p className="text-muted-foreground mb-4 italic">"{t.text}"</p>
                  <div>
                    <p className="font-bold">{t.name}</p>
                    <p className="text-sm text-muted-foreground">{t.role}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-16 md:py-24 px-4">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-2xl md:text-4xl font-bold mb-4">
            ଏବେ ରେଜିଷ୍ଟର କରନ୍ତୁ — ସମ୍ପୂର୍ଣ୍ଣ FREE
          </h2>
          <p className="text-lg text-muted-foreground mb-3">
            🔴 ଏହା LIVE session — recording ନୁହେଁ। ସୀମିତ seats ଅଛି।
          </p>
          <p className="text-muted-foreground mb-8">
            ଅପେକ୍ଷା ନକରନ୍ତୁ — ଆଜି ହିଁ ଆପଣଙ୍କ ଶାନ୍ତିର ଯାତ୍ରା ଆରମ୍ଭ କରନ୍ତୁ
          </p>
          <a href={WORKSHOP_LINK} target="_blank" rel="noopener noreferrer">
            <Button size="lg" className="text-lg px-12 py-7 rounded-full shadow-xl hover:shadow-2xl transition-all hover:scale-105">
              ମାଗଣା Workshop Join କରନ୍ତୁ <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </a>
          <p className="mt-10 text-xl md:text-2xl font-semibold text-primary italic">
            "ଶାନ୍ତି ବାହାରେ ନୁହେଁ — ଆପଣଙ୍କ ଭିତରେ ଅଛି।"
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t bg-card">
        <div className="max-w-4xl mx-auto text-center text-muted-foreground text-sm">
          <p className="font-semibold text-foreground mb-1">Inner Balance Academy</p>
          <p>© {new Date().getFullYear()} Inner Balance Academy. All rights reserved.</p>
        </div>
      </footer>

      {/* Floating WhatsApp Button */}
      <a
        href={WHATSAPP_LINK}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-6 right-6 z-50 w-14 h-14 bg-[#25D366] rounded-full flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-110 transition-all"
        aria-label="WhatsApp ରେ ଯୋଗାଯୋଗ କରନ୍ତୁ"
      >
        <MessageCircle className="h-7 w-7 text-white" />
      </a>
    </div>
  );
};

export default Index;