import React from "react";
// Falls Next.js genutzt wird:
// import Image from "next/image";

export default function BauCheckOnePage() {
  const features = [
    {
      title: "Baustellen sauber dokumentieren",
      text: "Fotos, Infos und wichtige Nachweise direkt erfassen, statt alles später aus WhatsApp, Zetteln und Mails zusammenzusuchen.",
    },
    {
      title: "PDFs automatisch erstellen",
      text: "Aus Eingaben werden sofort saubere Dokumente für Kunden, Bauleiter und interne Ablage – schnell, einheitlich und professionell.",
    },
    {
      title: "Nachträge besser absichern",
      text: "Mehraufwand strukturiert festhalten, damit Leistungen nachvollziehbar gemeldet und leichter freigegeben werden können.",
    },
    {
      title: "Einfach für Kolonnen und Bauleiter",
      text: "Klare Oberfläche, mobil nutzbar und ohne komplizierte Einführung – gemacht für den Einsatz draußen auf der Baustelle.",
    },
  ];

  const steps = [
    "Daten auf der Baustelle erfassen",
    "Fotos und Details direkt zuordnen",
    "PDF automatisch generieren",
    "Sauber an Auftraggeber oder Büro weitergeben",
  ];

  const gallery = [
    {
      src: "http://bau-check.net/images/mechaniker_recheck.png",
      title: "Desktop Ansicht",
    },
    {
      src: "http://bau-check.net/images/mechaniker_quadrat.png",
      title: "Quadratisches App-Motiv",
    },
    {
      src: "http://bau-check.net/images/mechaniker_handy.png",
      title: "Mobile Ansicht",
    },
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white scroll-smooth">
      {/* HERO */}
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.18),transparent_30%),radial-gradient(circle_at_top_left,rgba(16,185,129,0.14),transparent_28%)]" />
        
        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 py-16 md:px-10 lg:grid-cols-2 lg:items-center lg:py-24">
          <div>
            <div className="mb-4 inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-4 py-1 text-sm font-medium text-cyan-200">
              Bau Check App für Tiefbau & Glasfaser
            </div>

            <h1 className="max-w-2xl text-4xl font-bold leading-tight md:text-6xl">
              Dokumentation, Nachträge und PDFs in einem sauberen System.
            </h1>

            <p className="mt-6 max-w-2xl text-lg text-slate-300 md:text-xl">
              Bau Check hilft Bauleitern, Subunternehmern und Kolonnen dabei, Baustellen sauber zu dokumentieren,
              Mehraufwand nachvollziehbar zu melden und professionelle PDFs mit wenigen Klicks zu erstellen.
            </p>

            <p className="mt-4 text-sm text-slate-400">
              Bereits im Einsatz bei Tiefbau- und Glasfaserprojekten
            </p>

            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href="#kontakt"
                className="rounded-2xl bg-white px-6 py-3 text-base font-semibold text-slate-900 shadow-lg transition hover:scale-[1.02]"
              >
                Kostenlose Demo anfragen
              </a>

              <a
                href="#funktionen"
                className="rounded-2xl border border-white/20 px-6 py-3 text-base font-semibold text-white transition hover:bg-white/10"
              >
                Funktionen ansehen
              </a>
            </div>

            <div className="mt-8 flex flex-wrap gap-6 text-sm text-slate-300">
              <span>Für Bauleiter</span>
              <span>Für Subunternehmer</span>
              <span>Für Glasfaser- und Tiefbauprojekte</span>
            </div>
          </div>

          {/* Bilder */}
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="rounded-3xl border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur">
              <img
                src="http://bau-check.net/images/mechaniker_recheck.png"
                alt="Bau Check Desktop Anwendung zur Baustellendokumentation"
                className="h-full w-full rounded-2xl object-cover"
              />
            </div>

            <div className="grid gap-4">
              <div className="rounded-3xl border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur">
                <img
                  src="http://bau-check.net/images/mechaniker_handy.png"
                  alt="Bau Check App auf dem Smartphone"
                  className="h-64 w-full rounded-2xl object-contain"
                />
              </div>

              <div className="rounded-3xl border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur">
                <img
                  src="http://bau-check.net/images/mechaniker_quadrat.png"
                  alt="Bau Check App Oberfläche quadratisch"
                  className="h-48 w-full rounded-2xl object-contain"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="funktionen" className="mx-auto max-w-7xl px-6 py-16 md:px-10">
        <div className="max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">Funktionen</p>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">Wofür Bau Check gebaut wurde</h2>
          <p className="mt-4 text-slate-300">
            Die App löst genau die Probleme, die im Alltag auf Baustellen ständig Zeit, Geld und Nerven kosten.
          </p>
        </div>

        <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {features.map((item, index) => (
            <div key={item.title + index} className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-xl">
              <h3 className="text-xl font-semibold">{item.title}</h3>
              <p className="mt-3 text-slate-300">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* STEPS */}
      <section className="border-y border-white/10 bg-white/5">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 py-16 md:px-10 lg:grid-cols-2 lg:items-center">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-300">So läuft es ab</p>
            <h2 className="mt-3 text-3xl font-bold md:text-4xl">Weniger Chaos. Mehr Nachvollziehbarkeit.</h2>
          </div>

          <div className="space-y-4">
            {steps.map((step, index) => (
              <div key={step + index} className="flex items-start gap-4 rounded-3xl border border-white/10 bg-slate-900/70 p-5">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white text-sm font-bold text-slate-900">
                  {index + 1}
                </div>
                <p className="pt-2 text-lg text-slate-100">{step}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="mx-auto max-w-7xl px-6 py-16 md:px-10">
        <div className="max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">Einblicke</p>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">So kann Bau Check aussehen</h2>
        </div>

        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {gallery.map((item, index) => (
            <div key={item.title + index} className="overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-4 shadow-xl">
              <img
                src={item.src}
                alt={item.title}
                className="h-72 w-full rounded-2xl object-contain bg-slate-900/60"
              />
              <p className="mt-4 text-base font-medium text-slate-200">{item.title}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section id="kontakt" className="mx-auto max-w-5xl px-6 pb-20 md:px-10">
        <div className="rounded-[2rem] border border-cyan-400/20 bg-gradient-to-br from-cyan-400/10 to-emerald-400/10 p-8 shadow-2xl md:p-12">
          <h2 className="mt-3 text-3xl font-bold md:text-5xl">
            Mach aus deiner Baustellen-Dokumentation endlich ein System.
          </h2>

          <div className="mt-8 flex flex-wrap gap-4">
            <a
              href="mailto:info@bau-check.net"
              className="rounded-2xl bg-white px-6 py-3 font-semibold text-slate-900"
            >
              info@bau-check.net
            </a>

            <a
              href="tel:+491234567890"
              className="rounded-2xl border border-white/20 px-6 py-3 font-semibold text-white"
            >
              Jetzt anrufen
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}