"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Flame, Users, CheckCircle, Heart, Sparkles, Mail, Instagram, Facebook, Youtube, Twitter } from "lucide-react";
import { loadStripe } from '@stripe/stripe-js';
import { useState } from 'react';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '');

export default function LandingPage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [email, setEmail] = useState('');
  const [smsPhone, setSmsPhone] = useState('');

  const handlePayment = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('/api/create-checkout-session', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          amount: 5000,
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to create checkout session');
      }

      const { sessionId } = await response.json();
      const stripe = await stripePromise;

      if (!stripe) {
        throw new Error('Stripe failed to load');
      }

      const { error: redirectError } = await stripe.redirectToCheckout({
        sessionId,
      });

      if (redirectError) {
        setError(redirectError.message || 'Payment failed');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Payment error occurred');
    } finally {
      setLoading(false);
    }
  };

  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setLoading(true);
      setError(null);

      const response = await fetch('/api/send-sms', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          phone: smsPhone,
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to send SMS');
      }

      setEmail('');
      setSmsPhone('');
      // Show success message or redirect as needed
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Signup error occurred');
    } finally {
      setLoading(false);
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="FlavourFlow"
          button={{
            text: "Start Cooking Today",            href: "#hero"
          }}
          className="border-b border-accent/20"
          buttonClassName="rounded-full"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="FLAVOURFLOW"
          description="From quick weeknight meals to gourmet dishes, we bring flavor and fun to your kitchen"
          buttons={[
            {
              text: "Start Cooking Today",              href: "#recipes"
            },
            {
              text: "Explore Community",              href: "#testimonials"
            }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/chef-kitchen-taking-notes_23-2148006685.jpg"
          imageAlt="Fresh ingredients and cooking in a modern kitchen"
          frameStyle="card"
          logoLineHeight={1.15}
          ariaLabel="Hero section: Discover the joy of cooking"
          className="py-16 md:py-24"
          logoClassName="text-4xl md:text-7xl text-white"
          descriptionClassName="text-lg md:text-2xl text-white"
          buttonClassName="px-6 py-3 rounded-full"
          containerClassName="bg-blue-900"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Building a community where cooking brings people together and joy fills every kitchen"
          metrics={[
            {
              icon: Flame,
              label: "Recipes Shared",              value: "10K+"
            },
            {
              icon: Users,
              label: "Community Members",              value: "500K+"
            },
            {
              icon: CheckCircle,
              label: "Successful Meals",              value: "2M+"
            },
            {
              icon: Heart,
              label: "Average Rating",              value: "4.8★"
            }
          ]}
          useInvertedBackground="invertDefault"
          ariaLabel="About section: Our community impact"
          className="py-20 md:py-28"
          titleClassName="text-3xl md:text-5xl font-semibold"
          metricValueClassName="text-5xl md:text-6xl font-bold"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Discover Your Next Favorite Recipe"
          description="Explore thousands of curated recipes, find inspiration, and cook meals that bring joy to your table"
          features={[
            {
              id: 1,
              title: "Smart Recipe Discovery",              description: "Browse by ingredients you have on hand, dietary preferences, or cooking time. Find the perfect recipe in seconds.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/top-view-cropped-hands-senior-cook-unrecognizable-cutting-carrot-cooking-vegetable-stew_1098-20510.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/top-view-cropped-hands-senior-cook-unrecognizable-cutting-carrot-cooking-vegetable-stew_1098-20510.jpg"
              }
            },
            {
              id: 2,
              title: "Meal Planning Made Easy",              description: "Plan your week ahead with our intelligent meal planner. Save time and reduce food waste with organized recipes.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/people-cooking-enjoying-food_23-2149257390.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/people-cooking-enjoying-food_23-2149257390.jpg"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          ariaLabel="Feature section: Recipe discovery and meal planning"
          className="py-20 md:py-28"
          textBoxTitleClassName="text-3xl md:text-5xl font-semibold"
          textBoxDescriptionClassName="text-lg md:text-xl"
          featureTitleClassName="text-2xl md:text-4xl font-semibold"
          featureDescriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="recipes" data-section="recipes">
        <ProductCardFour
          title="Featured Recipes This Week"
          description="Discover the most popular and highly-rated recipes from our community"
          tag="Weekly Picks"
          tagIcon={Sparkles}
          textboxLayout="default"
          products={[
            {
              id: "recipe-1",              name: "Creamy Pasta Carbonara",              price: "30 min",              variant: "Italian • Dinner • Easy",              imageSrc: "https://img.b2bpic.net/free-photo/recipe-book-hourglass-kitchen_23-2148114225.jpg",              imageAlt: "Creamy pasta carbonara with fresh ingredients"
            },
            {
              id: "recipe-2",              name: "Mediterranean Salad",              price: "15 min",              variant: "Healthy • Lunch • Vegetarian",              imageSrc: "https://img.b2bpic.net/free-photo/woman-cooking-some-healthy-food-home_23-2149028683.jpg",              imageAlt: "Fresh Mediterranean salad with vibrant vegetables"
            },
            {
              id: "recipe-3",              name: "Classic Chocolate Cake",              price: "45 min",              variant: "Dessert • Baking • Sweet",              imageSrc: "https://img.b2bpic.net/free-photo/mid-section-og-anonymous-cook-seasoning-dish-with-pepper_1098-20544.jpg",              imageAlt: "Decadent chocolate cake with frosting"
            },
            {
              id: "recipe-4",              name: "Cozy Tomato Soup",              price: "25 min",              variant: "Comfort Food • Soup • Vegan",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-cooking-kitchen_1303-22171.jpg",              imageAlt: "Warm tomato soup in a white bowl"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          ariaLabel="Featured recipes section"
          className="py-20 md:py-28"
          cardNameClassName="text-lg font-semibold"
          cardVariantClassName="text-sm text-accent"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Loved by Home Cooks Everywhere"
          description="Real stories from people who discovered joy in cooking with FlavourFlow"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              quote: "FlavourFlow transformed how I cook. The recipes are clear, the community is supportive, and I've discovered so many new favorite dishes. Cooking has never been this fun!",              name: "Sarah Chen",              role: "Home Cook & Parent",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              imageAlt: "Sarah Chen smiling"
            },
            {
              id: "2",              quote: "As someone who works long hours, I love how FlavourFlow helps me find quick, delicious meals. The meal planner saves me so much time during the week.",              name: "Marcus Johnson",              role: "Busy Professional",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Marcus Johnson smiling"
            },
            {
              id: "3",              quote: "The community aspect is incredible. I love sharing my own recipes and learning from others. It's turned cooking into something I do with friends, even when we're apart.",              name: "Elena Rodriguez",              role: "Food Enthusiast",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg",              imageAlt: "Elena Rodriguez smiling"
            },
            {
              id: "4",              quote: "My kids actually ask me to make recipes from FlavourFlow now! The family-friendly meals are a game-changer for our household.",              name: "David Park",              role: "Parent of Three",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "David Park smiling"
            },
            {
              id: "5",              quote: "The dietary filters help me find recipes that match my lifestyle. It's empowering to have so many inclusive options to choose from.",              name: "Jasmine Williams",              role: "Health-Conscious Cook",              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-posing-purple-wall_176420-2852.jpg",              imageAlt: "Jasmine Williams smiling"
            },
            {
              id: "6",              quote: "I've learned more cooking techniques from FlavourFlow than from years of watching food shows. The tips and explanations are gold!",              name: "Thomas Bergström",              role: "Aspiring Chef",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Thomas Bergström smiling"
            }
          ]}
          ariaLabel="Testimonials section"
          className="py-20 md:py-28"
          quoteClassName="text-lg md:text-xl italic"
          nameClassName="text-lg font-semibold"
          roleClassName="text-sm text-accent"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Cooking Questions Answered"
          sideDescription="Find answers to common cooking questions and learn tips to improve your kitchen skills"
          textPosition="left"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I find recipes that fit my dietary preferences?",              content: "Use our advanced filters to search by dietary restrictions, allergies, and cuisine type. You can save your preferences in your profile so they're automatically applied to every search."
            },
            {
              id: "2",              title: "Can I adjust serving sizes for recipes?",              content: "Yes! Each recipe has a serving size slider that automatically adjusts all ingredient quantities. This makes it easy to cook for any number of people."
            },
            {
              id: "3",              title: "How does the meal planner work?",              content: "Select your recipes for the week, and our planner generates a shopping list. It's organized by section to match your grocery store layout, saving you time and reducing food waste."
            },
            {
              id: "4",              title: "Can I share my own recipes with the community?",              content: "Absolutely! You can upload your own recipes, include photos, and share them with our community. Engage with other cooks and build your culinary reputation."
            },
            {
              id: "5",              title: "What if I'm a beginner in the kitchen?",              content: "We have a special 'Beginner-Friendly' section with detailed step-by-step instructions, video tutorials, and safety tips. Start with our fundamentals course to build confidence."
            }
          ]}
          ariaLabel="FAQ section"
          className="py-20 md:py-28"
          sideTitleClassName="text-3xl md:text-5xl font-semibold"
          sideDescriptionClassName="text-base md:text-lg"
          accordionTitleClassName="text-lg font-semibold"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Cooking Insights & Tips"
          description="Learn cooking techniques, discover seasonal ingredients, and get inspiration from our community"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              tags: ["Technique", "Cooking Tips", "Beginner"],
              title: "Master the Art of Knife Skills",              excerpt: "Learn essential knife techniques that will transform your cooking and make meal prep faster and safer.",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-vegetables-as-onion-egg-garlic-with-butter-spices-white-background-with-copy-space_141793-5847.jpg",              imageAlt: "Knife skills demonstration in kitchen",              authorName: "Chef Michelle",              date: "March 15, 2025"
            },
            {
              id: "2",              tags: ["Seasonal", "Ingredients", "Spring"],
              title: "Spring Produce Guide: What's Fresh Now",              excerpt: "Discover the best seasonal vegetables and fruits available this spring and how to use them in your cooking.",              imageSrc: "https://img.b2bpic.net/free-photo/mid-section-unrecognizable-man-apron-adding-lemon-juice-fresh-salad_1098-20536.jpg",              imageAlt: "Fresh spring vegetables at market",              authorName: "Farm to Table",              date: "March 12, 2025"
            },
            {
              id: "3",              tags: ["Meal Prep", "Time-Saving", "Busy"],
              title: "Weekend Meal Prep: Save Hours During the Week",              excerpt: "Simple strategies for preparing meals ahead of time without spending your entire weekend in the kitchen.",              imageSrc: "https://img.b2bpic.net/free-photo/farm-fresh-vegetable-ingredient-kitchen-utensil-blue-wooden-table_23-2147956615.jpg",              imageAlt: "Organized meal prep containers",              authorName: "Quick Meals",              date: "March 10, 2025"
            },
            {
              id: "4",              tags: ["Family", "Kids", "Fun"],
              title: "Cooking with Kids: Fun Recipes They'll Love",              excerpt: "Involve your children in the kitchen with simple, fun recipes that teach cooking skills and create memories.",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-unrecognizable-cook-adding-parsley-salad-bowl_1098-20535.jpg",              imageAlt: "Kids cooking together in kitchen",              authorName: "Family Kitchen",              date: "March 8, 2025"
            }
          ]}
          ariaLabel="Blog section"
          className="py-20 md:py-28"
          cardTitleClassName="text-xl font-semibold"
          excerptClassName="text-base"
          authorDateClassName="text-sm text-accent"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Inspired with Weekly Recipes"
          description="Get the best recipes, cooking tips, and community stories delivered to your inbox every week. Join thousands of home cooks discovering new flavors."
          tagIcon={Mail}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We'll send you weekly recipes and cooking tips. Unsubscribe anytime. Check our Privacy Policy for details."
          onSubmit={(email) => {
            // Handle newsletter signup
            console.log('Newsletter signup:', email);
          }}
          ariaLabel="Newsletter signup section"
          className="py-20 md:py-28"
          titleClassName="text-3xl md:text-5xl font-semibold"
          descriptionClassName="text-base md:text-lg"
        />
      </div>

      <div className="w-full py-20 md:py-28 flex items-center justify-center bg-background">
        <div className="w-full max-w-md mx-auto px-6">
          <div className="text-center mb-8">
            <h2 className="text-3xl md:text-4xl font-semibold mb-4">Sign Up & Get SMS Notification</h2>
            <p className="text-lg text-foreground/80 mb-6">Join our community and receive cooking updates via SMS.</p>
          </div>
          <form onSubmit={handleSignup} className="bg-card rounded-xl p-8 mb-6 space-y-4">
            <div>
              <input
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="w-full px-4 py-2 bg-secondary-cta text-foreground rounded-full border border-accent/30 focus:outline-none focus:ring-2 focus:ring-primary-cta"
              />
            </div>
            <div>
              <input
                type="tel"
                placeholder="Enter your phone number"
                value={smsPhone}
                onChange={(e) => setSmsPhone(e.target.value)}
                required
                className="w-full px-4 py-2 bg-secondary-cta text-foreground rounded-full border border-accent/30 focus:outline-none focus:ring-2 focus:ring-primary-cta"
              />
            </div>
            <button
              type="submit"
              disabled={loading}
              className="w-full py-3 px-6 bg-primary-cta text-background font-semibold rounded-full hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
            >
              {loading ? 'Processing...' : 'Sign Up & Send SMS'}
            </button>
            {error && (
              <p className="text-red-500 text-sm mt-4 text-center">{error}</p>
            )}
          </form>
          <p className="text-sm text-foreground/60 text-center">We'll send you a welcome SMS and cooking updates</p>
        </div>
      </div>

      <div className="w-full py-20 md:py-28 flex items-center justify-center bg-background">
        <div className="w-full max-w-md mx-auto px-6">
          <div className="text-center mb-8">
            <h2 className="text-3xl md:text-4xl font-semibold mb-4">Premium Experience</h2>
            <p className="text-lg text-foreground/80 mb-6">Get exclusive access to premium recipes and advanced meal planning features.</p>
          </div>
          <div className="bg-card rounded-xl p-8 mb-6">
            <div className="text-5xl font-bold text-primary-cta mb-2">$50</div>
            <p className="text-foreground/70 mb-8">One-time payment for lifetime access</p>
            <button
              onClick={handlePayment}
              disabled={loading}
              className="w-full py-3 px-6 bg-primary-cta text-background font-semibold rounded-full hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
            >
              {loading ? 'Processing...' : 'Unlock Premium - $50'}
            </button>
            {error && (
              <p className="text-red-500 text-sm mt-4 text-center">{error}</p>
            )}
          </div>
          <p className="text-sm text-foreground/60 text-center">Secure payment powered by Stripe</p>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="FlavourFlow"
          description="Celebrating the joy of food through recipes, cooking tips, and a vibrant community of home cooks. From quick weeknight meals to gourmet adventures, we're here to bring flavor and fun to your kitchen."
          columns={[
            {
              title: "Recipes",              items: [
                {
                  label: "Browse Recipes",                  href: "recipes"
                },
                {
                  label: "Seasonal Picks",                  href: "recipes"
                },
                {
                  label: "Trending Now",                  href: "recipes"
                },
                {
                  label: "Submit Recipe",                  href: "contact"
                }
              ]
            },
            {
              title: "Community",              items: [
                {
                  label: "Community Stories",                  href: "blog"
                },
                {
                  label: "Cooking Tips",                  href: "blog"
                },
                {
                  label: "Ask for Help",                  href: "contact"
                },
                {
                  label: "Our Blog",                  href: "blog"
                }
              ]
            },
            {
              title: "Company",              items: [
                {
                  label: "About Us",                  href: "about"
                },
                {
                  label: "Contact",                  href: "contact"
                },
                {
                  label: "Terms of Service",                  href: "#"
                },
                {
                  label: "Privacy Policy",                  href: "#"
                }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",              ariaLabel: "Follow us on Facebook"
            },
            {
              icon: Youtube,
              href: "https://youtube.com",              ariaLabel: "Subscribe on YouTube"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Follow us on Twitter"
            },
            {
              icon: Mail,
              href: "mailto:hello@flavourflow.com",              ariaLabel: "Email us"
            }
          ]}
          copyrightText="© 2025 FlavourFlow. All rights reserved. Celebrating the joy of cooking."
          ariaLabel="Site footer"
          className="pt-20 pb-8"
          logoTextClassName="text-2xl font-bold"
          descriptionClassName="text-sm md:text-base"
        />
      </div>
    </ThemeProvider>
  );
}