import Footer from '@/components/Footer';
import Link from 'next/link';

export default function Home() {
  const now = new Date();
  const year = now.getFullYear();
  const saisonStart = new Date(year, 2, 15);
  const saisonEnde = new Date(year, 5, 30);
  const isSaison = now >= saisonStart && now <= saisonEnde;

  return (
    <div className="min-h-screen flex flex-col bg-bg">
      {/* Gemeinde-Header — prominent, eigenständig */}
      <div className="bg-primary text-white">
        <div className="max-w-lg mx-auto px-6 pt-10 pb-8 text-center">
          {/* Wappen */}
          <div className="w-20 h-20 bg-white/15 backdrop-blur-sm rounded-2xl flex items-center justify-center text-3xl font-bold mx-auto mb-4">
            W
          </div>
          <h1 className="text-xl font-bold leading-tight">
            Weißkirchen an der Traun
          </h1>
          <p className="text-white/50 text-sm mt-1">Bürgerportal</p>
        </div>
      </div>

      <main className="flex-1 max-w-lg mx-auto px-4 w-full -mt-4">
        {/* Seasonal Banner */}
        {isSaison && (
          <div className="bg-accent/10 border border-accent/20 rounded-2xl px-4 py-3 mb-5 text-center">
            <p className="text-sm text-accent font-medium">
              Pool-Saison läuft bis 30. Juni {year}
            </p>
          </div>
        )}

        {/* Warum-Text */}
        <p className="text-center text-text-muted text-sm mb-6 px-2">
          Große Wasserentnahmen koordinieren, damit die Versorgung für alle gesichert bleibt.
        </p>

        {/* 2 große CTA Buttons */}
        <div className="space-y-3">
          <Link
            href="/pool"
            className="group flex items-center gap-4 bg-white rounded-2xl border border-border p-5 hover:border-accent/40 hover:shadow-lg active:scale-[0.98] transition-all"
          >
            <div className="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-accent/15 transition-colors">
              <span className="text-2xl" role="img" aria-label="Pool">&#x1F3CA;</span>
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="text-base font-bold text-primary group-hover:text-accent transition-colors">
                Pool-Befüllung anmelden
              </h2>
              <p className="text-text-muted text-xs mt-0.5">
                Wunschtermin wählen, in 2 Min. erledigt
              </p>
            </div>
            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </Link>

          <Link
            href="/wasserzaehler"
            className="group flex items-center gap-4 bg-white rounded-2xl border border-border p-5 hover:border-accent/40 hover:shadow-lg active:scale-[0.98] transition-all"
          >
            <div className="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-accent/15 transition-colors">
              <span className="text-2xl" role="img" aria-label="Wasserzähler">&#x1F4A7;</span>
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="text-base font-bold text-primary group-hover:text-accent transition-colors">
                Wasserzähler melden
              </h2>
              <p className="text-text-muted text-xs mt-0.5">
                QR-Code scannen, Zählerstand eingeben
              </p>
            </div>
            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </Link>
        </div>

        {/* Admin Login Link */}
        <div className="mt-16 text-center pb-4">
          <Link
            href="/admin/login"
            className="text-text-muted/50 text-xs hover:text-primary transition-colors"
          >
            Mitarbeiter-Zugang
          </Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}