/* subpages.jsx — Projekte, Über uns, Schulungen, Kontakt */
const { useState: useStateS, useRef: useRefS } = React;
const teamInitials = (n) => (n || '').trim().split(/\s+/).slice(0, 2).map((w) => w[0] || '').join('').toUpperCase() || '#';

/* ============ PROJEKTE ============ */
const PROJECTS = [
  { t: 'Politische Kampagne', cat: 'Politik', tags: 'Strategie · Content · Ads' },
  { t: 'KMU Markenauftritt', cat: 'KMU', tags: 'Branding · Content Creation' },
  { t: 'Verbands-Kommunikation', cat: 'Verbände', tags: 'Strategie · Community' },
  { t: 'Persönlichkeits-Marke', cat: 'Persönlichkeiten', tags: 'Content · Storytelling' },
  { t: 'Produkt-Launch', cat: 'KMU', tags: 'Kampagne · Video' },
  { t: 'Wahlkampf Social', cat: 'Politik', tags: 'Strategie · Ads · Reporting' },
];
const CATS = ['Alle', 'Politik', 'KMU', 'Verbände', 'Persönlichkeiten'];

function ProjektePage({ go }) {
  const { Reveal, MediaPlaceholder, LinkArrow } = window;
  const [cat, setCat] = useStateS('Alle');
  const list = cat === 'Alle' ? PROJECTS : PROJECTS.filter((p) => p.cat === cat);
  return (
    <div>
      <header className="page-hero"><div className="wrap">
        <Reveal><span className="kicker">Referenzen</span>
          <h1 className="display" style={{ marginTop: 18 }}>Projekte</h1></Reveal>
        <Reveal delay={100}><p className="lead mt-m" style={{ maxWidth: '46ch' }}>
          Eine Auswahl unserer Arbeiten — von politischen Kampagnen bis zu Markenauftritten
          kleiner und mittelgrosser Unternehmen.</p></Reveal>
      </div></header>

      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        <div className="flex gap-s wrap-f" style={{ marginBottom: 'clamp(28px,4vw,48px)' }}>
          {CATS.map((c) => (
            <button key={c} onClick={() => setCat(c)}
              className="pill" style={c === cat
                ? { background: 'var(--holo)', borderColor: 'transparent', color: '#1a1a1a', cursor: 'pointer' }
                : { cursor: 'pointer' }}>{c}</button>
          ))}
        </div>
        <div className="proj-grid">
          {list.map((p, i) => (
            <Reveal key={p.t} delay={(i % 2) * 80}>
              <div className="proj">
                <div className="proj-media"><MediaPlaceholder label={`${p.cat}-Projekt`} /></div>
                <div className="proj-meta">
                  <h3>{p.t}</h3>
                  <span className="proj-cat">{p.tags}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <div className="mt-l"><LinkArrow onClick={() => go('kontakt')}>Dein Projekt könnte hier stehen</LinkArrow></div>
      </div></section>
      <window.CTAband go={go} />
    </div>
  );
}

/* ============ ÜBER UNS ============ */
/* Team wird über das CMS gepflegt (Backend /api/team) statt hier hartcodiert —
   siehe Backend/data/team.json. Pflege erfolgt exklusiv über den Admin-Bereich. */
const SOCIAL_LABELS = { instagram: 'Instagram', linkedin: 'LinkedIn', facebook: 'Facebook', x: 'X' };

function TeamCard({ m }) {
  const [imgOk, setImgOk] = React.useState(true);
  const socialEntries = Object.entries(m.socials || {}).filter(([, url]) => url);
  return (
    <div className="team-card">
      <div className="team-photo">
        {m.image && imgOk
          ? <img src={m.image} alt={m.name} referrerPolicy="no-referrer" loading="eager"
              onError={() => setImgOk(false)}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          : <div className="team-ph-fallback"><span>{teamInitials(m.name)}</span></div>}
      </div>
      <div className="team-name">{m.name}</div>
      <div className="team-role">{m.role}</div>
      {m.bio && <p className="small mt-s" style={{ color: 'var(--text-soft)', lineHeight: 1.5 }}>{m.bio}</p>}
      {socialEntries.length > 0 &&
        <div className="team-socials">
          {socialEntries.map(([key, url]) => (
            <a key={key} href={url} target="_blank" rel="noopener noreferrer" title={SOCIAL_LABELS[key] || key}>
              {(SOCIAL_LABELS[key] || key).slice(0, 2)}
            </a>
          ))}
        </div>}
    </div>
  );
}

function UeberUnsPage({ go }) {
  const { Reveal, LinkArrow } = window;
  const [team, setTeam] = useStateS([]);

  React.useEffect(() => {
    fetch('/api/team')
      .then((r) => r.json())
      .then((data) => setTeam(Array.isArray(data) ? data : []))
      .catch(() => setTeam([]));
  }, []);

  return (
    <div>
      <header className="page-hero"><div className="wrap">
        <Reveal><span className="kicker">Über uns</span></Reveal>
        <Reveal delay={80}><h1 className="display" style={{ marginTop: 18, maxWidth: '16ch' }}>
          Menschen, die <span className="grad-text">Reichweite</span> schaffen.</h1></Reveal>
        <Reveal delay={140}><p className="lead mt-m" style={{ maxWidth: '52ch' }}>
          Wir sind vom grossen Marketingpotential der Sozialen Medien fest überzeugt und setzen
          Deine Ideen kreativ und strategisch geschickt um. Wir freuen uns auf Deine Kontaktaufnahme.</p></Reveal>
      </div></header>

      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        <div className="team-grid">
          {team.map((m, i) => (
            <Reveal key={m.id || m.name} delay={i * 80}><TeamCard m={m} /></Reveal>
          ))}
        </div>
      </div></section>

      {/* VALUES */}
      <section className="section band"><div className="wrap">
        <Reveal><span className="kicker">Haltung</span>
          <h2 className="section-title" style={{ marginTop: 16, maxWidth: '18ch' }}>Kreativ im Kopf, strategisch im Plan.</h2></Reveal>
        <div className="grid mt-l" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
          {[
            { t: 'Strategisch', d: 'Jeder Post folgt einem Ziel. Wir denken in Zielgruppen, nicht in Zufällen.' },
            { t: 'Kreativ', d: 'Content, der auffällt: Bild, Video und Grafik mit Handschrift.' },
            { t: 'Nahbar', d: 'Persönliche Betreuung statt anonymer Agentur — wir sind erreichbar.' },
          ].map((v, i) => (
            <Reveal key={v.t} delay={i * 90} className="card">
              <div className="idx">{String(i + 1).padStart(2, '0')}</div>
              <h3 style={{ marginTop: 8, textTransform: 'uppercase' }}>{v.t}</h3>
              <p className="small mt-s" style={{ color: 'var(--text-soft)' }}>{v.d}</p>
            </Reveal>
          ))}
        </div>
        <div className="mt-l"><LinkArrow onClick={() => go('kontakt')}>Zusammenarbeiten</LinkArrow></div>
      </div></section>
      <window.CTAband go={go} />
    </div>
  );
}

/* ============ SCHULUNGEN ============ */
const COURSES = [
  { t: 'Social Media Basics', d: 'Plattformen, Algorithmen und die Grundlagen für einen souveränen Auftritt.', lvl: 'Einstieg' },
  { t: 'Content Creation Workshop', d: 'Foto, Video und Grafik selbst produzieren — mit dem, was Du schon im Sack hast.', lvl: 'Praxis' },
  { t: 'Strategie & Redaktionsplanung', d: 'Vom Ziel zum Redaktionsplan: planbar statt aus dem Bauch heraus posten.', lvl: 'Fortgeschritten' },
  { t: 'Individuelle Inhouse-Schulung', d: 'Massgeschneidert auf Dein Team, Deine Branche und Deine Plattformen.', lvl: 'Auf Anfrage' },
];

function SchulungenPage({ go }) {
  const { Reveal, Btn, LinkArrow } = window;
  return (
    <div>
      <header className="page-hero"><div className="wrap two-col" style={{ alignItems: 'end' }}>
        <div>
          <Reveal><span className="kicker">Schulungen & Kurse</span></Reveal>
          <Reveal delay={80}><h1 className="display" style={{ marginTop: 18 }}>
            Selber<br /><span className="grad-text">sichtbar</span> werden.</h1></Reveal>
        </div>
        <Reveal delay={140}><p className="lead">
          Du möchtest Social Media selbst in die Hand nehmen? Wir machen Dich und Dein Team fit —
          praxisnah, verständlich und auf Deine Bedürfnisse zugeschnitten.</p>
          <div className="mt-m"><Btn onClick={() => go('kontakt')}>Kurs anfragen</Btn></div>
        </Reveal>
      </div></header>

      <section className="section" style={{ paddingTop: 'clamp(20px,4vw,48px)' }}><div className="wrap">
        <div className="grid" style={{ gridTemplateColumns: 'repeat(2,1fr)' }}>
          {COURSES.map((c, i) => (
            <Reveal key={c.t} delay={(i % 2) * 90} className="card">
              <div className="flex" style={{ justifyContent: 'space-between', alignItems: 'start' }}>
                <div className="ic" style={{ background: 'var(--holo)' }}><span style={{ fontWeight: 900, color: '#1a1a1a' }}>#</span></div>
                <span className="pill">{c.lvl}</span>
              </div>
              <h3 style={{ textTransform: 'uppercase', marginTop: 4 }}>{c.t}</h3>
              <p className="small mt-s" style={{ color: 'var(--text-soft)' }}>{c.d}</p>
            </Reveal>
          ))}
        </div>
        <div className="mt-l"><LinkArrow onClick={() => go('kontakt')}>Nicht das Richtige dabei? Frag uns.</LinkArrow></div>
      </div></section>
      <window.CTAband go={go} />
    </div>
  );
}

/* ============ KONTAKT ============ */
function KontaktPage({ go }) {
  const { Reveal, Btn, submitContact } = window;
  const [f, setF] = useStateS({ name: '', mail: '', msg: '', honeypot: '' });
  const [sent, setSent] = useStateS(false);
  const [sending, setSending] = useStateS(false);
  const [err, setErr] = useStateS({});
  const [serverError, setServerError] = useStateS('');
  const upd = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!f.name.trim()) er.name = 1;
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.mail)) er.mail = 1;
    if (!f.msg.trim()) er.msg = 1;
    setErr(er);
    setServerError('');
    if (Object.keys(er).length) return;
    setSending(true);
    const result = await submitContact({ name: f.name, mail: f.mail, msg: f.msg, honeypot: f.honeypot });
    setSending(false);
    if (result.ok) setSent(true);
    else setServerError(result.error);
  };
  return (
    <div>
      <header className="page-hero"><div className="wrap">
        <Reveal><span className="kicker">Kontakt</span></Reveal>
        <Reveal delay={80}><h1 className="display" style={{ marginTop: 18, maxWidth: '15ch' }}>
          Lass uns <span className="grad-text">reden</span>.</h1></Reveal>
      </div></header>

      <section className="section" style={{ paddingTop: 'clamp(20px,3vw,40px)' }}><div className="wrap two-col" style={{ alignItems: 'start' }}>
        <Reveal>
          {sent ? (
            <div className="card" style={{ borderColor: 'transparent', boxShadow: '0 22px 50px -26px var(--holo-peri)' }}>
              <div className="ic" style={{ background: 'var(--holo)' }}><span style={{ fontWeight: 900, color: '#1a1a1a', fontSize: 22 }}>✓</span></div>
              <h3 style={{ textTransform: 'uppercase' }}>Merci, {f.name.split(' ')[0]}!</h3>
              <p className="small mt-s" style={{ color: 'var(--text-soft)' }}>
                Deine Nachricht ist angekommen. Wir melden uns so schnell wie möglich.</p>
              <div className="mt-m"><Btn variant="outline" arrow={false} onClick={() => { setSent(false); setF({ name: '', mail: '', msg: '' }); }}>Neue Nachricht</Btn></div>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div className="field">
                <input id="n" value={f.name} onChange={upd('name')} placeholder=" "
                  style={err.name ? { borderColor: 'var(--holo-pink)' } : {}} />
                <label htmlFor="n">Name</label>
              </div>
              <div className="field">
                <input id="m" type="email" value={f.mail} onChange={upd('mail')} placeholder=" "
                  style={err.mail ? { borderColor: 'var(--holo-pink)' } : {}} />
                <label htmlFor="m">E-Mail</label>
              </div>
              <div className="field">
                <textarea id="msg" value={f.msg} onChange={upd('msg')} placeholder=" "
                  style={err.msg ? { borderColor: 'var(--holo-pink)' } : {}}></textarea>
                <label htmlFor="msg">Nachricht</label>
              </div>
              {/* Honeypot — für Menschen unsichtbar, Bots füllen es oft blind aus (Security-Standards §7) */}
              <input type="text" name="website" value={f.honeypot} onChange={upd('honeypot')} tabIndex="-1" autoComplete="off"
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
              {serverError && <p className="small mt-s" style={{ color: 'var(--holo-pink)' }}>{serverError}</p>}
              <Btn>{sending ? 'Wird gesendet…' : 'Anfragen'}</Btn>
            </form>
          )}
        </Reveal>
        <Reveal delay={120}>
          <div className="kicker">Direkt</div>
          <a href="mailto:info@be-visible.ch" className="h-mail" style={{ display: 'block', fontSize: 'clamp(22px,3vw,34px)', fontWeight: 800, marginTop: 14 }}>info@be-visible.ch</a>
          <hr className="divider" style={{ margin: '28px 0' }} />
          <div className="kicker">Adresse</div>
          <p className="mt-s" style={{ color: 'var(--text-soft)' }}>
            bevisible GmbH<br />Hans Huber-Strasse 38<br />CH-4500 Solothurn</p>
          <hr className="divider" style={{ margin: '28px 0' }} />
          <div className="kicker">Folgen</div>
          <div className="team-socials mt-s">
            <window.Social label="Instagram" /><window.Social label="Facebook" /><window.Social label="LinkedIn" />
          </div>
        </Reveal>
      </div></section>
    </div>
  );
}

Object.assign(window, { ProjektePage, UeberUnsPage, SchulungenPage, KontaktPage });