export default function MentalistsMindsetSpeakerWebsite() {
  const navItems = [
    { label: "Keynote", href: "#keynote" },
    { label: "Experience", href: "#experience" },
    { label: "About", href: "#about" },
    { label: "Book", href: "#book" },
  ];

  const outcomes = [
    "Improve decision-making clarity",
    "Influence teams more effectively",
    "Unlock innovative thinking",
  ];

  const audienceExperience = [
    "Real-time demonstrations of decision psychology",
    "Interactive moments that engage the entire audience",
    "Powerful insights into influence, perception, and behavior",
    "A keynote that blends entertainment with real-world application",
  ];

  const audienceGains = [
    "Stronger decision-making clarity",
    "Greater influence in leadership and communication",
    "A new perspective on innovation and problem-solving",
    "A memorable shared experience that reinforces key ideas",
  ];

  return (
    <div className="min-h-screen bg-[#080808] text-[#f5e7b2] selection:bg-[#d4af37] selection:text-black">
      <header className="sticky top-0 z-50 border-b border-[#7f6720]/40 bg-[#080808]/90 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
          <div>
            <div className="text-xs uppercase tracking-[0.3em] text-[#c8a94a]">Craig R. Campbell</div>
            <div className="text-xs text-[#d8c78a]/80">Keynote Speaker | Magician | Mentalist</div>
          </div>
          <nav className="hidden md:flex gap-8 text-sm">
            {navItems.map((item) => (
              <a key={item.label} href={item.href} className="hover:text-[#f5e7b2]">{item.label}</a>
            ))}
          </nav>
        </div>
      </header>

      <main>
        {/* HERO */}
        <section className="mx-auto max-w-7xl px-4 py-14 grid lg:grid-cols-2 gap-10">
          <div>
            <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-[#f9edc1]">
              Craig R. Campbell — Keynote Speaker
            </h1>
            <h2 className="mt-4 text-2xl text-[#d4af37]">
              The Mentalist’s Mindset: The Room Has Already Decided
            </h2>
            <p className="mt-4 text-lg text-[#e8dba9]/80">
              A high-impact keynote experience that blends psychology, storytelling, and live audience interaction to reveal how people think, decide, and influence others.
            </p>

            <div className="mt-6 flex gap-4">
              <a href="#book" className="bg-[#d4af37] text-black px-6 py-3 rounded-xl font-semibold">Book Craig</a>
              <a href="#experience" className="border border-[#a9851f] px-6 py-3 rounded-xl">Watch Demo</a>
            </div>

            {/* Trust Bar */}
            <div className="mt-8">
              <div className="text-xs uppercase tracking-[0.3em] text-[#c9a84a]">Trusted by audiences at</div>
              <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-3">
                {['Corporate Conferences','Leadership Summits','Sales Kickoffs','Innovation Forums'].map(i => (
                  <div key={i} className="border border-[#3a3114] bg-[#101010] p-3 text-center text-xs">{i}</div>
                ))}
              </div>
            </div>

            {/* Testimonial */}
            <div className="mt-8 border border-[#6e5a1c] bg-[#0b0b0b] p-6 rounded-2xl">
              <p>
                “We’ve hired a lot of keynote speakers over the years, but Craig delivered something completely different. This wasn’t just a presentation—it was an experience.”
              </p>
              <div className="mt-3 text-xs text-[#c9a84a]">VP of Leadership Development</div>
            </div>
          </div>

          <div className="flex items-center justify-center">
            <div className="border border-[#876d21] p-6 rounded-2xl">Visual Concept</div>
          </div>
        </section>

        {/* SIGNATURE KEYNOTE */}
        <section id="keynote" className="mx-auto max-w-7xl px-4 py-12">
          <h2 className="text-3xl text-[#f9edc1]">Signature Keynote</h2>
          <p className="mt-4">
            In this engaging and interactive keynote, Craig reveals how attention, framing, and expectation shape decisions, behavior, and influence.
          </p>
        </section>

        {/* EXPERIENCE */}
        <section id="experience" className="mx-auto max-w-7xl px-4 py-12 grid lg:grid-cols-2 gap-8">
          <div className="border p-6">
            Demo Reel Coming Soon
          </div>

          <div>
            <h3 className="text-xl mb-4">What Your Audience Will Experience</h3>
            {audienceExperience.map(i => <p key={i}>• {i}</p>)}

            <div className="mt-6 border p-6">
              <p>
                “From a planner’s perspective, Craig is exactly what you want in a keynote speaker.”
              </p>
            </div>
          </div>
        </section>

        {/* GAINS */}
        <section className="mx-auto max-w-7xl px-4 py-12">
          <h3 className="text-xl mb-4">What Your Audience Will Gain</h3>
          {audienceGains.map(i => <p key={i}>• {i}</p>)}
        </section>

        {/* ABOUT */}
        <section id="about" className="mx-auto max-w-7xl px-4 py-12">
          <h2 className="text-3xl">About Craig</h2>
          <p className="mt-4">
            Craig is not a mentalist who speaks. He is a keynote speaker who uses mentalism and magic to demonstrate how the mind works.
          </p>
        </section>

        {/* BOOK */}
        <section id="book" className="mx-auto max-w-7xl px-4 py-12">
          <h2 className="text-3xl">Book Craig</h2>
          <p className="mt-4">Keynotes designed for organizations that want more than motivation — they want measurable impact.</p>

          <div className="mt-6 border p-6">
            <p>
              “Craig’s keynote hit that rare combination of being both highly engaging and deeply insightful.”
            </p>
          </div>
        </section>
      </main>
    </div>
  );
}