import marcelImage from "../assets/marcel-scheibe.jpg";

const NewAboutHero = () => {
  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-16 items-center">
          <div className="space-y-8">
            <h1 className="text-5xl lg:text-6xl font-light text-foreground">
              Über <span className="text-secondary">B2in</span>
            </h1>

            <blockquote className="text-xl lg:text-2xl text-muted-foreground italic leading-relaxed border-l-4 border-secondary pl-6">
              "Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden
              und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2in schaffen wir
              nicht nur Verbindungen – wir bauen Brücken in die Zukunft."
            </blockquote>

            <div className="flex items-center gap-4">
              <div className="w-16 h-px bg-secondary"></div>
              <div>
                <p className="font-semibold text-foreground">Marcel Scheibe</p>
                <p className="text-sm text-muted-foreground">Gründer & CEO, B2in</p>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="card-elevated rounded-3xl overflow-hidden">
              <img
                src={marcelImage}
                alt="Marcel Scheibe, Gründer und CEO von B2in"
                className="w-full h-96 lg:h-[500px] object-cover"
              />
            </div>
            <div className="absolute -bottom-6 -right-6 bg-secondary text-secondary-foreground p-6 rounded-2xl">
              <div className="text-3xl font-bold">2019</div>
              <p className="text-sm opacity-90">Gründungsjahr</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default NewAboutHero;
