'use client';

import { TantalizingTease } from '@/components/tesa/tantalizing-tease';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { motion } from 'framer-motion';
import { Sparkles, Camera, Clock, Calendar } from 'lucide-react';

export default function TesaPage() {
  return (
    <main className="min-h-screen bg-brand-bg">
      <Header />
      
      <div className="pt-24 pb-16 px-4">
        <div className="max-w-4xl mx-auto">
          {/* Hero */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-12"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-brand-secondary/20 to-brand-deep/20 border border-brand-secondary/30 mb-6">
              <Sparkles className="w-4 h-4 text-brand" />
              <span className="text-sm text-brand-light">Daily at 7:00 AM UTC</span>
            </div>
            
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              <span className="bg-gradient-to-r from-brand-secondary-light via-pink-400 to-brand bg-clip-text text-transparent">
                Tesa&apos;s Tantalizing Tease
              </span>
            </h1>
            
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Your daily dose of AI-generated high fashion. Every morning, Tes serves looks 
              inspired by the structured elegance of Melania Trump — power dressing meets digital glamour. Never miss a moment.
            </p>
          </motion.div>

          {/* Main Content Grid */}
          <div className="grid md:grid-cols-2 gap-8 items-start">
            {/* Today's Photo */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2 }}
            >
              <TantalizingTease />
            </motion.div>

            {/* Schedule Info */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="space-y-6"
            >
              {/* Weekly Schedule */}
              <div className="glass-card p-6 rounded-2xl bg-black/50">
                <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                  <Calendar className="w-5 h-5 text-brand-secondary-light" />
                  Weekly Style Calendar
                </h3>
                <div className="space-y-3">
                  {[
                    { day: 'Monday', theme: 'Power Monday', emoji: '💼', color: 'text-blue-400' },
                    { day: 'Tuesday', theme: 'Chic Tuesday', emoji: '☕', color: 'text-green-400' },
                    { day: 'Wednesday', theme: 'Glamour Wednesday', emoji: '✨', color: 'text-brand-secondary-light' },
                    { day: 'Thursday', theme: 'Athleisure Thursday', emoji: '🏃‍♀️', color: 'text-orange-400' },
                    { day: 'Friday', theme: 'Cocktail Friday', emoji: '🍷', color: 'text-red-400' },
                    { day: 'Saturday', theme: 'Weekend Saturday', emoji: '☀️', color: 'text-yellow-400' },
                    { day: 'Sunday', theme: 'Sunday Serenity', emoji: '🌿', color: 'text-brand' },
                  ].map((item, i) => (
                    <div key={i} className="flex items-center justify-between text-sm">
                      <span className="text-gray-400">{item.day}</span>
                      <span className={`${item.color} flex items-center gap-1`}>
                        <span>{item.emoji}</span>
                        <span>{item.theme}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Features */}
              <div className="glass-card p-6 rounded-2xl bg-black/50">
                <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                  <Camera className="w-5 h-5 text-brand" />
                  About This Feature
                </h3>
                <ul className="space-y-3 text-sm text-gray-300">
                  <li className="flex items-start gap-2">
                    <Clock className="w-4 h-4 text-brand-secondary-light mt-0.5 flex-shrink-0" />
                    <span>New photo generated every day at 7:00 AM UTC</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Sparkles className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span>AI-powered image generation with fallback to curated gallery</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Calendar className="w-4 h-4 text-pink-400 mt-0.5 flex-shrink-0" />
                    <span>Themed looks matching the day of the week</span>
                  </li>
                </ul>
              </div>

              {/* CTA */}
              <div className="glass-card p-6 rounded-2xl bg-gradient-to-br from-brand-bg/40 to-brand-bg-surface/40 border border-brand-secondary/30">
                <p className="text-gray-300 text-sm mb-4">
                  Want Tesa as your AI operations assistant? Join Foundry Familiars.
                </p>
                <a 
                  href="/#design-partner"
                  className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary rounded-lg text-white text-sm font-medium hover:opacity-90 transition-opacity"
                >
                  <Sparkles className="w-4 h-4" />
                  Join Design Partners
                </a>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
      
      <Footer />
    </main>
  );
}
