import React from 'react';

const guides = [
  {
    category: 'Product Research',
    title: 'How To Find Winning Products',
    description:
      'Discover practical methods to identify products with strong demand and profit potential.',
    image:
      'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop',
    accent: 'text-blue-300 bg-blue-500/10',
    link: '#',
  },
  {
    category: 'Store Design',
    title: 'Build High Converting Stores',
    description:
      'Learn how to create professional ecommerce stores that build trust and increase conversions.',
    image:
      'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop',
    accent: 'text-purple-300 bg-purple-500/10',
    link: '#',
  },
  {
    category: 'Marketing',
    title: 'Scale With Paid Advertising',
    description:
      'Understand TikTok Ads, Facebook Ads, and modern ecommerce marketing strategies.',
    image:
      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200&auto=format&fit=crop',
    accent: 'text-pink-300 bg-pink-500/10',
    link: '#',
  },
];

const navLinks = ['Home', 'Guides', 'Marketing', 'Scaling', 'Contact'];

export default function DropshippingVisionHomepage() {
  return (
    <div className="min-h-screen bg-slate-950 text-white overflow-x-hidden relative font-sans">
      {/* Background Glow */}
      <div className="absolute top-0 left-0 w-[500px] h-[500px] rounded-full bg-blue-500/20 blur-[120px] pointer-events-none" />
      <div className="absolute top-40 right-0 w-[500px] h-[500px] rounded-full bg-purple-500/20 blur-[120px] pointer-events-none" />

      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-white/10 backdrop-blur-xl bg-slate-950/80">
        <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
          <div>
            <h1 className="text-2xl md:text-3xl font-black tracking-tight">
              Dropshipping <span className="text-blue-400">Vision</span>
            </h1>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm text-slate-300">
            {navLinks.map((item) => (
              <a
                key={item}
                href="#"
                className="hover:text-white transition-colors duration-200"
              >
                {item}
              </a>
            ))}
          </nav>

          <a
            href="#"
            className="bg-blue-500 hover:bg-blue-400 transition-all duration-200 px-5 py-3 rounded-xl font-semibold shadow-lg shadow-blue-500/20"
          >
            Start Learning
          </a>
        </div>
      </header>

      {/* Hero */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 pt-24 pb-28 grid lg:grid-cols-2 gap-16 items-center">
        <div>
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-sm text-slate-300 mb-8 backdrop-blur-md">
            🚀 Ecommerce Growth Guides
          </div>

          <h2 className="text-5xl md:text-7xl font-black leading-tight tracking-tight mb-8">
            Learn{' '}
            <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              Dropshipping
            </span>{' '}
            The Smart Way
          </h2>

          <p className="text-slate-300 text-lg leading-relaxed mb-10 max-w-xl">
            Practical dropshipping guides, ecommerce strategies, and real-world
            knowledge designed to help beginners and entrepreneurs build
            successful online stores.
          </p>

          <div className="flex flex-wrap gap-4 mb-16">
            <a
              href="#"
              className="bg-blue-500 hover:bg-blue-400 transition-all duration-200 px-7 py-4 rounded-2xl font-bold shadow-2xl shadow-blue-500/20"
            >
              Explore Guides
            </a>

            <a
              href="#"
              className="border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-200 px-7 py-4 rounded-2xl font-bold backdrop-blur-md"
            >
              View Categories
            </a>
          </div>

          <div className="grid grid-cols-3 gap-8">
            <div>
              <h3 className="text-4xl font-black">100+</h3>
              <p className="text-slate-400 mt-2">Guides & Tutorials</p>
            </div>

            <div>
              <h3 className="text-4xl font-black">Beginner</h3>
              <p className="text-slate-400 mt-2">Friendly Content</p>
            </div>

            <div>
              <h3 className="text-4xl font-black">24/7</h3>
              <p className="text-slate-400 mt-2">Learning Access</p>
            </div>
          </div>
        </div>

        <div className="relative">
          <div className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-[2rem] blur-2xl opacity-20"></div>

          <div className="relative rounded-[2rem] overflow-hidden border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl">
            <img
              src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?q=80&w=1400&auto=format&fit=crop"
              alt="Dropshipping workspace"
              className="w-full h-[500px] object-cover"
            />

            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-transparent p-8">
              <p className="text-slate-400 text-sm">Featured Topic</p>
              <h3 className="text-3xl font-black mt-2">
                Build Profitable Stores
              </h3>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Guides */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 py-20">
        <div className="flex justify-between items-end mb-14 flex-wrap gap-6">
          <div>
            <p className="text-blue-400 font-semibold mb-3">
              Featured Learning
            </p>
            <h2 className="text-5xl font-black tracking-tight">
              Popular Guides
            </h2>
          </div>

          <a
            href="#"
            className="border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-200 px-6 py-3 rounded-xl backdrop-blur-md"
          >
            View All Guides
          </a>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {guides.map((guide) => (
            <article
              key={guide.title}
              className="rounded-[2rem] overflow-hidden border border-white/10 bg-white/5 hover:-translate-y-2 transition-all duration-300 backdrop-blur-xl"
            >
              <img
                src={guide.image}
                alt={guide.title}
                className="h-64 w-full object-cover"
              />

              <div className="p-8">
                <div
                  className={`inline-block px-3 py-1 rounded-full text-xs mb-5 ${guide.accent}`}
                >
                  {guide.category}
                </div>

                <h3 className="text-2xl font-bold mb-4 leading-tight">
                  {guide.title}
                </h3>

                <p className="text-slate-400 leading-relaxed mb-6">
                  {guide.description}
                </p>

                <a
                  href={guide.link}
                  className="text-blue-400 font-semibold hover:text-blue-300 transition-colors"
                >
                  Read Guide →
                </a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 py-24">
        <div className="rounded-[3rem] overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 p-16 text-center shadow-2xl shadow-blue-500/20">
          <h2 className="text-5xl md:text-6xl font-black leading-tight mb-8 max-w-4xl mx-auto">
            Start Your Ecommerce Learning Journey
          </h2>

          <p className="text-blue-100 text-lg leading-relaxed mb-10 max-w-2xl mx-auto">
            Explore practical dropshipping guides and ecommerce strategies
            designed for future online entrepreneurs.
          </p>

          <div className="flex justify-center flex-wrap gap-4">
            <a
              href="#"
              className="bg-white text-slate-900 px-8 py-4 rounded-2xl font-bold hover:bg-slate-100 transition-all duration-200"
            >
              Explore The Blog
            </a>

            <a
              href="#"
              className="bg-white/10 border border-white/20 backdrop-blur-xl px-8 py-4 rounded-2xl font-bold hover:bg-white/20 transition-all duration-200"
            >
              Read Guides
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 py-10 relative z-10">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
          <div>
            <h3 className="text-2xl font-black tracking-tight">
              Dropshipping <span className="text-blue-400">Vision</span>
            </h3>

            <p className="text-slate-500 mt-2">
              Helping future ecommerce entrepreneurs learn and grow.
            </p>
          </div>

          <div className="flex flex-wrap gap-6 text-slate-400 text-sm justify-center">
            {navLinks.map((item) => (
              <a
                key={item}
                href="#"
                className="hover:text-white transition-colors duration-200"
              >
                {item}
              </a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}