import React from 'react';
import { 
  Heart, Shield, HandHeart, Eye, Users, 
  Anchor, Mountain, Sun, Scale, Gift, 
  ArrowRight, Sparkles, BookOpen, Ear, 
  CheckCircle2, Clock, ArrowRightLeft
} from 'lucide-react';

export default function App() {
  return (
    <div className="min-h-screen bg-[#FDFBF9] text-[#111111] font-sans selection:bg-[#B28968] selection:text-white">
      {/* PREMIUM TYPOGRAPHY SETUP
        Newsreader (Serif) for foundational, serious gravity.
        Plus Jakarta Sans (Sans-serif) for clean, legible, modern UI.
      */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
        
        .font-serif { font-family: 'Newsreader', serif; }
        .font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
        
        /* Smooth scrolling and subtle utility classes */
        html { scroll-behavior: smooth; }
        .text-balance { text-wrap: balance; }
        
        /* Subtle fade-in animation for initial load */
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
          animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
      `}} />

      {/* Navigation / Header */}
      <header className="absolute top-0 w-full px-6 sm:px-12 py-8 flex justify-between items-center z-10">
        <div className="font-serif text-2xl tracking-tight font-medium text-[#111111]">
          Kids First Values.
        </div>
      </header>

      <main className="max-w-[1400px] mx-auto w-full">
        
        {/* 1. HERO SECTION */}
        <section className="min-h-screen flex flex-col justify-center px-6 sm:px-12 pt-32 pb-24 border-b border-[#EAE5DF] relative">
          <div className="max-w-5xl animate-fade-in">
            <div className="flex items-center gap-3 mb-10">
              <Sparkles size={16} className="text-[#B28968]" strokeWidth={1.5} />
              <span className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968]">
                Character Building
              </span>
            </div>
            
            <h1 className="font-serif text-5xl sm:text-7xl lg:text-8xl font-normal leading-[1.05] tracking-tight mb-10 text-[#111111] text-balance">
              Character begins earlier than most people teach it.
            </h1>
            
            <p className="font-sans text-xl sm:text-2xl font-light text-[#595754] leading-relaxed mb-16 max-w-3xl text-balance">
              A platform designed to help children build kindness, honesty, empathy, responsibility, and strong inner values from the very beginning.
            </p>
            
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-8 mb-24">
              <button className="group relative px-8 py-4 bg-[#111111] text-white text-sm font-semibold tracking-wide uppercase overflow-hidden rounded-full flex items-center gap-3 transition-all hover:bg-[#2A2A2A] hover:shadow-xl hover:shadow-[#111111]/10">
                <span>Coming Soon</span>
                <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
              </button>
              <a href="#" className="text-sm font-semibold tracking-wide text-[#8A8782] hover:text-[#111111] transition-colors flex items-center gap-2">
                Part of the Kids First Ecosystem
              </a>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-12 border-t border-[#EAE5DF] max-w-4xl">
              <p className="text-sm font-medium tracking-widest uppercase text-[#B28968]">
                Values shape everything that knowledge alone cannot.
              </p>
              <p className="text-sm font-medium tracking-widest uppercase text-[#B28968]">
                Character is built in small moments, repeated every day.
              </p>
            </div>
          </div>
        </section>

        {/* 2. CORE STATEMENT */}
        <section className="py-32 sm:py-48 px-6 sm:px-12 border-b border-[#EAE5DF]">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
            <div className="lg:col-span-5">
              <h2 className="font-serif text-4xl sm:text-6xl font-normal leading-tight text-[#111111] text-balance">
                Values are not extra.<br />
                <span className="italic text-[#8A8782]">They are essential.</span>
              </h2>
            </div>
            <div className="lg:col-span-7 space-y-8 text-lg sm:text-2xl font-light text-[#595754] leading-relaxed">
              <p>
                Education often focuses on knowledge and skills, but values shape behavior and decisions. Children are not born knowing how to act — they learn through observation, repetition, and guidance.
              </p>
              <p>
                Early childhood is the most important time to build emotional intelligence and moral understanding. This platform is being built to support that process intentionally and beautifully.
              </p>
              <div className="pt-8 pb-4 border-l-2 border-[#B28968] pl-8 mt-12">
                <p className="font-serif text-2xl sm:text-3xl text-[#111111] leading-snug">
                  What a child learns to feel and how a child learns to act will shape their entire life.
                </p>
              </div>
              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968] pt-12">
                The way we act becomes the way we live.
              </p>
            </div>
          </div>
        </section>

        {/* 3. THE 10 CORE VALUES */}
        <section className="py-32 sm:py-48 px-6 sm:px-12 bg-white border-b border-[#EAE5DF]">
          <div className="max-w-4xl mb-24">
            <h2 className="font-serif text-4xl sm:text-6xl font-normal leading-tight mb-8 text-[#111111]">
              The values that build strong, kind, and resilient human beings.
            </h2>
            <p className="text-xl sm:text-2xl font-light text-[#595754] leading-relaxed">
              These are the foundations of character that help children build meaningful relationships, emotional strength, and a clear sense of right and wrong.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-20">
            {[
              { icon: HandHeart, title: "Respect", desc: "Treating others, oneself, and the world with care, fairness, and understanding." },
              { icon: Eye, title: "Honesty", desc: "Telling the truth and being real, even when it feels difficult." },
              { icon: Heart, title: "Kindness", desc: "Choosing to help, care, and act with compassion toward others." },
              { icon: Users, title: "Empathy", desc: "Understanding how others feel and learning to respond with care." },
              { icon: Anchor, title: "Responsibility", desc: "Owning actions, keeping commitments, and understanding consequences." },
              { icon: Mountain, title: "Perseverance", desc: "Continuing forward through difficulty and learning from mistakes." },
              { icon: Sun, title: "Gratitude", desc: "Recognizing and appreciating what we have, both big and small." },
              { icon: Shield, title: "Courage", desc: "Facing fears, speaking up, and doing what is right even when it is hard." },
              { icon: Scale, title: "Integrity", desc: "Doing the right thing even when no one is watching." },
              { icon: Gift, title: "Generosity", desc: "Sharing time, attention, and care to make life better for others." }
            ].map((value, idx) => (
              <div key={idx} className="group">
                <div className="mb-6 flex items-center justify-between border-b border-[#EAE5DF] pb-6">
                  <span className="text-sm font-semibold tracking-widest text-[#B28968]">
                    {String(idx + 1).padStart(2, '0')}
                  </span>
                  <value.icon size={24} strokeWidth={1} className="text-[#111111] group-hover:scale-110 group-hover:text-[#B28968] transition-all duration-500" />
                </div>
                <h3 className="font-serif text-2xl text-[#111111] mb-4">{value.title}</h3>
                <p className="text-[#595754] font-light leading-relaxed text-lg">{value.desc}</p>
              </div>
            ))}
          </div>

          <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968] mt-32 text-center">
            Values are learned by living them, not by hearing them once.
          </p>
        </section>

        {/* 4. HOW VALUES ARE BUILT */}
        <section className="py-32 sm:py-48 px-6 sm:px-12 border-b border-[#EAE5DF]">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-start">
            <div className="sticky top-32">
              <h2 className="font-serif text-4xl sm:text-6xl font-normal leading-tight mb-8 text-[#111111]">
                Values are not explained.<br />
                <span className="italic text-[#8A8782]">They are experienced.</span>
              </h2>
              <div className="space-y-4 text-xl sm:text-2xl font-light text-[#595754] leading-relaxed mb-16">
                <p>Children learn values through daily interaction.</p>
                <p>Repetition matters more than instruction.</p>
                <p>Behavior is shaped through modeling, not lectures.</p>
              </div>
              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968]">
                Children become what they repeatedly experience.
              </p>
            </div>

            <div className="space-y-12">
              {[
                { icon: ArrowRightLeft, title: "Lead by Example", desc: "Children mirror what they see. Behavior teaches more than words." },
                { icon: BookOpen, title: "Storytelling", desc: "Stories help children understand consequences, emotions, and choices." },
                { icon: Ear, title: "Active Listening", desc: "When children feel heard, they learn to understand themselves and others." },
                { icon: CheckCircle2, title: "Positive Reinforcement", desc: "Recognizing good behavior helps it grow stronger." },
                { icon: Clock, title: "Simple Daily Routines", desc: "Small actions like sharing, helping, and tidying build responsibility and consistency." }
              ].map((strategy, idx) => (
                <div key={idx} className="p-8 bg-white border border-[#EAE5DF] rounded-2xl hover:shadow-xl hover:shadow-[#B28968]/5 transition-shadow duration-500">
                  <div className="flex items-center gap-4 mb-4">
                    <div className="w-12 h-12 rounded-full bg-[#FDFBF9] flex items-center justify-center text-[#B28968]">
                      <strategy.icon size={20} strokeWidth={1.5} />
                    </div>
                    <h3 className="font-serif text-2xl text-[#111111]">{strategy.title}</h3>
                  </div>
                  <p className="text-[#595754] font-light text-lg pl-16 leading-relaxed">
                    {strategy.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 5. VALUES IN DAILY LIFE */}
        <section className="py-32 sm:py-48 px-6 sm:px-12 bg-[#111111] text-white">
          <div className="max-w-4xl mb-24">
            <h2 className="font-serif text-4xl sm:text-6xl font-normal leading-tight mb-8 text-white">
              Character is built in everyday moments.
            </h2>
            <div className="space-y-4 text-xl sm:text-2xl font-light text-[#A09D96] leading-relaxed">
              <p>Values are not separate lessons. They are part of daily life.</p>
              <p>Small moments shape long-term behavior.</p>
            </div>
          </div>

          <div className="max-w-4xl font-light">
            {[
              { action: "sharing toys", value: "generosity & empathy" },
              { action: "helping at home", value: "responsibility" },
              { action: "saying thank you", value: "gratitude" },
              { action: "telling the truth", value: "honesty" },
              { action: "comforting a friend", value: "kindness" }
            ].map((item, idx) => (
              <div key={idx} className="flex flex-col sm:flex-row sm:items-center justify-between py-8 border-b border-[#333333] group hover:border-[#B28968] transition-colors duration-500">
                <span className="text-2xl sm:text-3xl text-[#A09D96] font-serif italic mb-2 sm:mb-0 group-hover:text-white transition-colors">
                  {item.action}
                </span>
                <span className="hidden sm:block flex-grow border-b border-dashed border-[#333333] mx-8 opacity-50 group-hover:border-[#B28968] transition-colors"></span>
                <span className="text-lg sm:text-xl font-medium tracking-wide uppercase text-[#B28968]">
                  {item.value}
                </span>
              </div>
            ))}
          </div>

          <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#A09D96] mt-32">
            Small actions, repeated daily, build lifelong character.
          </p>
        </section>

        {/* 6. PLATFORM APPROACH */}
        <section className="py-32 sm:py-48 px-6 sm:px-12 border-b border-[#EAE5DF] bg-[#FDFBF9]">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="font-serif text-4xl sm:text-6xl font-normal leading-tight mb-12 text-[#111111]">
              Designed for real human development.
            </h2>
            <div className="space-y-8 text-xl sm:text-2xl font-light text-[#595754] leading-relaxed text-balance mx-auto">
              <p>
                Kids First Values is being built as a guided character development platform, based on repetition, modeling, and interaction.
              </p>
              <p>
                Integrated into daily routines and supported by storytelling and real-life practice, it is focused entirely on emotional intelligence and behavior.
              </p>
            </div>
            
            <div className="mt-24 p-12 bg-white border border-[#EAE5DF] rounded-3xl">
              <p className="font-serif text-3xl sm:text-4xl text-[#111111] leading-snug mb-4">
                This is not about teaching rules.
              </p>
              <p className="font-serif text-2xl sm:text-3xl text-[#8A8782] italic leading-snug">
                This is about shaping how a child lives, feels, and relates to the world.
              </p>
            </div>

            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968] mt-24">
              Strong character does not happen by chance. It is built with intention.
            </p>
          </div>
        </section>

        {/* 7. COMING SOON SECTION */}
        <section className="py-40 px-6 sm:px-12 flex flex-col items-center text-center bg-white">
          <Sparkles size={32} className="text-[#B28968] mb-12" strokeWidth={1} />
          
          <h2 className="font-serif text-5xl sm:text-7xl font-normal mb-10 text-[#111111] max-w-4xl leading-[1.1] text-balance">
            A stronger foundation for character is in development.
          </h2>
          
          <div className="space-y-6 text-xl sm:text-2xl font-light text-[#595754] max-w-3xl mb-16 text-balance">
            <p>
              The platform is currently being built. It is designed with care, depth, and long-term purpose to support families in raising kind, strong, emotionally intelligent children.
            </p>
          </div>
          
          <button className="px-10 py-5 bg-[#111111] text-white text-sm font-semibold tracking-widest uppercase rounded-full hover:bg-[#2A2A2A] hover:scale-105 transition-all duration-300 mb-24 shadow-2xl shadow-[#111111]/20">
            Coming Soon — Built with purpose
          </button>
          
          <p className="text-xs font-semibold tracking-[0.2em] uppercase text-[#B28968]">
            The values we build early become the person we become later.
          </p>
        </section>

      </main>

      {/* 8. FOOTER */}
      <footer className="w-full bg-[#111111] text-[#FDFBF9] py-16 px-6 sm:px-12">
        <div className="max-w-[1400px] mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center gap-12">
          <div>
            <h4 className="font-serif text-3xl mb-3">Kids First Values.</h4>
            <p className="text-[#8A8782] text-sm font-semibold tracking-wider uppercase">Coming Soon</p>
          </div>
          
          <div className="text-left sm:text-right">
            <p className="text-[#8A8782] text-sm font-medium mb-4">Part of the Kids First Ecosystem</p>
            <p className="text-[#B28968] text-xs font-semibold tracking-[0.2em] uppercase">
              Character first. Everything else follows.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}