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

function WebsiteNav({ page, onNavigate }) {
  const items = [
    ['home', 'Start'],
    ['campaignpilot', 'CampaignPilot'],
    ['cases', 'Cases'],
    ['preise', 'Preise und Pakete'],
    ['uebermich', 'Über mich'],
    ['blog', 'FAQ'],
  ];
  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}
        }
        @media (max-width:540px){.gsn-nav-logo{height:56px !important}}
      `}</style>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate('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(); onNavigate(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>
    </header>
  );
}

/** 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.value,
        }),
      });
      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',
  };
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <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>}
      />
    </div>
  );
}

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