/* global React */
const { useState, useEffect } = React;

// =========================================================
//  ICONS — small inline SVGs (Lucide-style, 1.5px stroke)
// =========================================================
const Icon = {
  ChevronDown: (p) => (
    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" {...p}>
      <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  ),
  ArrowUpRight: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M4 10L10 4M10 4H5M10 4V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Plus: (p) => (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...p}>
      <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  ),
  Cart: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
      <line x1="3" y1="6" x2="21" y2="6" />
      <path d="M16 10a4 4 0 0 1-8 0" />
    </svg>
  ),
  LinkedIn: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M4.98 3.5C4.98 4.881 3.87 6 2.5 6S0 4.881 0 3.5 1.12 1 2.5 1 4.98 2.119 4.98 3.5zM.22 8h4.56v14H.22V8zm7.69 0h4.37v1.91h.06c.61-1.16 2.1-2.38 4.32-2.38 4.62 0 5.47 3.04 5.47 6.99V22h-4.55v-6.34c0-1.51-.03-3.46-2.11-3.46-2.11 0-2.43 1.65-2.43 3.35V22H7.91V8z" />
    </svg>
  ),
  Instagram: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" {...p}>
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" />
    </svg>
  ),
  YouTube: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z" />
    </svg>
  ),
};

// =========================================================
//  HEADER
// =========================================================
function Header({ currentPage }) {
  const [open, setOpen] = useState(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const nav = [
    { label: 'Die Community', href: 'Die Community.html', page: 'community', items: null },
    { label: 'Unternehmertage', href: 'Unternehmertage.html', page: 'unternehmertage', items: null },
    { label: 'Kongress', href: 'Unternehmerkongress.html', page: 'kongress', items: null },
    { label: 'Reisen', href: 'Reisen.html', page: 'reisen', items: null },
    { label: 'Termine', href: 'Termine.html', page: 'termine', items: null },
    { label: 'Über uns', href: 'Behind UC365.html', page: 'about', items: null },
  ];
  return (
    <header className="uc-header">
      <div className="uc-topbar">
        <div className="uc-container uc-topbar-inner">
          <div className="uc-topbar-left">
            <a href="#" className="uc-topbar-link">
              <span className="uc-li-dot"><Icon.LinkedIn /></span>
              <span>LinkedIn — folge der Community</span>
            </a>
          </div>
          <div className="uc-topbar-right">
            <span>mail@uc365.community</span>
            <span className="uc-sep" />
            <span>Mo – Fr · 9:00 – 16:00</span>
          </div>
        </div>
      </div>
      <div className="uc-container uc-nav">
        <a href="UC365 Website.html" className="uc-logo" aria-label="UC365">
          <img src="assets/logo-icon.png" alt="UC365" />
        </a>
        <nav className="uc-nav-items">
          {nav.map((n, i) => (
            <div
              key={n.label}
              className="uc-nav-item"
              onMouseEnter={() => n.items && setOpen(i)}
              onMouseLeave={() => setOpen(null)}
            >
              <a
                href={n.href}
                className={'uc-nav-link' + (currentPage === n.page ? ' uc-nav-link-active' : '')}
              >
                {n.label}
                {n.items && <Icon.ChevronDown />}
              </a>
              {n.items && open === i && (
                <div className="uc-dropdown">
                  {n.items.map((s) => (
                    <a key={s.label} href={s.href} className="uc-dropdown-item">{s.label}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="uc-nav-actions">
          <a href="Apply.html" className="uc-btn uc-btn-dark uc-nav-cta-desktop">Bewerben</a>
          <button
            className="uc-nav-burger"
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label={mobileOpen ? 'Menü schließen' : 'Menü öffnen'}
            aria-expanded={mobileOpen}
          >
            {mobileOpen ? (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            ) : (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M3 7h18M3 12h18M3 17h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            )}
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="uc-mobile-menu">
          <nav className="uc-mobile-menu-nav">
            {nav.map((n) => (
              <a
                key={n.label}
                href={n.href}
                className={'uc-mobile-menu-link' + (currentPage === n.page ? ' is-active' : '')}
                onClick={() => setMobileOpen(false)}
              >
                {n.label}
              </a>
            ))}
            <a href="Apply.html" className="uc-btn uc-btn-primary uc-mobile-menu-cta">Bewerben</a>
            <a href="Kontakt.html" className="uc-btn uc-btn-ghost uc-mobile-menu-cta">Kontakt</a>
          </nav>
        </div>
      )}
    </header>
  );
}

// =========================================================
//  HERO
// =========================================================
function Hero() {
  return (
    <section className="uc-hero">
      <div className="uc-container uc-hero-grid">
        <div>
          <span className="uc-eyebrow">Community für Microsoft Unternehmer</span>
          <h1 className="uc-hero-title">
            Kontakte knüpfen, zusammenarbeiten und dein Unternehmen <span className="uc-accent">ausbauen</span>.
          </h1>
          <p className="uc-hero-body">
            UC&nbsp;365 ist eine Unternehmer Community für Unternehmer, die mit Microsoft 365 &amp; co. arbeiten.
            Bei uns geht es um den direkten Austausch zwischen Unternehmern, die ihr Unternehmen voranbringen wollen.
          </p>
          <div className="uc-hero-actions" style={{ marginTop: 36 }}>
            <a href="Die Community.html" className="uc-cta-link">
              Lerne uns Kennen
              <span className="uc-arrow-circle">
                <img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" />
              </span>
            </a>
            <a className="uc-btn uc-btn-ghost" href="Termine.html">Termine ansehen</a>
          </div>
        </div>
        <div className="uc-hero-img">
          <img src="assets/event-image.jpg" alt="UC365 Community Event" />
          <div className="uc-hero-img-badge">
            <div className="uc-hero-img-badge-num">50</div>
            <div className="uc-hero-img-badge-lbl">aktive Unternehmer im inneren Kreis der Community</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  STATS STRIP
// =========================================================
function Stats() {
  const items = [
    { n: '50', l: 'Unternehmer & C-Level Mitglieder im Microsoft-Ökosystem' },
    { n: '4', l: 'Internationale Messen, zu denen wir als Gruppe reisen' },
    { n: '3', l: 'Große Events pro Jahr — Unternehmertage, Kongress & mehr' },
    { n: '7', l: 'Tage gemeinsame Unternehmertage an wechselnden Locations weltweit' },
  ];
  return (
    <section className="uc-stats">
      <div className="uc-container">
        <div className="uc-stats-grid">
          {items.map((s) => (
            <div key={s.n}>
              <div className="uc-stat-num">{s.n}</div>
              <div className="uc-stat-lbl">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  EVENT CARD + EVENTS SECTION
// =========================================================
function EventCard({ image, title, tag, tagOrange, date, location, body, price, href, ctaLabel }) {
  return (
    <article className="uc-event-card">
      <div className="uc-event-img" style={{ backgroundImage: `url(${image})` }}>
        {tag && (
          <span className={'uc-event-tag' + (tagOrange ? ' uc-event-tag-orange' : '')}>{tag}</span>
        )}
      </div>
      <div className="uc-event-body">
        <h3 className="uc-event-title">{title}</h3>
        <div className="uc-event-meta">
          <span><img src="assets/icon-time.svg" alt="" />{date}</span>
          <span><img src="assets/icon-location.svg" alt="" />{location}</span>
        </div>
        <p className="uc-event-desc">{body}</p>
        <div className="uc-event-foot">
          <div className="uc-event-price">
            {price ? <>{price} <small>/ Ticket</small></> : <small>auf Anfrage</small>}
          </div>
          <a className="uc-btn uc-btn-primary uc-btn-sm" href={href || '#'}>
            {ctaLabel || 'Mehr Infos'}
            <Icon.ArrowUpRight />
          </a>
        </div>
      </div>
    </article>
  );
}

function EventsSection() {
  return (
    <section className="uc-events-section" id="events">
      <div className="uc-container">
        <div className="uc-events-head">
          <div>
            <span className="uc-eyebrow">Kommende Unternehmertage</span>
            <h2 className="uc-section-title">Sei bei unseren<br />nächsten Unternehmertage dabei.</h2>
          </div>
          <a href="Unternehmertage.html" className="uc-cta-link" style={{ paddingBottom: 8 }}>
            Alle Termine
            <span className="uc-arrow-circle"><img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" /></span>
          </a>
        </div>
        <div className="uc-event-grid">
          <EventCard
            image="assets/event-zypern.jpg"
            title="Unternehmertage Zypern 2026 — Villa &amp; Mastermind"
            tag="Tickets verfügbar"
            tagOrange
            date="09. – 16.11.2026"
            location="Ayia Napa, Zypern"
            body="Sieben Tage Strand-Villa, 40 Unternehmer, Sales/Marketing/Management. Das Original-Format, neu aufgelegt."
            price="ab 2.900 €"
            href="Event - Unternehmertage Zypern 2026.html"
          />
          <EventCard
            image="assets/10x/cod-resort-night.png"
            title="Unternehmertage 10x — City of Dreams"
            tag="Frühbucher offen"
            tagOrange
            date="26. – 30. April 2027"
            location="Limassol, Zypern"
            body="Drei Tage 10x-Arbeit am eigenen Unternehmen. Eine Regel: kleiner als 10x — ist nicht."
            price="€ 5.000"
            href="Event - Unternehmertage 10x.html"
          />
          <EventCard
            image="assets/event-bike.webp"
            title="Unternehmertage St. Anton — Health Edition"
            tag="Frühbucher offen"
            tagOrange
            date="21. – 25.06.2027"
            location="St. Anton, Österreich"
            body="Sieben Tage Sport, Ernährung, Diagnostik & Mindset — eine Woche, in der du als Unternehmer der Engpass bist, nicht dein Unternehmen."
            price="ab 2.900 €"
            href="Event - Unternehmertage St Anton.html"
          />
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  PAST EVENTS ARCHIVE (home)
// =========================================================
function PastEvents() {
  return (
    <section className="uc-section uc-section-cream" id="rueckblick-home">
      <div className="uc-container">
        <div className="uc-section-head-row">
          <div>
            <span className="uc-eyebrow">Rückblick</span>
            <h2 className="uc-section-title">Was bisher passiert ist.</h2>
          </div>
          <a href="Unternehmertage.html#rueckblick" className="uc-cta-link" style={{ paddingBottom: 8 }}>
            Alle vergangenen Events
            <span className="uc-arrow-circle"><img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" /></span>
          </a>
        </div>
        <div className="uc-archive-grid">
          <a href="Event - Unternehmertage Mallorca 2026.html" className="uc-archive-card">
            <img className="uc-archive-card-img" src="assets/mallorca/dinner-terrasse.jpeg" alt="Mallorca 2026" />
            <span className="uc-archive-card-play" aria-hidden="true">
              <svg width="14" height="16" viewBox="0 0 20 22" fill="currentColor">
                <path d="M1.5 1.866a1 1 0 0 1 1.5-.866l16 9.464a1 1 0 0 1 0 1.732l-16 9.464a1 1 0 0 1-1.5-.866V1.866z" />
              </svg>
            </span>
            <div className="uc-archive-card-body">
              <span className="uc-archive-card-year">2026 · April</span>
              <h3>Mallorca — Intime Runde</h3>
              <div className="uc-archive-card-meta">
                <span>Steigenberger 5★</span>
                <span className="uc-archive-card-meta-sep">·</span>
                <span>8 Teilnehmer</span>
              </div>
            </div>
          </a>
          <a href="Event - Unternehmertage Marokko 2025.html" className="uc-archive-card">
            <img className="uc-archive-card-img" src="assets/marokko/atlas-olivenhain.jpg" alt="Marokko 2025" />
            <span className="uc-archive-card-play" aria-hidden="true">
              <svg width="14" height="16" viewBox="0 0 20 22" fill="currentColor">
                <path d="M1.5 1.866a1 1 0 0 1 1.5-.866l16 9.464a1 1 0 0 1 0 1.732l-16 9.464a1 1 0 0 1-1.5-.866V1.866z" />
              </svg>
            </span>
            <div className="uc-archive-card-body">
              <span className="uc-archive-card-year">2025 · April</span>
              <h3>Marokko — Sahara Edition</h3>
              <div className="uc-archive-card-meta">
                <span>Marrakech &amp; Wüste</span>
                <span className="uc-archive-card-meta-sep">·</span>
                <span>30 Teilnehmer</span>
              </div>
            </div>
          </a>
          <a href="Event - Unternehmertage Zypern 2024.html" className="uc-archive-card">
            <img className="uc-archive-card-img" src="assets/zypern2024/sofa-mastermind.jpg" alt="Zypern 2024" />
            <span className="uc-archive-card-play" aria-hidden="true">
              <svg width="14" height="16" viewBox="0 0 20 22" fill="currentColor">
                <path d="M1.5 1.866a1 1 0 0 1 1.5-.866l16 9.464a1 1 0 0 1 0 1.732l-16 9.464a1 1 0 0 1-1.5-.866V1.866z" />
              </svg>
            </span>
            <div className="uc-archive-card-body">
              <span className="uc-archive-card-year">2024 · Oktober</span>
              <h3>Zypern — Comeback</h3>
              <div className="uc-archive-card-meta">
                <span>Paphos</span>
                <span className="uc-archive-card-meta-sep">·</span>
                <span>30 Teilnehmer</span>
              </div>
            </div>
          </a>
          <a href="Event - Unternehmertage Zypern 2023.html" className="uc-archive-card">
            <img className="uc-archive-card-img" src="assets/zypern2023/cliff-view.jpg" alt="Zypern 2023" />
            <span className="uc-archive-card-play" aria-hidden="true">
              <svg width="14" height="16" viewBox="0 0 20 22" fill="currentColor">
                <path d="M1.5 1.866a1 1 0 0 1 1.5-.866l16 9.464a1 1 0 0 1 0 1.732l-16 9.464a1 1 0 0 1-1.5-.866V1.866z" />
              </svg>
            </span>
            <div className="uc-archive-card-body">
              <span className="uc-archive-card-year">2023 · Oktober</span>
              <h3>Zypern — Premiere</h3>
              <div className="uc-archive-card-meta">
                <span>Paphos</span>
                <span className="uc-archive-card-meta-sep">·</span>
                <span>22 Teilnehmer</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  SPOTLIGHT — Unternehmertage Cyprus
// =========================================================
function Spotlight() {
  return (
    <section className="uc-spotlight">
      <div className="uc-container">
        <div className="uc-spotlight-card">
          <div className="uc-spotlight-img" style={{ backgroundImage: `url(assets/10x/cod-resort-night.png)` }} />
          <div className="uc-spotlight-body">
            <span className="uc-spotlight-eyebrow">Unternehmertage 10x · Spotlight</span>
            <h2 className="uc-spotlight-title">10x denken — oder zuhause bleiben.</h2>
            <p>
              26. – 30. April 2027 · City of Dreams Limassol. Drei Tage Arbeit am eigenen Unternehmen mit
              einer einzigen Regel: kleiner als 10x — ist nicht. Ein Format für Unternehmer,
              die gerade nicht klein denken wollen.
            </p>
            <div className="uc-spotlight-meta">
              <div className="uc-spotlight-meta-item">
                <div className="uc-sm-lbl">Termin</div>
                <div className="uc-sm-val">26. – 30. April 2027</div>
              </div>
              <div className="uc-spotlight-meta-item">
                <div className="uc-sm-lbl">Location</div>
                <div className="uc-sm-val">City of Dreams · Limassol</div>
              </div>
              <div className="uc-spotlight-meta-item">
                <div className="uc-sm-lbl">Investment</div>
                <div className="uc-sm-val">€ 5.000 · all-in</div>
              </div>
            </div>
            <div className="uc-spotlight-actions">
              <a href="Event - Unternehmertage 10x.html" className="uc-btn uc-btn-primary">
                Zur Event-Seite <Icon.ArrowUpRight />
              </a>
              <a href="Event - Unternehmertage 10x.html#investment" className="uc-cta-link uc-cta-light" style={{ fontSize: 14 }}>
                Programm &amp; Preis ansehen
                <span className="uc-arrow-circle" style={{ width: 36, height: 36 }}>
                  <img src="assets/icon-arrow-button.svg" width="12" height="12" alt="" />
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  WORKATION SPLIT
// =========================================================
function UnternehmertageSplit() {
  return (
    <section className="uc-workation">
      <div className="uc-container uc-workation-inner">
        <div className="uc-workation-images">
          <img src="assets/coworking-space.webp" alt="Coworking" />
          <img src="assets/event-bike.webp" alt="E-Bike Tour" />
          <img src="assets/event-bensberg.webp" alt="Workshop" />
        </div>
        <div className="uc-workation-text">
          <span className="uc-eyebrow">Komm mit uns auf die Unternehmertage!</span>
          <h2 className="uc-section-title">
            Mehr Fokus. Mehr Energie.<br />Mehr Wissen.
          </h2>
          <p>
            Von motivierenden Vorträgen bis hin zu interaktiven Workshops bieten wir dir ein
            umfassendes Programm. Gemeinsame Ausflüge und Aktivitäten lockern die Atmosphäre
            und fördern die Gruppendynamik — am Strand, in den Alpen oder im Coworking Space.
          </p>
          <a href="#" className="uc-cta-link">
            Lerne uns Kennen
            <span className="uc-arrow-circle">
              <img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" />
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  FEATURE GRID — "Darum solltest du teil werden"
// =========================================================
function FeatureGrid() {
  const features = [
    { icon: 'icon-feature-1.svg', title: 'Erweitere dein Netzwerk', body: 'Lerne andere Unternehmer im Microsoft-Bereich kennen. Lernt voneinander und knüpft neue Freundschaften bei Sonnenuntergangs-Spaziergängen.' },
    { icon: 'icon-feature-2-work.svg', title: 'Experten direkt vor Ort', body: 'Für unsere Vorträge und Masterminds bringen wir nur die besten Speaker auf die Bühne. Tausche dich direkt mit Experten aus.' },
    { icon: 'icon-feature-3-tech.svg', title: 'Tausche dich mit Anderen aus', body: '"Viele Köche verderben den Brei" — hier nicht. Du hast die Chance, dich mit vielen Experten und Mitgliedern direkt auszutauschen.' },
    { icon: 'icon-feature-4-union.svg', title: 'Knüpfe Partnerschaften', body: 'Durch die Unternehmertage sind in der Vergangenheit neue Businessideen entsprungen. Nutze die Chance, dein Unternehmen auszubauen.' },
    { icon: 'icon-feature-5-workspace.svg', title: 'Generiere Aufträge', body: 'Ein anderes Mitglied hat genau die Lösung für dein Problem? Oder du überzeugst andere von deiner Expertise? Bierchen und Business.' },
    { icon: 'icon-feature-6-workspace-dark.svg', title: 'Gemeinsame Unternehmungen', body: 'In der Community triffst du auf Gleichgesinnte. E-Biken in den Alpen, Buggy Touren an der Küste, und, und, und…' },
    { icon: 'icon-feature-7-service.svg', title: 'Lerne abzuschalten', body: 'Deine Freizeit kommt durch den stressigen Arbeitsalltag viel zu kurz. Hier wirst du nicht nur networken — sondern auch am Strand liegen.' },
    { icon: 'icon-feature-8-space.svg', title: 'Günstigere Preise', body: 'Profitiere von insgesamt günstigeren Preisen auf Reisen, als wenn du alleine buchst. Wir organisieren alles für dich. Lehn dich zurück.' },
  ];
  return (
    <section className="uc-features">
      <div className="uc-container">
        <span className="uc-eyebrow">Koche nicht weiter deine eigene Suppe</span>
        <h2 className="uc-section-title">Darum solltest du teil der<br />Community werden:</h2>
        <div className="uc-feature-grid">
          {features.map((f) => (
            <div key={f.title} className="uc-feature">
              <div className="uc-feature-icon">
                <img src={`assets/${f.icon}`} alt="" />
              </div>
              <h4>{f.title}</h4>
              <p>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  CHRISTIAN — FOUNDER QUOTE
// =========================================================
function Christian() {
  return (
    <section className="uc-christian">
      <div className="uc-container uc-christian-inner">
        <div
          className="uc-christian-img"
          style={{ backgroundImage: `url(assets/christian-mic.jpg)`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }}
          aria-label="Christian Gross"
        />
        <div className="uc-christian-text">
          <span className="uc-eyebrow">Behind UC365</span>
          <blockquote>
            Als Unternehmer kennst du das: du arbeitest viel <em className="uc-italic">in</em> deinem Unternehmen,
            zu wenig <em className="uc-italic">an</em> ihm. Bei UC&nbsp;365 setzen wir uns mit Gleichgesinnten zusammen,
            tauschen ehrlich aus — und bringen unsere Unternehmen einen Schritt weiter.
          </blockquote>
          <div className="uc-christian-byline">
            <div className="uc-christian-byline-line" />
            <div>
              <div className="uc-christian-byline-name">Christian Gross</div>
              <div className="uc-christian-byline-role">Gründer UC 365 · Group CEO Gross Group</div>
            </div>
          </div>
          <a href="#" className="uc-cta-link">
            Kostenfreies Gespräch buchen
            <span className="uc-arrow-circle">
              <img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" />
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  TRAVEL TABS — Reisen mit der Community
// =========================================================
function TravelTabs() {
  const trips = [
    {
      key: 'mainz',
      tab: 'M365 Summit Mainz',
      title: 'M365 Summit Mainz 2026 — UC365-Klassentreffen',
      body: 'Die deutschsprachige Konferenz für Microsoft 365, Power Platform, Copilot und Dynamics. Für die UC365-Crew ist unsere M365 Konferenz vor allem eines: unser jährliches Klassentreffen. Wir reisen als Gruppe an, mieten gemeinsam Hotelzimmer und treffen uns zu unserem eigenen Side-Dinner.',
      image: 'assets/event-mainz.jpg',
      date: '12. – 14.10.2026',
      location: 'Rheingoldhalle Mainz',
      seats: 'Klassentreffen',
    },
    
    {
      key: 'ecs',
      tab: 'ECS Düsseldorf',
      title: 'European Collaboration Summit 2027',
      body: 'Die größte europäische Konferenz rund um Microsoft 365 Collaboration — über 3.000 Teilnehmer, 250+ Sessions, drei Tage Sessions und Side-Tracks. 2027 erstmals im CCD Düsseldorf.',
      image: 'assets/event-bensberg.webp',
      date: '31.05. – 02.06.2027',
      location: 'CCD Düsseldorf',
      seats: '10 / 15 frei',
    },
    {
      key: 'espc',
      tab: 'ESPC Amsterdam',
      title: 'ESPC — European SharePoint, M365 & Power Platform Conference',
      body: 'Die ESPC ist seit 15+ Jahren die Heimat-Konferenz der M365-Community. 2026 zum ersten Mal in Amsterdam, RAI — vier Tage Sessions auf höchstem Niveau, dazu der UC365-Side-Track für Mitglieder.',
      image: 'assets/event-bike.webp',
      date: '30.11. – 03.12.2026',
      location: 'RAI Amsterdam',
      seats: '8 / 10 frei',
    },
  ];
  const [active, setActive] = useState(trips[0].key);
  const trip = trips.find((t) => t.key === active);

  return (
    <section className="uc-travel">
      <div className="uc-container">
        <span className="uc-eyebrow">Reise mit der Community</span>
        <h2 className="uc-section-title">Wir bringen dich auf die wichtigsten<br />M365-Konferenzen Europas.</h2>
        <div className="uc-travel-tabs" role="tablist">
          {trips.map((t) => (
            <button
              key={t.key}
              role="tab"
              aria-selected={t.key === active}
              className={'uc-travel-tab' + (t.key === active ? ' is-active' : '')}
              onClick={() => setActive(t.key)}
            >
              {t.tab}
            </button>
          ))}
        </div>
        <div className="uc-travel-row" key={trip.key}>
          <img src={trip.image} alt={trip.title} />
          <div>
            <h3>{trip.title}</h3>
            <p>{trip.body}</p>
            <div className="uc-travel-fact-row">
              <div className="uc-travel-fact">
                <div className="uc-sm-lbl">Termin</div>
                <div className="uc-sm-val">{trip.date}</div>
              </div>
              <div className="uc-travel-fact">
                <div className="uc-sm-lbl">Location</div>
                <div className="uc-sm-val">{trip.location}</div>
              </div>
              <div className="uc-travel-fact">
                <div className="uc-sm-lbl">Verfügbar</div>
                <div className="uc-sm-val" style={{ color: 'var(--uc-orange)' }}>{trip.seats}</div>
              </div>
            </div>
            <a href="#" className="uc-cta-link">
              Mit der Community reisen
              <span className="uc-arrow-circle">
                <img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" />
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  TESTIMONIALS
// =========================================================
function Testimonials() {
  const items = [
    {
      photo: 'person-dennis.webp',
      name: 'Dennis Hoffstädte',
      role: 'Co-Founder & Geschäftsführer · DatenPioniere GmbH',
      quote: 'Es ist der absolute Wahnsinn, wie du hier mit über 20 anderen IT-Unternehmern an deinem Unternehmen arbeitest. Ich denke, dass sich hieraus sowohl Arbeitsfreundschaften als auch private Freundschaften finden. Ich habs auf gar keinen Fall bereut.',
    },
    {
      photo: 'person-dominik.jpeg',
      name: 'Dominik Stange',
      role: 'Co-Founder & Geschäftsführer · Adducate GmbH & Co KG',
      quote: 'Es ist eine megageile Veranstaltung, weil hier super viele Unternehmer sind, die die gleichen Probleme haben wie ich selber. Jeder gibt Workshops und der Austausch ist einfach super ungezwungen.',
    },
    {
      photo: 'https://cdn.prod.website-files.com/64786325af69e9b944c9ec89/66673377fa72a85a2d31f65f_Thomas.webp',
      name: 'Thomas Maier',
      role: 'Geschäftsführer · 365 Akademie',
      quote: 'Du verbringst nicht zwei Stunden mit jemandem, sondern eine Woche. Daraus entstehen Beziehungen, die du auf einer normalen Konferenz nie hinbekommst — und genau das macht das Format für mich einzigartig.',
    }
  ];
  return (
    <section className="uc-testimonials">
      <div className="uc-container">
        <span className="uc-eyebrow">Feedback ist uns wichtig</span>
        <h2 className="uc-section-title">Was unsere Mitglieder sagen.</h2>
        <div className="uc-testimonial-grid">
          {items.map((t) => (
            <figure key={t.name} className="uc-testimonial">
              <div className="uc-testimonial-quote-mark">"</div>
              <blockquote>{t.quote}</blockquote>
              <figcaption>
                <img src={t.photo.startsWith('http') ? t.photo : `assets/${t.photo}`} alt="" />
                <div>
                  <div className="uc-name">{t.name}</div>
                  <div className="uc-role">{t.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  FAQ
// =========================================================
function FAQ() {
  const items = [
    { q: 'Für wen ist UC 365 gedacht?', a: 'UC 365 ist eine vetted Community für Unternehmer und C-Level aus Firmen im Microsoft-Ökosystem — Service-Provider, Software-Vendoren, Distributoren, Research und Startups. Wenn du in einem dieser Felder unternehmerisch tätig bist, bist du hier richtig.' },
    { q: 'Wie werde ich Mitglied?', a: 'Du buchst ein kostenfreies, unverbindliches Gespräch mit Christian. Darin schauen wir gemeinsam, ob die Community zu dir und du zur Community passt. Danach entscheidest du, ob du dabei sein willst — wir entscheiden, ob wir gemeinsam Sinn ergeben.' },
    { q: 'Was kostet die Mitgliedschaft?', a: 'Die Mitgliedschaft ist bewusst kein anonymes Massenangebot. Die genauen Konditionen besprechen wir im persönlichen Gespräch, abhängig von deiner Unternehmenssituation und davon, welche Formate du nutzen möchtest.' },
    { q: 'Wie oft finden Events statt?', a: 'Zwei große Live-Formate pro Jahr (Unternehmertage + Unternehmerkongress), dazu mehrere Reisen zu wichtigen Branchen-Konferenzen wie der ESPC, ECS und Microsoft Ignite. Du wählst, was zu deinem Kalender passt.' },
    { q: 'Muss ich auf jeder Reise dabei sein?', a: 'Nein. Du nimmst genau die Formate mit, die dir passen. Manche unserer Mitglieder kommen zu allem, andere kommen einmal im Jahr — beides funktioniert.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="uc-faq" id="faq">
      <div className="uc-container">
        <div className="uc-faq-grid">
          <div className="uc-faq-side">
            <span className="uc-eyebrow">Häufige Fragen</span>
            <h2 className="uc-section-title" style={{ fontSize: 'clamp(32px, 3.4vw, 44px)' }}>
              Du hast noch Fragen?<br />Wir antworten.
            </h2>
            <p>
              Wenn deine Frage hier nicht beantwortet ist, schreib uns einfach — wir melden uns
              innerhalb eines Werktags zurück.
            </p>
            <a href="#" className="uc-cta-link">
              Frag uns alles
              <span className="uc-arrow-circle">
                <img src="assets/icon-arrow-button.svg" width="14" height="14" alt="" />
              </span>
            </a>
          </div>
          <div className="uc-faq-list">
            {items.map((it, i) => (
              <div key={it.q} className={'uc-faq-item' + (open === i ? ' is-open' : '')}>
                <button className="uc-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="uc-faq-q-mark"><Icon.Plus /></span>
                </button>
                <div className="uc-faq-a">
                  <p>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  PARTNERS
// =========================================================
function Partners() {
  return (
    <section className="uc-partners">
      <div className="uc-container">
        <div className="uc-partners-lbl">Mitglieder &amp; Partner aus dem M365-Ökosystem</div>
        <div className="uc-partners-row">
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-square" />Solutions2Share</a>
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-circle" />DatenPioniere</a>
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-square" />Adducate</a>
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-circle" />Summit 365</a>
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-square" />M365 Summit</a>
          <a href="#" className="uc-partner"><span className="uc-partner-dot uc-partner-dot-circle" />ESPC</a>
        </div>
      </div>
    </section>
  );
}

// =========================================================
//  FOOTER
// =========================================================
function Footer() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  return (
    <footer className="uc-footer">
      <div className="uc-container">
        <div className="uc-footer-cta">
          <div>
            <span className="uc-eyebrow uc-eyebrow-dark">mitmachen</span>
            <h2 className="uc-footer-title">Werde Teil der Community.</h2>
            <p>
              Buche dir ein kostenfreies, unverbindliches Gespräch mit Christian und wir
              besprechen, was dir die Community konkret bieten kann.
            </p>
            <a href="#" className="uc-cta-link uc-cta-light">
              Kontakt aufnehmen
              <span className="uc-arrow-circle uc-arrow-circle-lg">
                <img src="assets/icon-arrow-button.svg" width="18" height="18" alt="" />
              </span>
            </a>
          </div>
          <div className="uc-newsletter">
            <span className="uc-eyebrow uc-eyebrow-dark">News für M365 Unternehmer</span>
            <h3 className="uc-newsletter-title">Abonniere den Newsletter</h3>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSubmitted(true);
                setTimeout(() => setSubmitted(false), 4000);
                setEmail('');
              }}
            >
              <input
                type="email"
                placeholder="deine@email.de"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <button type="submit" className="uc-btn uc-btn-primary">Abonnieren</button>
            </form>
            {submitted && <p className="uc-newsletter-success">Danke — wir melden uns mit Updates.</p>}
            <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', marginTop: 12 }}>
              Maximal 1 Mail pro Monat. Jederzeit kündbar.
            </p>
          </div>
        </div>
        <div className="uc-footer-bottom">
          <div>
            <img src="assets/logo-horizontal-inverted.png" alt="UC365" className="uc-footer-logo" />
            <p className="uc-footer-tagline">
              Community für Unternehmer im Microsoft 365 Ökosystem.<br />
              Eine persönliche Initiative von Christian Gross.
            </p>
          </div>
          <div className="uc-footer-cols">
            <div>
              <h6>Community</h6>
              <a href="Die Community.html">Die Community</a>
              <a href="Mitglieder.html">Mitglieder</a>
              <a href="Unternehmertage.html">Unternehmertage</a>
              <a href="Unternehmerkongress.html">Unternehmerkongress</a>
              <a href="Termine.html">Termine</a>
              <a href="Bring a Friend.html">Bring a Friend</a>
            </div>
            <div>
              <h6>Inhalte</h6>
              <a href="Blog.html">Blog</a>
              <a href="Ressourcen.html">Ressourcen</a>
              <a href="Charter.html">Charter</a>
              <a href="Behind UC365.html">Über uns</a>
              <a href="FAQ.html">FAQ</a>
            </div>
            <div>
              <h6>Kontakt</h6>
              <a href="Apply.html">Bewerben</a>
              <a href="Kontakt.html">Kontakt</a>
              <a href="mailto:mail@uc365.community">E-Mail</a>
              <a href="#">LinkedIn</a>
              <a href="Pressekit.html">Pressekit</a>
            </div>
          </div>
        </div>
        <div className="uc-copy">
          <div>© UC&nbsp;365 — Unternehmer Community · Alle Rechte vorbehalten · <a href="Impressum.html">Impressum</a> · <a href="Datenschutz.html">Datenschutz</a></div>
          <div className="uc-socials">
            <a href="#" className="uc-social" aria-label="LinkedIn"><Icon.LinkedIn /></a>
            <a href="#" className="uc-social" aria-label="Instagram"><Icon.Instagram /></a>
            <a href="#" className="uc-social" aria-label="YouTube"><Icon.YouTube /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// =========================================================
//  EXPORT TO WINDOW
// =========================================================
Object.assign(window, {
  UC: {
    Header, Hero, Stats, EventsSection, PastEvents, Spotlight, UnternehmertageSplit,
    FeatureGrid, Christian, TravelTabs, Testimonials, FAQ, Partners, Footer,
  },
});
