/* global React, ReactDOM,
   HeroSection, AntiPitchSection, CredibilitySection,
   SunSection, DnaSection, EighteenSection,
   WhoInsideSection, TestimonialsSection, InvitationSection, PricingSection, FinalCTASection,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect
*/
const { useEffect } = React;

/* ============================================================
   Persisted defaults — between EDITMODE markers
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFace": "anton",
  "greenSat": "natural",
  "photoDensity": "medium"
}/*EDITMODE-END*/;

/* ============================================================
   Top nav
   ============================================================ */
function TopNav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#hero" className="brand">
          maverick<b>1000</b>
          <span style={{color:'var(--green)', marginLeft:'4px'}}>/deets</span>
        </a>
        <a href="#apply" className="cta">Apply <span className="arr">→</span></a>
      </div>
    </header>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Foot() {
  return (
    <footer className="foot">
      <div className="wrap">
        <span>Maverick1000 · Est. 2008.</span>
        <span>By application. Reviewed by current members.</span>
      </div>
    </footer>
  );
}

/* ============================================================
   App
   ============================================================ */
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks at the document level
  useEffect(() => {
    document.documentElement.setAttribute('data-display', tweaks.displayFace);
    document.documentElement.setAttribute('data-green', tweaks.greenSat);
  }, [tweaks.displayFace, tweaks.greenSat]);

  return (
    <>
      <TopNav />
      <main>
        <HeroSection />
        <AntiPitchSection />
        <CredibilitySection />
        <SunSection />
        <DnaSection />
        <EighteenSection photoDensity={tweaks.photoDensity} />
        <WhoInsideSection />
        <TestimonialsSection />
        <InvitationSection />
        <PricingSection />
        <FinalCTASection />
      </main>
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Type">
          <TweakRadio
            label="Display face"
            value={tweaks.displayFace}
            onChange={(v) => setTweak('displayFace', v)}
            options={[
              { value: 'anton', label: 'Anton' },
              { value: 'oswald', label: 'Oswald' },
              { value: 'bebas', label: 'Bebas' },
              { value: 'big', label: 'Big Shoulders' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Color">
          <TweakRadio
            label="Green saturation"
            value={tweaks.greenSat}
            onChange={(v) => setTweak('greenSat', v)}
            options={[
              { value: 'muted', label: 'Muted' },
              { value: 'natural', label: 'Natural' },
              { value: 'vivid', label: 'Vivid' },
              { value: 'electric', label: 'Electric' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Photography">
          <TweakRadio
            label="Mosaic density"
            value={tweaks.photoDensity}
            onChange={(v) => setTweak('photoDensity', v)}
            options={[
              { value: 'sparse', label: 'Sparse' },
              { value: 'medium', label: 'Medium' },
              { value: 'dense', label: 'Dense' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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