<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accredited Capitalists</title>
    <link rel="icon" type="image/svg+xml"
        href="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/favicon.png">

    <!-- Paramount Chat Analytics Pixel -->
    <script>
    (function(w,d,s,k){
      w.ParamountPixel=w.ParamountPixel||[];
      w.ParamountPixel.key=k;
      var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
      j.async=true;j.src='https://paramountchat.com/pixel.js';
      f.parentNode.insertBefore(j,f);
    })(window,document,'script','px_accap_i82xg4h7');
    </script>

    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

    <!-- Alpine.js must load synchronously BEFORE the header loads -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        // Confirm Alpine has mounted for components that rely on it elsewhere on the site
        document.addEventListener('alpine:init', () => {
            // console.log('🎬 [ALPINE] Alpine.js initialized');
        });
    </script>
    <script src="/config.js"></script>
    <script src="/scripts/supabase.js"></script>
    <script src="/scripts/debug.js"></script>
    <script src="/scripts/auth.js"></script>

    <style>
        [x-cloak] {
            display: none !important;
        }

        body {
            font-family: 'Inter', sans-serif;
            padding-top: 64px;
        }

        .hero-video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .hero-video-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        .hero-video {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

        .perspective {
            perspective: 1000px;
        }

        .transform-style-3d {
            transform-style: preserve-3d;
        }

        .rotate-x-90 {
            transform: rotateX(90deg);
        }

        .rotate-x-0 {
            transform: rotateX(0deg);
        }

        /* Initially hide elements that should fade in */
        .hero-fade-element {
            opacity: 0;
            transform: translateY(1rem);
        }

        /* Hide the animated text parts initially - using inline styles for proper Alpine.js reactivity */

        .hero-text-inner {
            transform: rotateX(90deg);
        }
    </style>
  <script type="module" crossorigin src="/assets/modulepreload-polyfill-B5Qt9EMX.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/input-Bh6Z4QPl.css">
</head>

<body class="pt-12 lg:pt-20">
    <!-- Header -->
    <div id="header-section"></div>

    <!-- Hero -->
    <div class="hero-container relative h-[70vh] lg:h-[750px] text-white overflow-hidden pt-6 lg:pt-10">
        <div class="hero-video-container">
            <video autoplay loop muted playsinline class="hero-video">
                <source
                    src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/AccreditedCapitalists2kS.2k_npkgqa.mp4"
                    type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="absolute inset-0 bg-black/65"></div>

        <div class="relative z-10 flex flex-col items-center justify-center h-full text-center px-5">
            <p class="hidden sm:block text-xs sm:text-sm uppercase tracking-[0.35em] text-brand-gold mb-4">Houston • First Tuesday of
                Every Month
            </p>
            <h1 class="text-3xl sm:text-4xl lg:text-[3.25rem] font-bold leading-tight max-w-4xl">
                The right room, every time.
            </h1>
            <div class="mt-4 sm:mt-6 text-base sm:text-lg lg:text-xl text-gray-200 max-w-3xl space-y-2">
                <p><span class="text-brand-gold font-bold">Most Events:</span> You shake 250 hands to find one good
                    person.</p>
                <p><span class="text-brand-gold font-bold">ACCAP:</span> You shake 3 hands to find two.</p>
                <p class="hidden sm:block mt-4 text-white/80 text-sm uppercase tracking-widest">We fixed the math.</p>
            </div>
            <div class="mt-6 sm:mt-8 flex flex-col items-center gap-3 sm:gap-4">
                <a href="/events"
                    class="inline-flex items-center justify-center bg-brand-gold text-gray-900 font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-sm shadow-lg hover:bg-white transition-colors duration-300 w-full sm:w-auto text-base sm:text-lg">
                    Reserve Your Free Seat →
                </a>
                <div class="text-sm text-gray-200" id="hero-next-event">
                    <span class="text-brand-gold font-semibold">Next:</span> <span class="hidden sm:inline">Mon, </span>Jan 6 • The Houston Club
                </div>
                <p class="text-xs text-white/70 max-w-sm sm:max-w-md">
                    First event free. Leave with 4-5 people you'll actually text tomorrow.
                </p>
            </div>
        </div>
    </div>

    <!-- About -->
    <section class="bg-brand-blue text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 text-center">
            <h2 class="text-xl md:text-2xl font-bold mb-4">Why We Built This</h2>
            <p class="max-w-3xl mx-auto mb-10 md:mb-16 text-sm md:text-base text-gray-300">
                <span class="hidden sm:inline">Our family attended 1,000+ networking events. Rooms of 500, 1,000, even
                    10,000 people.
                    Quality connections? About 0.4%. So we built a room where two-thirds are worth your time.<br>
                    40 events. 537 members through the door. No spammy pitches. No business-card pushers.</span>
                <span class="sm:hidden">1,000+ networking events. 0.4% quality connections at the average event.
                    40 events later, we've hosted 537 members who passed the same test.</span>
            </p>

            <div class="hidden lg:grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10">
                <div class="flex flex-col items-center text-center bg-white/5 p-6">
                    <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Vetted Members Only</h3>
                    <p class="text-sm text-gray-300 max-w-xs">Every member is carefully vetted. If you're in the room,
                        everyone else passed the same standards. Quality guaranteed.</p>
                </div>
                <div class="flex flex-col items-center text-center bg-white/5 p-6">
                    <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Member Gets The Mic</h3>
                    <p class="text-sm text-gray-300 max-w-xs">No keynote speakers. We pick someone from the room
                        to share what they're building for 12 minutes. Could be you.</p>
                </div>
                <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                    <h3 class="text-sm font-bold tracking-widest uppercase mb-3">40 Events Deep</h3>
                    <p class="text-sm text-gray-300 max-w-xs">3 years. First Tuesday every month.
                        We've hosted tokenization experts, AI founders, fund managers. Real operators.</p>
                </div>
                <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                    <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Instant Network</h3>
                    <p class="text-sm text-gray-300 max-w-xs">"Like moving to a new city and immediately having
                        a group of friends who actually have your best interest in mind."</p>
                </div>
            </div>

            <div class="block lg:hidden space-y-6">
                <div x-data="{ shown: false }" x-intersect.once="shown = true"
                    class="transition-all duration-700 ease-out"
                    :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
                    <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                        <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Vetted Members Only</h3>
                        <p class="text-sm text-gray-300">Every member is carefully vetted. If you're in the room,
                            everyone else meets the same standards.</p>
                    </div>
                </div>
                <div x-data="{ shown: false }" x-intersect.once="shown = true"
                    class="transition-all duration-700 ease-out delay-100"
                    :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
                    <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                        <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Member Gets The Mic</h3>
                        <p class="text-sm text-gray-300">No keynote speakers. We pick someone from the room
                            to share for 12 minutes. Could be you.</p>
                    </div>
                </div>
                <div x-data="{ shown: false }" x-intersect.once="shown = true"
                    class="transition-all duration-700 ease-out delay-200"
                    :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
                    <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                        <h3 class="text-sm font-bold tracking-widest uppercase mb-3">40 Events Deep</h3>
                        <p class="text-sm text-gray-300">3 years running. First Tuesday every month.
                            Tokenization. AI. Alternative investments. Real operators.</p>
                    </div>
                </div>
                <div x-data="{ shown: false }" x-intersect.once="shown = true"
                    class="transition-all duration-700 ease-out delay-300"
                    :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
                    <div class="flex flex-col items-center text-center bg-white/5 p-6 rounded-lg">
                        <h3 class="text-sm font-bold tracking-widest uppercase mb-3">Instant Network</h3>
                        <p class="text-sm text-gray-300">"Like moving to a new city and immediately having
                            friends who have your best interest in mind."</p>
                    </div>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row gap-8 justify-center mt-12">
                <a href="/events"
                    class="bg-white text-brand-blue py-3 px-6 font-semibold hover:bg-brand-gold hover:text-white transition-colors duration-500 delay-100 w-full sm:w-auto text-sm">First
                    Event Free</a>
                <a href="#members"
                    class="border border-white text-white py-3 px-6 font-semibold hover:bg-brand-gold hover:border-brand-gold transition-colors duration-500 delay-100 w-full sm:w-auto text-sm">See
                    Who Shows Up</a>
            </div>
        </div>
    </section>

    <!-- Community Showcase -->
    <section class="bg-white py-16 md:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                    style="font-family: 'Montserrat', sans-serif;">Not Real Estate. Not Another Pitch Night.</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-4">Houston networking is "real estate,
                    real estate, real estate."<br>
                    Last month: tokenizing family office assets. Month before: AI lie detection. Before that: a fund
                    manager's due diligence checklist.
                </p>
            </div>

            <!-- Speaker Spotlight -->
            <div class="max-w-6xl mx-auto mt-16 bg-gray-900 text-white rounded-2xl overflow-hidden shadow-xl">
                <div class="grid md:grid-cols-2 gap-8 md:gap-0 items-stretch">
                    <div class="relative">
                        <img src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/Speaker.png"
                            alt="Member speaking at ACCAP event" class="w-full h-full object-cover">
                        <div
                            class="absolute bottom-4 left-4 bg-black/70 px-3 py-2 text-xs uppercase tracking-[0.35em] text-brand-gold">
                            Member Spotlight</div>
                    </div>
                    <div class="p-8 md:p-12 flex flex-col justify-center">
                        <h3 class="text-2xl font-semibold mb-4">"Last month: tokenizing billions in family office
                            assets."
                        </h3>
                        <p class="text-base text-gray-300 leading-relaxed mb-4">No slides. No pitch deck.
                            A member walked us through exactly how they're tokenizing family office assets
                            for next-gen heirs. 12 minutes. His actual playbook.</p>
                        <p class="text-base text-gray-300 leading-relaxed">Month before that: AI lie detection.
                            Before that: a fund manager's due diligence checklist.
                            You can't buy a speaking slot. You can't sponsor your way in.
                            The only path to the mic is membership.</p>
                        <p class="mt-6 text-sm uppercase tracking-[0.3em] text-brand-gold">The mic could
                            be yours.</p>
                    </div>
                </div>
            </div>

            <!-- CTA -->
            <div class="text-center mt-14">
                <p class="text-gray-700 mb-4 text-lg">We cover your first event. See if a vetted room beats a crowded one.
                </p>
                <p class="text-gray-600 mb-8 text-sm">$99/month after that.</p>
                <a href="/events"
                    class="inline-block bg-brand-gold hover:bg-yellow-600 text-white px-10 py-4 rounded-lg font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
                    Reserve Your Spot
                </a>
            </div>
        </div>
    </section>

    <!-- Events -->
    <section class="bg-brand-blue text-white py-20">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 items-start">
                <div class="bg-white/5 p-8 rounded-2xl h-full">
                    <p class="text-xs uppercase tracking-[0.35em] text-brand-gold mb-3">Next Event</p>
                    <h3 class="text-2xl font-semibold mb-4">Tuesday, December&nbsp;2</h3>
                    <p class="text-sm text-gray-200 mb-6">The Revaire • 6:00&nbsp;PM — 8:30&nbsp;PM<br>Limited spots. We
                        confirm every attendee the week before.</p>
                    <ul class="space-y-3 text-sm text-gray-200">
                        <li>• Doors open—enjoy refreshments and start connecting.</li>
                        <li>• During the event, we select a member to share their story for 12 minutes.</li>
                        <li>• Members connect organically throughout the evening.</li>
                    </ul>
                </div>
                <div class="bg-white/5 p-8 rounded-2xl h-full">
                    <p class="text-xs uppercase tracking-[0.35em] text-brand-gold mb-3">What To Expect</p>
                    <h3 class="text-2xl font-semibold mb-4">No pitches. No panels. Just the right people.</h3>
                    <p class="text-sm text-gray-200 leading-relaxed mb-4">Every guest is doing something interesting:
                        building funds, scaling companies, running family offices. We keep the room small so every voice
                        matters.</p>
                    <p class="text-sm text-gray-200 leading-relaxed mb-4">We don't allow vendor pitches or paid
                        sponsorships. But we do give members the opportunity to speak—one per event gets 12 minutes to
                        share their story with people who are actually worth talking to.</p>
                    <p class="text-sm text-gray-200 leading-relaxed mt-4">You'll walk away with:
                    </p>
                    <ul class="mt-4 space-y-3 text-sm text-gray-200">
                        <li>• One high-signal idea from whoever got called up.</li>
                        <li>• Connections with people who actually get what you're building.</li>
                    </ul>
                </div>
                <div class="bg-white/5 p-8 rounded-2xl h-full">
                    <p class="text-xs uppercase tracking-[0.35em] text-brand-gold mb-3">After You Apply</p>
                    <ol class="text-sm text-gray-200 space-y-4">
                        <li><strong class="text-white">01 — Submit your profile.</strong><br>We review context, existing
                            work, and why you want to attend.</li>
                        <li><strong class="text-white">02 — Profile vetting.</strong><br>We verify your information to
                            ensure you're a fit for the room.</li>
                        <li><strong class="text-white">03 — Confirmation.</strong><br>You get your confirmed invite and
                            event details.</li>
                    </ol>
                    <a href="/events"
                        class="inline-block mt-6 bg-brand-gold text-gray-900 font-semibold px-6 py-3 rounded-sm text-sm hover:bg-white transition-colors duration-300">
                        Start Application
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="bg-white text-gray-900 py-16 md:py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-16">
                Simple. Apply → Get Verified → Show Up → Meet People Worth Knowing
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                <div class="bg-gray-50 p-8 rounded-lg">
                    <div class="text-4xl font-bold text-brand-gold mb-4">01</div>
                    <h3 class="text-xl font-bold mb-3">Apply for Membership</h3>
                    <p class="text-gray-600">Tell us about yourself and why you want to join. Takes 5 minutes.</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-lg">
                    <div class="text-4xl font-bold text-brand-gold mb-4">02</div>
                    <h3 class="text-xl font-bold mb-3">Get Approved</h3>
                    <p class="text-gray-600">We carefully curate the room. Not everyone gets in. If you do, welcome.</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-lg">
                    <div class="text-4xl font-bold text-brand-gold mb-4">03</div>
                    <h3 class="text-xl font-bold mb-3">Show Up Monthly</h3>
                    <p class="text-gray-600">First Tuesday of every month. A curated group. Premium venue. Real
                        conversations.
                    </p>
                </div>
            </div>

            <div class="bg-brand-blue text-white p-12 rounded-2xl max-w-4xl mx-auto">
                <h3 class="text-2xl font-bold mb-4">What You Get</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
                    <div class="flex items-start">
                        <svg class="w-6 h-6 text-brand-gold mr-3 mt-1 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-semibold mb-1">Monthly Events</p>
                            <p class="text-sm text-gray-300">Premium venue, and a room designed for real
                                conversation.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-6 h-6 text-brand-gold mr-3 mt-1 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-semibold mb-1">Everyone Gets Vetted</p>
                            <p class="text-sm text-gray-300">We've turned people away. If you're in the room,
                                everyone else passed the same test.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-6 h-6 text-brand-gold mr-3 mt-1 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-semibold mb-1">Member-Led Talks</p>
                            <p class="text-sm text-gray-300">We select a member to share their story for 12 minutes. No
                                keynote decks.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-6 h-6 text-brand-gold mr-3 mt-1 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-semibold mb-1">Friends You'll Text Tomorrow</p>
                            <p class="text-sm text-gray-300">Walk in alone. Leave with 4-5 people you'll actually
                                follow up with. No business card graveyards.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-12 text-center">
                <p class="text-xl text-gray-700 mb-6 font-semibold">$99/month. Worth every penny.</p>
                <a href="/events"
                    class="inline-block bg-brand-gold hover:bg-yellow-600 text-white px-12 py-4 rounded-lg font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
                    Start Your Application
                </a>
            </div>
        </div>
    </section>

    <!-- Members -->
    <section id="members" class="bg-brand-blue text-white pt-16 sm:pt-20 pb-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Who Shows Up?</h2>
                <p class="text-lg text-gray-300 max-w-3xl mx-auto">A retired Command Sergeant Major. A TV host who wrote
                    a bestseller.
                    A doctor building a concierge medicine empire. A corporate coach who's helped build generational
                    wealth for hundreds of families.
                    That's who sat at the table last month.</p>
                <blockquote class="mt-6 max-w-2xl mx-auto text-base text-gray-200 italic">"Like moving to a new city
                    and immediately having a group of friends who actually have your best interest in mind."
                </blockquote>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
                <div class="bg-white/5 backdrop-blur p-6 rounded-lg">
                    <img class="w-32 h-32 rounded-full object-cover mb-4 shadow-lg mx-auto"
                        src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/Chris_Jarvis_wzm1ds.png"
                        alt="Chris Jarvis">
                    <h3 class="font-bold text-white mb-1 text-lg">Chris Jarvis</h3>
                    <p class="text-xs text-brand-gold mb-3 font-semibold">Corporate Coach | CEO | Speaker</p>
                    <p class="text-sm text-gray-300 leading-relaxed">Helped hundreds of entrepreneurs and wealthy
                        families build generational wealth. The guy who knows the unusual paths to success.</p>
                </div>
                <div class="bg-white/5 backdrop-blur p-6 rounded-lg">
                    <img class="w-32 h-32 rounded-full object-cover mb-4 shadow-lg mx-auto"
                        src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/Jessica_Preston_qftzak.png"
                        alt="Jessica Preston">
                    <h3 class="font-bold text-white mb-1 text-lg">Jessica Preston</h3>
                    <p class="text-xs text-brand-gold mb-3 font-semibold">Founder | TV Host | Bestselling Author</p>
                    <p class="text-sm text-gray-300 leading-relaxed">20+ years in fertility and women's health. Created
                        the Functional Medicine model that actually helps women conceive.</p>
                </div>
                <div class="bg-white/5 backdrop-blur p-6 rounded-lg">
                    <img class="w-32 h-32 rounded-full object-cover mb-4 shadow-lg mx-auto"
                        src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/Bart_E._Womack_shj7gv.webp"
                        alt="Bart E. Womack">
                    <h3 class="font-bold text-white mb-1 text-lg">Bart E. Womack</h3>
                    <p class="text-xs text-brand-gold mb-3 font-semibold">Retired Command Sergeant Major</p>
                    <p class="text-sm text-gray-300 leading-relaxed">29 years leading soldiers with distinction. The
                        kind of leadership and discipline you don't find in boardrooms.</p>
                </div>
                <div class="bg-white/5 backdrop-blur p-6 rounded-lg">
                    <img class="w-32 h-32 rounded-full object-cover mb-4 shadow-lg mx-auto"
                        src="https://xneomosvotlzspgxmwsj.supabase.co/storage/v1/object/public/assets/Dr._Vik_Rajan_M.D._muhywe.webp"
                        alt="Dr. Vik Rajan, M.D.">
                    <h3 class="font-bold text-white mb-1 text-lg">Dr. Vik Rajan, M.D.</h3>
                    <p class="text-xs text-brand-gold mb-3 font-semibold">Board-Certified Physician | Founder</p>
                    <p class="text-sm text-gray-300 leading-relaxed">Founded Concierge Integrative Medicine. Holistic
                        treatments and medical navigation for people who want to live longer, better.</p>
                </div>
            </div>
            <div class="text-center mt-12">
                <blockquote class="text-lg text-white italic mb-4 max-w-2xl mx-auto">"I've closed two deals and found my next LP — all from people I met at ACCAP."</blockquote>
                <p class="text-brand-gold text-sm font-semibold mb-6">— Fund Manager, 3rd Month Member</p>
                <a href="/events" id="attend-free-btn-mid"
                    class="inline-block bg-brand-gold text-gray-900 py-4 px-10 font-bold text-lg hover:bg-yellow-500 transition-colors duration-300 rounded-sm">Reserve Your Free Seat</a>
            </div>
        </div>
    </section>

    <!-- Membership Tiers -->
    <div id="membership-tiers-section"></div>

    <!-- Final CTA -->
    <section
        class="relative overflow-hidden bg-gradient-to-br from-brand-blue via-brand-blue to-gray-900 py-20 md:py-32">
        <!-- Decorative Elements -->
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-gold via-yellow-400 to-brand-gold">
        </div>

        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2
                class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-6 tracking-tight leading-tight">
                The right room, every time.
            </h2>
            <p class="text-lg sm:text-xl md:text-2xl text-gray-300 mb-3 md:mb-4 max-w-2xl mx-auto"
                id="final-next-event">
                Next event: Tue, Dec&nbsp;2
            </p>
            <p class="text-base sm:text-lg text-gray-400 mb-2">
                Walk in alone. Leave with friends you'll text tomorrow.
            </p>
            <p class="text-sm text-gray-400 mb-4">
                We cover your first event. No credit card required.
            </p>
            <p class="text-xs text-brand-gold mb-8 md:mb-10 uppercase tracking-wider">
                December event: 12 seats remaining
            </p>
            <a href="/events" id="attend-free-btn-final"
                class="inline-block bg-brand-gold hover:bg-yellow-500 text-gray-900 font-bold text-lg sm:text-xl px-8 sm:px-12 py-4 sm:py-5 rounded-md shadow-2xl hover:shadow-brand-gold/50 transform hover:scale-105 transition-all duration-300">
                Reserve Your Free Seat →
            </a>
        </div>
    </section>

    <!-- Footer -->
    <div id="footer-section"></div>

    <script>
        // Component Loading System
        const styleCache = new Set();

        async function loadGlobalPartial(sectionId, filename) {
            const target = document.getElementById(sectionId);
            if (!target) return;

            try {
                // Try loading from /Global/ first, fallback to /public/Global/ if needed
                let response = await fetch(`/Global/${filename}.part`);
                if (!response.ok) {
                    // Try alternative path if first fails
                    response = await fetch(`/public/Global/${filename}.part`);
                }

                if (!response.ok) throw new Error(`Failed to load ${filename}`);

                const text = await response.text();

                // Safety check: If the response is a full HTML page (e.g. 404 fallback), don't inject it
                if (text.trim().toLowerCase().startsWith('<!doctype html') || text.includes('<html')) {
                    console.warn(`Skipping injection of ${filename}: Response appears to be a full HTML page (likely 404 fallback)`);
                    return;
                }

                target.innerHTML = text;
            } catch (error) {
                console.error(`Error loading ${filename}:`, error);
            }
        }

        function injectStyles(doc) {
            doc.head?.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => {
                if (node.tagName === 'STYLE') {
                    const content = node.textContent.trim();
                    if (styleCache.has(content)) return;
                    styleCache.add(content);
                    document.head.appendChild(node.cloneNode(true));
                } else {
                    const href = node.getAttribute('href');
                    if (!href || styleCache.has(href)) return;
                    styleCache.add(href);
                    document.head.appendChild(node.cloneNode(true));
                }
            });
        }

        async function executeScripts(doc, target) {
            const scripts = doc.querySelectorAll('script');
            for (const original of scripts) {
                const src = original.getAttribute('src');
                if (src) {
                    // Skip if library already loaded
                    if ((src.includes('react') && window.React) ||
                        (src.includes('babel') && window.Babel)) continue;

                    await new Promise((resolve) => {
                        const script = document.createElement('script');
                        script.src = src;
                        script.async = false;
                        script.onload = resolve;
                        script.onerror = resolve;
                        document.body.appendChild(script);
                    });
                } else {
                    const script = document.createElement('script');
                    if (original.type === 'text/babel' && window.Babel) {
                        try {
                            script.textContent = Babel.transform(original.textContent, { presets: ['react'] }).code;
                        } catch (e) { console.error('Babel error:', e); }
                    } else {
                        script.textContent = original.textContent;
                    }
                    target.appendChild(script);
                }
            }
        }

        async function loadSubscriptionComponent(targetId) {
            const target = document.getElementById(targetId);
            if (!target) return;

            try {
                let response = await fetch('/Subscription-simple.part');
                if (!response.ok) {
                    response = await fetch('/public/Subscription-simple.part');
                }
                if (!response.ok) throw new Error('Failed to load subscription component');

                const html = await response.text();

                // Safety check: If the response is a full HTML page (e.g. 404 fallback), don't inject it
                if (html.trim().toLowerCase().startsWith('<!doctype html') || html.includes('<html')) {
                    console.warn('Skipping injection of subscription component: Response appears to be a full HTML page (likely 404 fallback)');
                    return;
                }

                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                injectStyles(doc);

                const content = doc.querySelector('#tiers');
                if (content) {
                    target.innerHTML = '';
                    target.appendChild(content);
                    await executeScripts(doc, target);
                }
            } catch (error) {
                console.error('Error loading subscription:', error);
            }
        }

        async function loadNextEvent() {
            try {
                // Wait for config to be available
                let attempts = 0;
                while (!window.ACCAP_CONFIG && attempts < 20) {
                    await new Promise(r => setTimeout(r, 100));
                    attempts++;
                }

                if (!window.ACCAP_CONFIG) return;

                let client;
                if (window.ACCAPAuth && window.ACCAPAuth.getClient) {
                    client = window.ACCAPAuth.getClient();
                } else {
                    const { createClient } = supabase;
                    client = createClient(window.ACCAP_CONFIG.supabaseUrl, window.ACCAP_CONFIG.supabaseAnonKey);
                }

                const { data: events } = await client
                    .from('events')
                    .select('*')
                    .gte('start_date', new Date().toISOString())
                    .order('start_date', { ascending: true })
                    .limit(1);

                if (events?.length) {
                    const event = events[0];
                    const date = new Date(event.start_date).toLocaleDateString('en-US', {
                        weekday: 'short', month: 'short', day: 'numeric'
                    });

                    // Check for authenticated user
                    let user = null;
                    if (window.ACCAPAuth && window.ACCAPAuth.getCurrentUser) {
                        const { user: currentUser } = await window.ACCAPAuth.getCurrentUser();
                        user = currentUser;
                    }

                    let text = `Next event: ${date}`;
                    if (user) {
                        text += ` • ${event.venue_name || 'Houston Club'}`;
                    }

                    ['hero-next-event', 'final-next-event'].forEach(id => {
                        const el = document.getElementById(id);
                        if (el) el.textContent = text;
                    });

                    // Update "Attend Free in [Month]" buttons dynamically
                    const eventMonth = new Date(event.start_date).toLocaleDateString('en-US', { month: 'long' });
                    ['attend-free-btn-mid', 'attend-free-btn-final'].forEach(id => {
                        const btn = document.getElementById(id);
                        if (btn) btn.textContent = `Attend Free in ${eventMonth}`;
                    });
                }
            } catch (e) {
                console.warn('Could not load next event');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            Promise.all([
                loadGlobalPartial('header-section', 'header'),
                loadGlobalPartial('footer-section', 'footer'),
                loadSubscriptionComponent('membership-tiers-section'),
                loadNextEvent()
            ]);
        });
    </script>

    <!-- Paramount Chat SDK (headless) -->
    <script>
    (function(w,d,s,k){
      w.ParamountChat=w.ParamountChat||{};
      w.ParamountChat.key=k;
      var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
      j.async=true;j.src='https://paramountchat.com/chat-sdk.js';
      f.parentNode.insertBefore(j,f);
    })(window,document,'script','ch_accap_4hzzr8z8');
    </script>

    <script type="module" src="/script.js"></script>
</body>

</html>