/* global React, useReveal, SectionHeader */

const SERVICES = [
  {
    icon: "iphone",
    title: "iPhone & iOS",
    desc: "Apple ID, iCloud, Updates, Face ID, iMessage, FaceTime. Vom alten Backup auf das neue iPhone — alles drin.",
    tags: ["Apple ID", "iCloud", "Updates", "Backup"],
  },
  {
    icon: "android",
    title: "Android",
    desc: "Samsung, Xiaomi, Huawei, Google Pixel. Konten, Updates, Datenübertragung — auch wenn der Hersteller sein Eigenleben hat.",
    tags: ["Samsung", "Xiaomi", "Google Konto"],
  },
  {
    icon: "wifi",
    title: "WLAN & Internet",
    desc: "Router-Einrichtung, Repeater, Empfang verbessern, Passwort vergessen. Internet das endlich überall funktioniert.",
    tags: ["Router", "Repeater", "FRITZ!Box"],
  },
  {
    icon: "key",
    title: "Passwörter & Konten",
    desc: "Gesperrte Apple ID, vergessenes Google-Passwort, neue Konten anlegen. Sicher, geduldig und ohne Frust.",
    tags: ["Apple ID", "Google", "2FA"],
  },
  {
    icon: "photo",
    title: "Fotos & Speicher",
    desc: "Speicher voll? Bilder auf den Computer übertragen, iCloud einrichten, Doppelte löschen. Wieder Luft auf dem Handy.",
    tags: ["iCloud", "Backup", "Speicher"],
  },
  {
    icon: "mail",
    title: "E-Mail & Apps",
    desc: "E-Mail-Konto einrichten, WhatsApp übertragen, Banking-App, Drucker installieren. Was Sie auch brauchen.",
    tags: ["WhatsApp", "E-Mail", "Drucker"],
  },
  {
    icon: "tv",
    title: "Smart-TV & Streaming",
    desc: "Netflix, Disney+, Amazon Prime auf den Fernseher bringen. Apple TV, Fire TV, Chromecast — alles einrichten.",
    tags: ["Netflix", "Apple TV", "Fire TV"],
  },
  {
    icon: "laptop",
    title: "Laptop & Mac",
    desc: "Neues Notebook einrichten, Daten umziehen, Office installieren, Drucker verbinden. Auch wenn Windows mal wieder will.",
    tags: ["Windows", "macOS", "Office"],
  },
];

function Services() {
  return (
    <section id="leistungen" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Leistungen"
          title={<>Diese Probleme<br /><span className="ital grad-text">löse ich für Sie.</span></>}
          sub="Das meiste klappt per Video-Chat — Sie teilen Ihren Bildschirm, ich führe Sie zur Lösung. Hardware und größere Sachen löse ich vor Ort am Bodensee."
        />
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.title} {...s} index={i} />
          ))}
        </div>
      </div>
      <style>{`
        .services-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }
        @media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 760px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function ServiceCard({ icon, title, desc, tags, index }) {
  const ref = useReveal();
  const [hover, setHover] = React.useState(false);
  return (
    <div
      ref={ref}
      className={"reveal reveal-delay-" + ((index % 4) + 1)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "#fff",
        border: "1px solid var(--line)",
        borderRadius: 24,
        padding: 24,
        cursor: "default",
        transition: "transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .35s ease",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        borderColor: hover ? "rgba(124,58,237,0.3)" : "var(--line)",
        boxShadow: hover ? "0 12px 32px rgba(124,58,237,0.10)" : "0 0 0 transparent",
        position: "relative",
        overflow: "hidden",
        minHeight: 260,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ marginBottom: 18 }}>
        <ServiceIcon name={icon} active={hover} />
      </div>
      <h3 style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 8 }}>{title}</h3>
      <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.45, flex: 1 }}>{desc}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 16 }}>
        {tags.map((t) => (
          <span key={t} style={{
            fontSize: 11,
            padding: "4px 8px",
            borderRadius: 999,
            background: "var(--bg-soft)",
            color: "var(--muted)",
            border: "1px solid var(--line)",
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function ServiceIcon({ name, active }) {
  const fill = "url(#sgrad)";
  const s = 44;
  const common = { width: s, height: s, viewBox: "0 0 48 48", fill: "none" };
  const grad = (
    <defs>
      <linearGradient id="sgrad" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
        <stop stopColor="#7c3aed" />
        <stop offset="1" stopColor="#ec4899" />
      </linearGradient>
    </defs>
  );

  const wrap = (children) => (
    <div style={{
      width: 56, height: 56,
      borderRadius: 16,
      background: active ? "var(--grad-soft)" : "var(--bg-soft)",
      display: "flex", alignItems: "center", justifyContent: "center",
      transition: "all .3s ease, transform .35s cubic-bezier(.22,.61,.36,1)",
      transform: active ? "rotate(-4deg) scale(1.05)" : "rotate(0) scale(1)",
    }}>
      <svg {...common}>{grad}{children}</svg>
    </div>
  );

  switch (name) {
    case "iphone":
      return wrap(<>
        <rect x="14" y="6" width="20" height="36" rx="4" stroke={fill} strokeWidth="2.5" />
        <rect x="20" y="10" width="8" height="1.5" rx="0.75" fill={fill} />
        <circle cx="24" cy="38" r="1.5" fill={fill} />
      </>);
    case "android":
      return wrap(<>
        <circle cx="24" cy="24" r="14" stroke={fill} strokeWidth="2.5" />
        <circle cx="19" cy="22" r="1.8" fill={fill} />
        <circle cx="29" cy="22" r="1.8" fill={fill} />
        <path d="M18 30 L20 28 M30 30 L28 28" stroke={fill} strokeWidth="2" strokeLinecap="round" />
      </>);
    case "wifi":
      return wrap(<>
        <path d="M10 22 Q24 10 38 22" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
        <path d="M15 28 Q24 19 33 28" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
        <path d="M20 34 Q24 30 28 34" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
        <circle cx="24" cy="40" r="2" fill={fill} />
      </>);
    case "key":
      return wrap(<>
        <circle cx="16" cy="24" r="6" stroke={fill} strokeWidth="2.5" />
        <path d="M22 24 H40 M36 24 V30 M32 24 V28" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
      </>);
    case "photo":
      return wrap(<>
        <rect x="8" y="12" width="32" height="24" rx="3" stroke={fill} strokeWidth="2.5" />
        <circle cx="24" cy="24" r="6" stroke={fill} strokeWidth="2.5" />
        <circle cx="33" cy="18" r="1.5" fill={fill} />
      </>);
    case "mail":
      return wrap(<>
        <rect x="8" y="12" width="32" height="24" rx="3" stroke={fill} strokeWidth="2.5" />
        <path d="M8 14 L24 26 L40 14" stroke={fill} strokeWidth="2.5" strokeLinejoin="round" />
      </>);
    case "tv":
      return wrap(<>
        <rect x="6" y="10" width="36" height="24" rx="3" stroke={fill} strokeWidth="2.5" />
        <path d="M16 40 H32" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
        <path d="M18 22 L26 22 M18 26 L30 26" stroke={fill} strokeWidth="2.5" strokeLinecap="round" />
      </>);
    case "laptop":
      return wrap(<>
        <rect x="8" y="10" width="32" height="22" rx="2" stroke={fill} strokeWidth="2.5" />
        <path d="M4 36 H44 L42 40 H6 Z" stroke={fill} strokeWidth="2.5" strokeLinejoin="round" />
      </>);
    default:
      return wrap(null);
  }
}

Object.assign(window, { Services });