"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="solid-accent"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div className="min-h-screen bg-gradient-to-br from-emerald-50 to-teal-50">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center space-y-8">
            <h1 className="text-5xl font-bold text-emerald-900">
              No kinoa
            </h1>
            <p className="text-xl text-emerald-700 max-w-2xl mx-auto">
              Premium Organic Tea Collection - Discover pure, organic teas crafted for wellness. 
              Premium, sustainably sourced tea blends.
            </p>
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
                <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg">
                  <h3 className="font-semibold text-emerald-900 mb-2">Organic Green Tea Premium</h3>
                  <p className="text-emerald-700">$24.99</p>
                  <p className="text-sm text-emerald-600 mt-2">Premium green tea leaves</p>
                </div>
                <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg">
                  <h3 className="font-semibold text-emerald-900 mb-2">Classic Black Tea Blend</h3>
                  <p className="text-emerald-700">$21.99</p>
                  <p className="text-sm text-emerald-600 mt-2">Black tea blend</p>
                </div>
                <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg">
                  <h3 className="font-semibold text-emerald-900 mb-2">Delicate White Tea</h3>
                  <p className="text-emerald-700">$26.99</p>
                  <p className="text-sm text-emerald-600 mt-2">White tea premium selection</p>
                </div>
                <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg">
                  <h3 className="font-semibold text-emerald-900 mb-2">Wellness Herbal Blend</h3>
                  <p className="text-emerald-700">$19.99</p>
                  <p className="text-sm text-emerald-600 mt-2">Herbal wellness tea</p>
                </div>
              </div>
            </div>
            <div className="mt-16 bg-white/80 backdrop-blur-sm rounded-lg p-8 max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-emerald-900 mb-6">About Our Story</h2>
              <p className="text-emerald-700 mb-4">
                Bringing ancient tea traditions to modern wellness. Founded on passion for quality.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div className="text-center">
                  <h4 className="font-semibold text-emerald-900 mb-2">100% Organic & Pure</h4>
                  <p className="text-emerald-600 text-sm">
                    All our teas are sourced from certified organic farms with no additives.
                  </p>
                </div>
                <div className="text-center">
                  <h4 className="font-semibold text-emerald-900 mb-2">Health & Wellness</h4>
                  <p className="text-emerald-600 text-sm">
                    Rich in antioxidants and natural nutrients for daily wellness.
                  </p>
                </div>
                <div className="text-center">
                  <h4 className="font-semibold text-emerald-900 mb-2">Sustainable Sourcing</h4>
                  <p className="text-emerald-600 text-sm">
                    We partner with fair-trade farms that prioritize environmental conservation.
                  </p>
                </div>
              </div>
            </div>
            <div className="mt-16 bg-white/80 backdrop-blur-sm rounded-lg p-8 max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-emerald-900 mb-6">Customer Reviews</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-emerald-50 rounded-lg p-6">
                  <p className="text-emerald-700 mb-4">
                    "No kinoa tea has completely transformed my daily routine. The flavor is incredible."
                  </p>
                  <p className="font-semibold text-emerald-900">Sarah Mitchell</p>
                  <p className="text-emerald-600 text-sm">Wellness Coach</p>
                </div>
                <div className="bg-emerald-50 rounded-lg p-6">
                  <p className="text-emerald-700 mb-4">
                    "I've tried many premium teas, but No kinoa stands out. Every cup tastes fresh."
                  </p>
                  <p className="font-semibold text-emerald-900">James Chen</p>
                  <p className="text-emerald-600 text-sm">Tea Connoisseur</p>
                </div>
              </div>
            </div>
            <div className="mt-16 bg-white/80 backdrop-blur-sm rounded-lg p-8 max-w-2xl mx-auto">
              <h2 className="text-3xl font-bold text-emerald-900 mb-6">Get in Touch</h2>
              <p className="text-emerald-700 mb-6">
                Have questions about our teas? We'd love to hear from you.
              </p>
              <form className="space-y-4">
                <div>
                  <input
                    type="text"
                    placeholder="Your Name"
                    className="w-full px-4 py-3 border border-emerald-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    required
                  />
                </div>
                <div>
                  <input
                    type="email"
                    placeholder="Email Address"
                    className="w-full px-4 py-3 border border-emerald-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    required
                  />
                </div>
                <div>
                  <textarea
                    placeholder="Tell us what you'd like to know..."
                    rows={5}
                    className="w-full px-4 py-3 border border-emerald-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    required
                  />
                </div>
                <button
                  type="submit"
                  className="w-full bg-emerald-600 text-white py-3 px-6 rounded-lg hover:bg-emerald-700 transition-colors"
                >
                  Send Message
                </button>
              </form>
            </div>
            <footer className="mt-16 pt-8 border-t border-emerald-200">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                  <h3 className="font-bold text-emerald-900 mb-4">Product</h3>
                  <ul className="space-y-2 text-emerald-700">
                    <li>Tea Collection</li>
                    <li>Best Sellers</li>
                    <li>About Tea</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-bold text-emerald-900 mb-4">Company</h3>
                  <ul className="space-y-2 text-emerald-700">
                    <li>About Us</li>
                    <li>Our Story</li>
                    <li>Sustainability</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-bold text-emerald-900 mb-4">Support</h3>
                  <ul className="space-y-2 text-emerald-700">
                    <li>Contact</li>
                    <li>FAQ</li>
                    <li>Shipping Info</li>
                  </ul>
                </div>
              </div>
              <div className="mt-8 pt-8 border-t border-emerald-200 text-center">
                <p className="text-emerald-600">
                  © 2024 No kinoa. Premium tea for a better life.
                </p>
                <div className="flex justify-center space-x-4 mt-4 text-emerald-700">
                  <span>(555) 123-4567</span>
                  <span>hello@nokinoa.com</span>
                </div>
              </div>
            </footer>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}