// Main app | landing + dashboard switcher with iOS frame for dashboard

const { useState: useStateApp, useEffect: useEffectApp } = React;

// Tweaks defaults | wrapped in EDITMODE markers for persistence
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "colorMode": "balanced",
  "showSidebarNav": true
}/*EDITMODE-END*/;

function App() {
  const [view, setView] = useStateApp('landing'); // 'landing' | 'dashboard'
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply color mode globally
  useEffectApp(() => {
    const root = document.documentElement;
    if (tweaks.colorMode === 'amber') {
      root.style.setProperty('--primary', '#F5A623');
      root.style.setProperty('--primary-700', '#D88812');
      root.style.setProperty('--primary-100', '#FDF1DC');
    } else if (tweaks.colorMode === 'soft') {
      root.style.setProperty('--primary', '#A30C25');
      root.style.setProperty('--primary-700', '#7A0A1C');
      root.style.setProperty('--primary-100', '#FCE6EA');
    } else {
      root.style.setProperty('--primary', '#C8102E');
      root.style.setProperty('--primary-700', '#A30C25');
      root.style.setProperty('--primary-100', '#FCE6EA');
    }
  }, [tweaks.colorMode]);

  return (
    <>
      {view === 'landing' && (
        <div data-screen-label="Landing">
          <Nav onOpenDashboard={() => setView('dashboard')}/>
          <Hero onOpenDashboard={() => setView('dashboard')} layout={tweaks.heroLayout}/>
          <SocialProof/>
          <HowItWorks/>
          <ModeCards/>
          <BeforeAfter/>
          <ROI/>
          <Pricing onOpenDashboard={() => setView('dashboard')}/>
          <FAQ/>
          <Footer/>
        </div>
      )}
      {view === 'dashboard' && (
        <DashboardWrap onBack={() => setView('landing')}/>
      )}

      <FloatingWhatsApp/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Görünüm">
          <TweakRadio
            label="Hero düzeni"
            value={tweaks.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: 'Bölünmüş' },
              { value: 'centered', label: 'Ortalanmış' },
            ]}
          />
          <TweakRadio
            label="Renk tonu"
            value={tweaks.colorMode}
            onChange={(v) => setTweak('colorMode', v)}
            options={[
              { value: 'balanced', label: 'Dengeli' },
              { value: 'amber', label: 'Amber' },
              { value: 'soft', label: 'Yumuşak' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Hızlı Geçiş">
          <TweakButton label="Landing'e git" onClick={() => setView('landing')}/>
          <TweakButton label="Dashboard'a git" onClick={() => setView('dashboard')} secondary/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Demo mobil uygulama | mobilde tam ekran, masaüstünde 480px ortalanmış telefon hissi
function DashboardWrap({ onBack }) {
  return (
    <div
      data-screen-label="Dashboard"
      style={{
        minHeight: '100vh', minHeight: '100dvh',
        background: 'var(--bg)',
        display: 'flex', flexDirection: 'column',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Tam ekran mobil uygulama | masaüstünde 480px max ortalanır */}
      <div style={{
        flex: 1,
        width: '100%',
        maxWidth: 480,
        margin: '0 auto',
        background: 'var(--bg)',
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 0 60px rgba(0,0,0,0.08)',
        position: 'relative',
        minHeight: 0,
      }}>
        <Dashboard onBack={onBack}/>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FloatingWhatsApp | sayfanın sağ altında sabit, scroll'la birlikte gider
// ─────────────────────────────────────────────────────────────
function FloatingWhatsApp() {
  const [hovered, setHovered] = useStateApp(false);
  return (
    <a
      href={whatsappLink(WA_MESSAGES.general)}
      target="_blank"
      rel="noopener"
      aria-label="WhatsApp ile iletişim"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'fixed',
        right: 22,
        bottom: 22,
        zIndex: 9000,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        padding: hovered ? '14px 22px' : '14px',
        background: '#25D366',
        color: '#fff',
        textDecoration: 'none',
        borderRadius: 999,
        boxShadow: '0 12px 40px rgba(37,211,102,0.45), 0 4px 12px rgba(0,0,0,0.15)',
        transition: 'padding 200ms ease, transform 160ms ease',
        transform: hovered ? 'translateY(-2px)' : 'translateY(0)',
        fontFamily: 'inherit',
        fontSize: 14,
        fontWeight: 700,
        whiteSpace: 'nowrap',
      }}
    >
      {Icon.whatsapp(26)}
      {hovered && <span>WhatsApp ile yaz</span>}
    </a>
  );
}

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