import React, { useState } from 'react';
import { ChevronDown, ChevronUp, Check, Circle } from 'lucide-react';

const MelanatedMillionaireV2 = () => {
  const [expandedSection, setExpandedSection] = useState(null);
  const [completedSteps, setCompletedSteps] = useState([]);

  const toggleSection = (section) => {
    setExpandedSection(expandedSection === section ? null : section);
  };

  const toggleStep = (step) => {
    setCompletedSteps(prev => 
      prev.includes(step) 
        ? prev.filter(s => s !== step)
        : [...prev, step]
    );
  };

  const sections = [
    {
      id: 'welcome',
      title: 'Welcome',
      content: {
        headline: "You're Not Broken. You're Just Running the Wrong Code.",
        body: [
          "Let's get something clear right now: You're already excellent. You show up. You deliver. You make impossible things happen on a regular Tuesday.",
          "So why does it still feel like you're one mistake away from losing it all?",
          "Why does rest feel dangerous? Why does charging what you're worth trigger panic? Why do you dim yourself in rooms you built? Why does receiving feel harder than grinding?",
          "Because you're not operating from your brilliance. You're operating from survival code written decades ago—code that says shrinking keeps you safe, struggle proves you're worthy, and visibility is a threat.",
          "That code kept you alive. But it's stealing your life now.",
          "Your money situation? That's just where the survival programming shows up most obviously. But it's running everything—your relationships, your rest, who you say yes to, how loud you let yourself be, what you allow yourself to want.",
          "The Melanated Millionaire Blueprint doesn't just change how you think about money. It rewires the operating system underneath EVERYTHING. So you can finally live a RxCH life—sovereign, easeful, powerful, FREE."
        ],
        action: "You need four uninterrupted hours and a willingness to feel uncomfortable. This isn't a productivity hack. It's identity surgery. Get your journal. Turn off your phone. Let's go."
      }
    },
    {
      id: 'phase1',
      title: 'Phase 1: The Real Enemy',
      content: {
        headline: "Name What's Actually Running Your Life",
        intro: "You can't dismantle what you can't see. Most people spend their whole lives fighting symptoms while the actual enemy runs quietly in the background.",
        sections: [
          {
            title: "The 7 Survival Patterns",
            text: "Here's what survival programming looks like when it's in control. Check every single one that's true for you right now—not what you wish was true, what's ACTUALLY true:",
            patterns: [
              {
                name: "The Grind Gospel",
                description: "You don't trust anything that comes easy. Struggle feels like proof you're doing it right. Rest feels like laziness. If you're not exhausted, you're not trying hard enough."
              },
              {
                name: "The Safety Ceiling",
                description: "There's a number—maybe it's $10K/month, maybe $100K/year—where things start feeling 'too good.' You hit it, then something always happens to bring you back down. It's not bad luck. It's your nervous system protecting you from unfamiliar territory."
              },
              {
                name: "The Visibility Tax",
                description: "You know you're brilliant. But you keep yourself small anyway. You don't post. You undersell. You let someone else take credit. Because some part of you still believes that being seen is dangerous."
              },
              {
                name: "The Prove-It Loop",
                description: "You're always one more certification, one more success story, one more credential away from feeling like you've earned the right to charge premium prices or take up space. Spoiler: that day never comes, because worthiness isn't the real issue."
              },
              {
                name: "The Scarcity Grip",
                description: "Even when you have enough, you operate like you don't. You hoard opportunities. You say yes to things that drain you because 'what if this is the last one.' You can't relax into having because losing feels inevitable."
              },
              {
                name: "The Validation Wait",
                description: "You need permission—from a mentor, a partner, a sign from the universe—before you make moves. You're capable of the decision, but survival code says don't trust yourself. Wait for someone else to cosign it."
              },
              {
                name: "The Inheritance",
                description: "This one's deeper. You're carrying money trauma that isn't even yours—it's your parents', your grandparents', your lineage. Their survival strategies are still running in your body. And you don't even know it."
              }
            ]
          },
          {
            title: "The Real Inventory",
            text: "Now we go deeper. Answer these out loud or write them down—but don't skip them. The ones that make you uncomfortable are the ones stealing from you.",
            questions: [
              "What did your parents teach you about money without ever saying it out loud?",
              "What had to be true about you to be safe in your family? (Small? Quiet? Self-sufficient? Invisible?)",
              "When you imagine yourself visibly wealthy—not just comfortable, but WEALTHY—what's the first feeling that comes up?",
              "What's the highest amount of money that feels 'safe' for you to have right now? Not what you want, but what your body believes is safe. Now ask: why that exact number?",
              "How do you punish yourself when money comes easily vs when you have to suffer for it?"
            ]
          },
          {
            title: "The Map",
            text: "Draw three columns in your journal. Be brutally honest. This is just for you.",
            columns: [
              "Column 1: What I believe about wealth/success/visibility",
              "Column 2: Where I learned this (family, church, school, culture, experience)",
              "Column 3: What this belief is costing me RIGHT NOW"
            ],
            example: "Belief: 'Rich people are selfish' | Source: Church, community messaging | Cost: I sabotage every opportunity that would make me wealthy because I don't want to become 'one of them'"
          }
        ],
        completion: "You're done with Phase 1 when you can name your top 3 survival patterns without flinching and trace them back to where they started. If you can't, keep digging."
      }
    },
    {
      id: 'phase2',
      title: 'Phase 2: The New Code',
      content: {
        headline: "Install the Operating System That Wealth Actually Runs On",
        intro: "Your nervous system doesn't care about your vision board. It cares about survival. Right now, it's coded to believe that wealth, visibility, ease, and receiving are dangerous. We're changing that.",
        sections: [
          {
            title: "Why Your Body Fights Your Goals",
            points: [
              "Your nervous system was trained: struggle = safety, ease = danger.",
              "Every time money flows easily, your body reads it as a threat and creates chaos to return you to familiar stress.",
              "You don't have a motivation problem. You have a safety problem.",
              "Millionaire-level wealth requires your body to feel SAFE with abundance, not just intellectually want it."
            ]
          },
          {
            title: "The New Identity",
            text: "Read this out loud. Three times. Slowly. Pay attention to what your body does when you say it.",
            statement: "I am a wealthy person. Wealth is my natural state. My body is safe when money flows to me easily. I create abundance without suffering. My rest is productive. My joy is valuable. My visibility serves my people. My sovereignty includes financial freedom. My lineage celebrates my wealth."
          },
          {
            title: "Nervous System Reset (20 Minutes)",
            text: "You can't think your way into a new operating system. You have to INSTALL it in your body.",
            phases: [
              {
                name: "Ground",
                instruction: "Both hands on your chest. Deep breath in for 4, hold for 4, out for 6. Do this until you feel your heartbeat slow down. Two minutes minimum."
              },
              {
                name: "Locate",
                instruction: "Where in your body do you hold money fear? Your chest? Your stomach? Your throat? Don't judge it. Just notice it. Give it a color, a temperature, a texture."
              },
              {
                name: "Release",
                instruction: "Imagine the survival code as a heavy coat you've been wearing your whole life. See yourself unbuttoning it. Sliding it off your shoulders. Letting it drop to the ground. You don't need it anymore."
              },
              {
                name: "Install",
                instruction: "Now imagine wealth as warm, golden light. Let it pour into the top of your head. Feel it filling every cell. Your chest. Your arms. Your legs. Your belly. It's safe here. You're safe with this."
              },
              {
                name: "Anchor",
                instruction: "Touch your chest with both hands. Say out loud: 'Wealth is safe for me. I am safe with wealth.' Say it until something shifts. Could be tears. Could be laughter. Could be nothing. Keep going until something moves."
              }
            ]
          },
          {
            title: "Mirror Work",
            text: "Stand in front of a mirror. Look yourself directly in the eyes. Say this:",
            script: "'I see you. I know you're scared. I know you think keeping yourself small will keep you safe. But it won't. It's just stealing your life. We're done with that now. We're building wealth. Not someday—now. And I've got you. You're not doing this alone. I'm here. Let's go.'",
            note: "Repeat until you cry or until the resistance softens. This isn't optional."
          }
        ],
        completion: "You're done when you can say 'I am wealthy' without your body immediately throwing up objections. It doesn't have to feel true yet. It just has to not feel DANGEROUS."
      }
    },
    {
      id: 'phase3',
      title: 'Phase 3: The Cultural Codes',
      content: {
        headline: "Your Wealth Isn't Separate From Your Heritage—It's the Completion of It",
        intro: "Most wealth and abundance teaching ignores the fact that your people survived systems designed to break them. That survival intelligence is still in your body. We're not erasing it—we're UPDATING it.",
        sections: [
          {
            title: "The Distinction",
            points: [
              "Your ancestors weren't struggling. They were SURVIVING.",
              "Survival was brilliance. It was resistance. It kept you here.",
              "But what kept them alive will keep you stuck if you don't upgrade the code.",
              "Your wealth doesn't dishonor their sacrifice. Your wealth IS their dream realized."
            ]
          },
          {
            title: "The Heritage RxCHual",
            text: "Light a candle if you have one. Say their names if you know them. If you don't, just say 'my ancestors.' Then say this out loud:",
            script: "'I honor what you survived. I stand on what you built. And I'm here to CONTINUE what you started. You survived so I could THRIVE. My wealth is your dream made real. My rest heals your exhaustion. My joy redeems your suffering. My freedom completes your resistance. Thank you for getting me here. I've got it from here.'",
            instruction: "Sit in silence for five minutes. Don't force anything. Just notice what comes up—images, memories, feelings, words. Write down whatever surfaces."
          },
          {
            title: "The New Cultural Wealth Codes",
            text: "These replace the survival narratives you inherited. Say them out loud. Let them rewire you.",
            codes: [
              {
                code: "REST IS RESISTANCE",
                meaning: "Your ease is how you honor their exhaustion. Grinding doesn't prove anything—it just repeats the trauma."
              },
              {
                code: "WEALTH IS REPARATIONS",
                meaning: "Your abundance repairs what was stolen. Every dollar you build restores what they were denied."
              },
              {
                code: "VISIBILITY IS VICTORY",
                meaning: "Your presence in wealthy spaces is the revolution. Shrinking dishonors their courage."
              },
              {
                code: "RECEIVING IS RADICAL",
                meaning: "Accepting wealth without guilt breaks the scarcity spell. You're allowed to HAVE without suffering for it."
              },
              {
                code: "LEGACY IS LOVE",
                meaning: "Building generational wealth is ancestral healing. You're not just building for you—you're building for them."
              }
            ]
          },
          {
            title: "Your Code",
            text: "Now create your own. Complete this sentence:",
            prompt: "'In my family, we survived by _____________. In my lifetime, we will thrive by _____________.'",
            example: "'In my family, we survived by staying small and working twice as hard. In my lifetime, we will thrive by claiming our full power and building wealth that serves us.'"
          }
        ],
        completion: "You're done when you can hold your wealth and your heritage in the same breath—when building a 7-figure life feels like honoring them, not betraying them."
      }
    },
    {
      id: 'phase4',
      title: 'Phase 4: The Decision Matrix',
      content: {
        headline: "How to Make Choices That Build the Life You Actually Want",
        intro: "Every single choice you make—who you work with, what you charge, how you rest, who you become visible to, what you say yes to—is either pulling you toward sovereignty or pushing you back into survival. This matrix makes sure you choose sovereignty every time.",
        sections: [
          {
            title: "The Two Systems",
            survival: "SURVIVAL DECISIONS: Rooted in fear, scarcity, proving, staying safe, getting short-term relief, avoiding risk, keeping yourself small",
            sovereignty: "SOVEREIGNTY DECISIONS: Rooted in your vision, abundance, claiming, long-term wealth, strategic risk, stepping into your full power"
          },
          {
            title: "The 5 Questions",
            text: "Before any significant decision—money, relationships, opportunities, visibility—run it through these:",
            questions: [
              {
                q: "Is this expanding my capacity or protecting my comfort?",
                note: "Comfort isn't bad. But if every choice is about staying comfortable, you're running survival code."
              },
              {
                q: "Am I choosing this from where I am now or from where I'm going?",
                note: "Your current reality will always vote for safety. Your future self knows what's required."
              },
              {
                q: "Would the wealthiest, most sovereign version of me make this choice?",
                note: "Not the version that's trying to prove something. The version that's already FREE."
              },
              {
                q: "Is this coming from scarcity fear or abundance strategy?",
                note: "Strategy might say no to something. Fear definitely will. Learn the difference."
              },
              {
                q: "Does this choice honor my sovereignty or feed my survival patterns?",
                note: "Sovereignty decisions might be hard. They won't make you feel small."
              }
            ],
            usage: "If 3 or more answers point to survival, pause. Sit with it. Then choose again."
          },
          {
            title: "The Letter",
            text: "Write a letter to yourself from your future—the version of you that's already living the RxCH life. Five years from now. Wealthy. Sovereign. Free. Let that version of you speak. What do they want you to know? What decisions did they make that you're about to make? What do they wish you understood right now?",
            instruction: "Don't edit. Don't make it pretty. Just write. Minimum 1 page."
          },
          {
            title: "The Anchor",
            text: "Choose a physical object—a ring, a bracelet, a stone, a photo. Something you can touch. This becomes your sovereignty anchor.",
            ritual: "Hold it. Say your new identity statement out loud. From now on, before every big decision, you touch this anchor and ask: 'Am I choosing from survival or sovereignty?' Let it be your reminder."
          }
        ],
        completion: "You're done when you have a repeatable system for making sovereign choices—and when you can feel the difference in your body between survival decisions and sovereignty decisions."
      }
    },
    {
      id: 'integration',
      title: '7-Day Integration',
      content: {
        headline: "Make It Permanent",
        intro: "Installation is the beginning. Integration is what makes it STICK. The next 7 days determine whether this becomes your new operating system or just another thing you learned and forgot.",
        protocol: [
          {
            days: "Days 1-3",
            title: "Morning Sovereignty Practice",
            practice: "Every morning: Touch your anchor. Say your identity statement three times out loud. Then journal one sentence: 'One way I'm choosing sovereignty today is...' That's it. Don't skip a day."
          },
          {
            days: "Days 4-5",
            title: "Decision Audit",
            practice: "Track every choice you make—work, money, relationships, rest, visibility. Run each one through the 5 questions. You're looking for patterns. Where are you still defaulting to survival? Where is sovereignty showing up naturally?"
          },
          {
            days: "Days 6-7",
            title: "Body Check",
            practice: "Go back to the nervous system reset from Phase 2. Do it again. Notice what's different. Does wealth feel safer in your body? Does ease trigger less panic? Are you receiving without guilt? Write down what's shifted."
          }
        ],
        evidence: [
          "What does success look like?",
          "Decisions feel clearer. Less second-guessing.",
          "Money conversations don't trigger the same anxiety.",
          "You catch yourself choosing survival patterns and course-correct in real time.",
          "New opportunities show up—not because the universe changed, but because YOU did.",
          "Your body doesn't panic when things feel easy.",
          "You can receive compliments, money, opportunities without immediately deflecting or sabotaging."
        ]
      }
    }
  ];

  return (
    <div className="min-h-screen bg-black text-white">
      <div className="border-b border-yellow-600/30">
        <div className="max-w-4xl mx-auto px-6 py-12">
          <div className="flex items-center justify-center mb-8">
            <div className="w-32 h-32 rounded-full border-4 border-yellow-600 flex items-center justify-center">
              <div className="text-center">
                <div className="text-yellow-600 font-serif text-lg">Melanin RxCH</div>
                <div className="text-yellow-600 font-serif text-base italic">Collective</div>
              </div>
            </div>
          </div>
          <h1 className="text-5xl font-bold text-center mb-4 bg-gradient-to-r from-yellow-400 to-yellow-600 bg-clip-text text-transparent">
            The Melanated Millionaire Blueprint™
          </h1>
          <p className="text-xl text-gray-300 text-center mb-6">
            Rewire Your Identity for 7-Figure Sovereignty
          </p>
          <div className="bg-yellow-600/10 border border-yellow-600/30 rounded-lg p-6 backdrop-blur">
            <div className="text-center">
              <p className="text-yellow-400 font-semibold mb-2">Deep Work Required • 4 Hours • 7-Day Integration</p>
              <p className="text-gray-300">
                You're not broken. You're just running survival code. Let's update it.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-6 py-8">
        <div className="bg-zinc-900 border border-yellow-600/20 rounded-lg p-6">
          <h2 className="text-lg font-bold text-yellow-400 mb-4">Your Journey</h2>
          <div className="flex gap-3 flex-wrap">
            {sections.map(section => (
              <div 
                key={section.id}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                  completedSteps.includes(section.id)
                    ? 'bg-yellow-600 text-black'
                    : 'bg-zinc-800 text-gray-400 border border-yellow-600/20'
                }`}
              >
                {completedSteps.includes(section.id) && <Check className="inline w-4 h-4 mr-1" />}
                {section.title}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-6 pb-12">
        {sections.map(section => (
          <div key={section.id} className="mb-4">
            <div className="bg-zinc-900 border border-yellow-600/20 rounded-lg overflow-hidden">
              <button
                onClick={() => toggleSection(section.id)}
                className="w-full p-6 flex items-center justify-between hover:bg-zinc-800/50 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    completedSteps.includes(section.id)
                      ? 'bg-yellow-600 text-black'
                      : 'bg-yellow-600/20 text-yellow-400'
                  }`}>
                    {completedSteps.includes(section.id) ? <Check className="w-5 h-5" /> : <Circle className="w-5 h-5" />}
                  </div>
                  <h2 className="text-2xl font-bold text-left text-yellow-400">{section.title}</h2>
                </div>
                {expandedSection === section.id ? <ChevronUp /> : <ChevronDown />}
              </button>
              
              {expandedSection === section.id && (
                <div className="p-6 pt-0 border-t border-yellow-600/20">
                  <div className="space-y-6">
                    <h3 className="text-3xl font-bold text-yellow-400 mt-4">{section.content.headline}</h3>
                    
                    {section.content.body && (
                      <div className="space-y-4">
                        {section.content.body.map((paragraph, idx) => (
                          <p key={idx} className="text-gray-300 leading-relaxed">{paragraph}</p>
                        ))}
                      </div>
                    )}

                    {section.content.intro && (
                      <p className="text-gray-300 leading-relaxed font-medium">{section.content.intro}</p>
                    )}
                    
                    {section.content.action && (
                      <div className="bg-yellow-600/10 border-l-4 border-yellow-600 p-5 rounded">
                        <p className="text-yellow-200 font-medium">{section.content.action}</p>
                      </div>
                    )}

                    {section.content.sections && section.content.sections.map((item, idx) => (
                      <div key={idx} className="bg-zinc-800/50 rounded-lg p-6 border border-yellow-600/10">
                        <h4 className="text-xl font-bold text-yellow-400 mb-4">{item.title}</h4>
                        {item.text && <p className="text-gray-300 mb-4 leading-relaxed">{item.text}</p>}
                        
                        {item.patterns && (
                          <div className="space-y-3">
                            {item.patterns.map((pattern, i) => (
                              <div key={i} className="bg-black/50 p-4 rounded border-l-2 border-yellow-600/50">
                                <div className="font-bold text-yellow-400 mb-1">{pattern.name}</div>
                                <div className="text-gray-400 text-sm">{pattern.description}</div>
                              </div>
                            ))}
                          </div>
                        )}

                        {item.questions && typeof item.questions[0] === 'string' && (
                          <div className="space-y-3">
                            {item.questions.map((q, i) => (
                              <div key={i} className="text-gray-300 pl-4 border-l-2 border-yellow-600/30 py-2">
                                {q}
                              </div>
                            ))}
                          </div>
                        )}

                        {item.columns && (
                          <div className="space-y-2 mb-4">
                            {item.columns.map((col, i) => (
                              <div key={i} className="text-yellow-400 font-medium">{col}</div>
                            ))}
                          </div>
                        )}

                        {item.example && (
                          <div className="bg-zinc-900 p-4 rounded text-gray-400 italic text-sm border border-yellow-600/20">
                            Example: {item.example}
                          </div>
                        )}

                        {item.points && (
                          <div className="space-y-2">
                            {item.points.map((point, i) => (
                              <div key={i} className="flex gap-3">
                                <span className="text-yellow-600 font-bold mt-1">→</span>
                                <span className="text-gray-300">{point}</span>
                              </div>
                            ))}
                          </div>
                        )}

                        {item.statement && (
                          <div className="bg-gradient-to-r from-yellow-600 to-yellow-700 text-black p-6 rounded-lg my-4 font-medium text-center leading-relaxed">
                            {item.statement}
                          </div>
                        )}

                        {item.phases && (
                          <div className="space-y-3">
                            {item.phases.map((phase, i) => (
                              <div key={i} className="bg-black/30 p-4 rounded">
                                <div className="font-bold text-yellow-400 mb-2">{phase.name}</div>
                                <div className="text-gray-300 text-sm">{phase.instruction}</div>
                              </div>
                            ))}
                          </div>
                        )}

                        {item.script && (
                          <div className="bg-zinc-900 border border-yellow-600/30 p-5 rounded my-4">
                            <p className="text-gray-200 italic leading-relaxed">{item.script}</p>
                          </div>
                        )}

                        {item.note && (
                          <p className="text-yellow-400 text-sm mt-3 italic">{item.note}</p>
                        )}

                        {item.instruction && (
                          <p className="text-gray-300 italic mt-3">{item.instruction}</p>
                        )}

                        {item.codes && (
                          <div className="space-y-3">
                            {item.codes.map((c, i) => (
                              <div key={i} className="bg-gradient-to-r from-yellow-600/20 to-yellow-700/20 border border-yellow-600/30 p-4 rounded">
                                <div className="font-bold text-yellow-400 text-lg mb-2">{c.code}</div>
                                <div className="text-gray-300 text-sm">{c.meaning}</div>
                              </div>
                            ))}
                          </div>
                        )}

                        {item.prompt && (
                          <div className="bg-yellow-600/10 border border-yellow-600/30 p-4 rounded my-3">
                            <p className="text-yellow-200 font-medium">{item.prompt}</p>
                          </div>
                        )}

                        {item.survival && (
                          <div className="grid md:grid-cols-2 gap-4 my-4">
                            <div className="bg-red-950/30 border border-red-600/30 p-4 rounded">
                              <p className="text-red-400 text-sm leading-relaxed">{item.survival}</p>
                            </div>
                            <div className="bg-green-950/30 border border-green-600/30 p-4 rounded">
                              <p className="text-green-400 text-sm leading-relaxed">{item.sovereignty}</p>
                            </div>
                          </div>
                        )}

                        {item.questions && typeof item.questions[0] === 'object' && item.questions[0].q && (
                          <div className="space-y-4">
                            {item.questions.map((question, i) => (
                              <div key={i} className="bg-black/30 p-4 rounded">
                                <div className="text-yellow-400 font-medium mb-2">{question.q}</div>
                                <div className="text-gray-400 text-sm italic">{question.note}</div>
                              </div>
                            ))}
                          </div>
                        )}

                        {item.usage && (
                          <p className="text-gray-400 text-sm mt-4 italic">{item.usage}</p>
                        )}

                        {item.ritual && (
                          <p className="text-gray-300 bg-yellow-600/10 p-4 rounded mt-3 border-l-4 border-yellow-600">
                            {item.ritual}
                          </p>
                        )}
                      </div>
                    ))}

                    {section.content.completion && (
                      <div className="bg-blue-950/30 border-l-4 border-blue-500 p-5 rounded">
                        <p className="text-blue-300 font-medium">{section.content.completion}</p>
                      </div>
                    )}

                    {section.content.protocol && (
                      <div className="space-y-4">
                        {section.content.protocol.map((day, idx) => (
                          <div key={idx} className="bg-gradient-to-r from-yellow-600/10 to-yellow-700/10 border border-yellow-600/30 p-5 rounded-lg">
                            <h4 className="font-bold text-yellow-400 mb-2">{day.days}: {day.title}</h4>
                            <p className="text-gray-300 text-sm leading-relaxed">{day.practice}</p>
                          </div>
                        ))}
                      </div>
                    )}

                    {section.content.evidence && (
                      <div className="bg-green-950/30 border-l-4 border-green-500 p-5 rounded">
                        <div className="space-y-2">
                          {section.content.evidence.map((item, idx) => (
                            <p key={idx} className="text-green-300 text-sm">{idx === 0 ? <span className="font-bold">{item}</span> : `• ${item}`}</p>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  <button
                    onClick={() => toggleStep(section.id)}
                    className={`mt-8 w-full py-4 rounded-lg font-bold transition-all ${
                      completedSteps.includes(section.id)
                        ? 'bg-yellow-600 text-black'
                        : 'bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/30 border border-yellow-600/50'
                    }`}
                  >
                    {completedSteps.includes(section.id) ? '✓ Complete' : 'Mark Complete'}
                  </button>
                </div>
              )}
            </div>
          </div>
        ))}

        <div className="mt-12 bg-gradient-to-br from-yellow-600 to-yellow-700 text-black rounded-lg p-8 border border-yellow-500">
          <h3 className="text-3xl font-bold mb-4 text-center">This Is Just the Beginning</h3>
          <p className="text-center mb-6 text-black/80 leading-relaxed">
            The blueprint rewires your operating system. The Melanin RxCH Collective keeps it running. 
            Join a community of Black professionals and entrepreneurs living sovereign, building wealth, and breaking every survival pattern that tried to contain them.
          </p>
          <div className="text-center">
            <button className="bg-black text-yellow-400 px-8 py-4 rounded-lg font-bold hover:bg-zinc-900 transition-all border-2 border-black hover:border-yellow-600">
              Join the Collective (Free)
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MelanatedMillionaireV2;