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

/* ============================================================
   3) TRUST STRIP — Light, mit echten Schwesterfirmen-Logos
   ============================================================ */
function TrustStrip() {
  const sisters = [
    { name: 'T.O.M. Betonschutz', logo: 'assets/holding-betonschutz.png', mono: 'betoninstandsetzung', boxWidth: 200, boxHeight: 56 },
    { name: 'T.O.M. Technologies', logo: 'assets/holding-technologies.png', mono: 'gaswarn- & elektrotechnik', boxWidth: 140, boxHeight: 56 },
    { name: 'Thoch4', logo: 'assets/holding-thoch4.png', mono: 'planungsbüro', boxWidth: 80, boxHeight: 56 },
  ];

  return (
    <section style={{
      background: '#fafafa', color: '#0a0a0a',
      padding: '56px 0',
      borderBottom: '1px solid #e5e7eb',
    }}>
      <div className="container trust-row">
        <span className="trust-label">
          Aus der täglichen Praxis:<br/>
          die T.O.M. Unternehmensgruppe
        </span>

        <div className="trust-logos">
          {sisters.map((s, i) => <SisterLogo key={i} {...s}/>)}
        </div>
      </div>
    </section>
  );
}

function SisterLogo({ name, logo, mono, boxWidth, boxHeight }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
      <div className="trust-logo-box" style={{
        width: boxWidth, height: boxHeight,
      }}>
        <img
          src={logo}
          alt={name}
          style={{
            maxWidth: '100%', maxHeight: '100%',
            objectFit: 'contain',
            filter: hover ? 'none' : 'grayscale(1) brightness(0.5)',
            opacity: hover ? 1 : 0.85,
            transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
          }}
        />
      </div>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: '#9CA3AF', letterSpacing: '0.06em',
      }}>/ {mono}</span>
    </div>
  );
}

/* ============================================================
   4) PRODUCTS — Asymmetrisches Grid mit klarer Hierarchie:
      Reihe 1: EasyOrder (dominant, 65%) + Managed IT (35%)
      Reihe 2: Connected Jobsite (full-width, horizontal, kompakt)
   ============================================================ */
function ProductsSection() {
  return (
    <section id="products" style={{
      background: '#fafafa', color: '#0a0a0a',
      paddingTop: 120, paddingBottom: 120,
    }}>
      <div className="container">
        <div style={{ maxWidth: 920, marginBottom: 72 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: '#2E5A96', letterSpacing: '0.04em',
            display: 'inline-block', marginBottom: 20,
          }}>
            <span style={{ color: '#6B7280' }}>/</span> Was wir bauen
          </span>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(36px, 4.6vw, 56px)',
            letterSpacing: '-0.025em', lineHeight: 1.06,
            margin: '0 0 24px',
            textWrap: 'balance',
          }}>
            Drei Bausteine. Ein{' '}
            <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500, WebkitTextStroke: '0.5px #0a0a0a' }}>Anspruch</span>
            .
          </h2>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: '#404040',
            maxWidth: 680, margin: 0,
          }}>
            Sie sollen sich um IT nicht mehr kümmern müssen, sondern Ihren
            Betrieb führen.
          </p>
        </div>

        {/* Drei gleichwertige Produkt-Kacheln */}
        <div className="products-row" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}>
          <StandardCard
            tag="software · leitprodukt"
            icon={<SoftwareIcon/>}
            title="EasyOrder & Apps"
            subtitle="Bestellprozesse, die sich rechnen"
            body="EasyOrder digitalisiert die Bestellabwicklung in mittelständischen Bau- und Handwerksbetrieben. Vom Materialwunsch des Vorarbeiters bis zur fertigen Lieferantenbestellung. Bei einem Holding-Unternehmen mit über 50 aktiven Nutzern läuft die gesamte Bestellabwicklung produktiv über EasyOrder."
            badge="produktiv bei 50+ Nutzern im Einsatz"
            cta="ROI berechnen"
            href="/easyorder"
            accent
          />
          <StandardCard
            tag="managed it"
            icon={<ItIcon/>}
            title="Managed IT"
            subtitle="IT-Betreuung, die Ihre Branche versteht"
            body="Server, Backups, Updates, Helpdesk. Wir übernehmen die komplette IT-Infrastruktur Ihres Betriebs. Wir kennen die Anforderungen von Bau- und Handwerksbetrieben aus drei Schwesterfirmen mit über 150 Mitarbeitern. Diese Praxis-Erfahrung bekommen Sie mit Festpreisen, klaren Reaktionszeiten und einem direkten Ansprechpartner. Keine Hotline, keine Ticketnummer."
            cta="IT-Schnellcheck anfragen"
            href="mailto:info@tomconnect.net?subject=IT-Schnellcheck-Anfrage&body=Hallo%20T.O.M.%20Connect%2C%0A%0Aich%20interessiere%20mich%20f%C3%BCr%20einen%20IT-Schnellcheck.%20Bitte%20kontaktieren%20Sie%20mich.%0A%0AMein%20Unternehmen%3A%20%0AMeine%20Telefonnummer%3A%20"
          />
          <StandardCard
            tag="on-site connectivity"
            icon={<ConnectivityIcon/>}
            title="Connected Jobsite"
            subtitle="Wenn die Baustelle vernetzt werden muss"
            body="Tiefbau im Funkloch. Tiefgaragen ohne Empfang. Sanierungs-Großbaustellen mit Kamera-Überwachung. Wir sorgen dafür, dass Ihre Baustelle online geht, mit der Technik, die zum Standort passt. Bei einer Schwesterfirma betreuen wir die Connectivity für mehrere Baustellen mit Kamera-Controlling. Was wir liefern: Setup, Hardware, SIM-Logistik und Betrieb. Aus einer Hand."
            cta="Anwendungsfall besprechen"
            href="mailto:info@tomconnect.net?subject=Connected-Jobsite-Anfrage&body=Hallo%20T.O.M.%20Connect%2C%0A%0Aich%20m%C3%B6chte%20einen%20Anwendungsfall%20f%C3%BCr%20Connected%20Jobsite%20besprechen.%0A%0AStandort%3A%20%0ABaustellenart%3A%20%0AKontakt%3A%20"
          />
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .products-row { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 720px) {
          .products-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ---- Flagship card — größer, mit Akzent-Border-Edge & Lime Badge ---- */
function FlagshipCard({ tag, icon, title, subtitle, body, badge, cta, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: '#ffffff',
        border: `1px solid ${hover ? '#2E5A96' : '#e5e7eb'}`,
        borderRadius: 16, padding: 40,
        display: 'flex', flexDirection: 'column', gap: 24,
        transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        transform: hover ? 'translateY(-2px)' : 'none',
        boxShadow: hover ? '0 12px 32px rgba(46,90,150,0.10)' : '0 1px 0 rgba(0,0,0,0.02)',
        overflow: 'hidden',
      }}>
      {/* Top accent strip */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: 'linear-gradient(90deg, #2E5A96 0%, #4A7AB6 100%)',
      }}/>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <div style={{
          width: 64, height: 64, borderRadius: 14,
          background: '#2E5A96',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: '#fafafa',
        }}>
          {icon}
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: '#6B7280', letterSpacing: '0.05em',
          textTransform: 'lowercase',
        }}>/ {tag}</span>
      </div>

      <div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 36, letterSpacing: '-0.025em', lineHeight: 1.1,
          margin: '0 0 10px', color: '#0a0a0a',
        }}>{title}</h3>
        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 13,
          color: '#6B7280', letterSpacing: '0.03em',
          margin: 0,
        }}>{subtitle}</p>
      </div>

      <p style={{
        fontSize: 16, lineHeight: 1.65, color: '#404040',
        margin: 0, flex: 1,
      }}>{body}</p>

      {badge && (
        <div style={{
          display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 10,
          padding: '8px 14px', borderRadius: 100,
          background: 'rgba(197,247,79,0.18)',
          border: '1px solid rgba(197,247,79,0.5)',
        }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#0a0a0a', letterSpacing: '0.03em' }}>→</span>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: '#0a0a0a', letterSpacing: '0.04em',
            textTransform: 'lowercase',
          }}>{badge}</span>
        </div>
      )}

      <a href={href} style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15,
        color: hover ? '#4A7AB6' : '#2E5A96', textDecoration: 'none',
        marginTop: 4,
        transition: 'color 150ms',
      }}>
        <span style={{
          borderBottom: `1px solid ${hover ? '#4A7AB6' : '#2E5A96'}`,
          paddingBottom: 1,
        }}>{cta}</span>
        <span style={{
          transition: 'transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1)',
          transform: hover ? 'translateX(3px)' : 'none',
        }}>→</span>
      </a>
    </article>
  );
}

/* ---- Standard card — Position 2, gleichwertige Substanz ---- */
function StandardCard({ tag, icon, title, subtitle, body, cta, href, badge, accent }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: '#ffffff',
        border: `1px solid ${hover ? (accent ? '#2E5A96' : '#d4d4d4') : '#e5e7eb'}`,
        borderRadius: 16, padding: 32,
        display: 'flex', flexDirection: 'column', gap: 20,
        transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        transform: hover ? 'translateY(-2px)' : 'none',
        boxShadow: hover ? '0 12px 32px rgba(46,90,150,0.10)' : '0 1px 0 rgba(0,0,0,0.02)',
        overflow: 'hidden',
      }}>
      {accent && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 3,
          background: 'linear-gradient(90deg, #2E5A96 0%, #4A7AB6 100%)',
        }}/>
      )}
      <div style={{
        width: 56, height: 56, borderRadius: 12,
        background: '#2E5A96',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: '#fafafa',
      }}>
        {icon}
      </div>

      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: '#6B7280', letterSpacing: '0.05em',
        textTransform: 'lowercase',
      }}>/ {tag}</span>

      <div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1.15,
          margin: '0 0 8px', color: '#0a0a0a',
        }}>{title}</h3>
        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: '#6B7280', letterSpacing: '0.04em',
          margin: 0,
        }}>{subtitle}</p>
      </div>

      <p style={{
        fontSize: 15, lineHeight: 1.6, color: '#404040',
        margin: 0, flex: 1,
      }}>{body}</p>

      {badge && (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          alignSelf: 'flex-start',
          background: 'rgba(197,247,79,0.16)',
          border: '1px solid rgba(197,247,79,0.4)',
          borderRadius: 100, padding: '6px 14px',
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: '#3d5a1a', letterSpacing: '0.03em',
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: 100, background: '#7aa329',
            flexShrink: 0,
          }}/>
          {badge}
        </div>
      )}

      <a href={href} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
        color: hover ? '#4A7AB6' : '#2E5A96', textDecoration: 'none',
        marginTop: 4,
        transition: 'color 150ms',
      }}>
        <span style={{
          borderBottom: `1px solid ${hover ? '#4A7AB6' : '#2E5A96'}`,
          paddingBottom: 1,
        }}>{cta}</span>
        <span style={{
          transition: 'transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1)',
          transform: hover ? 'translateX(3px)' : 'none',
        }}>→</span>
      </a>
    </article>
  );
}

/* ---- Compact card — Position 3, horizontal (icon links, text rechts) ---- */
function CompactCard({ tag, icon, title, subtitle, body, cta, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#ffffff',
        border: `1px solid ${hover ? '#d4d4d4' : '#e5e7eb'}`,
        borderRadius: 16, padding: 28,
        display: 'grid',
        gridTemplateColumns: '56px 1fr auto',
        alignItems: 'center', gap: 28,
        transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }} className="compact-card">
      <div style={{
        width: 56, height: 56, borderRadius: 12,
        background: '#F3F6FB',
        border: '1px solid #e5e7eb',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: '#2E5A96',
      }}>
        {icon}
      </div>

      <div style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap', marginBottom: 6 }}>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.15,
            margin: 0, color: '#0a0a0a',
          }}>{title}</h3>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: '#6B7280', letterSpacing: '0.05em',
            textTransform: 'lowercase',
          }}>/ {tag}</span>
        </div>
        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: '#6B7280', letterSpacing: '0.04em',
          margin: '0 0 10px',
        }}>{subtitle}</p>
        <p style={{
          fontSize: 14, lineHeight: 1.6, color: '#404040',
          margin: 0, maxWidth: 720,
        }}>{body}</p>
      </div>

      <a href={href} style={{
        flexShrink: 0,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
        color: hover ? '#4A7AB6' : '#2E5A96', textDecoration: 'none',
        whiteSpace: 'nowrap',
        transition: 'color 150ms',
      }} className="compact-card-cta">
        <span style={{
          borderBottom: `1px solid ${hover ? '#4A7AB6' : '#2E5A96'}`,
          paddingBottom: 1,
        }}>{cta}</span>
        <span style={{
          transition: 'transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1)',
          transform: hover ? 'translateX(3px)' : 'none',
        }}>→</span>
      </a>

      <style>{`
        @media (max-width: 720px) {
          .compact-card { grid-template-columns: 56px 1fr !important; gap: 20px !important; }
          .compact-card-cta { grid-column: 1 / -1 !important; }
        }
      `}</style>
    </article>
  );
}

function ConnectivityIcon() {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.55a11 11 0 0 1 14.08 0"/>
      <path d="M1.42 9a16 16 0 0 1 21.16 0"/>
      <path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
      <line x1="12" y1="20" x2="12" y2="20"/>
    </svg>
  );
}
function SoftwareIcon() {
  return (
    <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="14" rx="2"/>
      <path d="M9 9l-2 2 2 2"/>
      <path d="M15 9l2 2-2 2"/>
      <line x1="3" y1="22" x2="21" y2="22"/>
    </svg>
  );
}
function ItIcon() {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  );
}

window.TrustStrip = TrustStrip;
window.ProductsSection = ProductsSection;