import { Header } from "@/components/Header";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { 
  Building2, 
  MapPin, 
  Calendar, 
  Clock,
  Mail,
  Phone,
  Share2,
  Printer,
  Flag,
  Download,
  Globe
} from "lucide-react";
import heroImage from "@/assets/press-example-hero.jpg";

const PressExample = () => {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      
      <main className="flex-1 bg-background">
        {/* Hero Image */}
        <div className="w-full h-[400px] bg-gradient-to-br from-muted to-muted/50 overflow-hidden">
          <img 
            src={heroImage} 
            alt="TechVenture Innovation Summit 2025"
            className="w-full h-full object-cover"
          />
        </div>

        {/* Article Content */}
        <article className="container mx-auto px-4 py-8 max-w-4xl">
          {/* Breadcrumbs */}
          <nav className="text-sm text-muted-foreground mb-6">
            <a href="/" className="hover:text-foreground transition-colors">Start</a>
            <span className="mx-2">›</span>
            <a href="/kategorie/it" className="hover:text-foreground transition-colors">IT & Software</a>
            <span className="mx-2">›</span>
            <span className="text-foreground">TechVenture Innovation Summit</span>
          </nav>

          {/* Title */}
          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4 leading-tight">
            TechVenture startet Innovation Summit 2025: Europas größte Plattform für digitale Transformation
          </h1>

          {/* Subtitle */}
          <p className="text-xl text-muted-foreground mb-6">
            Über 5.000 Entscheider aus Wirtschaft und Politik werden erwartet – Fokus auf KI, Nachhaltigkeit und Future Skills
          </p>

          {/* Meta Info */}
          <div className="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-border">
            <div className="flex items-center gap-2 text-sm">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <span className="font-medium">München</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <span>6. Oktober 2025</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Clock className="h-4 w-4 text-muted-foreground" />
              <span>09:00 Uhr</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Clock className="h-4 w-4" />
              <span>8 Min. Lesezeit</span>
            </div>
          </div>

          {/* Key Facts Box - Desktop Side */}
          <div className="lg:float-right lg:ml-8 lg:w-80 mb-8">
            <Card className="p-6 bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
              <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
                Key Facts
              </h3>
              <ul className="space-y-3 text-sm">
                <li className="flex items-start gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  <span>5.000+ erwartete Teilnehmer aus 40 Ländern</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  <span>150+ Speaker und Experten aus Industrie & Forschung</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  <span>4 Themenschwerpunkte über 3 Konferenztage</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  <span>200+ Aussteller im Innovation Expo Bereich</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  <span>Early Bird Tickets bis 31. Dezember 2024</span>
                </li>
              </ul>
            </Card>
          </div>

          {/* Article Content */}
          <div className="prose prose-lg max-w-none">
            <p className="text-foreground leading-relaxed mb-6">
              <strong>München, 6. Oktober 2025</strong> – Die TechVenture Group gibt heute den offiziellen Startschuss für den Innovation Summit 2025 bekannt, der vom 15. bis 17. März 2025 in München stattfinden wird. Die Veranstaltung etabliert sich als Europas führende Plattform für digitale Transformation und bringt über 5.000 Entscheider aus Wirtschaft, Politik und Wissenschaft zusammen.
            </p>

            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
              Vier zentrale Themenbereiche prägen das Programm
            </h2>

            <p className="text-foreground leading-relaxed mb-6">
              Der Innovation Summit 2025 konzentriert sich auf vier zukunftsweisende Schwerpunkte, die die digitale Transformation der nächsten Jahre maßgeblich beeinflussen werden:
            </p>

            <ul className="list-disc pl-6 space-y-2 mb-6 text-foreground">
              <li><strong>Künstliche Intelligenz & Machine Learning:</strong> Praktische Anwendungen, ethische Fragestellungen und regulatorische Rahmenbedingungen</li>
              <li><strong>Nachhaltige Digitalisierung:</strong> Green IT, energieeffiziente Rechenzentren und klimaneutrale Tech-Lösungen</li>
              <li><strong>Future Skills & Talent Development:</strong> Kompetenzaufbau für die digitale Arbeitswelt von morgen</li>
              <li><strong>Cybersecurity & Data Governance:</strong> Datenschutz, IT-Sicherheit und Compliance in einer vernetzten Welt</li>
            </ul>

            <blockquote className="border-l-4 border-primary pl-6 my-8 italic text-lg text-muted-foreground">
              "Der Innovation Summit ist mehr als eine Konferenz – er ist ein Katalysator für nachhaltige Veränderung. Wir schaffen einen Raum, in dem Visionäre auf Praktiker treffen, neue Partnerschaften entstehen und konkrete Lösungen für die Herausforderungen der digitalen Transformation entwickelt werden."
              <footer className="text-sm font-medium text-foreground mt-2 not-italic">
                – Dr. Alexandra Schmidt, CEO TechVenture Group
              </footer>
            </blockquote>

            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
              Hochkarätige Speaker-Lineup aus Wirtschaft und Wissenschaft
            </h2>

            <p className="text-foreground leading-relaxed mb-6">
              Über 150 renommierte Speaker werden erwartet, darunter CEOs führender Technologieunternehmen, Forscher von Top-Universitäten und politische Entscheidungsträger. Bestätigte Keynote-Speaker sind unter anderem:
            </p>

            <ul className="list-disc pl-6 space-y-2 mb-6 text-foreground">
              <li>Prof. Dr. Thomas Weber, Direktor des Fraunhofer-Instituts für KI</li>
              <li>Lisa Müller, Chief Digital Officer der Deutschen Bahn AG</li>
              <li>Dr. Michael Chen, VP of European Operations bei Google Cloud</li>
              <li>Sarah Johnson, Gründerin und CEO von GreenTech Innovations</li>
            </ul>

            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
              Innovation Expo: 200 Aussteller präsentieren Zukunftstechnologien
            </h2>

            <p className="text-foreground leading-relaxed mb-6">
              Parallel zum Konferenzprogramm bietet die Innovation Expo mit über 200 Ausstellern eine einzigartige Plattform zur Präsentation neuester Technologien und Lösungen. Start-ups, Mittelständler und Konzerne zeigen ihre innovativen Produkte und Services in den Bereichen KI, Cloud Computing, IoT, Blockchain und Quantum Computing.
            </p>

            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
              Networking und Matchmaking im Fokus
            </h2>

            <p className="text-foreground leading-relaxed mb-6">
              Ein besonderes Highlight des Summit ist das KI-gestützte Matchmaking-System, das Teilnehmer basierend auf ihren Interessen, Kompetenzen und Zielen zusammenbringt. Zusätzlich bieten Networking-Lounges, Dinner-Events und geführte Rundgänge zahlreiche Gelegenheiten zum Austausch und zur Geschäftsanbahnung.
            </p>

            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
              Early Bird Tickets und Anmeldung
            </h2>

            <p className="text-foreground leading-relaxed mb-6">
              Die Registrierung für den Innovation Summit 2025 ist ab sofort unter www.innovationsummit.de möglich. Early Bird Tickets zum vergünstigten Preis sind bis zum 31. Dezember 2024 erhältlich. Verschiedene Ticket-Kategorien ermöglichen eine flexible Teilnahme – von einzelnen Tagespässen bis zu All-Access-Paketen mit exklusiven Workshop-Plätzen.
            </p>

            <div className="bg-muted/30 border-l-4 border-secondary p-6 my-8 rounded-r-lg">
              <h3 className="font-semibold text-foreground mb-2">Über TechVenture Group</h3>
              <p className="text-sm text-muted-foreground">
                Die TechVenture Group ist ein führender Veranstalter von Tech-Konferenzen und Innovation-Events in Europa. Mit über 15 Jahren Erfahrung organisiert das Unternehmen jährlich mehr als 20 internationale Veranstaltungen und erreicht ein Netzwerk von über 100.000 Tech-Professionals weltweit.
              </p>
            </div>
          </div>

          {/* Media Section */}
          <div className="mt-12 mb-8">
            <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
              <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
              Downloads & Medien
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                    <Download className="h-6 w-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-foreground">Pressemitteilung (PDF)</p>
                    <p className="text-sm text-muted-foreground">420 KB</p>
                  </div>
                </div>
              </Card>
              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
                    <Download className="h-6 w-6 text-secondary" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-foreground">Bildmaterial (ZIP)</p>
                    <p className="text-sm text-muted-foreground">12.3 MB</p>
                  </div>
                </div>
              </Card>
              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                    <Download className="h-6 w-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-foreground">Fact Sheet (PDF)</p>
                    <p className="text-sm text-muted-foreground">380 KB</p>
                  </div>
                </div>
              </Card>
              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
                    <Download className="h-6 w-6 text-secondary" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-foreground">Logo-Paket (ZIP)</p>
                    <p className="text-sm text-muted-foreground">2.1 MB</p>
                  </div>
                </div>
              </Card>
            </div>
          </div>

          {/* Contact Box */}
          <Card className="p-6 bg-card mb-8 border-2 border-border">
            <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
              <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
              Pressekontakt
            </h3>
            <div className="space-y-4">
              <div>
                <p className="font-medium text-foreground">TechVenture Group GmbH</p>
                <p className="text-sm text-muted-foreground">Abteilung Unternehmenskommunikation</p>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-foreground mb-2">Ansprechpartnerin</p>
                  <p className="text-sm text-muted-foreground">Julia Hoffmann</p>
                  <p className="text-sm text-muted-foreground">Senior PR Manager</p>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <a href="mailto:presse@techventure.de" className="text-primary hover:underline">
                      presse@techventure.de
                    </a>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <a href="tel:+498912345678" className="hover:text-primary transition-colors">
                      +49 89 1234 5678
                    </a>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <Globe className="h-4 w-4 text-muted-foreground" />
                    <a href="https://www.techventure.de" className="text-primary hover:underline" target="_blank" rel="noopener">
                      www.techventure.de
                    </a>
                  </div>
                </div>
              </div>
              <div className="pt-4 border-t border-border">
                <Button variant="outline" size="sm">
                  <Download className="h-4 w-4 mr-2" />
                  vCard herunterladen
                </Button>
              </div>
            </div>
          </Card>

          {/* Company Teaser */}
          <Card className="p-6 bg-muted/30 mb-8">
            <div className="flex items-start gap-4">
              <div className="w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <Building2 className="h-8 w-8 text-primary" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-foreground mb-2">Über TechVenture Group</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Die TechVenture Group ist Europas führender Veranstalter von Innovation- und Technologie-Events. Seit 2010 schaffen wir Plattformen für den Wissensaustausch zwischen Wirtschaft, Wissenschaft und Politik. Mit über 20 jährlichen Events und einem Netzwerk von 100.000+ Tech-Professionals weltweit fördern wir Innovation und digitale Transformation.
                </p>
                <Button variant="link" className="p-0 h-auto text-primary hover:text-secondary transition-colors">
                  Zum Newsroom →
                </Button>
              </div>
            </div>
          </Card>

          {/* Utility Bar */}
          <div className="flex items-center gap-3 py-6 border-y border-border">
            <Button variant="outline" size="sm">
              <Share2 className="h-4 w-4 mr-2" />
              Teilen
            </Button>
            <Button variant="outline" size="sm">
              <Printer className="h-4 w-4 mr-2" />
              Drucken
            </Button>
            <Button variant="ghost" size="sm" className="ml-auto">
              <Flag className="h-4 w-4 mr-2" />
              Melden
            </Button>
          </div>
        </article>

        {/* Related Articles */}
        <section className="bg-muted/30 py-12 mt-8">
          <div className="container mx-auto px-4 max-w-6xl">
            <h2 className="text-2xl font-semibold text-foreground mb-6 flex items-center gap-2">
              <span className="w-1 h-6 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
              Weitere Meldungen von TechVenture
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  title: "TechVenture erweitert Portfolio um Blockchain Summit",
                  date: "15. September 2025"
                },
                {
                  title: "Über 3.000 Teilnehmer beim AI & Data Conference 2024",
                  date: "2. August 2025"
                },
                {
                  title: "Neue Partnerschaft mit führenden Tech-Universitäten",
                  date: "20. Juli 2025"
                }
              ].map((item, i) => (
                <Card key={i} className="p-5 hover:shadow-card-hover transition-all">
                  <div className="flex items-center gap-2 mb-3">
                    <Badge variant="secondary" className="text-xs">IT & Software</Badge>
                  </div>
                  <h3 className="font-semibold text-foreground mb-2 line-clamp-2">
                    {item.title}
                  </h3>
                  <p className="text-sm text-muted-foreground mb-3">
                    {item.date}
                  </p>
                  <Button variant="ghost" size="sm">Lesen →</Button>
                </Card>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
};

export default PressExample;