/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { motion } from "motion/react";
import { Youtube, TrendingUp, Wallet, PieChart, ArrowRight, ExternalLink } from "lucide-react";

const Logo = ({ className = "w-12 h-12" }: { className?: string }) => (
  <svg viewBox="0 0 100 100" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Three growing bar chart columns forming a hexagon-like shape */}
    <rect x="20" y="50" width="15" height="30" rx="2" fill="#5B4FD8" />
    <rect x="42.5" y="35" width="15" height="45" rx="2" fill="#1B4FD8" />
    <rect x="65" y="20" width="15" height="60" rx="2" fill="#00E5FF" />
  </svg>
);

const YOUTUBE_URL = "https://www.youtube.com/@Know_Grow_Capital";

export default function App() {
  const fadeIn = {
    initial: { opacity: 0, y: 20 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true },
    transition: { duration: 0.6 }
  };

  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="relative bg-brand-navy pt-20 pb-32 overflow-hidden">
        {/* Background Accents */}
        <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-[600px] h-[600px] bg-brand-primary/20 rounded-full blur-[120px]" />
        <div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 w-[500px] h-[500px] bg-brand-purple/10 rounded-full blur-[100px]" />

        <div className="container mx-auto px-6 relative z-10">
          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
            className="flex flex-col items-center text-center"
          >
            <Logo className="w-24 h-24 mb-6" />
            <h1 className="text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-2">
              Know & Grow
            </h1>
            <p className="text-brand-cyan text-xl md:text-2xl font-bold tracking-[0.3em] uppercase mb-8">
              CAPITAL
            </p>
            <p className="text-slate-300 text-lg md:text-2xl max-w-2xl mb-10 leading-relaxed">
              Learn to Know Your Money. <span className="text-white font-semibold">Grow Your Wealth.</span>
            </p>
            
            <motion.a
              href={YOUTUBE_URL}
              target="_blank"
              rel="noopener noreferrer"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="bg-brand-primary hover:bg-brand-bright text-white px-8 py-4 rounded-full font-bold text-lg flex items-center gap-3 transition-colors shadow-lg shadow-brand-primary/25"
            >
              <Youtube className="w-6 h-6" />
              Start Learning on YouTube
            </motion.a>
          </motion.div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-24 bg-slate-50">
        <div className="container mx-auto px-6">
          <motion.div 
            {...fadeIn}
            className="max-w-4xl mx-auto text-center"
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-8 text-brand-navy">Financial Education Made Simple</h2>
            <p className="text-xl text-slate-600 leading-relaxed">
              Your go-to source for financial education, investing strategies, and building passive income streams — made simple for everyday Canadians. Based in Calgary, Alberta, we're dedicated to helping you navigate the Canadian financial landscape.
            </p>
          </motion.div>
        </div>
      </section>

      {/* What You'll Learn Section */}
      <section className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <motion.div 
            {...fadeIn}
            className="text-center mb-16"
          >
            <h2 className="text-4xl font-bold text-brand-navy mb-4">What You'll Learn</h2>
            <div className="w-20 h-1.5 bg-brand-cyan mx-auto rounded-full" />
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "Investing Basics",
                desc: "Master the fundamentals of the stock market, ETFs, and building a diversified portfolio tailored for Canadians.",
                icon: TrendingUp,
                color: "bg-brand-primary"
              },
              {
                title: "Passive Income Streams",
                desc: "Discover how to create multiple streams of income through dividends, real estate, and digital assets.",
                icon: Wallet,
                color: "bg-brand-purple"
              },
              {
                title: "Budgeting & Wealth Building",
                desc: "Learn practical strategies to manage your cash flow, reduce debt, and accelerate your path to financial freedom.",
                icon: PieChart,
                color: "bg-brand-cyan"
              }
            ].map((card, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.2 }}
                whileHover={{ y: -10 }}
                className="p-8 rounded-3xl border border-slate-100 bg-white shadow-xl shadow-slate-200/50 flex flex-col items-start"
              >
                <div className={`${card.color} p-4 rounded-2xl mb-6 text-white`}>
                  <card.icon className="w-8 h-8" />
                </div>
                <h3 className="text-2xl font-bold text-brand-navy mb-4">{card.title}</h3>
                <p className="text-slate-600 leading-relaxed mb-6">{card.desc}</p>
                <a 
                  href={YOUTUBE_URL} 
                  className="mt-auto text-brand-primary font-bold flex items-center gap-2 hover:gap-3 transition-all"
                >
                  Watch Videos <ArrowRight className="w-4 h-4" />
                </a>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* YouTube CTA Section */}
      <section className="py-24">
        <div className="container mx-auto px-6">
          <motion.div 
            {...fadeIn}
            className="relative bg-brand-navy rounded-[3rem] p-12 md:p-20 overflow-hidden text-center"
          >
            {/* Gradient Background */}
            <div className="absolute inset-0 bg-gradient-to-br from-brand-primary/40 via-transparent to-brand-cyan/20 pointer-events-none" />
            
            <div className="relative z-10">
              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Ready to grow your wealth?</h2>
              <p className="text-slate-300 text-lg md:text-xl max-w-2xl mx-auto mb-10">
                Join our community of thousands of Canadians learning to take control of their financial future.
              </p>
              <motion.a
                href={YOUTUBE_URL}
                target="_blank"
                rel="noopener noreferrer"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="inline-flex items-center gap-3 bg-white text-brand-navy px-10 py-5 rounded-full font-bold text-xl hover:bg-brand-cyan transition-colors"
              >
                <Youtube className="w-7 h-7 text-red-600" />
                Watch on YouTube
                <ExternalLink className="w-5 h-5 opacity-50" />
              </motion.a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-brand-navy py-12 border-t border-white/5">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
            <div className="flex items-center gap-4">
              <Logo className="w-10 h-10" />
              <div>
                <span className="text-white font-bold text-xl block leading-none">Know & Grow</span>
                <span className="text-brand-cyan text-[10px] tracking-[0.3em] uppercase">Capital</span>
              </div>
            </div>
            
            <div className="text-slate-400 text-sm">
              © 2026 Know & Grow Capital. All rights reserved.
            </div>

            <div className="flex gap-6">
              <a href={YOUTUBE_URL} className="text-slate-400 hover:text-white transition-colors">
                <Youtube className="w-6 h-6" />
              </a>
            </div>
          </div>
          <div className="mt-8 text-center text-slate-500 text-xs max-w-3xl mx-auto">
            Disclaimer: The content provided by Know & Grow Capital is for educational and informational purposes only and does not constitute financial, investment, or legal advice. Always consult with a qualified professional before making any financial decisions.
          </div>
        </div>
      </footer>
    </div>
  );
}