/* Services / Leistungsübersicht — six rich service cards. */

const SERVICES = [
  {
    icon: "code",
    label: "01",
    title: "Website für Ihren Betrieb",
    body: "Ein moderner Auftritt, der erklärt, was Sie anbieten, Vertrauen aufbaut und auf Handy sowie PC sauber funktioniert.",
    bullets: ["eigener Auftritt statt Baukasten", "klare Texte und klare Struktur", "leicht bedienbar auf Handy und PC"],
    accent: "cyan",
  },
  {
    icon: "search",
    label: "02",
    title: "Bei Google besser gefunden werden",
    body: "Ihre Leistungen, Orte und wichtigsten Fragen werden so aufgebaut, dass Kunden aus Ihrer Region Sie leichter finden.",
    bullets: ["Leistungen verständlich erklären", "Orte und Einsatzgebiete einbauen", "Google klare Informationen liefern"],
    accent: "violet",
  },
  {
    icon: "sparkles",
    label: "03",
    title: "Antworten auf Kundenfragen",
    body: "Die Website beantwortet die Fragen, die Kunden vor dem Anruf wirklich haben: Leistung, Ablauf, Region, Kostenrahmen und Kontakt.",
    bullets: ["häufige Fragen klar beantworten", "Vertrauen vor dem ersten Gespräch schaffen", "Anruf oder Anfrage erleichtern"],
    accent: "cyan",
  },
  {
    icon: "funnel",
    label: "04",
    title: "Mehr passende Anfragen",
    body: "Kontaktwege, Formulare und Angebotsseiten werden so aufgebaut, dass Interessenten schnell wissen, ob Sie der richtige Anbieter sind.",
    bullets: ["klare Kontaktwege", "wichtige Fragen vorab klären", "weniger unpassende Anfragen"],
    accent: "violet",
  },
  {
    icon: "gauge",
    label: "05",
    title: "Schnell auf dem Handy",
    body: "Die Website lädt schnell, Bilder sind richtig vorbereitet und Besucher können ohne Warten anrufen oder schreiben.",
    bullets: ["schnelle Ladezeiten", "Bilder sauber verkleinert", "kurze Wege zur Anfrage"],
    accent: "cyan",
  },
  {
    icon: "tool",
    label: "06",
    title: "Einfache Online-Helfer",
    body: "Kleine Lösungen für den Alltag: Zeiten erfassen, Urlaub planen, Anfragen sortieren, Angebote vorbereiten oder Dokumente hochladen.",
    bullets: ["geschützter Bereich", "passt zu Ihrem Ablauf", "später erweiterbar"],
    accent: "violet",
  },
];

const ServiceCard = ({ s }) => (
  <div className="glass rounded-2xl p-7 h-full card-lift relative overflow-hidden group">
    <div className="absolute -right-20 -top-20 w-56 h-56 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700"
         style={{ background: s.accent === "cyan"
            ? "radial-gradient(circle, rgba(var(--accent-from-rgb),0.18), transparent 70%)"
            : "radial-gradient(circle, rgba(var(--accent-to-rgb),0.16), transparent 70%)" }}></div>

    <div className="flex items-center justify-between mb-7">
      <div className={`inline-flex items-center justify-center w-12 h-12 rounded-xl hairline ${s.accent === "cyan" ? "text-cyan" : "text-violet"} bg-surface-2`}>
        <Icon name={s.icon} size={20} />
      </div>
      <Mono>{s.label}</Mono>
    </div>

    <h3 className="text-[22px] font-medium tracking-tight mb-3 text-ink">{s.title}</h3>
    <p className="text-[14.5px] text-muted leading-relaxed mb-6">{s.body}</p>

    <ul className="space-y-2 pt-5 border-t border-line">
      {s.bullets.map(b => (
        <li key={b} className="flex items-center gap-2.5 text-[13.5px] text-ink-2">
          <Icon name="check" size={13} className={s.accent === "cyan" ? "text-cyan" : "text-violet"} />
          {b}
        </li>
      ))}
    </ul>
  </div>
);

const Services = ({ limit, seeMore }) => {
  const items = limit ? SERVICES.slice(0, limit) : SERVICES;
  return (
  <section id="leistungen" className="section-edge py-24 md:py-32 relative">
    <Wrap>
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-14">
        <Reveal>
          <SectionHead
            eyebrow="Leistungen"
            title={<>Alles aus einer Hand:<br />Website, Anfragen und Alltag.</>}
            lede="Sechs Bereiche, die zusammenarbeiten: besser auftreten, besser gefunden werden, mehr passende Anfragen bekommen und Arbeit im Betrieb vereinfachen."
          />
        </Reveal>
        <Reveal delay={0.15}>
          <a href={seeMore || "kontakt.html"} className="btn btn-ghost shrink-0">
            {seeMore ? "Alle Leistungen ansehen" : "Passendes Vorhaben besprechen"}
            <Icon name="arrow-up-right" size={14} />
          </a>
        </Reveal>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {items.map((s, i) => (
          <Reveal key={s.title} delay={i * 0.06}>
            <ServiceCard s={s} />
          </Reveal>
        ))}
      </div>
    </Wrap>
  </section>
  );
};

window.Services = Services;