import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
import Silk from "@/components/Silk";

const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026

const Hero = () => {
  const [companyAge, setCompanyAge] = useState("");

  useEffect(() => {
    const calculateAge = () => {
      const now = new Date();
      const diff = now.getTime() - FOUNDING_DATE.getTime();
      
      const totalSeconds = Math.floor(diff / 1000);
      const days = Math.floor(totalSeconds / (60 * 60 * 24));
      const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
      
      const years = Math.floor(days / 365);
      const remainingDays = days % 365;
      
      if (years > 0) {
        setCompanyAge(`${years}J ${remainingDays}T ${hours}h`);
      } else {
        setCompanyAge(`${days}T ${hours}h`);
      }
    };

    calculateAge();
    const interval = setInterval(calculateAge, 60 * 60 * 1000); // Update every hour (only days/hours shown)
    return () => clearInterval(interval);
  }, []);

  return (
    <section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
      {/* Silk animated background */}
      <div className="absolute inset-0 z-0 w-full h-full">
        <Silk
          speed={3}
          scale={0.5}
          color="#373737"
          noiseIntensity={4
          }
          rotation={0}
        />
      </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="max-w-6xl">
          {/* Label */}
          <div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
            Webentwicklung & Design
          </div>

          {/* Main Heading - Large Uppercase */}
          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-6 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
            Wir digitalisieren<br />
            <span className="text-muted-foreground">Ihr Unternehmen</span>
          </h1>

          {/* Subheadline */}
          <p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
            Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
            <Link to="/kontakt">
              <Button
                size="lg"
                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
              >
                Kostenlose Potenzialanalyse sichern
                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
              </Button>
            </Link>
            <Button
              size="lg"
              variant="outline"
              className="btn-outline rounded-full px-8 py-6 text-base font-medium"
            >
              System-Demo anfordern
            </Button>
          </div>

          {/* Trust Line */}
          <p className="text-sm text-muted-foreground/70 uppercase tracking-wider animate-fade-in" style={{ animationDelay: '0.55s' }}>
            Für Unternehmen, die nicht stehen bleiben wollen.
          </p>
        </div>
      </div>

      {/* Bottom Stats Row */}
      <div className="container mx-auto px-6 mt-auto pb-12 pt-20 relative z-10">
        <div className="divider mb-12" />
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
          <div className="animate-fade-in" style={{ animationDelay: '0.6s' }}>
            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">10+</div>
            <div className="label-tag">Projekte</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">{companyAge}</div>
            <div className="label-tag">Am Markt</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">99,9%</div>
            <div className="label-tag">Systemverfügbarkeit</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>
            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">🇩🇪</div>
            <div className="label-tag">Serverstandort in Deutschland</div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;