// Sections.jsx — Events, Studio teaser, Gym teaser, Kollektiv, Footer.
// All event data is GENERIC placeholder (no real dates/names/venues).

const LP_EVENTS = [
  { kind: 'Open Air', where: 'Berlin · Sommer', time: 'Start 15h', tags: ['Disco', 'Proggy', 'Breaks'], live: false, accent: 'cyan' },
  { kind: 'Keller-Party', where: 'Berlin · Nacht', time: 'Tür 23h', tags: ['Techno', 'Breaks'], live: true, accent: 'magenta' },
  { kind: 'Chill-Floor', where: 'Festival · Vollmond', time: 'all night', tags: ['Downtempo', 'Ambient'], live: false, accent: 'orange' },
];

function EventCard({ ev }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article className={'lp-event ' + (ev.live ? 'is-live live-' + ev.accent : '')}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div className="lp-event-top">
        <span className={'t-eyebrow fg-' + ev.accent}>{ev.live ? '● live' : '// ' + ev.kind.toLowerCase()}</span>
        <span className="lp-event-time">{ev.time}</span>
      </div>
      <h3 className="lp-event-title">{ev.kind}</h3>
      <p className="lp-event-where">{ev.where}</p>
      <div className="lp-event-tags">
        {ev.tags.map(t => <span key={t} className="lp-tag sm">{t}</span>)}
      </div>
      <a className={'btn lp-event-btn' + (hover ? ' hot' : '')}>
        {ev.live ? 'Rein da' : 'Details folgen'}
      </a>
    </article>
  );
}

function Events() {
  return (
    <section className="lp-section" id="events">
      <div className="lp-section-head">
        <span className="t-eyebrow">// wo wir als nächstes tanzen</span>
        <h2 className="t-poster lp-section-title">Floors</h2>
        <p className="lp-section-sub">Generische Platzhalter — echte Daten & Line-ups gibt's in der Community. 🌀</p>
      </div>
      <div className="lp-events">{LP_EVENTS.map((ev, i) => <EventCard key={i} ev={ev} />)}</div>
    </section>
  );
}

function Teaser({ id, eyebrow, title, body, cta, accent, glyph, onGo }) {
  return (
    <section className={'lp-teaser teaser-' + accent} id={id}>
      <div className="lp-teaser-glyph">{glyph}</div>
      <div className="lp-teaser-body">
        <span className={'t-eyebrow fg-' + accent}>{eyebrow}</span>
        <h2 className="lp-teaser-title">{title}</h2>
        <p className="lp-teaser-text">{body}</p>
        <a className={'btn ' + (accent === 'magenta' ? 'magenta' : 'primary')} onClick={onGo}>{cta}</a>
      </div>
    </section>
  );
}

function Kollektiv() {
  return (
    <section className="lp-section lp-kollektiv" id="kollektiv">
      <span className="t-eyebrow">// wer das möglich macht</span>
      <h2 className="t-poster t-poster--magenta lp-section-title">Wir, alle.</h2>
      <p className="lp-kollektiv-text">
        DJs, Tänzer:innen, Crew, Technik, die Menge. Waffeln & Ingwershots — sogar im Menü.
        Wir haben's gefühlt. Love and peace. Rave on.
      </p>
      <div className="lp-kollektiv-row">
        <span className="lp-tag">DIY</span><span className="lp-tag">anti-kommerziell</span>
        <span className="lp-tag">gender-inklusiv</span><span className="lp-tag">community-getragen</span>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="lp-footer">
      <div className="lp-footer-mark">
        <img src="../../assets/spiral.svg" alt="" className="lp-footer-spiral" />
        <span className="t-display lp-footer-word">AUFN PUNKT</span>
      </div>
      <p className="lp-footer-line">Kunst im öffentlichen Raum · Berlin</p>
      <div className="lp-footer-links">
        <a href="#" onClick={e => e.preventDefault()}>@aufnpunkt.t</a>
        <a href="#" onClick={e => e.preventDefault()}>Community</a>
        <a href="#" onClick={e => e.preventDefault()}>Studio</a>
        <a href="#" onClick={e => e.preventDefault()}>Gym</a>
      </div>
      <p className="lp-footer-fine">Keine echten Daten · generische Platzhalter · 🌀 ✨ ❤️‍🔥</p>
    </footer>
  );
}

Object.assign(window, { Events, Teaser, Kollektiv, Footer });