/* global React */
/* =============================================================
   VzdelAI — Homepage (root komponent)
   -------------------------------------------------------------
   Orchestrator: skladá sekcie z sections/*.jsx a aplikuje Tweaks.
   Sám obsahuje len:
     • Tweakable defaults (EDITMODE blok)
     • Hero background presety
     • V2_Tweaks panel (UI pre tweak kontroly)
     • HomepageV2 — koreňový komponent (App)

   Skladba <main>:
     V2_Hero · V2_Audience · V2_HowItWorks · V2_Stats
     · V2_Activities · V2_Outputs · V2_Consortium · V2_Contact
     (V2_News je zatiaľ vypnuté, viď sections/News.jsx)

   Súbor je tenký zámerne — všetky sekcie a ich obsah sú v
   sections/ adresári. Texty/dáta sú v data/content.js.

   Závislosti (window): V2_Nav, V2_Hero, V2_Audience, V2_HowItWorks,
   V2_Stats, V2_Activities, V2_Outputs, V2_Consortium, V2_Contact,
   V2_Footer, useTweaks, TweaksPanel + Tweak* kontroly
   ============================================================= */

/* ─────────────────────────────────────────────
   1. KONŠTANTY (layout shell)
   ───────────────────────────────────────────── */
const V2_MAX = 1240;
const V2_PAD = 32;
const V2_CONTAINER = { maxWidth: V2_MAX, margin: '0 auto', padding: `0 ${V2_PAD}px` };

/* ─────────────────────────────────────────────
   2. TWEAKABLE DEFAULTS
   -------------------------------------------------------
   Edit live cez Tweaks panel; hodnoty sú perzistentné na disku
   vďaka EDITMODE markerom (parsne ich host a zapíše späť).
   ───────────────────────────────────────────── */
const V2_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#6D4FE8",
  "accentHi": "#B362FF",
  "heroStyle": "mesh",
  "heroEyebrow": "Projekt 401101C526 · Aktivita P3HM · 2026 — 2028",
  "heroHeadline": "Personalizovaný AI asistent pedagóga pre interaktívne vzdelávanie.",
  "showAudience": true,
  "showHowItWorks": true,
  "showStats": true,
  "showOutputs": true
} /*EDITMODE-END*/;

/* ─────────────────────────────────────────────
   3. HERO BACKGROUND PRESETY
   -------------------------------------------------------
   Štyri varianty výberateľné v Tweaks paneli.
   Exportujem na window — Hero.jsx ich číta odtiaľto.
   ───────────────────────────────────────────── */
const V2_HERO_BACKGROUNDS = {
  mesh:
    'radial-gradient(60% 50% at 80% 0%, rgba(179,98,255,0.28) 0%, transparent 60%),' +
    'radial-gradient(50% 60% at 0% 100%, rgba(109,79,232,0.32) 0%, transparent 60%),' +
    'linear-gradient(135deg, #0F0A33 0%, #2A1A6B 60%, #3A1F8A 100%)',
  midnight: 'linear-gradient(135deg, #0F0A33 0%, #1a1147 100%)',
  royal: 'linear-gradient(135deg, #2A1A6B 0%, #3A1F8A 100%)',
  ai: 'linear-gradient(135deg, #6D4FE8 0%, #B362FF 100%)'
};
window.V2_HERO_BACKGROUNDS = V2_HERO_BACKGROUNDS;

/* ─────────────────────────────────────────────
   4. TWEAKS PANEL (in-page editor)
   ───────────────────────────────────────────── */
function V2_Tweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakText } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor label="Accent (CTA, links)" value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="Accent highlight (gradient)" value={tweaks.accentHi}
          onChange={(v) => setTweak('accentHi', v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio label="Background" value={tweaks.heroStyle}
          options={[
            { label: 'Mesh', value: 'mesh' },
            { label: 'Midnight', value: 'midnight' },
            { label: 'Royal', value: 'royal' },
            { label: 'AI', value: 'ai' }
          ]}
          onChange={(v) => setTweak('heroStyle', v)} />
        <TweakText label="Eyebrow" value={tweaks.heroEyebrow}
          onChange={(v) => setTweak('heroEyebrow', v)} />
        <TweakText label="Headline (use 'AI' to apply gradient)" value={tweaks.heroHeadline}
          multiline rows={3}
          onChange={(v) => setTweak('heroHeadline', v)} />
      </TweakSection>
      <TweakSection title="Sections">
        <TweakToggle label="Pre koho" value={tweaks.showAudience}
          onChange={(v) => setTweak('showAudience', v)} />
        <TweakToggle label="Ako to funguje" value={tweaks.showHowItWorks}
          onChange={(v) => setTweak('showHowItWorks', v)} />
        <TweakToggle label="Stat band" value={tweaks.showStats}
          onChange={(v) => setTweak('showStats', v)} />
        <TweakToggle label="Výstupy" value={tweaks.showOutputs}
          onChange={(v) => setTweak('showOutputs', v)} />
      </TweakSection>
    </TweaksPanel>);
}

/* ─────────────────────────────────────────────
   5. HLAVNÝ KOMPONENT (root App)
   -------------------------------------------------------
   Skladá DOM, vytvára CSS variable overrides z accent farby
   (živé prelinkovanie z Tweak farieb na brand premenné), drží
   skip-link pre keyboard userov.
   ───────────────────────────────────────────── */
function HomepageV2() {
  const {
    V2_Nav, V2_Hero, V2_Audience, V2_HowItWorks, V2_Stats,
    V2_Activities, V2_Outputs, V2_Consortium, V2_Contact, V2_Footer,
  } = window;

  const [tweaks, setTweak] = window.useTweaks(V2_TWEAK_DEFAULTS);

  // CSS premenné odvodené z brand farieb (žijú podľa Tweak hodnôt)
  const overrides = {
    '--vz-violet': tweaks.accent,
    '--vz-magenta': tweaks.accentHi,
    '--accent': tweaks.accent,
    '--grad-ai': `linear-gradient(135deg, ${tweaks.accentHi} 0%, ${tweaks.accent} 100%)`,
    '--shadow-violet': `0 16px 36px -12px ${tweaks.accent}73`
  };

  return (
    <div data-screen-label="VzdelAI Homepage" style={overrides}>
      <a href="#main" className="vz-skip-link">Preskočiť na hlavný obsah</a>
      <V2_Nav />
      <main id="main">
        <V2_Hero t={tweaks} />
        {tweaks.showAudience && <V2_Audience />}
        {tweaks.showHowItWorks && <V2_HowItWorks />}
        {tweaks.showStats && <V2_Stats />}
        <V2_Activities />
        {tweaks.showOutputs && <V2_Outputs />}
        <V2_Consortium />
        <V2_Contact />
      </main>
      <V2_Footer />
      <V2_Tweaks tweaks={tweaks} setTweak={setTweak} />
    </div>);
}

/* ─────────────────────────────────────────────
   6. EXPORT
   ───────────────────────────────────────────── */
window.HomepageV2 = HomepageV2;