// V7 — App. Same DNA as V6 (i18n, theme, lower sections), but the hero is
// replaced by the live-call simulation (V7LiveHero). All the lower scenes
// — La giornata, Prima/Dopo, Features, Channels, Footer — are reused as-is
// from V6, so V7 inherits V6 fixes for free.

function V7Nav({ lang, setLang, mode, setMode }) {
  const T = useTheme();
  const t = useT();
  const { isMobile } = useViewport();
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: isMobile ? '16px 20px' : '22px 48px',
      position: 'sticky', top: 0, zIndex: 50,
      background: T.mode === 'dark' ? 'rgba(11,10,16,0.78)' : 'rgba(246,241,232,0.82)',
      backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${T.line}`,
    }}>
      <HelloWordmark size={isMobile ? 17 : 20} />
      {!isMobile && (
        <div style={{ display: 'flex', gap: 28, fontSize: 13, color: T.muted, fontWeight: 500 }}>
          <a href="#demo" style={{ color: 'inherit', textDecoration: 'none' }}>
            {lang === 'en' ? 'Demo' : 'Demo'}
          </a>
          <a href="#day" style={{ color: 'inherit', textDecoration: 'none' }}>{t.nav.day}</a>
          <a href="#features" style={{ color: 'inherit', textDecoration: 'none' }}>{t.nav.features}</a>
          <a href="#channels" style={{ color: 'inherit', textDecoration: 'none' }}>{t.nav.channels}</a>
          <a href="#pricing" style={{ color: 'inherit', textDecoration: 'none' }}>{t.nav.pricing}</a>
        </div>
      )}
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <button onClick={() => setLang(lang === 'it' ? 'en' : 'it')} style={{
          background: 'transparent', border: `1px solid ${T.line2}`, color: T.muted,
          fontSize: 11, fontFamily: T.mono, letterSpacing: 1, padding: '6px 10px',
          borderRadius: 6, cursor: 'pointer',
        }}>{lang === 'it' ? 'EN' : 'IT'}</button>
        <button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')} style={{
          background: 'transparent', border: `1px solid ${T.line2}`, color: T.muted,
          width: 30, height: 28, borderRadius: 6, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{mode === 'dark' ? '☾' : '☀'}</button>
        {!isMobile && (
          <a href="https://schedy-sales.aidevops1.workers.dev/#pricing" style={{ textDecoration: 'none' }}>
            <CTAPrimary>{t.cta.primary} →</CTAPrimary>
          </a>
        )}
      </div>
    </nav>
  );
}

function V7App() {
  // Vertical is now picked from a native <select> inside V7LiveHero, controlled
  // here so the lower sections (DaySection / PrePost / etc) reflect the same
  // industry the visitor chose for the live demo.
  const [v, setV] = React.useState(() => pickVertical());
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem('hello_lang') || 'it'; } catch { return 'it'; }
  });
  const [mode, setMode] = React.useState(() => {
    try { return localStorage.getItem('hello_theme_v6') || 'light'; } catch { return 'light'; }
  });
  // Variant rotation kept under the hood (still randomises copy across visits),
  // but the in-nav reroll button + floating switcher are gone (Vapi-style).
  const variantN = React.useMemo(() => getVariantSeed(), []);
  const theme = React.useMemo(() => makeTheme(mode), [mode]);
  const variant = React.useMemo(() => getVariant(lang, variantN), [lang, variantN]);

  React.useEffect(() => { try { localStorage.setItem('hello_lang', lang); } catch {} }, [lang]);
  React.useEffect(() => { try { localStorage.setItem('hello_theme_v6', mode); } catch {} }, [mode]);

  return (
    <ThemeCtx.Provider value={theme}>
      <LangCtx.Provider value={lang}>
        <div style={{
          background: theme.ink, color: theme.text, fontFamily: theme.font,
          minHeight: '100vh',
          transition: 'background .25s, color .25s',
        }}>
          <V7Nav lang={lang} setLang={setLang} mode={mode} setMode={setMode} />
          <div id="demo">
            <V7LiveHero vertical={v} onPickVertical={setV} lang={lang} variant={variant} />
          </div>
          <DaySection vertical={v} variant={variant} />
          <PrePost />
          <V6Features />
          <V6Channels />
          <V6Footer />
        </div>
      </LangCtx.Provider>
    </ThemeCtx.Provider>
  );
}

Object.assign(window, { V7App, V7Nav });