const fonts = {
  amatic: "'Amatic SC', sans-serif",
  amaticBold: "'Amatic SC', sans-serif",
  dreamPlanner: "'DREAM PLANNER', Impact, 'Arial Black', sans-serif"
};

function FaqButton({ className = "", content = "Check out the parent guide" }: {
  className?: string
  content?: string
}) {
  return (
    <div className={className}>
      <div className="flex gap-1 items-center">
        <div className="relative w-12 h-12 overflow-hidden">
          <img 
            alt="" 
            className="absolute -inset-1 w-full h-full object-cover" 
            src="/icons/plus.svg" 
          />
        </div>
        <p 
          className="text-white text-5xl font-bold leading-none whitespace-nowrap"
          style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
        >
          {content}
        </p>
      </div>
    </div>
  )
}

function FaqQuestion({ className = "", question = "What is a game jam?" }: {
  className?: string
  question?: string
}) {
  return (
    <div className={className}>
      <p 
        className="text-white text-5xl text-center font-bold leading-none w-full"
        style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
      >
        {question}
      </p>
    </div>
  )
}

function App() {
  return (
    <div className="w-full min-h-screen flex flex-col overflow-x-hidden">
      <div className="absolute top-0 left-0 w-1/3 z-10">
        <img 
          src="/backgrounds/corner-cloud.png" 
          alt=""
          className="w-full h-full object-cover"
        />
      </div>

      <div className="w-full h-screen">
        <header className="relative h-[115px] bg-[#45b4f5] flex justify-end items-center pr-16">
          <nav className="flex gap-12 items-center text-white text-5xl font-bold" style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}>
            <button className="hover:opacity-80 transition-opacity">Steps</button>
            <button className="hover:opacity-80 transition-opacity">Map</button>
            <button className="hover:opacity-80 transition-opacity">Previous events</button>
            <button className="hover:opacity-80 transition-opacity">FAQ</button>
          </nav>
        </header>

        <section className="relative h-screen flex items-center px-6 md:px-16 lg:px-24" style={{
          background: `
            url(/backgrounds/blue-sky.png),
            url(/backgrounds/sky-shine.png),
            url(/backgrounds/bottom-cloud.png)
          `,
          backgroundPosition: 'center top, center top, center top',
          backgroundSize: 'cover, cover, cover'
        }}>
          <div className="absolute top-0 left-0 w-full h-full">
            <img src="/backgrounds/sky-shine.png" alt="" />
          </div>

          <div className="absolute bottom-[32px] right-[140px] w-full h-full">
            {/* fishy on the right. His name is frederick. */ }
            <div className="absolute top-[64px] right-[140px] w-1/6 animate-fish-swim-2">
              <img src="/characters/fish-2.png" alt="Fish named Frederick" className="w-full h-full object-cover" />
            </div>

            {/* fishy on the left. His name is gubson */ }
            <div className="absolute top-[32px] right-[300px] w-1/6 animate-fish-swim-1">
              <img src="/characters/fish-1.png" alt="Fish named Gubson" className="w-full h-full object-cover" />
            </div>
          </div>

          <div className="absolute bottom-[160px] left-0 w-full h-full animate-cloud-float-right">
            <img src="/backgrounds/bottom-cloud.png" alt="" />
          </div>
 
          {/* Vines overlay below grass */}
          <div className="absolute -bottom-[50px] left-0 w-full h-[120px]">
            <img src="/decorative/vines.png" alt="" className="w-full h-full object-cover object-top" />
          </div>

          {/* Main content */}
          <div className="flex flex-col lg:flex-row justify-between items-center w-full gap-8 pb-24 z-10">
            {/* Left side - CTA */}
            <div className="flex flex-col gap-4 w-full lg:w-[648px]">
              {/* Logo section */}
              <div className="mb-6">
                <div className="flex items-center gap-2 mb-4">
                  <img 
                    src="/decorative/hack-club-flag.png" 
                    alt="Hack Club" 
                    className="w-[151px] h-[53px] object-cover transform rotate-[-4.8deg]"
                  />
                </div>
                
                <div className="transform rotate-[-2.97deg]">
                  <h1 
                    className="text-[#fcf5ed] text-[80px] md:text-[120px] lg:text-[150px] font-normal leading-none mb-4"
                    style={{ 
                      fontFamily: fonts.dreamPlanner,
                      textShadow: "5px 8px 0px rgba(0,0,0,0.25)"
                    }}
                  >
                    CAMPFIRE
                  </h1>
                </div>

                <div className="pl-4">
                  <p 
                    className="text-white text-4xl font-bold mb-2"
                    style={{ 
                      fontFamily: fonts.amaticBold,
                      fontWeight: 'bold',
                      textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                    }}
                  >
                    Game jam for high schoolers in 200+ cities
                  </p>
                  <p 
                    className="text-white text-4xl font-bold"
                    style={{ 
                      fontFamily: fonts.amaticBold,
                      fontWeight: 'bold',
                      textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                    }}
                  >
                    Jan 23-24, 2026
                  </p>
                </div>
              </div>

              {/* RSVP section */}
              <div className="flex flex-col md:flex-row items-center gap-2">
                <div 
                  className="bg-[#f9e2ca] border-4 border-[#d5a16c] rounded-[20px] px-4 md:px-8 py-4 flex items-center gap-3 md:gap-6 w-full transform rotate-[-1.2deg] shadow-[0_8px_20px_rgba(0,0,0,0.25)]"
                >
                  <img src="/icons/email.svg" alt="" className="w-6 h-5 flex-shrink-0" />
                  <input 
                    type="email"
                    className="text-[#854d16] text-2xl md:text-4xl font-bold truncate bg-transparent border-none outline-none flex-1 cursor-text"
                    style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
                    placeholder="you@hackclub.com"
                    defaultValue="you@hackclub.com"
                  />
                </div>
                <button 
                  className="bg-[#fca147] border-[5px] border-[rgba(0,0,0,0.2)] rounded-[20px] px-8 md:px-14 py-4 hover:scale-105 transition-transform w-full md:w-auto transform rotate-[1.5deg] shadow-[0_8px_20px_rgba(0,0,0,0.25)] cursor-pointer"
                  type="button"
                  onClick={() => {
                    console.log('RSVP clicked');
                  }}
                >
                  <p 
                    className="text-[#8d3f34] text-3xl md:text-5xl font-normal"
                    style={{ fontFamily: fonts.dreamPlanner }}
                  >
                    RSVP!
                  </p>
                </button>
              </div>
            </div>

            {/* Right side - Video section */}
            <div className="relative w-full lg:w-auto">
              {/* Text and arrow above video */}
              <div className="flex items-center justify-center gap-3 mb-4">
                <p 
                  className="text-white text-2xl md:text-4xl font-bold"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  watch the video
                </p>

                <img 
                  src="/ui/arrow.png" 
                  alt="" 
                  className="w-[45px] md:w-[55px] h-[33px] md:h-[41px] translate-y-6 rotate-[6.2deg] z-50"
                />
              </div>
              {/* Video with rotation */}
              <div className="relative transform rotate-[1.7deg]">
                <img 
                  src="/ui/video-placeholder.png" 
                  alt="Campfire video" 
                  className="w-full max-w-[442px] h-[200px] md:h-[259px] rounded-2xl shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover mx-auto"
                />
              </div>
            </div>
          </div>
        </section>

        <div className="absolute bottom-0 left-0 w-full">
          <img src="/backgrounds/landing-grass.png" alt="" className="w-full h-full object-cover" />
        </div>
      </div>

      {/* Steps */}
      <section className="relative py-48 pb-96" style={{
        background: `url(/backgrounds/underwater-gradient.png)`,
        backgroundSize: 'cover'
      }}>
        <div className="absolute top-0 left-0 w-screen h-[200px] bg-gradient-to-b from-[#004b2a] to-transparent"></div>
        <div className="absolute top-[30px] left-0 w-full scale-125">
          <img src="/decorative/vines.png" alt="" className="w-full h-full object-cover" />
        </div>

        {/* Clouds behind astronaut overlay */}
        <div className="absolute bottom-[500px] left-0 w-full h-[800px] -z-10">
          <img src="/decorative/clouds-3.png" alt="" className="w-full h-full object-cover" />
        </div>
        
        {/* Seafloor overlay */}
        <div className="absolute bottom-0 left-0 w-full h-[613px] -z-10">
          <img src="/backgrounds/seafloor.png" alt="" className="w-full h-full object-cover" />
        </div>
        
        {/* Astronaut overlay */}
        <div className="absolute bottom-[400px] left-32 w-[569px] h-[676px]">
          <img 
            src="/characters/astronaut.png" 
            alt="" 
            className="w-full h-full object-cover transform rotate-[172deg] scale-y-[-1]"
          />
        </div>
        
        {/* Cog overlay */}
        <div className="absolute top-[500px] right-32 w-[352px] h-[354px]">
          <img src="/decorative/cog.png" alt="" className="w-full h-full object-cover rounded-full" />
        </div>

        {/* Steps content */}
        <div className="relative z-10 flex flex-col gap-24 items-center px-12 max-w-7xl mx-auto">
          
          {/* Step 1 */}
          <div className="flex gap-16 items-center w-full">
            <div className="flex flex-col items-end text-right text-white flex-1">
              <p 
                className="text-4xl font-bold mb-2"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                step 1
              </p>
              <p 
                className="text-6xl font-bold leading-tight max-w-md"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                Sign up for a Campfire near you
              </p>
            </div>
            <img 
              src="/ui/step-signup.png" 
              alt="Step 1" 
              className="w-[539px] h-[299px] rounded-lg shadow-[15px_15px_0px_0px_rgba(0,0,0,0.25)] object-cover"
            />
          </div>

          {/* Step 2 */}
          <div className="flex gap-16 items-center w-full">
            <img 
              src="/ui/step-team.png" 
              alt="Step 2" 
              className="w-[509px] h-[307px] rounded-lg shadow-[-8px_16px_0px_0px_rgba(0,0,0,0.25)] object-cover"
            />
            <div className="flex flex-col items-start text-white flex-1">
              <p 
                className="text-4xl font-bold mb-2"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                step 2
              </p>
              <p 
                className="text-6xl font-bold leading-tight"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                Grab friends (or make new friends!) and form a team of 2-3
              </p>
            </div>
          </div>

          {/* Step 3 */}
          <div className="flex gap-16 items-center w-full">
            <div className="flex flex-col items-end text-right text-white flex-1">
              <p 
                className="text-4xl font-bold mb-2"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                step 3
              </p>
              <p 
                className="text-6xl font-bold leading-tight"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                Learn from workshops, enjoy free food and merch!
              </p>
            </div>
            <img 
              src="/ui/step-workshops.png" 
              alt="Step 3" 
              className="w-[539px] h-[299px] rounded-lg shadow-[15px_15px_0px_0px_rgba(0,0,0,0.25)] object-cover"
            />
          </div>

          {/* Step 4 */}
          <div className="flex gap-16 items-center w-full">
            <img 
              src="/ui/step-team.png" 
              alt="Step 4" 
              className="w-[509px] h-[307px] rounded-lg shadow-[-8px_16px_0px_0px_rgba(0,0,0,0.25)] object-cover"
            />
            <div className="flex flex-col items-start text-white flex-1">
              <p 
                className="text-4xl font-bold mb-2"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                step 4
              </p>
              <p 
                className="text-6xl font-bold leading-tight"
                style={{ 
                  fontFamily: fonts.amaticBold,
                  fontWeight: 'bold',
                  textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                }}
              >
                Build your game & publish it online!
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Map Section */}
      <section className="relative h-[900px] px-8">
        {/* Clouds overlay behind map */}
        <div className="absolute top-0 left-0 w-full -translate-y-96">
          <img src="/decorative/clouds-3.png" alt="" className="w-full h-full object-cover" />
        </div>

        <div className="relative w-full h-full z-50 -translate-y-32" style={{
          background: `url(/backgrounds/world-map.png)`,
          backgroundSize: 'cover'
        }}>
          
        </div>
      </section>

      {/* Stories Section */}
      <section className="relative py-24 bg-[#384fbc] -translate-y-170 -z-10 pt-130 pb-330" style={{
        background: `
          url(/backgrounds/blue-gradient.png)
        `,
        backgroundSize: 'contain'
      }}>
        {/* Moon overlay */}
        <div className="absolute top-[600px] left-[-200px] w-[778px] h-[719px]">
          <img 
            src="/decorative/moon.png" 
            alt="" 
            className="w-full h-full object-cover transform rotate-[346deg]"
          />
        </div>

        <div className="absolute bottom-0 left-0 w-full h-full">
          <img
            alt=""
            src="decorative/clouds-1.png"
            className="w-full h-full object-cover transform"
          />
        </div>

        <div className="relative z-10 flex flex-col gap-12 items-center px-32 max-w-7xl mx-auto">
          <h2 
            className="text-[#d7cfeb] text-6xl font-bold text-center mb-8"
            style={{ 
              fontFamily: fonts.amaticBold,
              fontWeight: 'bold',
              textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
            }}
          >
            Stories from past events
          </h2>
          
          <div className="flex gap-12 justify-between w-full">
            <div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
              <img 
                src="/stories/ascpixi.png" 
                alt="" 
                className="w-[297px] h-[257px] object-cover mb-2"
              />
              <div className="p-2">
                <p 
                  className="text-black text-5xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Counterspell
                </p>
                <p 
                  className="text-black text-3xl"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Game jam in 50 cities including Toronto, Boston, & Singapore
                </p>
              </div>
            </div>

            <div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
              <img 
                src="/stories/manitej.png" 
                alt="" 
                className="w-[297px] h-[257px] object-cover mb-2"
              />
              <div className="p-2">
                <p 
                  className="text-black text-5xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Scrapyard
                </p>
                <p 
                  className="text-black text-3xl"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  In-person hackathon in 70 cities worldwide
                </p>
              </div>
            </div>

            <div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
              <img 
                src="/stories/sebastian.png" 
                alt="" 
                className="w-[297px] h-[257px] object-cover mb-2"
              />
              <div className="p-2">
                <p 
                  className="text-black text-5xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Daydream
                </p>
                <p 
                  className="text-black text-3xl"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Game jam in 100 cities worldwide
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="relative h-[200px] bg-[#384fbc]">
        <div className="absolute inset-0 w-full h-full opacity-30">
          <img src="/decorative/puzzle-outline.png" alt="" className="w-full h-full object-cover" />
        </div>
        
        <div className="absolute top-[50px] left-[100px] transform rotate-[15deg]">
          <img 
            src="/decorative/puzzle-scattered.png" 
            alt="" 
            className="w-[150px] h-[120px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
          />
        </div>
        <div className="absolute top-[80px] right-[150px] transform rotate-[-20deg]">
          <img 
            src="/decorative/puzzle-scattered.png" 
            alt="" 
            className="w-[120px] h-[100px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
          />
        </div>
      </div>

      <section className="relative bg-[#384fbc] py-24">
        <div className="flex flex-col gap-8 items-center px-32 max-w-7xl mx-auto">
          <h2 
            className="text-[#f1ebff] text-6xl font-bold text-center mb-8"
            style={{ 
              fontFamily: fonts.amaticBold,
              fontWeight: 'bold',
              textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
            }}
          >
            Favorite games from past events
          </h2>
          
          <div className="flex gap-5 w-full justify-between">
            <div className="flex flex-col gap-10 items-center w-[400px]">
              <a 
                href="https://theavgeekbee.itch.io/office-click-clack"
                className="block"
              >
                <img 
                  src="/games/office-click-clack.png" 
                  alt="Office Click Clack" 
                  className="w-[389px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
                />
              </a>
              <div className="text-center text-[#d7cfeb]">
                <p 
                  className="text-7xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Office Click Clack
                </p>
                <p 
                  className="text-4xl font-bold"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  bunnyguy - Daydream dfw
                </p>
              </div>
            </div>

            <div className="flex flex-col gap-9 items-center w-[400px]">
              <a 
                href="https://arandompsi.itch.io/zero-sum"
                className="block"
              >
                <img 
                  src="/games/zero-sum.png" 
                  alt="Zero Sum" 
                  className="w-[391px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
                />
              </a>
              <div className="text-center text-[#d7cfeb]">
                <p 
                  className="text-7xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Zero Sum
                </p>
                <p 
                  className="text-4xl font-bold"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  ARandomPsi - Daydream SV
                </p>
              </div>
            </div>

            <div className="flex flex-col gap-9 items-center w-[400px]">
              <a 
                href="https://scoopish.itch.io/macuahuitl"
                className="block"
              >
                <img 
                  src="/games/macuahuitl.png" 
                  alt="Macuahuitl" 
                  className="w-[391px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
                />
              </a>
              <div className="text-center text-[#d7cfeb]">
                <p 
                  className="text-7xl font-bold mb-2"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Macuahuitl
                </p>
                <p 
                  className="text-4xl font-bold"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  scoopish - Daydream Global
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="relative h-[200px] bg-[#384fbc]">
        <div className="absolute inset-0 w-full h-full opacity-30 transform rotate-180">
          <img src="/decorative/puzzle-outline.png" alt="" className="w-full h-full object-cover" />
        </div>
        
        <div className="absolute top-[30px] left-[200px] transform rotate-[25deg]">
          <img 
            src="/decorative/puzzle-scattered.png" 
            alt="" 
            className="w-[180px] h-[140px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
          />
        </div>
        <div className="absolute top-[60px] right-[100px] transform rotate-[-15deg]">
          <img 
            src="/decorative/puzzle-scattered.png" 
            alt="" 
            className="w-[140px] h-[110px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
          />
        </div>
      </div>

      <section className="relative bg-[#384fbc] py-24">
        <div className="absolute top-[100px] left-1/2 transform -translate-x-1/2 w-[1732px] h-[2162px] rotate-[-3.3deg] -z-10">
          <img 
            src="/ui/faq-speech-bubble.svg" 
            alt="" 
            className="w-full h-full object-cover"
          />
        </div>

        <div className="relative z-10 px-32">
          <h2 
            className="text-[#d7cfeb] text-[128px] font-normal text-center mb-16"
            style={{ 
              fontFamily: fonts.amaticBold,
              fontWeight: 'bold',
              textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
            }}
          >
            FAQ
          </h2>

          <div className="flex gap-10 justify-center items-end">
            <div className="relative">
              <div className="absolute inset-0 w-[608px] h-[1491px]">
                <img src="/ui/faq-participant-bg.svg" alt="" className="w-full h-full object-cover" />
              </div>
              
              <div className="relative z-10 flex flex-col gap-10 items-center px-16 pt-8 w-[608px]">
                <p 
                  className="text-[#d7cfeb] text-6xl font-normal text-center mb-4"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Participant
                </p>
                
                <FaqQuestion className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="Am I Eligible?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="But I've never hacked before!" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="All this, for free?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="What do I need to bring?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqButton className="bg-[#091e8b] shadow-[8px_8px_0px_0px_#0a1861] flex items-start px-5 py-12 h-[168px] w-[467px]" />
              </div>
            </div>

            <div className="relative">
              <div className="absolute inset-0 w-[608px] h-[1505px]">
                <img src="/ui/faq-organizer-bg.svg" alt="" className="w-full h-full object-cover" />
              </div>
              
              <div className="relative z-10 flex flex-col gap-10 items-center px-16 pt-9 w-[608px]">
                <p 
                  className="text-[#d7cfeb] text-6xl font-normal text-center mb-4"
                  style={{ 
                    fontFamily: fonts.amaticBold,
                    fontWeight: 'bold',
                    textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
                  }}
                >
                  Organizer
                </p>
                
                <FaqQuestion question="Can I organize a Campfire in my city?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="What are the steps to organizing?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="Do we get funding?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="Do we get volunteer hours?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqQuestion question="Can I join an organizing team?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
                <FaqButton content="Apply to be an organizer" className="bg-[#091e8b] shadow-[8px_8px_0px_0px_#0a1861] flex items-start px-5 py-12 h-[168px] w-[467px]" />
              </div>
            </div>
          </div>
        </div>
        
        <div className="absolute -bottom-[100px] left-1/2 transform -translate-x-1/2 w-[800px] h-[150px]" style={{
          backgroundImage: `url(/ui/faq-speech-bubble.svg)`,
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          transform: 'translateX(-50%) rotate(180deg)'
        }} />
      </section>

      <footer className="relative h-[800px]" style={{
        background: `
          url(/backgrounds/night-wallpaper.png),
          url(/backgrounds/stars.png),
          url(/backgrounds/clouds.png),
          url(/backgrounds/wood.png)
        `,
        backgroundSize: 'cover, cover, cover, cover'
      }}>
        <div className="absolute bottom-[190px] left-0 w-full h-[420px]">
          <img src="/backgrounds/grass.png" alt="" className="w-full h-full object-cover" />
        </div>

        <div className="absolute bottom-[190px] left-[483px] w-[791px] h-[562px]">
          <img src="/characters/ghosts.png" alt="" className="w-full h-full object-cover" />
        </div>
        
        <div className="absolute bottom-[190px] right-[380px] w-[363px] h-[483px]">
          <img src="/characters/campfire.png" alt="" className="w-full h-full object-cover" />
        </div>

        <div className="absolute bottom-0 left-0 w-full h-[190px] bg-[#0f371d] flex items-center justify-center">
          <p 
            className="text-white text-6xl text-center font-bold"
            style={{ 
              fontFamily: fonts.amaticBold,
              fontWeight: 'bold',
              textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
            }}
          >
            made with ♥ by Hack Club teens
          </p>
        </div>
      </footer>
    </div>
  )
}

export default App
