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

function WhyUsSection() {
  const reasons = [
    {
      num: '01',
      title: 'Wir kennen Bau und Handwerk. Von innen.',
      body: 'Wir kommen nicht aus einem IT-Beratungs-Büro. Wir betreuen die IT von Betoninstandsetzung, Gaswarn- und Elektrotechnik und einem Planungsbüro. Wir wissen, was es bedeutet, wenn der Vorarbeiter um sieben Uhr ein Tablet braucht, das einfach funktioniert.',
    },
    {
      num: '02',
      title: 'Sie sprechen mit Menschen, die liefern.',
      body: 'Keine Tickets im Callcenter, kein Account-Manager ohne Fachwissen, keine Eskalations-Hotline ins Ausland. Sie sprechen direkt mit den Menschen, die Ihre Lösung entwickeln und betreuen. Schnelle Wege, klare Antworten.',
    },
    {
      num: '03',
      title: 'Was wir intern lösen, liefern wir extern.',
      body: 'Wir bauen nichts, was wir nicht selbst einsetzen. Unsere Bestellsoftware läuft produktiv im Tagesgeschäft einer Schwesterfirma mit über 50 aktiven Nutzern. Unsere Connectivity-Lösungen betreiben wir auf Baustellen mit Kamera-Controlling. Sie bekommen keine Beta-Versionen, sondern Tools, die im Alltag geprüft sind.',
    },
  ];

  return (
    <section style={{
      background: '#F3F6FB', color: '#0a0a0a',
      paddingTop: 120, paddingBottom: 120,
    }}>
      <div className="container">
        <div style={{ maxWidth: 920, marginBottom: 64 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: '#2E5A96', letterSpacing: '0.04em',
            display: 'inline-block', marginBottom: 20,
          }}>
            <span style={{ color: '#6B7280' }}>/</span> Warum T.O.M. Connect
          </span>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(36px, 4.6vw, 56px)',
            letterSpacing: '-0.025em', lineHeight: 1.06,
            margin: 0, textWrap: 'balance',
          }}>
            Drei Gründe, warum wir{' '}
            <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500, WebkitTextStroke: '0.5px #0a0a0a' }}>anders</span>
            {' '}sind.
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 0,
          background: '#ffffff',
          border: '1px solid #e5e7eb',
          borderRadius: 16,
          overflow: 'hidden',
        }}>
          {reasons.map((r, i, arr) => (
            <div key={i} style={{
              padding: '40px 36px',
              borderRight: i < arr.length - 1 ? '1px solid #e5e7eb' : 'none',
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontWeight: 500,
                fontSize: 13, color: '#2E5A96',
                letterSpacing: '0.05em',
              }}>{r.num}</span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 24, lineHeight: 1.2,
                letterSpacing: '-0.02em',
                margin: 0, color: '#0a0a0a',
                textWrap: 'balance',
              }}>{r.title}</h3>
              <p style={{
                fontSize: 15, lineHeight: 1.6, color: '#404040', margin: 0,
              }}>{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowWeWorkSection() {
  const steps = [
    { num: '01', title: 'Erstgespräch', meta: 'kostenlos · 30 min',
      body: 'Wir hören zu. Was läuft schon, was nervt, was bremst Ihren Betrieb? Am Ende wissen wir beide, ob wir zusammenpassen und wo der schnellste Hebel liegt.' },
    { num: '02', title: 'Konzept & Festpreis', meta: 'kein blanko-vertrag',
      body: 'Wir prüfen die technische Machbarkeit, schlagen einen konkreten Lösungsweg vor und nennen einen klaren Preis. Keine offenen Stundenzettel, keine bösen Überraschungen am Monatsende.' },
    { num: '03', title: 'Umsetzung in Etappen', meta: 'fortschritt alle 2 wochen',
      body: 'Alle zwei Wochen sehen Sie, was vorangeht. Wir liefern in Etappen, nicht erst am Schluss. So können Sie zwischendurch nachjustieren und sind nicht der Black Box ausgeliefert.' },
    { num: '04', title: 'Begleitung im Betrieb', meta: 'partnerschaft, nicht projekt',
      body: 'Mit dem Go-Live fängt unsere Arbeit erst an. Support, Weiterentwicklung, Updates, Optimierung. Wir bleiben Ihr IT-Partner, nicht nur bis zur Rechnung.' },
  ];

  return (
    <section id="how-we-work" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0A0F1E', color: '#fafafa',
      paddingTop: 120, paddingBottom: 120,
    }}>
      <div style={{
        position: 'absolute', top: '40%', right: -200, width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(46,90,150,0.16) 0%, rgba(46,90,150,0.06) 35%, transparent 65%)',
        pointerEvents: 'none',
        transform: 'translateZ(0)',
        willChange: 'transform',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${(typeof window !== 'undefined' && window.__resources && window.__resources.grain) || 'assets/grain.svg'})`,
        opacity: 0.04, pointerEvents: 'none',
        transform: 'translateZ(0)',
      }}/>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 920, marginBottom: 80 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: '#2E5A96', letterSpacing: '0.04em',
            display: 'inline-block', marginBottom: 20,
          }}>
            <span style={{ color: '#A8B5C8' }}>/</span> So arbeiten wir
          </span>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(36px, 4.6vw, 56px)',
            letterSpacing: '-0.025em', lineHeight: 1.06,
            margin: 0, textWrap: 'balance', color: '#fafafa',
          }}>
            Vom ersten Gespräch zum produktiven Einsatz. In{' '}
            <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500 }}>4 Schritten</span>.
          </h2>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute',
            top: 22, left: '12.5%', right: '12.5%', height: 1,
            background: 'linear-gradient(to right, transparent 0%, #2a3850 8%, #2a3850 92%, transparent 100%)',
            zIndex: 0, pointerEvents: 'none',
          }}/>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 32, position: 'relative', zIndex: 1,
          }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'flex', flexDirection: 'column', gap: 16, paddingRight: 16,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 100,
                  background: '#0A0F1E',
                  border: '1px solid #2a3850',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontWeight: 500,
                  fontSize: 14, color: '#2E5A96', letterSpacing: '-0.02em',
                  position: 'relative',
                  boxShadow: i === 0 ? '0 0 0 4px rgba(46,90,150,0.12)' : 'none',
                }}>
                  {s.num}
                  {i === 0 && (
                    <span style={{
                      position: 'absolute', top: -3, right: -3,
                      width: 10, height: 10, borderRadius: 100,
                      background: '#c5f74f',
                      animation: 'live-pulse 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite',
                    }}/>
                  )}
                </div>

                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontWeight: 500,
                    fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.02em',
                    margin: '0 0 6px', color: '#fafafa',
                  }}>{s.title}</h3>
                  {s.meta && (
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: '#A8B5C8', letterSpacing: '0.05em',
                    }}>{s.meta}</span>
                  )}
                </div>

                <p style={{
                  fontSize: 14, lineHeight: 1.6, color: '#A8B5C8', margin: 0,
                }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.WhyUsSection = WhyUsSection;
window.HowWeWorkSection = HowWeWorkSection;
