// app.jsx — rellay landing page entry
// Passes-inspired single-page composition w/ accent color tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "sky",
  "showAuditChip": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  sky:    { name: 'Sky',    primary: '#38bdf8', deep: '#0284c7', soft: 'rgba(56,189,248,0.12)',  line: 'rgba(56,189,248,0.22)' },
  violet: { name: 'Violet', primary: '#a78bfa', deep: '#7c3aed', soft: 'rgba(167,139,250,0.14)', line: 'rgba(167,139,250,0.26)' },
  lime:   { name: 'Lime',   primary: '#a3e635', deep: '#65a30d', soft: 'rgba(163,230,53,0.14)',  line: 'rgba(163,230,53,0.28)' },
  amber:  { name: 'Amber',  primary: '#fbbf24', deep: '#d97706', soft: 'rgba(251,191,36,0.14)',  line: 'rgba(251,191,36,0.28)' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const palette = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.sky;

  // Inject CSS vars at root
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', palette.primary);
    root.style.setProperty('--accent-deep', palette.deep);
    root.style.setProperty('--accent-soft', palette.soft);
    root.style.setProperty('--accent-line', palette.line);
  }, [palette]);

  return (
    <div style={{ background: '#000', color: '#fff', minHeight: '100vh' }}>
      <PillNav />
      <Hero />
      <Bento />
      <Streams />
      <Calculator />
      <Features />
      <Testimonials />
      <CTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Accent color" />
        <TweakColor
          label="Palette"
          value={palette.primary}
          options={Object.values(ACCENT_PALETTES).map(p => p.primary)}
          onChange={(v) => {
            const key = Object.keys(ACCENT_PALETTES).find(k => ACCENT_PALETTES[k].primary === v) || 'sky';
            setTweak('accent', key);
          }}
        />
      </TweaksPanel>
    </div>
  );
}

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