// Website chrome + shared section helpers for the genai-schnitzler.ch redesign kit.
const DS = window.GenAISchnitzlerDesignSystem_ce4f9c;

function WebsiteNav({ page, onNavigate }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    ['home', 'Start'],
    ['campaignpilot', 'CampaignPilot'],
    ['cases', 'Cases'],
    ['preise', 'Preise und Pakete'],
    ['uebermich', 'Über mich'],
    ['blog', 'FAQ'],
  ];
  const go = (key) => { setOpen(false); onNavigate(key); };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      padding: '12px 30px',
      background: 'var(--bar-bg)', backdropFilter: 'var(--topbar-blur)', WebkitBackdropFilter: 'var(--topbar-blur)',
      borderBottom: '1px solid var(--line)', fontFamily: 'var(--font)',
    }}>
      <style>{`
        @media (max-width:1100px){
          .gsn-nav-logo{height:72px !important}
          .gsn-nav-links{gap:14px !important}
          .gsn-nav-links a{letter-spacing:.12em !important}
        }
        .gsn-nav-burger{display:none}
        @media (max-width:860px){
          .gsn-nav-logo{height:56px !important}
          .gsn-nav-links{display:none !important}
          .gsn-nav-burger{display:flex}
        }
      `}</style>
      <a href="#" onClick={e => { e.preventDefault(); go('home'); }} style={{ lineHeight: 0 }}>
        <img src="assets/genai-schnitzler-logo.png" alt="GenAI Schnitzler" className="gsn-nav-logo" style={{ height: 120, width: 'auto' }} />
      </a>
      <nav className="gsn-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 22, minWidth: 0 }}>
        {items.map(([key, label]) => (
          <a key={key} href="#" onClick={e => { e.preventDefault(); go(key); }} style={{
            fontSize: '.78rem', textTransform: 'uppercase', letterSpacing: '.18em', textDecoration: 'none', whiteSpace: 'nowrap',
            color: page === key ? 'var(--gold)' : 'var(--muted)',
            borderBottom: page === key ? '1px solid var(--gold)' : '1px solid transparent',
            paddingBottom: 2, transition: 'color var(--dur) var(--ease)',
          }}>{label}</a>
        ))}
        <DS.Cta href="https://calendly.com/hubert-genai-schnitzler/15-min-beratung" button>Jetzt anfragen »</DS.Cta>
      </nav>
      <button className="gsn-nav-burger" aria-label={open ? 'Menü schliessen' : 'Menü öffnen'} onClick={() => setOpen(o => !o)} style={{
        alignItems: 'center', justifyContent: 'center', width: 44, height: 44,
        background: 'transparent', border: '1px solid var(--line)', cursor: 'pointer', padding: 0,
      }}>
        <span style={{ display: 'grid', gap: 5, width: 20 }}>
          <span style={{ height: 1.5, background: 'var(--ink)', transition: 'transform var(--dur) var(--ease)', transform: open ? 'translateY(6.5px) rotate(45deg)' : 'none' }}></span>
          <span style={{ height: 1.5, background: 'var(--ink)', opacity: open ? 0 : 1, transition: 'opacity var(--dur) var(--ease)' }}></span>
          <span style={{ height: 1.5, background: 'var(--ink)', transition: 'transform var(--dur) var(--ease)', transform: open ? 'translateY(-6.5px) rotate(-45deg)' : 'none' }}></span>
        </span>
      </button>
      {open && (
        <nav style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'var(--abyss)', display: 'grid',
          padding: '10px 0 22px', borderBottom: '2px solid var(--gold)',
        }}>
          {items.map(([key, label]) => (
            <a key={key} href="#" onClick={e => { e.preventDefault(); go(key); }} style={{
              padding: '15px 30px', fontSize: '.85rem', textTransform: 'uppercase', letterSpacing: '.18em', textDecoration: 'none',
              color: page === key ? 'var(--gold)' : 'var(--on-dark-2)',
              borderLeft: page === key ? '3px solid var(--gold)' : '3px solid transparent',
            }}>{label}</a>
          ))}
          <div style={{ padding: '18px 30px 0' }}>
            <DS.Cta href="https://calendly.com/hubert-genai-schnitzler/15-min-beratung" button>Jetzt anfragen »</DS.Cta>
          </div>
        </nav>
      )}
    </header>
  );
}

/** Cookie/consent notice — honest version: the site sets no tracking cookies, only technically
 *  necessary local storage. Dismissal is remembered. */
function CookieNotice({ onNavigate }) {
  const [seen, setSeen] = React.useState(() => localStorage.getItem('gsn-cookie-ok') === '1');
  if (seen) return null;
  const ok = () => { localStorage.setItem('gsn-cookie-ok', '1'); setSeen(true); };
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 100,
      background: 'var(--abyss)', borderTop: '2px solid var(--gold)',
      padding: '18px var(--pad-x)', fontFamily: 'var(--font)',
    }}>
      <div style={{ maxWidth: 'var(--rail)', margin: '0 auto', display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
        <p style={{ margin: 0, flex: '1 1 380px', fontSize: '.88rem', lineHeight: 1.55, color: 'var(--on-dark-2)' }}>
          Diese Website verwendet keine Tracking-Cookies und keine Analyse-Dienste — nur technisch notwendige Speicherung für die Navigation. Details in der{' '}
          <a href="#" onClick={e => { e.preventDefault(); onNavigate('datenschutz'); }} style={{ color: 'var(--gold)' }}>Datenschutzerklärung</a>.
        </p>
        <button onClick={ok} style={{
          border: 'none', background: 'var(--gold)', color: '#fff', padding: '12px 26px',
          fontSize: '.8rem', fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase',
          cursor: 'pointer', fontFamily: 'var(--font)', flexShrink: 0,
        }}>Verstanden</button>
      </div>
    </div>
  );
}

/** White content section on the 1140px rail. */
function WhiteSection({ children, tight }) {
  return (
    <section style={{ background: 'var(--bg)', padding: `${tight ? 'clamp(36px,5vw,56px)' : 'var(--pad-section)'} var(--pad-x)`, fontFamily: 'var(--font)' }}>
      <div style={{ maxWidth: 'var(--rail)', margin: '0 auto' }}>{children}</div>
    </section>
  );
}

/** Archetype C — eyebrow + light two-weight H2 + framing paragraphs. */
function IntroSection({ eyebrow, title, children }) {
  return (
    <WhiteSection>
      <div style={{ fontSize: 'var(--fs-eyebrow)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--gold)' }}>{eyebrow}</div>
      <h2 style={{ margin: '16px 0 0', fontSize: 'var(--fs-h2)', fontWeight: 300, lineHeight: 1.3, color: 'var(--ink)', maxWidth: 780 }}>{title}</h2>
      <div style={{ marginTop: 22, maxWidth: 680, fontSize: '1.02rem', lineHeight: 1.65, color: 'var(--text-body)', display: 'grid', gap: 14 }}>{children}</div>
    </WhiteSection>
  );
}

/** Contact form — dark-band variant. Real submit via Web3Forms → hubert@genai-schnitzler.ch.
 *  DEPLOY: create the (free) access key at https://web3forms.com with hubert@genai-schnitzler.ch
 *  and paste it below. While the key is the placeholder, the form simulates success (preview mode). */
const WEB3FORMS_ACCESS_KEY = 'a1fb4afc-ac02-48fd-80c8-068c07327579';

function ContactForm() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (WEB3FORMS_ACCESS_KEY === 'HIER-ACCESS-KEY-EINSETZEN') { setSent(true); return; } // preview mode
    setSending(true); setError(false);
    const f = e.target;
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_ACCESS_KEY,
          subject: 'Anfrage über genai-schnitzler.ch',
          from_name: f.name.value,
          name: f.name.value,
          email: f.email.value,
          firma: f.firma.value,
          nachricht: f.nachricht.value,
          botcheck: f.botcheck.checked ? 'on' : '',
        }),
      });
      const data = await res.json();
      if (data.success) setSent(true); else setError(true);
    } catch (err) { setError(true); }
    setSending(false);
  };
  const field = {
    fontFamily: 'var(--font)', fontSize: '.95rem', color: 'var(--on-dark-1)',
    background: 'rgba(238,242,246,.06)', border: '1px solid rgba(212,222,231,.25)',
    padding: '12px 14px', outline: 'none', width: '100%', boxSizing: 'border-box', borderRadius: 0,
  };
  if (sent) {
    return (
      <div style={{ marginTop: 40, borderTop: '2px solid var(--gold)', paddingTop: 18, maxWidth: 560 }}>
        <div style={{ fontSize: '1.05rem', fontWeight: 600, color: '#fff' }}>Vielen Dank, ich melde mich umgehend!</div>
        <div style={{ fontSize: '.9rem', color: 'var(--on-dark-2)', marginTop: 6 }}>In der Regel innerhalb von 24 Stunden.</div>
      </div>
    );
  }
  return (
    <form onSubmit={submit} style={{ marginTop: 44, maxWidth: 640, display: 'grid', gap: 14 }}>
      <input type="checkbox" name="botcheck" tabIndex="-1" style={{ display: 'none' }}></input>
      <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--eyebrow-dark)' }}>Oder schreiben Sie mir direkt</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <input style={field} type="text" name="name" placeholder="Name" required></input>
        <input style={field} type="email" name="email" placeholder="E-Mail" required></input>
      </div>
      <input style={field} type="text" name="firma" placeholder="Firma"></input>
      <textarea style={{ ...field, minHeight: 96, resize: 'vertical' }} name="nachricht" placeholder="Erzählen Sie mir von Ihrem Projekt …"></textarea>
      <div>
        <button type="submit" style={{
          fontFamily: 'var(--font)', fontSize: '1rem', fontWeight: 600, letterSpacing: '.04em',
          color: '#fff', background: 'var(--gold)', border: '1px solid var(--gold)', whiteSpace: 'nowrap',
          padding: '13px 28px', cursor: 'pointer', borderRadius: 0,
          transition: 'background var(--dur) var(--ease)',
        }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--gold-d)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--gold)'; }}
        >{sending ? 'Wird gesendet …' : 'Jetzt unverbindlich anfragen »'}</button>
      </div>
      {error && <div style={{ fontSize: '.88rem', color: 'var(--on-dark-2)' }}>Senden fehlgeschlagen — bitte direkt an <a href="mailto:hubert@genai-schnitzler.ch" style={{ color: 'var(--gold)' }}>hubert@genai-schnitzler.ch</a> schreiben.</div>}
    </form>
  );
}

function PageFooter({ onNavigate }) {
  const legalLink = {
    color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 3, cursor: 'pointer',
  };
  const socials = [
    { label: 'LinkedIn', href: 'https://www.linkedin.com/in/hubert-schnitzler/', d: 'M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45z' },
    { label: 'Instagram', href: 'https://www.instagram.com/genai_schnitzler/', outline: true },
    { label: 'Facebook', href: 'https://www.facebook.com/hubert.horst.schnitzler', d: 'M13.5 21v-8.25h2.77l.41-3.22H13.5V7.47c0-.93.26-1.57 1.6-1.57h1.7V3.02c-.3-.04-1.3-.13-2.48-.13-2.46 0-4.14 1.5-4.14 4.25v2.37H7.4v3.22h2.78V21h3.32z' },
  ];
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <div style={{ background: '#fff', padding: '28px var(--pad-x) 4px', fontFamily: 'var(--font)' }}>
        <div style={{ maxWidth: 'var(--rail)', margin: '0 auto', display: 'flex', gap: 22, alignItems: 'center' }}>
          {socials.map(s => (
            <a key={s.label} href={s.href} target="_blank" rel="noopener" aria-label={s.label} style={{ color: 'var(--ink)', display: 'flex', opacity: 1 }}
              onMouseEnter={e => { e.currentTarget.style.color = 'var(--gold-d)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'var(--ink)'; }}>
              {s.outline
                ? <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.2" cy="6.8" r="1.3" fill="currentColor" stroke="none"></circle></svg>
                : <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path d={s.d}></path></svg>}
            </a>
          ))}
        </div>
      </div>
      <DS.SiteFooter
        showQr={false}
        credit="GENAI SCHNITZLER / CAMPAIGNPILOT ●"
        disclaimer={<span>Sämtliche Hintergründe sowie Videos dieser Webseite wurden mit Hilfe von generativer KI erstellt. © 2026 GenAI-Schnitzler.ch · <a href="#" style={legalLink} onClick={e => { e.preventDefault(); onNavigate && onNavigate('impressum'); }}>Impressum</a> · <a href="#" style={legalLink} onClick={e => { e.preventDefault(); onNavigate && onNavigate('datenschutz'); }}>Datenschutz</a></span>}
      />
      <StickyCta></StickyCta>
    </div>
  );
}

/** Sticky bottom CTA — appears after scrolling past the hero, dismissable (remembered). */
function StickyCta() {
  const [off, setOff] = React.useState(() => localStorage.getItem('gsn-sticky-cta-off') === '1');
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 700);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  if (off) return null;
  const dismiss = () => { localStorage.setItem('gsn-sticky-cta-off', '1'); setOff(true); };
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 90,
      transform: show ? 'translateY(0)' : 'translateY(110%)', transition: 'transform .35s var(--ease)',
      background: 'var(--abyss)', borderTop: '2px solid var(--gold)',
      padding: '10px var(--pad-x)', fontFamily: 'var(--font)',
    }}>
      <div style={{ maxWidth: 'var(--rail)', margin: '0 auto', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', justifyContent: 'space-between' }}>
        <span className="gsn-sticky-line" style={{ fontSize: '.88rem', color: 'var(--on-dark-2)' }}>Kampagnen auf Studio-Niveau — in Stunden statt Wochen.</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="https://calendly.com/hubert-genai-schnitzler/15-min-beratung" target="_blank" rel="noopener" style={{
            background: 'var(--gold)', color: '#fff', textDecoration: 'none', padding: '10px 22px',
            fontSize: '.78rem', fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', whiteSpace: 'nowrap',
          }}>Jetzt anfragen »</a>
          <button aria-label="Hinweis schliessen" onClick={dismiss} style={{
            background: 'transparent', border: '1px solid rgba(212,222,231,.35)', color: 'var(--on-dark-2)',
            width: 34, height: 34, cursor: 'pointer', fontSize: '1rem', lineHeight: 1, padding: 0,
          }}>×</button>
        </span>
      </div>
      <style>{`@media (max-width:640px){.gsn-sticky-line{display:none}}`}</style>
    </div>
  );
}

Object.assign(window, { WebsiteNav, WhiteSection, IntroSection, PageFooter, ContactForm, CookieNotice, StickyCta });