// Shared layout: theme system, nav, footer, cursor, tweaks defaults
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const FONT_PRESETS = {
  bricolage: { display: "'Bricolage Grotesque', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
  spaceGrotesk: { display: "'Space Grotesk', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
  interTight: { display: "'Inter Tight', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
};

const SHARED_DEFAULTS = {
  orange: "#EA6A1F",
  darkMode: true,
  fontPreset: "bricolage",
  density: "regular",
};

function adjustHex(hex, amount) {
  const m = hex.replace('#', '');
  const num = parseInt(m, 16);
  let r = Math.max(0, Math.min(255, (num >> 16) + amount));
  let g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + amount));
  let b = Math.max(0, Math.min(255, (num & 0xff) + amount));
  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

function useTheme(t) {
  const orange = t.orange;
  const orangeBright = adjustHex(orange, 20);
  const fonts = FONT_PRESETS[t.fontPreset] || FONT_PRESETS.bricolage;
  const dark = t.darkMode;
  const c = dark ? {
    bg: '#0A0908', bgAlt: '#13110F', fg: '#F5F2EC', muted: '#9A958A', line: '#26211C',
    glassBg: 'rgba(255,255,255,0.03)',
  } : {
    bg: '#FAF8F3', bgAlt: '#F1ECE0', fg: '#171411', muted: '#6E6859', line: '#DDD5C4',
    glassBg: 'rgba(255,255,255,0.6)',
  };
  const glow = `${orange}33`;
  const dens = t.density === 'compact' ? 0.75 : t.density === 'comfy' ? 1.2 : 1;
  return { orange, orangeBright, fonts, dark, c, glow, dens, pad: (px) => Math.round(px * dens) };
}

function ThemeStyles({ theme }) {
  const { c, orange, orangeBright, fonts, glow } = theme;
  const css = `
    .vc-root { background: ${c.bg}; color: ${c.fg}; font-family: ${fonts.body}; min-height: 100%; transition: background .4s, color .4s; }
    .vc-display { font-family: ${fonts.display}; letter-spacing: -0.03em; font-weight: 700; }
    .vc-serif { font-family: ${fonts.serif}; }
    .vc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .vc-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; }
    .vc-eyebrow-line { display: inline-flex; align-items: center; gap: 14px; }
    .vc-eyebrow-line::before { content: ''; width: 32px; height: 1px; background: ${orange}; }
    .vc-btn-p { background: ${orange}; color: #fff; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: none; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; font-family: ${fonts.body}; }
    .vc-btn-p:hover { background: ${orangeBright}; box-shadow: 0 12px 32px ${glow}; transform: translateY(-2px); }
    .vc-btn-g { background: ${c.glassBg}; color: ${c.fg}; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid ${c.line}; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; backdrop-filter: blur(12px); font-family: ${fonts.body}; }
    .vc-btn-g:hover { border-color: ${orange}; color: ${orange}; }
    .vc-nav-link { position: relative; transition: color .2s ease; }
    .vc-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: ${orange}; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
    .vc-nav-link:hover { color: ${orange} !important; }
    .vc-nav-link:hover::after { transform: scaleX(1); }
    .vc-nav-link.is-active::after { transform: scaleX(1); }
    .vc-footer-link { cursor: pointer !important; transition: color .2s ease, text-decoration-color .2s ease, transform .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
    .vc-footer-link:hover { color: ${orange} !important; text-decoration-color: ${orange}; transform: translateX(3px); }
    .vc-contact-link { cursor: pointer !important; transition: color .2s ease, text-decoration-color .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
    .vc-contact-link:hover { color: ${orange} !important; text-decoration-color: ${orange}; }

    /* RESPONSIVE — Tablet (≤1024px) */
    @media (max-width: 1024px) {
      .vc-root section { padding-left: 32px !important; padding-right: 32px !important; }
      .vc-root h1, .vc-root h2 { font-size: clamp(40px, 8vw, 96px) !important; line-height: 0.95 !important; }
      .vc-root h3 { font-size: clamp(28px, 5vw, 56px) !important; }
      .vc-root [style*="grid-template-columns: 1fr 1fr"],
      .vc-root [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
      .vc-root [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
      .vc-root [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
      .vc-root [style*="grid-template-columns: 1fr 480px"],
      .vc-root [style*="grid-template-columns: 440px 1fr"],
      .vc-root [style*="grid-template-columns: 1.1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
      .vc-root [style*="grid-template-columns: 120px 200px 1fr"] { grid-template-columns: 80px 1fr !important; gap: 16px !important; }
      .vc-root [style*="grid-template-columns: 180px 1fr 2fr"] { grid-template-columns: 120px 1fr !important; gap: 16px !important; }
      .vc-root header { padding: 0 16px !important; }
      .vc-root header > div { padding: 10px 16px !important; gap: 12px !important; }
      .vc-root nav { display: none !important; }
      .vc-root .vc-glass[style*="padding: 48"],
      .vc-root .vc-glass[style*="padding: 56"] { padding: 32px !important; }
      .vc-cursor { display: none !important; }
      a, button, body { cursor: auto !important; }
      .vc-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
      .vc-hide-mobile { display: none !important; }
    }

    /* RESPONSIVE — Mobile (≤640px) */
    @media (max-width: 640px) {
      .vc-root section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
      .vc-root h1 { font-size: clamp(48px, 14vw, 80px) !important; }
      .vc-root h2 { font-size: clamp(36px, 9vw, 56px) !important; }
      .vc-root h3 { font-size: clamp(24px, 6vw, 36px) !important; }
      .vc-root [style*="grid-template-columns: repeat(3"],
      .vc-root [style*="grid-template-columns: repeat(4"],
      .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
      .vc-root [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      .vc-root [style*="grid-template-columns: 120px 200px 1fr"],
      .vc-root [style*="grid-template-columns: 180px 1fr 2fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
      .vc-root header > div { padding: 8px 12px !important; }
      .vc-root header [style*="font-size: 22px"] { font-size: 16px !important; }
      .vc-root .vc-glass { padding: 20px !important; border-radius: 16px !important; }
      .vc-root .vc-btn-p, .vc-root .vc-btn-g { padding: 12px 20px !important; font-size: 11px !important; }
      .vc-root [style*="display: flex"][style*="gap: 16"] { flex-wrap: wrap; }
      .vc-root footer { padding: 32px 20px !important; }
      .vc-root footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
      .vc-root footer [style*="justify-content: space-between"] { flex-direction: column; gap: 8px; align-items: flex-start; }
    }
    .vc-glass { background: ${c.glassBg}; border: 1px solid ${c.line}; backdrop-filter: blur(20px); border-radius: 24px; transition: all .35s; }
    .vc-card-hover:hover { border-color: ${orange}; transform: translateY(-4px); box-shadow: 0 20px 40px ${glow}; }
    .vc-fade { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
    .vc-fade.in { opacity: 1; transform: translateY(0); }
    a, button { cursor: none; }
    body { cursor: none; }
    .vc-cursor { position: fixed; top:0; left:0; width: 24px; height: 24px; border: 1px solid ${orange}; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: width .2s, height .2s; }
    .vc-cursor::after { content:''; position:absolute; inset: 9px; background: ${orange}; border-radius: 50%; }
  `;
  return <style>{css}</style>;
}

function Cursor() {
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const move = (e) => { el.style.transform = `translate(${e.clientX - 12}px, ${e.clientY - 12}px)`; };
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);
  return <div ref={ref} className="vc-cursor" />;
}

function ScrollReveal() {
  useEffectS(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.vc-fade').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
  return null;
}

function NavBar({ active, theme, dark, setDark }) {
  const { c, orange, fonts, glow } = theme;
  const [open, setOpen] = useStateS(false);
  const links = [
    { l: 'Home', href: '/' },
    { l: 'PS3', href: 'PS3.html' },
    { l: 'HOGC DNA', href: 'HOGC DNA.html' },
    { l: 'United', href: 'United.html' },
    { l: 'YMC-D', href: 'YMC-D.html' },
    { l: 'Founder', href: 'Founder.html' },
  ];
  return (
    <header style={{ position: 'sticky', top: 16, zIndex: 50, padding: '0 32px' }}>
      <div className="vc-glass" style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: 999 }}>
        <a href="/" className="vc-display" style={{ fontSize: 22, display: 'flex', alignItems: 'baseline', gap: 2, textDecoration: 'none', color: c.fg }}>
          <span>MA</span><span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontSize: 28, fontWeight: 500 }}>X</span>
          <span style={{ marginLeft: 10, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.2em', textTransform: 'uppercase', color: c.muted, fontWeight: 500 }}>Ministry</span>
        </a>
        <nav style={{ display: 'flex', gap: 28, fontSize: 13 }}>
          {links.map((x) => (
            <a key={x.l} href={x.href} className={`vc-nav-link${active === x.l ? ' is-active' : ''}`} style={{ color: active === x.l ? orange : c.muted, textDecoration: 'none', fontWeight: 500 }}>{x.l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <button
            onClick={() => setDark(!dark)}
            aria-label="Toggle theme"
            style={{
              position: 'relative', width: 52, height: 26, borderRadius: 999,
              background: dark ? c.bgAlt : `${orange}22`,
              border: `1px solid ${c.line}`, padding: 0, cursor: 'none',
              transition: 'all .3s', display: 'inline-flex', alignItems: 'center',
            }}
          >
            <span style={{
              position: 'absolute', left: dark ? 3 : 28, top: 2,
              width: 20, height: 20, borderRadius: '50%',
              background: dark ? c.fg : orange,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, color: dark ? c.bg : '#fff',
              transition: 'left .3s, background .3s',
              boxShadow: dark ? 'none' : `0 0 12px ${glow}`,
            }}>{dark ? '☾' : '☀'}</span>
          </button>
          <span className="vc-mono vc-hide-mobile" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.1em' }}>DE</span>
          <a href="Kontakt.html" className="vc-btn-p vc-hide-mobile" style={{ padding: '10px 20px', fontSize: 11, textDecoration: 'none' }}>Kontakt →</a>
          <button
            onClick={() => setOpen(!open)}
            aria-label="Menu"
            className="vc-mobile-toggle"
            style={{
              display: 'none', width: 36, height: 36, borderRadius: 999,
              border: `1px solid ${c.line}`, background: 'transparent',
              color: c.fg, fontSize: 16, cursor: 'pointer', padding: 0,
            }}
          >{open ? '✕' : '☰'}</button>
        </div>
      </div>
      {open && (
        <div className="vc-glass" style={{ maxWidth: 1280, margin: '8px auto 0', padding: 16, borderRadius: 16, display: 'flex', flexDirection: 'column', gap: 4 }}>
          {links.map((x) => (
            <a key={x.l} href={x.href} style={{ color: active === x.l ? orange : c.fg, textDecoration: 'none', fontWeight: 500, padding: '12px 16px', borderRadius: 12, fontSize: 16 }}>{x.l}</a>
          ))}
          <a href="Kontakt.html" style={{ color: orange, textDecoration: 'none', fontWeight: 600, padding: '12px 16px', fontSize: 16, borderTop: `1px solid ${c.line}`, marginTop: 8 }}>Kontakt →</a>
        </div>
      )}
    </header>
  );
}

function Footer({ theme }) {
  const { c, orange } = theme;
  return (
    <footer style={{ padding: '64px 56px 32px', borderTop: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <div className="vc-display" style={{ fontSize: 32, marginBottom: 12 }}>
              MA<span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontWeight: 400 }}>X</span> Ministry
            </div>
            <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.6, maxWidth: 320 }}>Equipping leaders. Building churches. Empowering the next generation.</p>
          </div>
          {[
            { h: 'Bereiche', l: [['PS3 Academy','PS3.html'],['HOGC DNA','HOGC DNA.html'],['United','United.html'],['YMC-D','YMC-D.html']] },
            { h: 'Über', l: [['Founder','Founder.html'],['Kontakt','Kontakt.html'],['YouTube','https://youtube.com/@MaxMinistry']] },
            { h: 'Rechtliches', l: [['Impressum','Impressum.html'],['Datenschutz','Datenschutz.html'],['AGB','AGB.html'],['Login','/login']] },
          ].map((col) => (
            <div key={col.h}>
              <div className="vc-eyebrow" style={{ color: orange, marginBottom: 16 }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                {col.l.map(([nm, hr]) => (
                  <a key={nm} className="vc-footer-link" href={hr} target={hr.startsWith('http') ? '_blank' : undefined} rel={hr.startsWith('http') ? 'noopener noreferrer' : undefined} style={{ color: c.muted }}>{nm}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, borderTop: `1px solid ${c.line}`, fontSize: 11, color: c.muted }} className="vc-mono">
          <span>© 2026 MAX MINISTRY</span>
          <span>BASIM@MAX-MINISTRY.COM</span>
        </div>
      </div>
    </footer>
  );
}

function PageHero({ theme, eyebrow, title, titleAccent, subtitle, meta }) {
  const { c, orange, fonts, glow } = theme;
  return (
    <section style={{ padding: '120px 56px 80px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 30% 0%, ${glow}, transparent 50%)` }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 40 }}>
          <span className="vc-eyebrow">{eyebrow}</span>
        </div>
        <h1 className="vc-display" style={{ fontSize: 168, lineHeight: 0.88, margin: 0, letterSpacing: '-0.04em' }}>
          {title}{titleAccent && (<><br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>{titleAccent}</span></>)}
        </h1>
        {subtitle && <p className="vc-serif" style={{ fontSize: 26, lineHeight: 1.4, color: c.muted, maxWidth: 720, margin: '32px 0 0', fontStyle: 'italic', fontWeight: 300 }}>{subtitle}</p>}
        {meta && (
          <div style={{ display: 'flex', gap: 32, marginTop: 48, flexWrap: 'wrap' }}>
            {meta.map((m) => (
              <div key={m.k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{m.k}</span>
                <span className="vc-display" style={{ fontSize: 28, color: c.fg }}>{m.v}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function Tweaks({ t, setTweak }) {
  return null;
}

Object.assign(window, { useTheme, ThemeStyles, Cursor, ScrollReveal, NavBar, Footer, PageHero, Tweaks, SHARED_DEFAULTS, adjustHex, FONT_PRESETS });