import React, { useMemo, useState } from "react";

// One-file personal website for Sanjay Nigam // ✅ React + TailwindCSS // ✅ Mobile-first, elegant, fast // ✅ Swap text in the profile object

const profile = { name: "Sanjay Nigam", tagline: "Builder • Investor • Storyteller", elevator: "Founder of the Fashion Entrepreneur Fund (FEF). Championing India's ignored heroes — karigars, creators, and founders — and building a $10B+ fashion & entrepreneurship ecosystem.", headshot: null, // drop an image URL when ready email: "sanjaynigamoffice@gmail.com", location: "New Delhi, India", socials: [ { label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }, { label: "YouTube", href: "#" }, { label: "X / Twitter", href: "#" }, ], highlight_metrics: [ { k: "₹540 Cr+", v: "Current Group Valuation (FEF)" }, { k: "₹250 Cr+", v: "Portfolio Turnover" }, { k: "40 Cr", v: "On-screen Funding (PTGR)" }, { k: "10B+", v: "Ecosystem Vision (USD)" }, ], ventures: [ { name: "Fashion Entrepreneur Fund (FEF)", role: "Founder", blurb: "India's first fund designed to back the builders of fashion & allied industries — from artisans to D2C brands to fashion-tech.", ctas: [ { label: "Explore FEF", href: "#" }, { label: "Apply for Funding", href: "#apply" }, ], }, { name: "Pitch To Get Rich (PTGR)", role: "Creator & Host (with Dharmatic)", blurb: "A world-class funding show where real founders meet real capital and mentorship.", ctas: [ { label: "Watch Trailer", href: "#ptgr" }, { label: "Be a Partner", href: "#partners" }, ], }, { name: "Rentify", role: "Founder", blurb: "India's first landlord & property review platform bringing rental transparency for homes, shops, and commercial spaces.", ctas: [{ label: "See the Vision", href: "#rentify" }], }, ], speaking: { blurb: "I speak about creative economies, building movements, funding reality vs perception, and the discipline behind overnight success.", topics: [ "From Grit to Scale: India’s Creative Economy", "The Ignored Heroes: Karigars, Creators & Founders", "Show, Don't Show Off: Social Media as a Learning Tool", "Raising Capital without Losing Your Soul", ], cta: { label: "Book Me for a Talk", href: "#contact" }, }, book: { title: "Mental Masturbation", line: "A contemporary fiction exploring ambition, identity, and the chaos of modern hustle.", status: "Upcoming", }, press: [ { outlet: "Press/Media Kit", summary: "Download headshots, bios, and brand assets.", href: "#presskit", }, { outlet: "Interviews", summary: "Long-form conversations on building FEF, PTGR, and the 'Most Ignored Man' narrative.", href: "#interviews", }, { outlet: "Speaking", summary: "Keynotes at universities, industry forums, and startup summits.", href: "#speaking", }, ], };

function cx(...s) { return s.filter(Boolean).join(" "); }

function Pill({ children }) { return ( <span className="inline-flex items-center rounded-full border px-3 py-1 text-xs md:text-sm"> {children} </span> ); }

function Stat({ k, v }) { return ( <div className="rounded-2xl border p-4 md:p-6"> <div className="text-2xl md:text-3xl font-semibold tracking-tight">{k}</div> <div className="text-xs md:text-sm opacity-70 mt-1">{v}</div> </div> ); }

function Section({ id, title, eyebrow, children, className }) { return ( <section id={id} className={cx("max-w-6xl mx-auto px-4 md:px-6 py-14 md:py-20", className)}> {eyebrow && ( <div className="text-[10px] md:text-xs tracking-widest uppercase opacity-60 mb-2">{eyebrow}</div> )} {title && ( <h2 className="text-2xl md:text-4xl font-bold tracking-tight mb-6">{title}</h2> )} {children} </section> ); }

function NavLink({ href, children }) { return ( <a href={href} className="opacity-80 hover:opacity-100 text-sm"> {children} </a> ); }

function VentureCard({ v }) { return ( <div className="rounded-2xl border p-6 flex flex-col gap-3"> <div className="text-lg font-semibold leading-tight">{v.name}</div> <div className="text-xs opacity-60 -mt-1">{v.role}</div> <p className="text-sm opacity-80 leading-relaxed">{v.blurb}</p> <div className="flex flex-wrap gap-2 mt-1"> {v.ctas?.map((c) => ( <a key={c.label} href={c.href} className="rounded-xl border px-3 py-1 text-sm"> {c.label} </a> ))} </div> </div> ); }

export default function SanjayNigamSite() { const [dark, setDark] = useState(true);

return ( <div className={cx(dark && "dark", "min-h-dvh")}> <div className="bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-50 transition-colors"> {/* NAV */} <header className="sticky top-0 z-30 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-neutral-950/60"> <div className="max-w-6xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between"> <a href="#home" className="font-semibold tracking-tight flex items-center gap-2"> <span className="h-8 w-8 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-500"></span> <span>Sanjay Nigam</span> </a> <nav className="hidden md:flex items-center gap-6"> <NavLink href="#about">About</NavLink> <NavLink href="#ventures">Ventures</NavLink> <NavLink href="#ptgr">PTGR</NavLink> <NavLink href="#speaking">Speaking</NavLink> <NavLink href="#book">Book</NavLink> <NavLink href="#press">Press</NavLink> <NavLink href="#contact">Contact</NavLink> </nav> <div className="flex items-center gap-2"> <button onClick={() => setDark((d) => !d)} className="rounded-xl border px-3 py-1 text-xs md:text-sm"> {dark ? "Light" : "Dark"} </button> <a href="#contact" className="hidden md:inline-flex rounded-xl border px-3 py-1 text-xs md:text-sm">Book a Talk</a> </div> </div> </header>

{/* HERO */}
    <section id="home" className="relative overflow-hidden" style={{
      background:
        "radial-gradient(1200px 600px at 100% 0%, rgba(168,85,247,0.12), transparent 60%), radial-gradient(1200px 600px at 0% 100%, rgba(59,130,246,0.12), transparent 60%)",
    }}>
      <div className="max-w-6xl mx-auto px-4 md:px-6 py-18 md:py-28 grid md:grid-cols-2 gap-10 items-center">
        <div>
          <Pill>The Most Ignored Man — Until Results Arrive</Pill>
          <h1 className="text-4xl md:text-6xl font-bold tracking-tight leading-[1.05] mt-4">
            {profile.name}
          </h1>
          <div className="text-base md:text-lg opacity-80 mt-2">{profile.tagline}</div>
          <p className="text-sm md:text-base opacity-80 mt-5 max-w-xl">{profile.elevator}</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mt-6">
            {profile.highlight_metrics.map((m) => (
              <Stat key={m.k} k={m.k} v={m.v} />
            ))}
          </div>
          <div className="flex flex-wrap gap-3 mt-6">
            <a href="#ventures" className="rounded-2xl border px-4 py-2 text-sm md:text-base">Explore Ventures</a>
            <a href="#ptgr" className="rounded-2xl border px-4 py-2 text-sm md:text-base">Watch PTGR</a>
          </div>
        </div>
        <div className="flex justify-center md:justify-end">
          {profile.headshot ? (
            <img src={profile.headshot} alt="Sanjay Nigam" className="w-64 h-64 md:w-80 md:h-80 rounded-3xl object-cover border" />
          ) : (
            <div className="w-64 h-64 md:w-80 md:h-80 rounded-3xl border flex items-center justify-center text-sm opacity-70">
              Upload headshot
            </div>
          )}
        </div>
      </div>
    </section>

    {/* ABOUT */}
    <Section id="about" eyebrow="About" title="Reality > Perception">
      <div className="grid md:grid-cols-3 gap-6">
        <div className="rounded-2xl border p-6">
          <div className="text-lg font-semibold mb-1">Mentorship × Discipline</div>
          <div className="opacity-70 text-sm leading-relaxed">
            Talent is everywhere, discipline is rare. I mentor founders to build cadence, not chaos.
          </div>
        </div>
        <div className="rounded-2xl border p-6">
          <div className="text-lg font-semibold mb-1">Social as a Classroom</div>
          <div className="opacity-70 text-sm leading-relaxed">
            Use social media to learn, not to posture. Ship work, seek feedback, repeat.
          </div>
        </div>
        <div className="rounded-2xl border p-6">
          <div className="text-lg font-semibold mb-1">From India, For the World</div>
          <div className="opacity-70 text-sm leading-relaxed">
            Building platforms that scale Indian creativity globally — with real economics.
          </div>
        </div>
      </div>
    </Section>

    {/* VENTURES */}
    <Section id="ventures" eyebrow="Ventures" title="What I'm building">
      <div className="grid md:grid-cols-3 gap-6">
        {profile.ventures.map((v) => (
          <VentureCard key={v.name} v={v} />
        ))}
      </div>
    </Section>

    {/* PTGR FEATURE */}
    <Section id="ptgr" eyebrow="Series" title="Pitch To Get Rich (PTGR)">
      <div className="grid md:grid-cols-2 gap-8 items-center">
        <div>
          <h3 className="text-xl md:text-2xl font-semibold tracking-tight mb-2">
            India's boldest funding show — where grit meets capital.
          </h3>
          <p className="opacity-70 text-sm md:text-base mb-4">
            Real founders. Real money. Real mentorship. Built with Dharmatic Entertainment — proudly from India.
          </p>
          <a href="#" className="rounded-2xl border px-4 py-2 text-sm md:text-base">Watch Trailer</a>
        </div>
        <div className="aspect-video rounded-2xl border flex items-center justify-center text-sm opacity-70">
          Trailer placeholder — drop your video embed here.
        </div>
      </div>
    </Section>

    {/* SPEAKING */}
    <Section id="speaking" eyebrow="Speaking" title="Talks & Keynotes">
      <div className="rounded-2xl border p-6">
        <p className="opacity-80 text-sm md:text-base">{profile.speaking.blurb}</p>
        <ul className="grid md:grid-cols-2 gap-2 mt-4 text-sm list-disc pl-5">
          {profile.speaking.topics.map((t) => (
            <li key={t}>{t}</li>
          ))}
        </ul>
        <a href={profile.speaking.cta.href} className="inline-block mt-4 rounded-xl border px-4 py-2 text-sm">
          {profile.speaking.cta.label}
        </a>
      </div>
    </Section>

    {/* BOOK */}
    <Section id="book" eyebrow="Book" title={profile.book.title}>
      <div className="rounded-2xl border p-6 grid md:grid-cols-2 gap-6 items-center">
        <div>
          <div className="text-sm opacity-60 mb-1">{profile.book.status}</div>
          <p className="opacity-80 text-sm md:text-base">{profile.book.line}</p>
        </div>
        <div className="rounded-xl border p-6 text-sm opacity-70">
          Want early access? Join the reader list below.
        </div>
      </div>
    </Section>

    {/* PRESS */}
    <Section id="press" eyebrow="Media" title="Press & Media">
      <div className="grid md:grid-cols-3 gap-6">
        {profile.press.map((p) => (
          <a key={p.outlet} href={p.href} className="rounded-2xl border p-6 hover:shadow">
            <div className="text-lg font-semibold mb-1">{p.outlet}</div>
            <div className="text-sm opacity-70 leading-relaxed">{p.summary}</div>
          </a>
        ))}
      </div>
    </Section>

    {/* NEWSLETTER */}
    <Section id="newsletter" eyebrow="Stay Updated" title="Newsletter">
      <div className="rounded-2xl border p-6 grid md:grid-cols-3 gap-4 items-center">
        <p className="md:col-span-2 opacity-80 text-sm md:text-base">
          Monthly notes on building, fashion, creators, and the reality behind the headlines.
        </p>
        <form className="flex items-center gap-2">
          <input
            type="email"
            placeholder="you@example.com"
            className="w-full rounded-xl border bg-transparent px-3 py-2 text-sm"
          />
          <button className="rounded-xl border px-3 py-2 text-sm" type="button">Subscribe</button>
        </form>
      </div>
    </Section>

    {/* CONTACT */}
    <Section id="contact" eyebrow="Contact" title="Get in touch">
      <div className="rounded-2xl border p-6 grid md:grid-cols-2 gap-6">
        <div className="space-y-2 text-sm">
          <div className="opacity-80">Email</div>
          <a href={mailto:${profile.email}} className="block rounded-xl border px-3 py-2 w-fit">{profile.email}</a>
          <div className="opacity-80 mt-4">Location</div>
          <div className="rounded-xl border px-3 py-2 w-fit">{profile.location}</div>
          <div className="opacity-80 mt-4">Social</div>
          <div className="flex flex-wrap gap-2">
            {profile.socials.map((s) => (
              <a key={s.label} href={s.href} className="rounded-xl border px-3 py-1 text-sm">{s.label}</a>
            ))}
          </div>
        </div>
        <div className="space-y-3 text-sm">
          <div className="opacity-80">Speaking / Partnerships</div>
          <p className="opacity-70">
            For keynotes, fireside chats, media, or brand partnerships, share your brief and dates.
          </p>
          <a href={mailto:${profile.email}?subject=Speaking / Partnership with Sanjay Nigam} className="inline-block rounded-xl border px-4 py-2">
            Send Brief
          </a>
        </div>
      </div>
    </Section>

    {/* FOOTER */}
    <footer className="border-t">
      <div className="max-w-6xl mx-auto px-4 md:px-6 py-10 text-sm">
        <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6 justify-between">
          <div className="flex items-center gap-2">
            <span className="h-7 w-7 rounded-lg bg-gradient-to-br from-fuchsia-500 to-violet-500"></span>
            <span className="font-semibold">{profile.name}</span>
            <span className="opacity-60">© {new Date().getFullYear()}</span>
          </div>
          <div className="flex items-center gap-4 opacity-80">
            <a href={mailto:${profile.email}} className="hover:opacity-100">Email</a>
            {profile.socials.map((s) => (
              <a key={s.label} href={s.href} className="hover:opacity-100">{s.label}</a>
            ))}
          </div>
        </div>
        <div className="opacity-60 text-xs mt-3">Made in India. Built with discipline.</div>
      </div>
    </footer>
  </div>
</div>

); }