/* home.jsx — Startseite */
const { useState: useStateH, useEffect: useEffectHm, useRef: useRefHm } = React;

const TEAM_PHOTO = 'https://be-visible.ch/wp-content/uploads/2023/09/neues-gruppenbild--scaled.jpg';

const HERO_WORD = 'Bevisible';
/* Drei Claim-Sätze, nacheinander eingeblendet — Schlüsselwort holo-unterstrichen. */
const CLAIM_LINES = [
  { pre: 'Wir machen Dich ', key: 'sichtbar', post: '.' },
  { pre: 'Wir erreichen Deine ', key: 'Zielgruppe', post: '.' },
  { pre: 'Wir machen Dich ', key: 'unverwechselbar', post: '.' }];

function ClaimRotator({ lines, interval = 3200 }) {
  const [i, setI] = useStateH(0);
  useEffectHm(() => {
    if (document.documentElement.getAttribute('data-motion') === '0') return;
    const t = setInterval(() => setI((v) => (v + 1) % lines.length), interval);
    return () => clearInterval(t);
  }, []);
  const l = lines[i];
  return (
    <span className="claim-rot">
      <span key={i} className="word-rot__in">{l.pre}<span className="u">{l.key}</span>{l.post}</span>
    </span>);
}

/* Cineastischer Einstieg: Teamfoto fix im Hintergrund, restlicher Inhalt
   schiebt sich beim Scrollen sauber darüber. Titel steigt weg + blendet aus.
   Zusätzlich: Cursor-getriebene 3D-Tiefe (Parallaxe) + Ambient-Float. */
function Cover({ go }) {
  const { Btn, FloatingSocials } = window;
  const photoRef = useRefHm(null),contentRef = useRefHm(null),cueRef = useRefHm(null),tiltRef = useRefHm(null);
  useEffectHm(() => {
    let raf = 0,mx = 0,my = 0,tmx = 0,tmy = 0;
    const onMove = (e) => {
      const w = window.innerWidth || 1,h = window.innerHeight || 1;
      tmx = (e.clientX / w - 0.5) * 2;
      tmy = (e.clientY / h - 0.5) * 2;
    };
    const onLeave = () => {tmx = 0;tmy = 0;};
    const loop = () => {
      const motionOff = document.documentElement.getAttribute('data-motion') === '0';
      const gx = motionOff ? 0 : tmx,gy = motionOff ? 0 : tmy;
      mx += (gx - mx) * 0.06;my += (gy - my) * 0.06;
      const vh = window.innerHeight || 1;
      const p = Math.min(1, Math.max(0, window.scrollY / vh));
      if (photoRef.current) photoRef.current.style.transform = `scale(${1 + 0.12 * p}) translate3d(${mx * -14}px, ${my * -10}px, 0)`;
      if (contentRef.current) {
        contentRef.current.style.transform = `translateY(${-70 * p}px)`;
        contentRef.current.style.opacity = String(1 - Math.min(1, p * 1.5));
      }
      if (tiltRef.current) tiltRef.current.style.transform = `rotateX(${my * -5}deg) rotateY(${mx * 7}deg) translate3d(${mx * 18}px, ${my * 13}px, 0)`;
      if (cueRef.current) cueRef.current.style.opacity = String(Math.max(0, 1 - p * 3.5));
      raf = requestAnimationFrame(loop);
    };
    window.addEventListener('pointermove', onMove, { passive: true });
    window.addEventListener('pointerleave', onLeave);
    raf = requestAnimationFrame(loop);
    // Fail-Open: nach dem Einflug Buchstaben fest sichtbar machen (Capture-/Snapshot-sicher)
    const lock = setTimeout(() => {
      document.querySelectorAll('.hero-word .hl').forEach((el) => {
        el.style.animation = 'none';el.style.opacity = '1';el.style.transform = 'none';el.style.filter = 'none';
      });
    }, 2600);
    return () => {cancelAnimationFrame(raf);clearTimeout(lock);window.removeEventListener('pointermove', onMove);window.removeEventListener('pointerleave', onLeave);};
  }, []);
  return (
    <div className="intro">
      <div className="intro-fixed">
        <div className="cover-photo" ref={photoRef}>
          <div className="ph-fallback"></div>
        </div>
        <div className="cover-scrim"></div>
        <div className="cover-content" ref={contentRef}>
          <FloatingSocials />
          <div className="hero-stage">
            <div className="hero-tilt" ref={tiltRef}>
              <div className="hero-floaty">
                <h1 className="hero-word">
                  <span className="hero-hash">#</span>
                  <span className="hero-word-text">
                    <span className="hwt-shine" aria-hidden="true">{HERO_WORD}</span>
                    {HERO_WORD.split('').map((ch, idx) =>
                    <span className="hl" style={{ '--i': idx }} key={idx}>{ch}</span>
                    )}
                  </span>
                </h1>
                <p className="hero-claim"><ClaimRotator lines={CLAIM_LINES} /></p>
              </div>
            </div>
          </div>
        </div>
        <div className="scroll-cue" ref={cueRef}>
          <span>Scrollen</span>
          <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </div>
      <div className="intro-spacer"></div>
    </div>);
}

const SERVICES = [
{ t: 'Social-Media-Strategie', d: 'Zielgruppen, Plattform-Mix und Redaktionsplan — strategisch durchdacht statt aus dem Bauch heraus.' },
{ t: 'Content Creation', d: 'Bild, Video und Grafik aus einer Hand. Wir verschaffen Deinem Auftritt ein ansprechendes Gesicht.' },
{ t: 'Kampagnenmanagement', d: 'Von der Idee bis zur Auswertung: zielgruppengerechte Kampagnen, die messbar wirken.' },
{ t: 'Community Management', d: 'Wir pflegen den Dialog mit Deiner Community — nahbar, schnell und immer on-brand.' },
{ t: 'Politische Kommunikation', d: 'Erfahrung aus Politik & Kampagnen: Botschaften, die ankommen und Menschen vernetzen.' },
{ t: 'Schulungen & Kurse', d: 'Wir machen Dich und Dein Team fit für die Sozialen Medien — praxisnah und individuell.' }];


/* Bento-Karten für die Leistungen-Sektion */
const BENTO = [
{ k: 'strategie', t: 'Social Media Strategie', d: 'In einem gemeinsamen Workshop eruieren wir Deine Ziele, Zielgruppe und Werte. Im Anschluss erarbeiten wir Deine praxisnahe Social-Media-Strategie.', icon: 'crosshair', wm: 'Strategie', variant: 'v-holo', area: 'c-konzept', to: 'kontakt' },
{ k: 'content', t: 'Content Creation', d: 'Ob Bilder, Grafiken, Videos oder Texte – wir befüllen Deine Kanäle mit Leben.', icon: 'image', variant: 'v-light', area: 'c-content', to: 'kontakt' },
{ k: 'betreuung', t: 'Posting & Kanalbetreuung', d: 'Wir übernehmen entweder die komplette Betreuung Deiner Kanäle oder unterstützen Dich, wo gewünscht.', icon: 'spark', variant: 'v-lavender', area: 'c-betreuung', to: 'kontakt' },
{ k: 'schulung', t: 'Schulungen', d: 'Wir zeigen Dir und Deinem Team in praxisnahen Workshops, wie ihr eure Kanäle gewinnbringend nutzen könnt.', icon: 'cap', variant: 'v-blush', area: 'c-schulung', to: 'schulungen' },
{ k: 'ads', t: 'Bezahlte Kampagnen', d: 'Möchtest Du Deine Marke bekannter machen, offene Stellen besetzen oder Produkte und Dienstleistungen verkaufen? Wir unterstützen Dich dabei.', icon: 'send', wm: 'Ads', variant: 'v-dark', area: 'c-ads', to: 'kontakt' }];


function SvcIcon({ name }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const s = 24;
  switch (name) {
    case 'crosshair':return <svg width={s} height={s} viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" {...p} /><path d="M12 3.5v17M3.5 12h17" {...p} /></svg>;
    case 'image':return <svg width={s} height={s} viewBox="0 0 24 24"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5" {...p} /><circle cx="9" cy="10" r="1.5" {...p} /><path d="M5 17.5l4.5-5 3.2 2.8 3-2.5L19 17.5" {...p} /></svg>;
    case 'cap':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M12 4.5l9 4-9 4-9-4 9-4Z" {...p} /><path d="M6.5 10.2v4.6c0 1 2.5 2.4 5.5 2.4s5.5-1.4 5.5-2.4v-4.6" {...p} /></svg>;
    case 'home':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M4 10.5 12 4l8 6.5" {...p} /><path d="M6 9.5V20h12V9.5" {...p} /><path d="M10 20v-5h4v5" {...p} /></svg>;
    case 'spark':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4" {...p} /></svg>;
    case 'send':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M20.5 3.5 3.5 10.8l7.2 2.5 2.5 7.2 7.3-17Z" {...p} /></svg>;
    default:return null;
  }
}


const STEPS = [
{ n: '01', t: 'Kennenlernen', ic: 'chat', d: 'Wir verstehen Deine Ziele, Deine Marke und Deine Zielgruppe.' },
{ n: '02', t: 'Strategie', ic: 'compass', d: 'Plattform-Mix, Tonalität und Redaktionsplan — massgeschneidert.' },
{ n: '03', t: 'Umsetzung', ic: 'pen', d: 'Content Creation, Community Management und laufende Betreuung.' },
{ n: '04', t: 'Wachstum', ic: 'trend', d: 'Auswertung, Optimierung und nachhaltige Reichweite.' }];

function StepIcon({ name }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const s = 30;
  switch (name) {
    case 'chat':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M4 5.5h12.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H9l-4 3.2V14.5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" {...p} /><path d="M7.5 9.2h6M7.5 11.6h3.6" {...p} /></svg>;
    case 'compass':return <svg width={s} height={s} viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" {...p} /><path d="M15.4 8.6 13 13l-4.4 2.4L11 11l4.4-2.4Z" {...p} /></svg>;
    case 'pen':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M14.5 5.6 18.4 9.5M4.5 19.5l.9-3.7L15 6.2a1.6 1.6 0 0 1 2.3 0l.5.5a1.6 1.6 0 0 1 0 2.3L8.2 18.6l-3.7.9Z" {...p} /></svg>;
    case 'trend':return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M4 15.5 9 10.5l3 3 6-6.5" {...p} /><path d="M14 7h4v4" {...p} /></svg>;
    default:return null;
  }
}


/* ---- Interaktive Reels im gefächerten Phone-Stack ---- */
const REELS = [
{ handle: '@classicgamestore', cap: 'Retro Gaming, neu erzählt 🎮 #classicgamestore', likes: 18243, comments: '934', shares: '421', live: false },
{ handle: '@bevisible_agentur', cap: 'Behind the Scenes 💡 #bevisible', likes: 24800, comments: '1.2K', shares: '892', live: true },
{ handle: '@fdp_solothurn', cap: 'Wahlkampf, der bewegt 🗳️ #fdpso', likes: 12410, comments: '608', shares: '310', live: false }];

const SLOTS = [
{ x: 0, y: 0, rot: 0, sc: 1, z: 3 }, // front
{ x: 66, y: 26, rot: 8, sc: 0.9, z: 1 }, // right back
{ x: -66, y: 26, rot: -8, sc: 0.9, z: 2 } // left back
];
function fmt(n) {return n >= 1000 ? (n / 1000).toFixed(1) + 'K' : String(n);}

function Phone({ data, slot, isFront, onPick, idx }) {
  const { useState, useRef, useEffect } = React;
  const [playing, setPlaying] = useState(false);
  const [liked, setLiked] = useState(false);
  const s = SLOTS[slot];
  return (
    <div className={`phone ${isFront ? 'is-front' : 'is-back'}`}
    style={{ transform: `translate(-50%,-50%) translate(${s.x}px,${s.y}px) rotate(${s.rot}deg) scale(${s.sc})`, zIndex: s.z }}
    onClick={() => {if (!isFront) onPick(idx);}}>
      <div className="phone-frame">
        <div className={`phone-screen g${idx}`}>
          <span className="island"></span>
          {data.live && <span className="reel-live">LIVE</span>}
          <button className="reel-play" aria-label="Abspielen"
          onClick={(e) => {e.stopPropagation();if (isFront) setPlaying((p) => !p);}}>
            {playing ?
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1" /><rect x="14" y="5" width="4" height="14" rx="1" /></svg> :
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>}
          </button>
          <div className="reel-rail">
            <button className={`reel-btn ${liked ? 'liked' : ''}`} aria-label="Gefällt mir"
            onClick={(e) => {e.stopPropagation();if (isFront) setLiked((l) => !l);}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill={liked ? '#fff' : 'none'} stroke="#fff" strokeWidth="2"><path d="M12 21s-7.5-4.6-10-9.3C.3 8.4 2 5 5.3 5c2 0 3.3 1.1 4.2 2.3l.5.7.5-.7C11.4 6.1 12.7 5 14.7 5 18 5 19.7 8.4 22 11.7 19.5 16.4 12 21 12 21z" /></svg>
            </button>
            <span className="reel-cnt">{fmt(data.likes + (liked ? 1 : 0))}</span>
            <button className="reel-btn" aria-label="Kommentare" onClick={(e) => e.stopPropagation()}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><path d="M21 11.5a8.4 8.4 0 01-11.9 7.6L3 21l1.9-6A8.4 8.4 0 1121 11.5z" strokeLinejoin="round" /></svg>
            </button>
            <span className="reel-cnt">{data.comments}</span>
            <button className="reel-btn" aria-label="Teilen" onClick={(e) => e.stopPropagation()}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
            <span className="reel-cnt">{data.shares}</span>
          </div>
          <div className="reel-meta">
            <div className="reel-handle">{data.handle}</div>
            <div className="reel-cap">{data.cap}</div>
          </div>
          <div className={`reel-prog ${playing ? 'playing' : ''}`}><i></i></div>
        </div>
      </div>
    </div>);

}

function PhoneStack() {
  const { useState } = React;
  const [active, setActive] = useState(1);
  return (
    <div className="pstack" aria-label="Interaktive Projekt-Reels">
      {REELS.map((r, i) => {
        const slot = (i - active + 3) % 3;
        return <Phone key={i} idx={i} data={r} slot={slot} isFront={slot === 0} onPick={setActive} />;
      })}
    </div>);

}

const CLIENTS = ['Classicgamestore', 'FDP Solothurn', 'Renteninitiative', 'Berufsbildnerverband', 'Daniel Probst'];


function HomePage({ go }) {
  const { Reveal, Btn, LinkArrow, MediaPlaceholder, Arrow, LogoBand } = window;
  return (
    <div>
      {/* CINEMATIC COVER */}
      <Cover go={go} />

      <div className="reveal-stack">
      {/* ÜBER BEVISIBLE — scroll-gedrehtes Phone */}
      <window.AboutScrolly go={go} />

      {/* LEISTUNGEN */}
      <section className="section band">
        <div className="wrap">
          <div className="eyebrow-row">
            <div>
              <span className="kicker" style={{ fontSize: "16px" }}>Unsere Expertise</span>
              <h2 className="section-title" style={{ marginTop: 16, maxWidth: '20ch' }}>
                Unser Angebot, um Dich <span className="grad-text">sichtbar</span> zu machen.
              </h2>
              <p className="lead" style={{ marginTop: 20, maxWidth: '46ch' }}>
                Wir verschaffen Dir Visibilität und Reichweite auf Social Media – durchdacht, zielgruppengerecht und visuell ansprechend.
              </p>
            </div>
            <LinkArrow onClick={() => go('kontakt')}>Kennenlerngespräch buchen</LinkArrow>
          </div>
          <div className="bento">
            {BENTO.map((b, i) =>
              <Reveal key={b.k} delay={i * 60} className={b.area}>
                <div className={`bento-card ${b.variant}`} onClick={() => go(b.to)}>
                  {b.wm && <span className="bento-wm">{b.wm}</span>}
                  <span className="bento-ic"><SvcIcon name={b.icon} /></span>
                  <span className="bento-arrow"><Arrow s={14} /></span>
                  <div className="bento-body">
                    <h3 className="bento-title">{b.t}</h3>
                    <p className="bento-desc">{b.d}</p>
                  </div>
                </div>
              </Reveal>
              )}
          </div>
        </div>
      </section>

      {/* PROZESS */}
      <section className="section">
        <div className="wrap">
          <Reveal>
            <span className="kicker" style={{ fontSize: "16px" }}>Vorgehen</span>
            <h2 className="section-title" style={{ marginTop: 16, maxWidth: '14ch' }}>In vier Schritten sichtbar</h2>
          </Reveal>
          <Reveal className="journey">
            <div className="journey-rail">
              <svg className="journey-svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="jgrad" x1="0" y1="1" x2="1" y2="0">
                    <stop offset="0%" stopColor="#8dd1f0" />
                    <stop offset="28%" stopColor="#728cc4" />
                    <stop offset="52%" stopColor="#a08bbe" />
                    <stop offset="74%" stopColor="#d396c1" />
                    <stop offset="100%" stopColor="#f9c7cc" />
                  </linearGradient>
                </defs>
                <polyline className="jline-bg" points="12.5,78 37.5,58 62.5,38 87.5,18" />
                <polyline className="jline" points="12.5,78 37.5,58 62.5,38 87.5,18" />
              </svg>
              {STEPS.map((s, i) =>
                <div key={i} className={`jnode-wrap${i === STEPS.length - 1 ? ' is-goal' : ''}`}
                  style={{ '--cx': `${12.5 + i * 25}%`, '--cy': `${78 - i * 20}%` }}>
                  <div className="jstep-node"><StepIcon name={s.ic} /></div>
                </div>
                )}
            </div>
            <div className="journey-infos">
              {STEPS.map((s, i) =>
                <div key={i} className={`jstep-info${i === STEPS.length - 1 ? ' is-goal' : ''}`}>
                  <span className="jstep-num">{s.n}</span>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                )}
            </div>
          </Reveal>
        </div>
      </section>

      {/* PROJEKTE — interaktiver Phone-Stack */}
      <section className="section band">
        <div className="wrap">
          <div className="showcase">
            <Reveal><PhoneStack /></Reveal>
            <Reveal delay={120}>
              <span className="kicker" style={{ fontSize: '15px' }}>Unsere Kunden</span>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                Projekte, die <span className="grad-text">wirken</span>.
              </h2>
              <p className="lead mt-m" style={{ maxWidth: '42ch' }}>
                Eine Auswahl unserer Arbeiten: Von politischen Kampagnen bis zu Markenauftritten
                kleiner und grosser Unternehmen.
              </p>
              <div className="client-chips mt-l">
                {CLIENTS.map((c) =>
                  <span className="client-chip" key={c}><span className="cc-dot"></span>{c}</span>
                  )}
              </div>
              <div className="mt-l">
                <Btn onClick={() => go('projekte')}>Mehr Cases ansehen</Btn>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* KUNDEN FEEDBACK */}
      <window.Testimonials />

      {/* KUNDEN-LOGO-BAND */}
      <LogoBand />

      {/* CTA */}
      <CTAband go={go} />
      </div>
    </div>);

}

function CTAband({ go }) {
  const { Reveal, Btn, Social, submitContact } = window;
  const [f, setF] = useStateH({ name: '', mail: '', msg: '', honeypot: '' });
  const [sent, setSent] = useStateH(false);
  const [sending, setSending] = useStateH(false);
  const [err, setErr] = useStateH({});
  const [serverError, setServerError] = useStateH('');
  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 (
    <section id="kontakt" className="section tcenter" style={{ position: 'relative' }}>
      <div className="wrap">
        <Reveal>
          <span className="kicker" style={{ justifyContent: 'center' }}>Bereit?</span>
          <h2 className="display" style={{ marginTop: 18, fontSize: 'clamp(40px, calc(7vw * var(--scale)), 110px)' }}>
            Werde <span className="grad-text">sichtbar</span>.
          </h2>
          <p className="lead" style={{ maxWidth: '40ch', margin: '20px auto 0' }}>
            Erzähl uns von Deinem Vorhaben — wir melden uns mit einer ersten Einschätzung.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div className="contact-embed" style={{ marginTop: 'clamp(36px,4.5vw,60px)' }}>
            <div className="contact-form">
              {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="cn" value={f.name} onChange={upd('name')} placeholder=" "
                  style={err.name ? { borderColor: 'var(--holo-pink)' } : {}} />
                    <label htmlFor="cn">Name</label>
                  </div>
                  <div className="field">
                    <input id="cm" type="email" value={f.mail} onChange={upd('mail')} placeholder=" "
                  style={err.mail ? { borderColor: 'var(--holo-pink)' } : {}} />
                    <label htmlFor="cm">E-Mail</label>
                  </div>
                  <div className="field">
                    <textarea id="cmsg" value={f.msg} onChange={upd('msg')} placeholder=" "
                  style={err.msg ? { borderColor: 'var(--holo-pink)' } : {}}></textarea>
                    <label htmlFor="cmsg">Nachricht</label>
                  </div>
                  <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>
              }
            </div>
            <div className="contact-direct">
              <div className="kicker">Direkt</div>
              <a href="mailto:info@be-visible.ch" className="h-mail" style={{ display: 'block', fontSize: 'clamp(20px,2.4vw,30px)', fontWeight: 800, marginTop: 14, color: 'rgb(26, 26, 26)' }}>info@be-visible.ch</a>
              <hr className="divider" style={{ margin: '26px 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: '26px 0' }} />
              <div className="kicker">Folgen</div>
              <div className="team-socials mt-s">
                <Social label="Instagram" /><Social label="Facebook" /><Social label="LinkedIn" />
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { HomePage, CTAband });