/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakText, TweakRadio, Nav, Hero, Networks, TechStack, Studios, Loop, CaseStudy, CTA, Footer */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3B82F6",
  "logo": "helvetica-grad",
  "headline": "Ship your winners.|Then the ones that|beat them.",
  "sub": "Drop in a brief. Velo studies your winners, generates fifty ads in hours, and sharpens every next run with what just won."
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent to root
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  // parse headline into lines with last line accented
  const lines = (t.headline || '').split('|');
  const last = lines[lines.length - 1];
  const head = lines.slice(0, -1);

  const headlineNode = (
    <>
      {head.map((l, i) => <React.Fragment key={i}>{l}<br/></React.Fragment>)}
      <span className="accent">{last}</span>
    </>
  );

  return (
    <>
      <Nav logo={t.logo} />
      <Hero headline={headlineNode} sub={t.sub} />
      <TechStack />
      <Loop />
      <CTA />
      <Footer logo={t.logo} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Logo mark">
          <TweakRadio
            label="Variant"
            value={t.logo}
            onChange={v => setTweak('logo', v)}
            options={[
              {value: 'helvetica-grad', label: 'Helvetica gradient (brand)'},
              {value: 'tight', label: 'Tight oblique'},
              {value: 'cursor', label: 'Cursor dot'},
              {value: 'slash', label: 'Mono slash'},
              {value: 'contrast', label: 'Weight contrast'},
              {value: 'underline', label: 'Underline rule'},
            ]}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor
            label="Accent color (solid base)"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#3B82F6', '#5DCBFF', '#4F46E5', '#1E40AF', '#1ed760']}
          />
        </TweakSection>
        <TweakSection title="Hero copy">
          <TweakText
            label="Headline (use | for line breaks, last line is accented)"
            value={t.headline}
            onChange={v => setTweak('headline', v)}
            multiline
          />
          <TweakText
            label="Subhead"
            value={t.sub}
            onChange={v => setTweak('sub', v)}
            multiline
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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