import heroImage from "../assets/hero-room.jpg";

const Hero = () => {
  return (
    <section className="min-h-screen flex items-center relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            <div className="space-y-6">
              <h1 className="text-hero">
                Connecting Design<br />
                and <span className="text-secondary">Property</span>
              </h1>
              <p className="text-lg text-muted-foreground max-w-md leading-relaxed">
                Das globale Ökosystem für Immobilieninvestoren, Makler und Designliebhaber.
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4">
              <button className="btn-primary">
                Ecosystem entdecken
              </button>
              <button className="btn-secondary">
                Partner werden
              </button>
            </div>

            <div className="flex items-center space-x-8 text-sm text-muted-foreground">
              <span>1.7M+ Nutzer</span>
              <span>•</span>
              <span>4.500+ Projekte</span>
              <span>•</span>
              <span>24/7 Platform</span>
            </div>
          </div>

          {/* Right Image */}
          <div className="relative">
            <div className="relative rounded-3xl overflow-hidden shadow-[var(--shadow-elevated)]">
              <img
                src={heroImage}
                alt="Modern international skyline showcasing architectural design"
                className="w-full h-[600px] object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
            </div>

            {/* Floating info card */}
            <div className="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
              <div className="text-sm text-muted-foreground">B2in Ecosystem</div>
              <div className="text-2xl font-medium">Global<span className="text-sm text-muted-foreground"> vernetzt</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
