/* ZenTag — app composition */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "sapphire",
  "heroMaterial": "matte",
  "background": "aurora"
}/*EDITMODE-END*/;

const ACCENT_HEX = { sapphire: '#4f7cff', violet: '#8b5cf6', aurora: '#34d3a3', ember: '#ff7a59' };
const HEX_TO_ACCENT = { '#4f7cff': 'sapphire', '#8b5cf6': 'violet', '#34d3a3': 'aurora', '#ff7a59': 'ember' };

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

  // Apply accent to document
  React.useEffect(() => {
    const map = { sapphire: '', violet: 'violet', aurora: 'aurora', ember: 'ember' };
    const v = map[tweaks.accent] ?? '';
    if (v) document.documentElement.setAttribute('data-accent', v);
    else document.documentElement.removeAttribute('data-accent');
  }, [tweaks.accent]);

  // Apply background style
  const bgMode = tweaks.background;

  return (
    <div className="relative">
      {/* Page-level ambient background */}
      <div className="fixed inset-0 -z-10 pointer-events-none">
        <div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 50% 0%, #0c0c12 0%, #050507 50%, #050507 100%)' }} />
        {bgMode === 'aurora' && <AuroraGlobal />}
        {bgMode === 'grid' && <div className="absolute inset-0 grid-bg opacity-50" />}
        {/* noise */}
        <div className="absolute inset-0 noise" />
      </div>

      <Nav />
      <Hero heroMaterial={tweaks.heroMaterial} />
      <CardsShowcase />
      <QRSection />
      <ProfileSection />
      <TeamSection />
      <HowItWorks />
      <MobileSection />
      <SocialProof />
      <FeaturesGrid />
      <Pricing />
      <FinalCTA />
      <Contact />
      <Footer />

    </div>
  );
}

function AuroraGlobal() {
  return (
    <>
      <div className="aurora" style={{
        top: '-20%', left: '-10%', width: '70vw', height: '70vw',
        background: 'radial-gradient(circle, var(--accent) 0%, transparent 60%)',
        opacity: 0.18,
        animation: 'floatY 16s ease-in-out infinite',
      }} />
      <div className="aurora" style={{
        top: '40%', right: '-20%', width: '60vw', height: '60vw',
        background: 'radial-gradient(circle, #4f7cff 0%, transparent 60%)',
        opacity: 0.12,
        animation: 'floatY 18s ease-in-out infinite reverse',
      }} />
      <div className="aurora" style={{
        bottom: '-10%', left: '20%', width: '60vw', height: '60vw',
        background: 'radial-gradient(circle, var(--accent-2) 0%, transparent 65%)',
        opacity: 0.14,
        animation: 'floatY 22s ease-in-out infinite',
      }} />
    </>
  );
}

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