/* global React */
const { useState } = React;

// ────────────────────────────────────────────────────────────
// ABOUT JULIAN
// ────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="julian" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">05 / Über mich</div>
          <h2 className="kat-section__title">Julian<br/><span className="kat-section__title--outline">Katlun.</span></h2>
        </div>
        <p className="kat-section__intro">
          Ich bin 16. Und ich baue dir dein KI-System.
          <strong> Mein Alter ändert nichts am Ergebnis.</strong>
        </p>
      </div>

      <div className="kat-about">
        <div className="kat-about__copy">
          <h3>Mit 10 erste Agentur. Mit 15 Podcast-Agentur. <b>Heute KI-Systeme.</b></h3>
          <p>
            Ich lebe jeden Tag in zwei Welten: als Schüler und als Selbstständiger,
            mit zwei selbstständigen Eltern. Ich weiß wie es ist wenn die Arbeit
            nicht aufhört und die Zeit trotzdem knapp bleibt.
          </p>
          <p>
            Katlun ist nicht eine weitere Agentur die dir Tools verkauft.
            Ich setze mich mit dir hin, verstehe dein Business und baue dir ein System
            das wirklich funktioniert.
          </p>
          <div className="kat-about__facts">
            <div className="kat-about__fact"><b>10</b><span>// Erste Agentur gegründet</span></div>
            <div className="kat-about__fact"><b>10k+</b><span>// Hörer für Podcast-Kunden</span></div>
            <div className="kat-about__fact"><b>16</b><span>// Heute KI-Systeme</span></div>
          </div>
        </div>
        <div className="kat-about__photo">
          <div className="kat-about__portrait">
            <span className="kat-about__portrait-mark">// FOTO_01</span>
            <div className="kat-about__portrait-text">
              <b>Julian Katlun</b>
              Portrait kommt<br/>
              hier hinein
            </div>
            <span className="kat-about__portrait-mark2">HAMBURG / DE</span>
          </div>
          <div className="kat-about__photo-caption">
            <span>// Aufgenommen</span>
            <b>Mai 2026</b>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// PRICING
// ────────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section id="preise" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">06 / Preise</div>
          <h2 className="kat-section__title">Kein Abo.<br/><span className="kat-section__title--outline">Kein Paket.</span></h2>
        </div>
        <p className="kat-section__intro">
          Jedes Business ist anders. Nach einem kostenlosen Erstgespräch
          bekommst du ein <strong>konkretes Angebot</strong> das genau auf deine
          Prozesse zugeschnitten ist. Zur Orientierung:
        </p>
      </div>

      <div className="kat-price">
        <div className="kat-price__head">
          <div className="kat-price__headline">Zwei Wege.<br/>Klar getrennt.</div>
          <div className="kat-price__sub">
            Setup als einmalige Investition. Betreuung freiwillig und monatlich kündbar.
            Keine versteckten Kosten, keine Mindestlaufzeit.
          </div>
        </div>
        <div className="kat-price__rows">
          <div className="kat-price__row">
            <div className="kat-price__row-label">Setup einmalig</div>
            <div className="kat-price__amount">800<b>€ ab</b></div>
            <div className="kat-price__amount-unit">// individuell kalkuliert</div>
            <div className="kat-price__row-desc">
              Komplettes System aufgebaut, getestet und übergeben. Plus 1h Walkthrough
              und Dokumentation. Du nutzt es ab Tag 1.
            </div>
          </div>
          <div className="kat-price__row">
            <div className="kat-price__row-label">Monatliche Betreuung</div>
            <div className="kat-price__amount">150<b>€ ab</b></div>
            <div className="kat-price__amount-unit">// monatlich kündbar</div>
            <div className="kat-price__row-desc">
              Ich halte dein System aktuell, passe es an neue Use Cases an
              und bin als Ansprechpartner da. Optional, nie verpflichtend.
            </div>
          </div>
        </div>
        <div className="kat-price__foot">
          <div className="kat-price__foot-text">
            // Erstgespräch <b>kostenlos</b>. Kein Pitch. Keine Verkaufstour.<br/>
            // Du bekommst ein konkretes Angebot, schriftlich, vor jeder Zusage.
          </div>
          <a className="kat-btn kat-btn--volt" href="https://calendly.com/jtakatlun/30min" target="_blank" rel="noreferrer">
            Erstgespräch buchen <span className="kat-arrow"></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// FAQ
// ────────────────────────────────────────────────────────────
function Faq() {
  const qs = [
    { q: 'Muss ich technisches Vorwissen haben?',
      a: 'Nein. Ich baue das System, erkläre es dir in einem 1h Walkthrough und du nutzt es. Kein Code, kein Setup deinerseits. Du musst nichts installieren und nichts warten.' },
    { q: 'Wie lange dauert ein Setup?',
      a: 'In der Regel 1 bis 2 Wochen nach dem Erstgespräch. Je nach Komplexität auch kürzer. Du bekommst Updates statt Status-Meetings.' },
    { q: 'Was passiert wenn sich KI weiterentwickelt und mein System veraltet?',
      a: 'Genau dafür gibt es die monatliche Betreuung. Ich halte dein System aktuell damit du das nicht selbst im Blick behalten musst. Optional, monatlich kündbar.' },
    { q: 'Für wen ist das gedacht?',
      a: 'Für Selbstständige und kleine Teams bis ca. 5 Personen die Prozesse automatisieren wollen ohne eine Vollzeitkraft einzustellen. Coaches, Trainer, Berater, Agenturen.' },
    { q: 'Gibt es eine Mindestlaufzeit?',
      a: 'Nein. Das Setup ist einmalig. Die monatliche Betreuung ist freiwillig und monatlich kündbar. Kein Lock-in, kein Abo-Modell.' },
    { q: 'Du bist 16. Kann ich dir das wirklich anvertrauen?',
      a: 'Ich habe mit 10 angefangen Agenturen aufzubauen und mit 15 Kunden mit über 10.000 Hörern betreut. Mein Alter ändert nichts am Ergebnis. Das Erstgespräch kostet dich nichts. Du entscheidest danach.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">07 / FAQ</div>
          <h2 className="kat-section__title">Häufige<br/><span className="kat-section__title--outline">Fragen.</span></h2>
        </div>
        <p className="kat-section__intro">
          Wenn deine Frage hier nicht steht, schreib sie mir direkt.
          Ich antworte in der Regel <strong>innerhalb von 24 Stunden</strong>.
        </p>
      </div>

      <div className="kat-faq">
        {qs.map((it, i) => (
          <div key={i} className={'kat-faq__item' + (open === i ? ' is-open' : '')}>
            <button className="kat-faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="kat-faq__q-n">// 0{i+1}</span>
              <span>{it.q}</span>
              <span className="kat-faq__q-plus">+</span>
            </button>
            <div className="kat-faq__a">
              <div className="kat-faq__a-inner">{it.a}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// CONTACT
// ────────────────────────────────────────────────────────────
function Contact() {
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState(false);

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Name fehlt.';
    if (!/.+@.+\..+/.test(form.email)) errs.email = 'Gültige E-Mail eingeben.';
    if (!form.message.trim()) errs.message = 'Bitte kurz beschreiben.';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    setSending(true);
    setSendError(false);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error();
      setSent(true);
    } catch {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="kontakt" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">08 / Kontakt</div>
          <h2 className="kat-section__title">Bereit<br/><span className="kat-section__title--outline">loszulegen?</span></h2>
        </div>
        <p className="kat-section__intro">
          30 Minuten. Kostenlos. Danach weißt du ob und wie KI dir
          helfen kann. Kein Pitch, keine Verkaufstour.
        </p>
      </div>

      <div className="kat-contact">
        <div className="kat-contact__col">
          <h3 className="kat-contact__big">Schreib mir<br/><b>direkt.</b></h3>
          <p className="kat-contact__lede">
            Per Mail, LinkedIn oder über das Formular rechts. Was am schnellsten geht.
            Ich antworte in der Regel innerhalb von 24h.
          </p>
          <div className="kat-contact__lines">
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// Mail</span>
              <a className="kat-contact__line-value" href="mailto:jtakatlun@gmail.com">jtakatlun@gmail.com</a>
            </div>
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// Mobil</span>
              <a className="kat-contact__line-value" href="tel:+4901717601996">+49 0171 7601996</a>
            </div>
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// LinkedIn</span>
              <a className="kat-contact__line-value" href="https://www.linkedin.com/in/juliankatlun/" target="_blank" rel="noreferrer">linkedin.com/in/juliankatlun</a>
            </div>
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// Kalender</span>
              <span className="kat-contact__line-value" style={{color: 'var(--fg4)'}}>folgt in Kürze</span>
            </div>
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// Standort</span>
              <span className="kat-contact__line-value">Hamburg / remote</span>
            </div>
            <div className="kat-contact__line">
              <span className="kat-contact__line-label">// Antwortzeit</span>
              <span className="kat-contact__line-value" style={{color: 'var(--accent)'}}>unter 24h</span>
            </div>
          </div>
        </div>

        <div className="kat-contact__col">
          {sent ? (
            <div className="kat-contact__sent">
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.14em' }}>// EMPFANGEN</span>
              <h3>Danke, <b>{form.name.split(' ')[0]}.</b></h3>
              <p>Ich melde mich innerhalb von 24 Stunden bei dir per Mail.<br/>Bis dahin: nichts tun.</p>
              <button style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
                color: 'var(--accent)', borderBottom: '1px solid var(--accent)',
                padding: '4px 0', alignSelf: 'flex-start', textTransform: 'uppercase'
              }} onClick={() => { setSent(false); setForm({ name: '', email: '', message: '' }); }}>
                Neue Nachricht senden →
              </button>
            </div>
          ) : (
            <form className="kat-contact__form" onSubmit={submit}>
              <label className="kat-field">
                <span className="kat-field__label">// Name</span>
                <input className={'kat-field__input' + (errors.name ? ' kat-field__input--error' : '')}
                  type="text" value={form.name} onChange={set('name')}
                  placeholder="Wie heißt du?" />
                {errors.name && <span className="kat-field__error">{errors.name}</span>}
              </label>
              <label className="kat-field">
                <span className="kat-field__label">// E-Mail</span>
                <input className={'kat-field__input' + (errors.email ? ' kat-field__input--error' : '')}
                  type="email" value={form.email} onChange={set('email')}
                  placeholder="deine@email.de" />
                {errors.email && <span className="kat-field__error">{errors.email}</span>}
              </label>
              <label className="kat-field">
                <span className="kat-field__label">// Dein Engpass</span>
                <textarea className={'kat-field__input' + (errors.message ? ' kat-field__input--error' : '')}
                  rows="5" value={form.message} onChange={set('message')}
                  placeholder="In 2 bis 3 Sätzen: was nervt dich gerade am meisten?" />
                {errors.message && <span className="kat-field__error">{errors.message}</span>}
              </label>
              <div className="kat-contact__form-foot">
                <p className="kat-contact__legal">
                  // Deine Daten gehen direkt an mich. Kein CRM, kein Newsletter, kein Tracking.
                </p>
                {sendError && <p style={{color:'var(--accent)',fontSize:'0.85rem',margin:'0 0 8px'}}>Fehler beim Senden — bitte nochmal versuchen.</p>}
                <button className="kat-btn kat-btn--primary" type="submit" disabled={sending}>
                  {sending ? 'Wird gesendet…' : <>Anfrage senden <span className="kat-arrow"></span></>}
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// FOOTER + STICKY CTA
// ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="kat-footer">
      <div className="kat-footer__top">
        <div className="kat-footer__brand">
          <div className="kat-footer__big">KATLUN.</div>
          <p>KI-Systeme für Selbstständige.<br/>Persönlich, direkt, ohne Umwege.</p>
        </div>
        <div className="kat-footer__col">
          <h4>System</h4>
          <ul>
            <li><a href="/" onClick={e => { e.preventDefault(); document.getElementById('problem')?.scrollIntoView({ behavior: 'smooth' }); }}>Problem</a></li>
            <li><a href="/" onClick={e => { e.preventDefault(); document.getElementById('system')?.scrollIntoView({ behavior: 'smooth' }); }}>Lösung</a></li>
            <li><a href="/" onClick={e => { e.preventDefault(); document.getElementById('prozess')?.scrollIntoView({ behavior: 'smooth' }); }}>Prozess</a></li>
            <li><a href="/" onClick={e => { e.preventDefault(); document.getElementById('preise')?.scrollIntoView({ behavior: 'smooth' }); }}>Preise</a></li>
          </ul>
        </div>
        <div className="kat-footer__col">
          <h4>Kontakt</h4>
          <ul>
            <li><a href="mailto:jtakatlun@gmail.com">jtakatlun@gmail.com</a></li>
            <li><a href="https://www.linkedin.com/in/juliankatlun/" target="_blank" rel="noreferrer">LinkedIn</a></li>
            <li><a href="https://calendly.com/jtakatlun/30min" target="_blank" rel="noreferrer">Erstgespräch buchen</a></li>
          </ul>
        </div>
        <div className="kat-footer__col">
          <h4>Rechtliches</h4>
          <ul>
            <li><a href="/impressum.html">Impressum</a></li>
            <li><a href="/datenschutz.html">Datenschutz</a></li>
          </ul>
        </div>
      </div>
      <div className="kat-footer__bot">
        <span>© 2026 / Julian Katlun / Hamburg</span>
        <span>// Built solo. No AI slop.</span>
      </div>
    </footer>
  );
}

function StickyCta() {
  const [visible, setVisible] = useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 1400 && window.scrollY < (document.body.scrollHeight - window.innerHeight - 400));
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={'kat-stickycta' + (visible ? ' is-visible' : '')}>
      <span className="kat-stickycta__k">K</span>
      <span className="kat-stickycta__text">
        Schon überzeugt? <b>30 Minuten Erstgespräch.</b> Kostenlos, kein Pitch.
      </span>
      <a className="kat-btn kat-btn--volt" href="https://calendly.com/jtakatlun/30min" target="_blank" rel="noreferrer">
        Termin buchen <span className="kat-arrow"></span>
      </a>
    </div>
  );
}

window.About = About;
window.Pricing = Pricing;
window.Faq = Faq;
window.Contact = Contact;
window.Footer = Footer;
window.StickyCta = StickyCta;