import React from 'react';
import { 
  Infinity,
  Linkedin
} from 'lucide-react';

// --- Data ---
const founders = [
  {
    id: 1,
    name: "Jaideep Yadav",
    role: "Partner",
    image: "https://framerusercontent.com/images/goqAaGyjFcgiX218wutwJJMWRo.jpg?width=800&height=800",
    linkedin: "https://in.linkedin.com/in/jaideepyadav",
    bio: "Entrepreneur and early-stage investor who has built and scaled ventures across fintech, insurtech, and crypto. He has a track record of driving multi-million-dollar revenues, managing global expansions, and investing in passionate founders, and is committed to helping visionary entrepreneurs scale and succeed."
  },
  {
    id: 2,
    name: "Nikunj Jain",
    role: "Partner",
    image: "https://framerusercontent.com/images/EInuAqDZ6EzJD87i1elbjBMH9E.png?width=646&height=644",
    linkedin: "https://in.linkedin.com/in/nikunjjain1",
    bio: "A serial entrepreneur, angel investor, and founder who has built 4 ventures and backed 60+ start-ups over the last decade. A Forbes 30 Under 30 honoree, passionate about helping visionary founders scale their businesses and successfully raise Series A/B/C rounds."
  }
];

// --- Components ---

const Header = () => (
  <nav className="w-full bg-black py-6 px-8 md:px-12 flex items-center justify-between border-b border-white/10">
    <a href="https://vaomi.ai/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
      {/* Infinity Logo - thickened stroke to match screenshot */}
      <Infinity className="w-8 h-8 text-white stroke-[2.5]" />
      <span className="text-2xl font-bold text-white tracking-tight">Vaomi AI</span>
    </a>
    
    <div className="hidden md:flex items-center gap-8 text-sm md:text-base font-light text-gray-300">
      <a href="https://vaomi.ai/" className="hover:text-white transition-colors">Home</a>
    </div>
  </nav>
);

const Footer = () => (
  <footer className="w-full bg-black py-8 px-8 md:px-12 flex flex-col md:flex-row items-center justify-between border-t border-white/10 mt-auto">
    <a href="https://vaomi.ai/" className="flex items-center gap-2 mb-4 md:mb-0 hover:opacity-80 transition-opacity">
      <Infinity className="w-8 h-8 text-white stroke-[2.5]" />
      <span className="text-2xl font-bold text-white tracking-tight">Vaomi AI</span>
    </a>
    
    <div className="text-gray-400 font-light text-sm md:text-base">
      © 2025. All rights reserved.
    </div>
  </footer>
);

const FounderCard = ({ founder }) => {
  return (
    <div className="bg-[#0A0A0A] border border-white/10 rounded-xl p-8 hover:border-white/30 transition-all duration-300 group relative overflow-hidden h-full flex flex-col">
      {/* Top Row: Avatar + Name + LinkedIn */}
      <div className="flex flex-col sm:flex-row items-start gap-6 mb-8">
          <img 
            src={founder.image} 
            alt={founder.name}
            className="w-32 h-32 flex-shrink-0 rounded-full object-cover border border-white/5 bg-[#1A1A1A] shadow-xl"
          />
          
          <div className="flex-grow flex justify-between items-start w-full">
            <div className="mt-2">
               <h3 className="text-2xl md:text-3xl text-white font-medium mb-2">{founder.name}</h3>
               <p className="text-emerald-500 text-sm font-semibold tracking-widest uppercase">{founder.role}</p>
            </div>

            <a 
              href={founder.linkedin} 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-gray-400 hover:text-[#0A66C2] transition-colors p-3 hover:bg-white/5 rounded-full -mt-2 -mr-2"
              aria-label={`${founder.name}'s LinkedIn`}
            >
              <Linkedin size={28} strokeWidth={1.5} />
            </a>
          </div>
      </div>

      {/* Bio */}
      <div className="border-l-2 border-white/5 pl-6 flex-grow">
        <p className="text-gray-300 text-base leading-relaxed font-light">
          {founder.bio}
        </p>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-emerald-500/30 selection:text-emerald-200 flex flex-col">
      <Header />

      <main className="max-w-6xl mx-auto px-6 py-20 md:py-32 w-full">
        
        {/* Hero Section */}
        <div className="text-center mb-24">
          
          <h1 className="text-5xl md:text-7xl mb-8 tracking-tight font-semibold">
            My Creators
          </h1>
          <p className="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto font-light leading-relaxed">
            They are founders and angel investors themselves, knowing the intricacies of fundraising inside out. Unparalleled expertise from those who do this for a living.
          </p>
        </div>

        {/* Founders Grid */}
        <div className="grid md:grid-cols-2 gap-8">
          {founders.map((founder) => (
            <FounderCard key={founder.id} founder={founder} />
          ))}
        </div>

      </main>

      {/* Footer */}
      <Footer />

      {/* Style Overrides for Fonts */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
        
        :root, body, button, input, textarea, select {
          font-family: 'Manrope', sans-serif;
        }
        
        .font-sans {
          font-family: 'Manrope', sans-serif !important;
        }
      `}</style>
    </div>
  );
}