/* @jsxRuntime classic */
/* global React */

function AboutSection() {
  const values = [
    {
      num: '01',
      title: 'Aus der Praxis',
      body: 'Nicht aus dem Beratungs-Büro. Wir bauen, was wir selbst einsetzen. Erst wenn wir es intern beherrschen, liefern wir an Kunden.',
    },
    {
      num: '02',
      title: 'Direkter Draht',
      body: 'Keine Service-Hotlines. Keine Ticketnummern. Sie sprechen direkt mit den Menschen, die Ihre Lösung entwickeln und betreuen.',
    },
    {
      num: '03',
      title: 'Saubere Verträge',
      body: 'Keine Geiselhaft. Keine versteckten Klauseln. Datenexport in Standardformaten ist jederzeit möglich, auch bei Vertragsende.',
    },
    {
      num: '04',
      title: 'Made in Hattersheim',
      body: 'Server in Deutschland. Support aus dem Rhein-Main-Gebiet. DSGVO-konform ist bei uns Standard, nicht kostenpflichtiges Add-on.',
    },
  ];

  return (
    <section id="about" style={{
      background: '#fafafa', color: '#0a0a0a',
      paddingTop: 120, paddingBottom: 120,
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 6fr)',
          gap: 80, alignItems: 'flex-start',
        }} className="about-grid">

          <div>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: '#2E5A96', letterSpacing: '0.04em',
              display: 'inline-block', marginBottom: 20,
            }}>
              <span style={{ color: '#6B7280' }}>/</span> Über uns
            </span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(36px, 4.6vw, 56px)',
              letterSpacing: '-0.025em', lineHeight: 1.06,
              margin: '0 0 28px',
              textWrap: 'balance',
            }}>
              Aus dem Mittelstand.{' '}
              <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500, WebkitTextStroke: '0.5px #0a0a0a' }}>Für</span>
              {' '}den Mittelstand.
            </h2>
            <p style={{
              fontSize: 18, lineHeight: 1.65, color: '#404040',
              margin: '0 0 0', maxWidth: 560,
            }}>
              T.O.M. Connect ist die IT-Tochter der T.O.M. Unternehmensgruppe
              in Hattersheim am Main. Wir betreuen drei Schwesterfirmen aus
              dem Bau- und Industriebereich mit insgesamt über 150 Mitarbeitern:
              Betoninstandsetzung, Gaswarn- und Elektrotechnik, sowie ein
              Planungsbüro. Aus dieser Praxis entstanden unsere Produkte:
              Bestellsoftware, die in einer Schwesterfirma mit 50+ Nutzern
              produktiv läuft, Managed IT für den mittelständischen Betrieb,
              und Connectivity-Lösungen für Baustellen mit besonderen
              Anforderungen. Diese Erfahrung machen wir jetzt für externe
              Kunden im Rhein-Main-Gebiet und in der DACH-Region verfügbar.
            </p>

            <div style={{
              marginTop: 40,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 14px',
              background: '#ffffff',
              border: '1px solid #e5e7eb', borderRadius: 100,
            }}>
              <span style={{
                display: 'inline-block', width: 8, height: 8, borderRadius: 100,
                background: '#2E5A96',
                animation: 'live-pulse-blue 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite',
              }}/>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: '#404040', letterSpacing: '0.04em',
              }}>Hattersheim am Main · Rhein-Main-Gebiet</span>
            </div>
          </div>

          <div className="values-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 16,
          }}>
            {values.map((v, i) => <ValueCard key={i} {...v}/>)}
          </div>

        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
        @media (max-width: 560px) {
          .values-grid { grid-template-columns: 1fr !important; }
        }
        @keyframes live-pulse-blue {
          0%, 100% { box-shadow: 0 0 0 0 rgba(46,90,150,0.30); opacity: 1; }
          50% { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
        }
      `}</style>
    </section>
  );
}

function ValueCard({ num, title, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#ffffff',
        border: `1px solid ${hover ? '#2E5A96' : '#e5e7eb'}`,
        borderRadius: 12, padding: 24,
        display: 'flex', flexDirection: 'column', gap: 12,
        transition: 'border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
      <span style={{
        fontFamily: 'var(--font-mono)', fontWeight: 500,
        fontSize: 11, color: '#2E5A96',
        letterSpacing: '0.05em',
      }}>/ {num}</span>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 18, letterSpacing: '-0.015em', lineHeight: 1.25,
        margin: 0, color: '#0a0a0a',
      }}>{title}</h3>
      <p style={{
        fontSize: 14, lineHeight: 1.55, color: '#404040', margin: 0,
      }}>{body}</p>
    </div>
  );
}

function FaqSection() {
  const faqs = [
    {
      q: 'Habt ihr überhaupt schon externe Kunden?',
      a: 'Wir sind aus der internen IT der T.O.M. Unternehmensgruppe entstanden und betreuen dort die komplette IT-Infrastruktur von drei Schwesterfirmen mit über 150 Mitarbeitern. Unsere Bestellsoftware EasyOrder läuft in einer dieser Firmen produktiv im Tagesgeschäft. Über 50 aktive Nutzer führen ihre gesamte Bestellabwicklung darüber. Connectivity-Setups für Baustellen mit Kamera-Controlling betreiben wir ebenfalls intern. Externe Kunden gewinnen wir gezielt im Rhein-Main-Gebiet und in der DACH-Region. Wir zeigen Ihnen im Erstgespräch gerne, was bei uns konkret läuft.',
    },
    {
      q: 'Was kostet das ungefähr?',
      a: 'Das hängt vom Umfang ab. EasyOrder rechnen wir mit einem einmaligen Setup (individuell nach Aufwand) plus einer Lizenz ab 10 € pro Nutzer und Monat. Connected Jobsite und Managed IT kalkulieren wir individuell, weil hier Hardware und Aufwand stark variieren. Konkrete Zahlen bekommen Sie nach dem Erstgespräch. Ohne Überraschungen, ohne versteckte Posten.',
    },
    {
      q: 'Wie lange dauert ein typisches Projekt?',
      a: 'Für EasyOrder rechnen wir mit 4–8 Wochen von der ersten Konfiguration bis zum produktiven Einsatz, je nach Schnittstellen und Mitarbeiterzahl. Connected Jobsite ist auf einer neuen Baustelle in der Regel in einem Vor-Ort-Termin einsatzbereit. Eine Managed-IT-Übernahme planen wir für 2–3 Wochen mit sauberem Übergang.',
    },
    {
      q: 'Was, wenn wir abbrechen oder kündigen wollen?',
      a: 'Sie bekommen jederzeit einen vollständigen Datenexport in Standardformaten (CSV, Excel, PDF). Keine Geiselhaft, keine versteckten Klauseln. Bei Software-Lizenzen gilt die vertraglich vereinbarte Laufzeit. Üblich sind 24 Monate, das ist verhandelbar.',
    },
    {
      q: 'Sind die Daten in Deutschland gehostet?',
      a: 'Ja, alle Server stehen in Deutschland. Vollständig DSGVO-konform, Verschlüsselung in Transit und at Rest, Auftragsverarbeitungsvertrag (AVV) gehört zum Standard. Auf Wunsch hosten wir auch in Ihrer eigenen Cloud oder on-premises.',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{
      background: '#fafafa', color: '#0a0a0a',
      paddingTop: 120, paddingBottom: 120,
      borderTop: '1px solid #e5e7eb',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 4fr) minmax(0, 7fr)',
          gap: 80, alignItems: 'flex-start',
        }} className="faq-grid">

          <div style={{ position: 'sticky', top: 100 }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: '#2E5A96', letterSpacing: '0.04em',
              display: 'inline-block', marginBottom: 20,
            }}>
              <span style={{ color: '#6B7280' }}>/</span> Häufige Fragen
            </span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(36px, 4.4vw, 52px)',
              letterSpacing: '-0.025em', lineHeight: 1.06,
              margin: '0 0 24px',
              textWrap: 'balance',
            }}>
              Was Geschäftsführer uns{' '}
              <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500, WebkitTextStroke: '0.5px #0a0a0a' }}>oft</span>
              {' '}fragen.
            </h2>
            <p style={{
              fontSize: 16, lineHeight: 1.6, color: '#6B7280',
              margin: 0, maxWidth: 320,
            }}>
              Was wir nicht beantwortet haben, fragen Sie uns gern direkt.
            </p>
          </div>

          <div style={{
            background: '#ffffff',
            border: '1px solid #e5e7eb',
            borderRadius: 16, overflow: 'hidden',
          }}>
            {faqs.map((f, i) => (
              <FaqItem key={i} q={f.q} a={f.a} index={i}
                open={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
                isLast={i === faqs.length - 1}/>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .faq-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

function FaqItem({ q, a, index, open, onClick, isLast }) {
  return (
    <div style={{ borderBottom: isLast ? 'none' : '1px solid #e5e7eb' }}>
      <button
        onClick={onClick}
        style={{
          width: '100%', textAlign: 'left',
          background: 'transparent', border: 0,
          padding: '24px 28px',
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 20,
          fontFamily: 'var(--font-body)',
        }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: open ? '#2E5A96' : '#6B7280', letterSpacing: '0.05em',
          flexShrink: 0,
          transition: 'color 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        }}>{String(index + 1).padStart(2, '0')}</span>
        <span style={{
          flex: 1,
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 19, letterSpacing: '-0.015em',
          color: '#0a0a0a', lineHeight: 1.35,
        }}>{q}</span>
        <span style={{
          flexShrink: 0,
          width: 32, height: 32, borderRadius: 100,
          background: open ? '#2E5A96' : '#fafafa',
          border: `1px solid ${open ? '#2E5A96' : '#e5e7eb'}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: open ? '#fafafa' : '#0a0a0a',
          transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
            style={{
              transform: open ? 'rotate(45deg)' : 'rotate(0)',
              transition: 'transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
            }}>
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </span>
      </button>

      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height 350ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
        <div style={{ padding: '0 28px 28px 70px' }}>
          <p style={{
            fontSize: 15, lineHeight: 1.65, color: '#404040',
            margin: 0, maxWidth: 680,
          }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

window.AboutSection = AboutSection;
window.FaqSection = FaqSection;