import Image from "next/image";
import Link from "next/link";
import HeroAnimation from "@/components/HeroAnimation";
import Discover from "@/components/Discover";
import Footer from "@/components/Footer";
import db from "@/lib/db";
import { getSiteConfig } from "@/lib/config";

export default async function Home() {
  const categories = await db.query(`SELECT * FROM Category`) as any[];
  const config = await getSiteConfig();

  return (
    <>
      <nav className="fixed top-0 z-50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl flex justify-between items-center px-6 py-4 w-full shadow-[0_12px_32px_rgba(26,28,28,0.06)]">
        <div className="flex items-center gap-4">
          <span className="text-3xl md:text-4xl font-serif text-primary italic tracking-tight">{config.site_name}</span>
        </div>
        <div className="hidden md:flex gap-14 items-center">
          <Link className="text-emerald-900 dark:text-emerald-400 font-bold font-sans uppercase tracking-widest text-lg border-b-2 border-emerald-500 pb-1" href="/">Discover</Link>
          <Link className="text-emerald-900/70 dark:text-zinc-400 font-bold font-sans uppercase tracking-widest text-lg hover:text-emerald-900 transition-colors" href="/profile">Profile</Link>
          <Link className="px-10 py-2 bg-primary text-white rounded-none font-bold font-sans uppercase tracking-widest text-lg hover:opacity-90 transition-all active:scale-95 ml-2" href="/login">Login</Link>
        </div>
        <div className="flex items-center gap-4">
          <button className="text-emerald-900 dark:text-emerald-500 hover:opacity-80 transition-opacity active:scale-95 transition-transform duration-300">
            <span className="material-symbols-outlined text-3xl" data-icon="search">search</span>
          </button>
        </div>
      </nav>

      <main className="pt-4 pb-0">
        <section className="relative overflow-hidden border-b border-zinc-100 dark:border-zinc-800">
          <div className="w-full grid grid-cols-1 lg:grid-cols-2 items-stretch min-h-[450px] lg:min-h-[620px]">
            <div className="flex flex-col justify-center p-12 md:p-16 lg:p-20 space-y-10 z-10 bg-white dark:bg-zinc-900">
              <h1 className="text-4xl md:text-6xl font-serif text-primary italic leading-[1.1] tracking-tight">
                {config.hero_title.split(',').map((part: string, i: number) => (
                  <span key={i}>
                    {i === 1 ? <><br/><span className="text-emerald-600">{part}</span></> : part}
                  </span>
                ))}
              </h1>
              <p className="text-xl md:text-2xl text-zinc-500 dark:text-zinc-400 max-w-xl leading-relaxed font-serif italic font-light opacity-95 tracking-tight">
                A premium selection of wellness products designed for longevity and vital performance.
              </p>
            </div>
            <div className="relative min-h-[400px] lg:min-h-full overflow-hidden">
              <div className="absolute inset-0">
                <HeroAnimation />
              </div>
            </div>
          </div>
        </section>

        <Discover/>

        <section className="py-24 bg-surface-container-low">
          <div className="px-6 max-w-full lg:px-16 mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-5xl md:text-6xl font-serif text-primary italic tracking-tight">Explore Wellness</h2>
              <p className="text-zinc-400 text-xl mt-4 italic font-serif">Selected for your lifelong transformation</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 mb-24">
              {categories.filter(c => {
                if (c.id === 'cat_workout' && config.show_workout_log === 'false') return false;
                if (c.id === 'cat_calorie' && config.show_calorie_tracker === 'false') return false;
                return ['cat_supps', 'cat_equip'].includes(c.id);
              }).map((cat) => (
                <Link 
                  key={cat.id} 
                  href={cat.id === 'cat_supps' ? '/shop/supplements' : '/shop/equipment'} 
                  className="space-y-8 group"
                >
                  <div className={`aspect-[16/7] rounded-none flex items-center justify-center shadow-sm group-hover:shadow-2xl transition-all duration-500 overflow-hidden relative border border-zinc-100 dark:border-zinc-800 ${cat.id === 'cat_supps' ? 'bg-zinc-50 dark:bg-emerald-950/20' : 'bg-white dark:bg-zinc-900'}`}>
                    <img 
                      src={cat.image || `https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&q=80&w=400`} 
                      className={`w-full h-full transition-transform duration-1000 group-hover:scale-110 object-cover`} 
                      alt={cat.name} 
                    />
                    <div className="absolute inset-0 bg-emerald-900/10 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </div>
                  <div className="px-2 space-y-2">
                    <p className="text-3xl font-serif italic text-primary tracking-tight group-hover:text-emerald-600 transition-colors">{cat.name}</p>
                    <p className="text-xl text-zinc-500 dark:text-zinc-400 leading-relaxed italic font-serif">
                      {cat.id === 'cat_supps' 
                        ? 'Premium quality supplements for nutrition and professional recovery.' 
                        : 'Elite gym equipment and home workout tools for peak results.'}
                    </p>
                    <div className="h-1 w-16 bg-emerald-600/30 rounded-full group-hover:w-full transition-all duration-700" style={{ backgroundColor: config.primary_color + '4d' }}></div>
                  </div>
                </Link>
              ))}
            </div>

            <div className="max-w-7xl mx-auto">
              <div className="bg-white dark:bg-zinc-900 rounded-t-[80px] overflow-hidden shadow-2xl border border-outline-variant/10 group">
                <div className="aspect-[21/5] relative overflow-hidden">
                  <img 
                    src="/planner-hero.jpg" 
                    className="w-full h-full object-cover object-top transition-transform duration-[3000ms] group-hover:scale-105" 
                    alt="Personalized Fitness Planner"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent" />
                </div>
                <div className="px-12 py-6 md:px-20 md:pb-10 md:pt-6 text-center space-y-6">
                  <h3 className="text-3xl md:text-4xl font-serif text-primary tracking-tight font-medium">Personalized Fitness Planner</h3>
                  <div className="space-y-6">
                    <p className="text-xl md:text-2xl text-on-surface-variant leading-relaxed italic font-serif max-w-4xl mx-auto font-light opacity-95">
                      Answer a few quick questions and unlock a personalized workout and meal plan tailored to your goals.
                    </p>
                  </div>
                  <div className="pt-2">
                    <Link href="/fitness-planner" className="inline-block px-12 py-6 bg-primary text-white rounded-none font-bold font-sans uppercase tracking-[0.3em] text-lg hover:shadow-2xl transition-all active:scale-95 shadow-xl hover:opacity-90">
                      Start Journey
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-8 md:py-10 px-6">
          <div className="max-w-4xl mx-auto text-center bg-primary rounded-none pt-2 md:pt-3 pb-3 md:pb-4 px-6 md:px-8 shadow-2xl relative overflow-hidden">
            {/* Ambient light effect background */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
            
            {/* Main Headline */}
            <h2 className="text-3xl md:text-4xl font-serif italic text-white mb-2 tracking-tight">Join the Inner Circle</h2>
            
            {/* Updated Subheadline */}
            <p className="text-emerald-100 text-xl md:text-2xl mb-3 opacity-90 max-w-3xl mx-auto">
              Create your free account to unlock exclusive wellness tools and personalized tracking:
            </p>

            {/* Benefit List */}
            <div className="max-w-3xl mx-auto text-left mb-4 space-y-3">
              <div className="flex items-start gap-5 group">
                <div className="flex-shrink-0 w-14 h-14 rounded-full bg-white/10 flex items-center justify-center backdrop-blur-sm border border-white/10 group-hover:bg-white/20 group-hover:scale-110 transition-all duration-300">
                  <span className="material-symbols-outlined text-3xl text-emerald-200" data-icon="monitoring">monitoring</span>
                </div>
                <div className="pt-2">
                  <h4 className="text-white font-bold font-sans uppercase tracking-widest text-lg inline">Personalized Fitness Dashboard</h4>
                  <p className="text-emerald-100/70 inline font-serif italic text-xl ml-2">Track your daily habits and fitness progress in one place.</p>
                </div>
              </div>

              <div className="flex items-start gap-5 group">
                <div className="flex-shrink-0 w-14 h-14 rounded-full bg-white/10 flex items-center justify-center backdrop-blur-sm border border-white/10 group-hover:bg-white/20 group-hover:scale-110 transition-all duration-300">
                  <span className="material-symbols-outlined text-3xl text-emerald-200" data-icon="notifications_active">notifications_active</span>
                </div>
                <div className="pt-2">
                  <h4 className="text-white font-bold font-sans uppercase tracking-widest text-lg inline">Custom Product Alerts</h4>
                  <p className="text-emerald-100/70 inline font-serif italic text-xl ml-2">Be the first to know when your favorite gear and items are back in stock.</p>
                </div>
              </div>

              <div className="flex items-start gap-5 group">
                <div className="flex-shrink-0 w-14 h-14 rounded-full bg-white/10 flex items-center justify-center backdrop-blur-sm border border-white/10 group-hover:bg-white/20 group-hover:scale-110 transition-all duration-300">
                  <span className="material-symbols-outlined text-3xl text-emerald-200" data-icon="local_offer">local_offer</span>
                </div>
                <div className="pt-2">
                  <h4 className="text-white font-bold font-sans uppercase tracking-widest text-lg inline">Exclusive App Discounts</h4>
                  <p className="text-emerald-100/70 inline font-serif italic text-xl ml-2">Get member-only deals on top supportive wellness apps.</p>
                </div>
              </div>
            </div>

            {/* Form Inputs and Button */}
            <form className="flex flex-col md:flex-row gap-4 max-w-3xl mx-auto">
              <input 
                className="flex-1 px-8 py-5 rounded-none bg-white/15 border border-white/30 text-white placeholder:text-emerald-100/60 text-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all font-serif italic" 
                placeholder="Your email address" 
                type="email"
                required
              />
              <button 
                className="px-10 py-5 bg-white text-primary font-bold rounded-none text-lg hover:bg-emerald-100 active:scale-95 transition-all shadow-xl uppercase tracking-widest whitespace-nowrap"
              >
                Create Free Account
              </button>
            </form>
          </div>
        </section>
      </main>

      <Footer siteName={config.site_name} />

      <nav className="md:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-4 pb-10 px-6 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-2xl rounded-none shadow-[0_-8px_24px_rgba(0,0,0,0.04)]">
        <Link className="flex flex-col items-center gap-2 text-primary" href="/">
          <span className="material-symbols-outlined text-3xl" data-icon="explore">explore</span>
          <span className="font-sans uppercase tracking-widest text-[11px] font-bold">Discover</span>
        </Link>
        <Link className="flex flex-col items-center gap-2 text-zinc-400 dark:text-zinc-600 hover:text-emerald-700 dark:hover:text-emerald-200" href="/profile">
          <span className="material-symbols-outlined text-3xl" data-icon="person_outline">person</span>
          <span className="font-sans uppercase tracking-widest text-[11px] font-bold">Profile</span>
        </Link>
        <Link className="flex flex-col items-center gap-2 text-primary hover:opacity-80" href="/login">
          <span className="material-symbols-outlined text-3xl" data-icon="login">login</span>
          <span className="font-sans uppercase tracking-widest text-[11px] font-bold">Login</span>
        </Link>
      </nav>
    </>
  );
}