/* global React, ReactDOM */
/* global TopNav, HeroVariantA, HeroVariantB, HeroVariantC, HeroVariantD */
/* global HeroVisualPhone, HeroVisualVinyl, HeroVisualCollage */
/* global Marquee, HowItWorks, FeaturedClubs, FooterCTA, ALBUMS_TICKER */

const { useEffect } = React;

const ACCENT_RGB = {
  pink:   "255,45,120",
  violet: "158,46,255",
  blue:   "0,194,255",
  green:  "57,255,20",
};

const CONFIG = {
  headline: "C",
  heroLayout: "phone",
  accent: "blue",
  background: "vinyl",
  density: "compact",
  typeScale: 1.3,
  ctaLabel: "Start Your Club",
};

function App() {
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent-rgb', ACCENT_RGB[CONFIG.accent] || ACCENT_RGB.pink);
    root.style.setProperty('--density', CONFIG.density === 'compact' ? '0.72' : '1');
    root.style.setProperty('--type-scale', String(CONFIG.typeScale));
    document.body.className = `bg-${CONFIG.background}`;
  }, []);

  const HeroComp = {
    A: HeroVariantA, B: HeroVariantB, C: HeroVariantC, D: HeroVariantD,
  }[CONFIG.headline] || HeroVariantA;

  const HeroVisual = {
    phone: HeroVisualPhone,
    vinyl: HeroVisualVinyl,
    collage: HeroVisualCollage,
    none: () => null,
  }[CONFIG.heroLayout] || HeroVisualPhone;

  return (
    <>
      <TopNav ctaLabel={CONFIG.ctaLabel} />

      <main>
        <section className="hero" id="hero">
          <div className="page-wrap">
            <div className={`hero-grid ${CONFIG.heroLayout === 'none' ? 'layout-type-only' : ''} ${CONFIG.heroLayout === 'collage' ? 'layout-collage' : ''}`}>
              <div>
                <HeroComp ctaLabel={CONFIG.ctaLabel} />
              </div>
              {CONFIG.heroLayout !== 'none' && (
                <div className="hero-visual">
                  <HeroVisual />
                </div>
              )}
            </div>
          </div>
        </section>

        <Marquee items={ALBUMS_TICKER} />

        <section id="how">
          <div className="page-wrap">
            <span className="eyebrow">How it works</span>
            <h2 className="section-title">Take turns. Drop verdicts. <span style={{ color: 'var(--accent)' }}>Build a library.</span></h2>
            <p className="section-sub">Disco was designed to give music back its soul. One album at a time, everyone in sync, and a permanent catalog of your personal taste. It's the ritual your group chat has been waiting for.</p>
            <HowItWorks />
          </div>
        </section>

        <Marquee items={["Indie Rock", "Hip-Hop", "Jazz", "Pop", "Country", "Classical", "Electronic", "Soul", "Punk", "Metal", "Folk", "Ambient"]} reverse outline />

        <section id="clubs">
          <div className="page-wrap">
            <span className="eyebrow">Against the algorithm</span>
            <h2 className="section-title">Go beyond <span style={{ color: 'var(--accent)' }}>"New Releases."</span></h2>
            <p className="section-sub">The streaming giants are great at telling you what's out today. Disco helps you find what you missed yesterday. From 70s Psych-Rock to the B-sides of the 2000s, we're bringing the history of music back to the front of your queue.</p>
            <FeaturedClubs />
          </div>
        </section>

        <FooterCTA ctaLabel={CONFIG.ctaLabel} />

        <footer className="site-foot">
          <div className="page-wrap" style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
            <span>© 2026 Disco · letsdisco.app</span>
            <div>
              <a href="#">Privacy</a>
              <a href="#">Terms</a>
              <a href="#">Press</a>
              <a href="#">Contact</a>
            </div>
          </div>
        </footer>
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);