/* ============================================================
   Ueber mich — About Thomas Basting
   Cyan-on-dark, fits Smartmacherei brand
============================================================ */

const UM_PALETTE = {
  bg:     "#071520",
  card:   "#0D2030",
  accent: "#3ABDD0",
  soft:   "#8DDBEA",
  ink:    "#ffffff",
  muted:  "rgba(141,219,234,0.55)",
  line:   "rgba(141,219,234,0.16)",
};

const UM_TIMELINE = [
  {
    year: "Seit 2024",
    role: "Smartmacherei",
    org:  "Selbständig · Edt bei Lambach",
    body: "Smart-Home- und Gebäudeautomations-Integration für Altbau, Neubau und kleine Gewerbebetriebe. Fokus auf Home Assistant, Loxone, Energiemanagement und Netzwerk.",
    accent: true,
  },
  {
    year: "2021 — 2024",
    role: "Peneder Bau-Elemente",
    org:  "Produktentwicklung → Vertrieb",
    body: "Mitentwicklung und Markteinführung einer Türhardware-Produktlinie inkl. Smart-Home-Integration.",
  },
  {
    year: "2017 — 2021",
    role: "KUKA CEE GmbH",
    org:  "Anwendungsingenieur → Teamleiter Engineering",
    body: "Roboter-Projekte von Konzept bis Schulung. Führung des Engineering-Teams, Standardisierung von Pflichtenheften.",
  },
  {
    year: "2016 — 2017",
    role: "GTech Automatisierungstechnik",
    org:  "SPS-Programmierer",
    body: "Steuerungsentwicklung in Siemens TIA / Step 7, Funktionsprüfung und Inbetriebnahme.",
  },
  {
    year: "2014 — 2016",
    role: "TGW Mechanics GmbH",
    org:  "Inbetriebnahmeingenieur",
    body: "Europaweite Inbetriebnahme hochautomatisierter Logistikanlagen.",
  },
  {
    year: "2007 — 2013",
    role: "HTL Wels",
    org:  "Mechatronik · Schwerpunkt Automatisierung",
    body: "Technische Grundausbildung — SPS, Robotik, Elektrotechnik, CAD.",
  },
];

const UM_SKILLS = [
  { group: "Smart Building", items: ["Home Assistant", "Loxone Planung & Integration", "KNX-Grundlagen", "Matter / Thread / Zigbee"] },
  { group: "Automatisierung", items: ["SPS · SIMATIC S7 / TIA", "Industrierobotik · KUKA", "Modbus / MQTT / APIs", "Inbetriebnahme & Schulung"] },
  { group: "Energie & Netzwerk", items: ["PV / Wärmepumpe / Wallbox", "Energie-Dashboards", "UniFi / Netzwerk-Planung", "Dokumentation & Backup"] },
  { group: "Projekt & Beratung", items: ["Pflichtenheft & Anforderung", "Technische Kundenberatung", "Schnittstellenplanung", "Teamführung"] },
];

function ContactForm() {
  const [data, setData] = React.useState({
    name: '', email: '', phone: '', path: '', subject: '', message: '',
  });
  const [status, setStatus] = React.useState({ kind: 'idle', msg: '' });
  const [floorplanToken, setFloorplanToken] = React.useState(null);

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

  // Bei Splash-Auswahl ist der Pfad in localStorage. Vorbelegen, falls vorhanden.
  // Auch: floorplan-Token vom Konfigurator-Upload anzeigen.
  // Plus: Konfigurator-Summary aus localStorage in die Nachricht uebernehmen
  // wenn der User "Termin vereinbaren" geklickt hat.
  const readKfgSummary = () => {
    try {
      const summary = window.localStorage.getItem('sm-kfg-summary');
      const kfgPath = window.localStorage.getItem('sm-kfg-path');
      if (summary) {
        setData((d) => {
          const alreadyHas = d.message && d.message.includes('Konfigurator-Empfehlung');
          return {
            ...d,
            message: alreadyHas ? d.message : (
              `Hallo Thomas,\n\nich habe deinen Konfigurator durchlaufen — hier die Zusammenfassung:\n\n${summary}\n\nKönnen wir dazu einen Termin vereinbaren?`
            ),
            path: d.path || kfgPath || '',
            subject: d.subject || 'Termin-Anfrage aus Konfigurator',
          };
        });
      }
    } catch (e) { /* private mode */ }
  };

  // Paket-CTA aus PaketeSection: subject + Vorlage-Message vorbelegen.
  // force=true bei explizitem Klick (Event) -- überschreibt auch ein
  // bereits gesetztes Subject. force=false beim ersten Mount -- nur
  // wenn der User selbst noch nichts geschrieben hat.
  const readPaketSubject = (force) => {
    try {
      const subj = window.localStorage.getItem('sm-paket-subject');
      if (!subj) return;
      setData((d) => {
        if (!force && d.subject) return d;
        const intro = `Hallo Thomas,\n\nich interessiere mich für "${subj.replace(/^Paket-Anfrage:\s*/,'')}".\n\nKurz zur Ausgangssituation:\n\n\nBitte um Rückmeldung — danke!`;
        return {
          ...d,
          subject: subj,
          message: d.message ? d.message : intro,
        };
      });
    } catch (e) { /* private mode */ }
  };

  React.useEffect(() => {
    try {
      const saved = window.localStorage.getItem('sm-path');
      if (saved && !data.path) setData((d) => ({ ...d, path: saved }));
      const tok = window.localStorage.getItem('sm-floorplan-token');
      if (tok) setFloorplanToken(tok);
    } catch (e) { /* localStorage in some private modes throws */ }
    // Beim Mount Summary lesen + auf Custom-Event reagieren wenn Konfigurator
    // gerade "Termin vereinbaren" geklickt hat (Form ist evtl. schon im DOM).
    readKfgSummary();
    // Paket-CTA prefill (sofort + auf Click-Event aus PaketCard).
    readPaketSubject(false);
    const handler = () => readKfgSummary();
    const paketHandler = () => readPaketSubject(true);
    window.addEventListener('sm-kfg-summary-updated', handler);
    window.addEventListener('sm-paket-cta', paketHandler);
    return () => {
      window.removeEventListener('sm-kfg-summary-updated', handler);
      window.removeEventListener('sm-paket-cta', paketHandler);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // UTM-Attribution aus localStorage (von track.js gesetzt) holen.
  // Wird mit jeder Anfrage mitgesendet, damit Conversions Kampagnen
  // zugeordnet werden koennen.
  const readAttribution = () => {
    try {
      const raw = window.localStorage.getItem('sm-attr');
      if (!raw) return {};
      const a = JSON.parse(raw);
      const out = {};
      ['utm_source','utm_medium','utm_campaign','utm_content','utm_term'].forEach((k) => {
        if (a[k]) out[k] = a[k];
      });
      if (a.landing) out.landing_page = a.landing;
      return out;
    } catch (e) { return {}; }
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!data.name.trim() || !data.email.trim() || !data.message.trim()) {
      setStatus({ kind: 'err', msg: 'Bitte Name, E-Mail und Nachricht ausfüllen.' });
      return;
    }
    setStatus({ kind: 'sending', msg: '' });
    try {
      const payload = {
        ...data,
        ...readAttribution(),
        source: 'website-kontakt',
        sentAt: new Date().toISOString(),
        userAgent: navigator.userAgent,
      };
      if (floorplanToken) payload.floorplan_token = floorplanToken;

      const r = await fetch('/api/anfrage', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      const json = await r.json().catch(() => ({}));
      setStatus({
        kind: 'ok',
        msg: json.message
          + (json.floorplan_attached ? ' Dein Plan wurde mitgeschickt.' : ''),
      });
      setData({ name: '', email: '', phone: '', path: '', subject: '', message: '' });
      // Token nach erfolgreichem Versand lokal entfernen -- Server hat den Plan
      // bereits geloescht (DSGVO). Auch den Konfigurator-Summary kicken.
      try {
        window.localStorage.removeItem('sm-floorplan-token');
        window.localStorage.removeItem('sm-kfg-summary');
        window.localStorage.removeItem('sm-kfg-path');
      } catch (e) {}
      setFloorplanToken(null);

      // Conversion an Marketing-Pixel + eigenes Reichweiten-Logging
      // schicken — beide ruhen still wenn Consent fehlt bzw. DNT gesetzt ist.
      try {
        if (typeof window.smConvert === 'function') {
          window.smConvert('lead', { content_category: data.path || 'unknown' });
        }
        if (navigator.sendBeacon) {
          const ev = JSON.stringify({
            event: 'conversion',
            path: location.pathname,
            ...readAttribution(),
          });
          navigator.sendBeacon('/api/track', new Blob([ev], { type: 'application/json' }));
        }
      } catch (e) { /* fail-quiet */ }
    } catch (err) {
      setStatus({
        kind: 'err',
        msg: 'Senden hat gerade nicht geklappt. Schreib mir bitte direkt an thobasting@gmail.com.',
      });
    }
  };

  const sending = status.kind === 'sending';

  return (
    <div className="um-form-section">
      <div className="um-form-head">
        <h4>Anfrage schicken</h4>
        <span className="hint">Antwort in 2 Werktagen</span>
      </div>
      <form className="um-form" onSubmit={submit} noValidate>
        <div className="um-field">
          <label htmlFor="cf-name">Name</label>
          <input id="cf-name" type="text" autoComplete="name" required
                 value={data.name} onChange={set('name')} disabled={sending} />
        </div>
        <div className="um-field">
          <label htmlFor="cf-email">E-Mail</label>
          <input id="cf-email" type="email" autoComplete="email" required
                 value={data.email} onChange={set('email')} disabled={sending} />
        </div>
        <div className="um-field">
          <label htmlFor="cf-phone">Telefon (optional)</label>
          <input id="cf-phone" type="tel" autoComplete="tel"
                 value={data.phone} onChange={set('phone')} disabled={sending} />
        </div>
        <div className="um-field">
          <label htmlFor="cf-path">Projekt-Typ</label>
          <select id="cf-path" value={data.path} onChange={set('path')} disabled={sending}>
            <option value="">— bitte wählen —</option>
            <option value="altbau">Altbau · Bestand nachrüsten</option>
            <option value="neubau">Neubau · KNX-Vollintegration</option>
            <option value="gewerbe">Gewerbe · Büro/Werkstatt/Praxis</option>
            <option value="sonstiges">Sonstiges</option>
          </select>
        </div>
        <div className="um-field col-2">
          <label htmlFor="cf-subject">Betreff (optional)</label>
          <input id="cf-subject" type="text"
                 value={data.subject} onChange={set('subject')} disabled={sending} />
        </div>
        <div className="um-field col-2">
          <label htmlFor="cf-message">Nachricht</label>
          <textarea id="cf-message" required
                    value={data.message} onChange={set('message')} disabled={sending}
                    placeholder="Worum geht's? Was ist die Ausgangssituation, was soll smart werden?" />
        </div>
        {floorplanToken && status.kind !== 'ok' && (
          <div className="um-form-status ok" style={{ gridColumn: 'span 2' }}>
            ✓ Bauplan aus dem Konfigurator wird mit der Anfrage mitgeschickt
            ({' '}
            <button
              type="button"
              onClick={() => {
                try { window.localStorage.removeItem('sm-floorplan-token'); } catch (e) {}
                setFloorplanToken(null);
              }}
              style={{ background: 'transparent', border: 0, cursor: 'pointer',
                       color: 'inherit', textDecoration: 'underline', padding: 0 }}>
              entfernen
            </button>
            {' '})
          </div>
        )}
        {status.kind === 'ok' && <div className="um-form-status ok">{status.msg}</div>}
        {status.kind === 'err' && <div className="um-form-status err">{status.msg}</div>}
        <div className="um-form-foot">
          <span className="legal">
            Mit dem Absenden stimmst du zu, dass deine Angaben zur Beantwortung der Anfrage
            verarbeitet werden. Details in der{' '}
            <a href="datenschutz.html" target="_blank" rel="noopener"
               style={{ color: UM_PALETTE.accent, textDecoration: 'underline' }}>
              Datenschutzerklärung
            </a>. Keine Weitergabe an Dritte.
          </span>
          <button type="submit" className="um-submit" disabled={sending}>
            {sending ? 'Wird gesendet …' : 'Anfrage senden'}
          </button>
        </div>
      </form>
    </div>
  );
}

function UeberMichSection() {
  return (
    <section id="ueber" className="um-section">
      <style>{`
        .um-section{ position: relative; padding: 140px 60px 120px; background: ${UM_PALETTE.bg}; color: ${UM_PALETTE.ink}; overflow: hidden; }
        .um-section::before{
          content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px;
          background: radial-gradient(circle, rgba(58,189,208,0.08) 0%, transparent 70%);
          pointer-events: none;
        }
        .um-container{ max-width: 1280px; margin: 0 auto; position: relative; }

        .um-eyebrow{
          display: inline-flex; align-items: center; gap: 8px;
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: ${UM_PALETTE.accent}; letter-spacing: 0.2em; text-transform: uppercase;
          margin-bottom: 18px;
        }
        .um-eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: ${UM_PALETTE.accent};
          box-shadow: 0 0 0 4px rgba(58,189,208,0.18); }
        .um-h1{
          font-family: 'Outfit', sans-serif; font-size: clamp(36px, 4.6vw, 60px);
          font-weight: 500; letter-spacing: -0.025em; line-height: 1.05;
          margin: 0 0 12px;
        }
        .um-h1 em{ font-style: normal; color: ${UM_PALETTE.accent}; }
        .um-h2{
          font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 500;
          letter-spacing: -0.01em; margin: 0 0 18px;
        }

        /* Top: portrait + bio */
        .um-top{
          display: grid; grid-template-columns: 380px 1fr; gap: 64px;
          align-items: start; margin-bottom: 100px;
        }
        .um-portrait-wrap{ position: relative; padding: 14px 14px 14px 0; }
        .um-portrait-frame{
          position: absolute; top: 0; right: 0; bottom: 28px; left: 14px;
          border: 1px solid ${UM_PALETTE.accent};
          border-radius: 4px; pointer-events: none;
          opacity: 0.7; z-index: 0;
        }
        .um-portrait{
          position: relative; z-index: 1;
          width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
          border-radius: 4px; filter: grayscale(0.05) contrast(1.02);
          box-shadow: 0 30px 80px rgba(0,0,0,0.45);
          background: ${UM_PALETTE.card};
        }
        .um-portrait-tag{
          position: absolute; bottom: 0; left: calc(50% - 7px); transform: translateX(-50%);
          background: ${UM_PALETTE.bg}; border: 1px solid ${UM_PALETTE.line};
          padding: 8px 16px; border-radius: 100px;
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.soft}; letter-spacing: 0.18em; text-transform: uppercase;
          white-space: nowrap; z-index: 2;
        }

        .um-bio{ }
        .um-bio .lede{
          font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 400;
          line-height: 1.35; letter-spacing: -0.01em;
          color: ${UM_PALETTE.ink}; margin: 0 0 28px;
        }
        .um-bio p{
          font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 1.65;
          color: ${UM_PALETTE.soft}; opacity: 0.85; margin: 0 0 18px;
          max-width: 60ch;
        }
        .um-bio .signature{
          margin-top: 28px; display: flex; align-items: center; gap: 14px;
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: ${UM_PALETTE.muted}; letter-spacing: 0.1em; text-transform: uppercase;
        }
        .um-bio .sig-line{ flex: 0 0 36px; height: 1px; background: ${UM_PALETTE.accent}; }

        /* Pull-quote: hebt den Home-Assistant-Absatz visuell hervor */
        .um-pullquote{
          position: relative;
          margin: 26px 0 22px;
          padding: 24px 28px 26px 32px;
          background: linear-gradient(135deg, rgba(58,189,208,0.10), rgba(58,189,208,0.02) 70%);
          border: 1px solid rgba(58,189,208,0.30);
          border-left: 3px solid ${UM_PALETTE.accent};
          border-radius: 6px;
          max-width: 64ch;
        }
        .um-pullquote::before{
          content: "“";
          position: absolute; top: -8px; left: 18px;
          font-family: 'Outfit', serif; font-size: 56px; line-height: 1;
          color: ${UM_PALETTE.accent}; opacity: 0.5; pointer-events: none;
        }
        .um-pullquote-eyebrow{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: ${UM_PALETTE.accent}; margin-bottom: 10px;
          display: inline-flex; align-items: center; gap: 8px;
        }
        .um-pullquote-eyebrow::before{
          content: ""; display: inline-block; width: 18px; height: 1px;
          background: ${UM_PALETTE.accent}; opacity: 0.7;
        }
        .um-pullquote p{
          font-family: 'Outfit', sans-serif !important;
          font-size: 17.5px !important; line-height: 1.55 !important;
          color: ${UM_PALETTE.ink} !important; opacity: 1 !important;
          margin: 0 !important; font-weight: 400; letter-spacing: -0.005em;
          max-width: none !important;
        }
        .um-pullquote p strong{ color: ${UM_PALETTE.accent}; font-weight: 600; }

        .um-quickfacts{
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 1px; background: ${UM_PALETTE.line};
          border: 1px solid ${UM_PALETTE.line};
          margin-top: 36px;
        }
        .um-qf{ background: ${UM_PALETTE.card}; padding: 18px 16px; }
        .um-qf .num{
          font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 400;
          line-height: 1; color: ${UM_PALETTE.accent};
        }
        .um-qf .num .u{ font-size: 13px; color: ${UM_PALETTE.muted};
          margin-left: 4px; font-family: 'JetBrains Mono', monospace; }
        .um-qf .lbl{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.muted}; text-transform: uppercase;
          letter-spacing: 0.12em; margin-top: 10px;
        }

        /* Career timeline */
        .um-career{ margin-bottom: 100px; }
        .um-tl{ position: relative; padding-left: 32px; }
        .um-tl::before{
          content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
          width: 1px; background: ${UM_PALETTE.line};
        }
        .um-tl-row{ position: relative; padding: 0 0 36px 0; }
        .um-tl-row:last-child{ padding-bottom: 0; }
        .um-tl-row::before{
          content: ""; position: absolute; left: -32px; top: 6px;
          width: 15px; height: 15px; border-radius: 50%;
          background: ${UM_PALETTE.bg}; border: 1px solid ${UM_PALETTE.line};
        }
        .um-tl-row.accent::before{
          border-color: ${UM_PALETTE.accent};
          background: ${UM_PALETTE.accent};
          box-shadow: 0 0 0 5px rgba(58,189,208,0.18);
        }
        .um-tl-grid{ display: grid; grid-template-columns: 130px 1fr; gap: 32px; align-items: baseline; }
        .um-tl-year{
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: ${UM_PALETTE.accent}; letter-spacing: 0.12em;
          padding-top: 4px;
        }
        .um-tl-row:not(.accent) .um-tl-year{ color: ${UM_PALETTE.muted}; }
        .um-tl-role{
          font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 500;
          color: ${UM_PALETTE.ink}; letter-spacing: -0.01em; margin: 0 0 4px;
        }
        .um-tl-org{
          font-family: 'Inter', sans-serif; font-size: 13px;
          color: ${UM_PALETTE.muted}; margin: 0 0 10px;
        }
        .um-tl-body{
          font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
          color: ${UM_PALETTE.soft}; opacity: 0.8; margin: 0; max-width: 60ch;
        }

        /* Skills */
        .um-skills{ margin-bottom: 100px; }
        .um-skills-grid{
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 1px; background: ${UM_PALETTE.line};
          border: 1px solid ${UM_PALETTE.line};
        }
        .um-skill-block{ background: ${UM_PALETTE.card}; padding: 28px 24px; }
        .um-skill-block .sh{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.accent}; letter-spacing: 0.18em;
          text-transform: uppercase; margin-bottom: 18px;
        }
        .um-skill-block ul{ list-style: none; padding: 0; margin: 0;
          display: flex; flex-direction: column; gap: 10px; }
        .um-skill-block li{
          font-family: 'Inter', sans-serif; font-size: 14px;
          color: ${UM_PALETTE.ink}; opacity: 0.92;
          display: flex; align-items: center; gap: 10px;
        }
        .um-skill-block li::before{
          content: ""; width: 4px; height: 4px; border-radius: 50%;
          background: ${UM_PALETTE.accent}; flex-shrink: 0;
        }

        /* Contact */
        #kontakt{ scroll-margin-top: 100px; }
        .um-contact{
          background: linear-gradient(135deg, ${UM_PALETTE.card} 0%, rgba(58,189,208,0.04) 100%);
          border: 1px solid ${UM_PALETTE.line};
          border-radius: 4px; padding: 56px 52px;
          display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
          align-items: center;
        }
        .um-contact-left h3{
          font-family: 'Outfit', sans-serif; font-size: 36px; font-weight: 500;
          letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px;
        }
        .um-contact-left h3 em{ font-style: normal; color: ${UM_PALETTE.accent}; }
        .um-contact-left p{
          font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6;
          color: ${UM_PALETTE.soft}; opacity: 0.85; margin: 0;
          max-width: 50ch;
        }
        .um-contact-right{ display: flex; flex-direction: column; gap: 12px; }
        .um-contact-row{
          display: flex; align-items: center; gap: 14px;
          padding: 16px 18px; border: 1px solid ${UM_PALETTE.line};
          border-radius: 6px; text-decoration: none;
          background: rgba(7,21,32,0.4); transition: all 0.2s;
        }
        .um-contact-row:hover{
          border-color: ${UM_PALETTE.accent};
          background: rgba(58,189,208,0.06);
          transform: translateX(2px);
        }
        .um-contact-row .ic{
          width: 36px; height: 36px; border-radius: 8px;
          background: rgba(58,189,208,0.1); border: 1px solid ${UM_PALETTE.line};
          display: flex; align-items: center; justify-content: center;
          color: ${UM_PALETTE.accent}; flex-shrink: 0;
        }
        .um-contact-row .meta{ flex: 1; min-width: 0; }
        .um-contact-row .lbl{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.muted}; letter-spacing: 0.15em;
          text-transform: uppercase; margin-bottom: 3px;
        }
        .um-contact-row .val{
          font-family: 'Inter', sans-serif; font-size: 14.5px;
          color: ${UM_PALETTE.ink}; font-weight: 500;
        }
        .um-contact-row .arr{ color: ${UM_PALETTE.muted}; transition: all 0.2s; }
        .um-contact-row:hover .arr{ color: ${UM_PALETTE.accent}; transform: translateX(3px); }

        /* Contact Form */
        .um-form-section{
          margin-top: 28px;
          background: ${UM_PALETTE.card};
          border: 1px solid ${UM_PALETTE.line};
          border-radius: 4px; padding: 48px 52px;
        }
        .um-form-head{
          display: flex; align-items: baseline; justify-content: space-between;
          margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
        }
        .um-form-head h4{
          font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 500;
          letter-spacing: -0.01em; margin: 0; color: ${UM_PALETTE.ink};
        }
        .um-form-head .hint{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.muted}; letter-spacing: 0.18em; text-transform: uppercase;
        }
        .um-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
        .um-field{ display: flex; flex-direction: column; gap: 6px; }
        .um-field.col-2{ grid-column: span 2; }
        .um-field label{
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          color: ${UM_PALETTE.muted}; letter-spacing: 0.18em; text-transform: uppercase;
        }
        .um-field input, .um-field select, .um-field textarea{
          background: rgba(7,21,32,0.5); border: 1px solid ${UM_PALETTE.line};
          border-radius: 6px; padding: 12px 14px;
          font-family: 'Inter', sans-serif; font-size: 14px; color: ${UM_PALETTE.ink};
          transition: border 0.15s, background 0.15s;
        }
        .um-field input:focus, .um-field select:focus, .um-field textarea:focus{
          outline: none; border-color: ${UM_PALETTE.accent};
          background: rgba(7,21,32,0.75);
        }
        .um-field textarea{ resize: vertical; min-height: 120px; font-family: 'Inter', sans-serif; }
        .um-field select{ cursor: pointer; appearance: none;
          background-image: linear-gradient(45deg, transparent 50%, ${UM_PALETTE.soft} 50%),
                            linear-gradient(135deg, ${UM_PALETTE.soft} 50%, transparent 50%);
          background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
          background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
          padding-right: 36px;
        }
        .um-field .err{ color: #ff8b8b; font-family: 'Inter', sans-serif; font-size: 12px; }
        .um-form-foot{
          grid-column: span 2; display: flex; align-items: center; justify-content: space-between;
          margin-top: 12px; gap: 16px; flex-wrap: wrap;
        }
        .um-form-foot .legal{
          font-family: 'Inter', sans-serif; font-size: 12px;
          color: ${UM_PALETTE.muted}; max-width: 60ch;
        }
        .um-submit{
          display: inline-flex; align-items: center; gap: 10px;
          padding: 14px 26px; border-radius: 100px; border: 0; cursor: pointer;
          background: ${UM_PALETTE.accent}; color: #071520;
          font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
          transition: all 0.2s;
        }
        .um-submit:hover:not(:disabled){ background: ${UM_PALETTE.soft}; transform: translateY(-1px); }
        .um-submit:disabled{ opacity: 0.55; cursor: wait; }
        .um-submit::after{ content: "→"; transition: transform 0.2s; }
        .um-submit:hover:not(:disabled)::after{ transform: translateX(4px); }
        .um-form-status{
          grid-column: span 2; padding: 14px 18px; border-radius: 6px;
          font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
        }
        .um-form-status.ok{ background: rgba(93,211,176,0.1); border: 1px solid rgba(93,211,176,0.3); color: #5DD3B0; }
        .um-form-status.err{ background: rgba(255,139,139,0.08); border: 1px solid rgba(255,139,139,0.3); color: #ff8b8b; }

        @media (max-width: 1024px){
          .um-top{ grid-template-columns: 280px 1fr; gap: 48px; }
          .um-skills-grid{ grid-template-columns: 1fr 1fr; }
          .um-quickfacts{ grid-template-columns: 1fr 1fr; }
          .um-contact{ grid-template-columns: 1fr; gap: 36px; padding: 40px; }
          .um-form-section{ padding: 36px 28px; }
        }
        @media (max-width: 720px){
          .um-section{ padding: 90px 24px 80px; }
          .um-top{ grid-template-columns: 1fr; gap: 56px; }
          .um-portrait-wrap{ max-width: 320px; margin: 0 auto; }
          .um-tl-grid{ grid-template-columns: 1fr; gap: 8px; }
          .um-skills-grid{ grid-template-columns: 1fr; }
          .um-form{ grid-template-columns: 1fr; }
          .um-field.col-2{ grid-column: span 1; }
          .um-form-foot{ grid-column: span 1; }
          .um-form-status{ grid-column: span 1; }
        }
      `}</style>

      <div className="um-container">
        {/* Top: portrait + bio */}
        <div className="um-top">
          <div className="um-portrait-wrap">
            <img src="assets/thomas-portrait.jpg" alt="Thomas Basting" className="um-portrait" />
            <div className="um-portrait-frame"/>
            <div className="um-portrait-tag">Ing. Thomas Basting</div>
          </div>

          <div className="um-bio">
            <div className="um-eyebrow"><span className="dot"/>Über mich</div>
            <h2 className="um-h1">Technik muss nicht kompliziert wirken. <em>Sie muss funktionieren.</em></h2>
            <p className="lede">
              Ich komme aus der Automatisierungstechnik. Dort zählt nicht, ob ein System auf dem Papier
              modern klingt — sondern ob es zuverlässig läuft, verständlich bedienbar ist und im Alltag
              keine Probleme macht.
            </p>
            <p>
              Genau diesen Anspruch bringe ich in Wohnhäuser und kleine Gewerbebetriebe.
            </p>
            <p>
              Meine Basis ist die HTL Mechatronik in Wels mit Schwerpunkt Automatisierung. Danach war
              ich über zehn Jahre in der Industrie-Automatisierung tätig — unter anderem als
              SPS-Programmierer, Anwendungsingenieur und später im Engineering bei KUKA. Ich habe Anlagen
              geplant, programmiert, in Betrieb genommen, Fehler gesucht, Kunden geschult und Technik
              so aufgebaut, dass sie im Betrieb funktioniert.
            </p>
            <p>
              Heute übertrage ich dieses Denken auf Smart Home und Energiemanagement: klare Struktur,
              robuste Basistechnik, offene Schnittstellen und eine Bedienung, die man auch wirklich nutzt.
            </p>
            <div className="um-pullquote">
              <div className="um-pullquote-eyebrow">Home Assistant</div>
              <p>
                Home Assistant ist dabei für mich nicht „noch eine App", sondern die offene Ebene, die
                bestehende Systeme zusammenführt: Loxone, KNX, Matter/Thread, Zigbee, Modbus, PV,
                Wärmepumpe, Wallbox, Speicher, Netzwerk und Hersteller-APIs.
              </p>
            </div>
            <p>
              Mein Schwerpunkt liegt auf Planung, Integration, Visualisierung, Automationslogik,
              Energiemanagement, Netzwerk und Dokumentation. Elektroinstallationen, Verteilerarbeiten,
              Schutzmaßnahmen und Abnahmen erfolgen gemeinsam mit konzessionierten
              Elektrotechnik-Partnerbetrieben.
            </p>

            <div className="um-quickfacts">
              <div className="um-qf">
                <div className="num">10<span className="u">+ J.</span></div>
                <div className="lbl">Automatisierung</div>
              </div>
              <div className="um-qf">
                <div className="num">HTL</div>
                <div className="lbl">Mechatronik</div>
              </div>
              <div className="um-qf">
                <div className="num">HA</div>
                <div className="lbl">+ Loxone & KNX</div>
              </div>
              <div className="um-qf">
                <div className="num">DE / EN</div>
                <div className="lbl">Sprachen</div>
              </div>
            </div>

            <div className="signature">
              <span className="sig-line"/>
              <span>Edt bei Lambach · Oberösterreich</span>
            </div>
          </div>
        </div>

        {/* Career timeline */}
        <div className="um-career">
          <h2 className="um-h2" style={{ marginBottom: 36 }}>Werdegang</h2>
          <div className="um-tl">
            {UM_TIMELINE.map((row, i) => (
              <div key={i} className={`um-tl-row ${row.accent ? "accent" : ""}`}>
                <div className="um-tl-grid">
                  <div className="um-tl-year">{row.year}</div>
                  <div>
                    <h4 className="um-tl-role">{row.role}</h4>
                    <p className="um-tl-org">{row.org}</p>
                    <p className="um-tl-body">{row.body}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Skills */}
        <div className="um-skills">
          <h2 className="um-h2" style={{ marginBottom: 24 }}>Was ich mitbringe</h2>
          <div className="um-skills-grid">
            {UM_SKILLS.map((s, i) => (
              <div key={i} className="um-skill-block">
                <div className="sh">{s.group}</div>
                <ul>
                  {s.items.map((it, j) => <li key={j}>{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Contact */}
        <div id="kontakt" className="um-contact">
          <div className="um-contact-left">
            <div className="um-eyebrow"><span className="dot"/>Kontakt</div>
            <h3>Lass uns über dein <em>Projekt</em> sprechen.</h3>
            <p>
              Egal ob Altbau-Sanierung, Neubau oder Gewerbe — ein erstes Gespräch ist unverbindlich.
              Schreib mir kurz, worum es geht, dann melde ich mich innerhalb von zwei Werktagen.
            </p>
          </div>
          <div className="um-contact-right">
            <a href="mailto:thobasting@gmail.com" className="um-contact-row">
              <span className="ic">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                  <rect x="3" y="5" width="18" height="14" rx="2"/>
                  <path d="M3 7l9 6 9-6"/>
                </svg>
              </span>
              <div className="meta">
                <div className="lbl">E-Mail</div>
                <div className="val">thobasting@gmail.com</div>
              </div>
              <span className="arr">→</span>
            </a>
            <a href="tel:+436776426544" className="um-contact-row">
              <span className="ic">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
              </span>
              <div className="meta">
                <div className="lbl">Telefon</div>
                <div className="val">+43 677 642 654 41</div>
              </div>
              <span className="arr">→</span>
            </a>
            <a href="#" onClick={(e) => e.preventDefault()} className="um-contact-row">
              <span className="ic">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </svg>
              </span>
              <div className="meta">
                <div className="lbl">Standort</div>
                <div className="val">Edt bei Lambach · 4650 OÖ</div>
              </div>
              <span className="arr">→</span>
            </a>
            <a href="https://www.linkedin.com/in/thomas-basting" target="_blank" rel="noopener" className="um-contact-row">
              <span className="ic">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.27c-.97 0-1.75-.79-1.75-1.76s.78-1.75 1.75-1.75 1.75.78 1.75 1.75-.78 1.76-1.75 1.76zm13.5 12.27h-3v-5.6c0-3.37-4-3.11-4 0v5.6h-3v-11h3v1.76c1.4-2.58 7-2.78 7 2.47v6.77z"/>
                </svg>
              </span>
              <div className="meta">
                <div className="lbl">LinkedIn</div>
                <div className="val">Profil ansehen</div>
              </div>
              <span className="arr">→</span>
            </a>
          </div>
        </div>

        {/* Anfrage-Formular */}
        <ContactForm />
      </div>
    </section>
  );
}

window.UeberMichSection = UeberMichSection;
window.ContactForm = ContactForm;