/* global React */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const A = 'assets';

/* Scroll-reveal hook */
function useScrollReveal() {
  const ref = useRefS(null);
  useEffectS(() => {
    if (!ref.current || !window.IntersectionObserver) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { entry.target.classList.add('ah-revealed'); obs.disconnect(); } },
      { threshold: 0.08 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return ref;
}

/* ====================================================================
   HERO
   ==================================================================== */
function Hero({ ctaMode, submitUrl, ticketsUrl, showCountdown, variant }) {
  const isSubmit = ctaMode === 'submit';
  const onBlue = variant === 'blue';

  const bg = onBlue ? 'var(--ah-blue)' : 'var(--ah-cream)';
  const fg = onBlue ? 'var(--ah-cream)' : 'var(--ah-ink)';
  const accent = onBlue ? 'var(--ah-cream)' : 'var(--ah-blue)';
  const cover = onBlue ? `${A}/cover-ah26-blue.jpg` : `${A}/cover-ah26-cream.jpg`;

  return (
    <section id="top" className="ah-grain"
      style={{
        background: bg, color: fg, position: 'relative',
        padding: '40px 48px 0', overflow: 'hidden',
        minHeight: 'calc(100vh - 96px)',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        gap: 32, fontFamily: 'var(--font-mono)', fontSize: 12,
        letterSpacing: '.22em', textTransform: 'uppercase',
        paddingBottom: 24,
      }}>
        <span>25 · 26 · 27 August 2026</span>
        <span style={{ textAlign: 'right' }}>
          Hamburg · DE<br />
          <span style={{ opacity: .7 }}>3. Edition</span>
        </span>
      </div>

      <div style={{
        position: 'relative', zIndex: 2, flex: 1,
        display: 'grid', gridTemplateColumns: '1.15fr .85fr',
        alignItems: 'center', gap: 40,
      }} className="ah-stack-mobile">
        <div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 13,
            letterSpacing: '.22em', textTransform: 'uppercase',
            color: accent, marginBottom: 18,
          }}>
            ✸ Save the Date! ✸
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(60px, 11.5vw, 200px)',
            lineHeight: .85, margin: '0 0 28px',
            letterSpacing: '-0.025em', color: fg,
          }}>
            After<br />
            Hours<br />
            <span style={{ color: accent }}>Filmfest.</span>
          </h1>
          <p style={{
            fontSize: 'clamp(16px, 2.2vw, 22px)', lineHeight: 1.4, maxWidth: '36ch',
            margin: '0 0 32px', color: fg, opacity: .92,
          }}>
            Drei Tage, drei Disziplinen. Workshops, Panels und ein Screening
            für aufstrebende Filmschaffende — direkt vor Publikum und
            Branchenprofis.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href={isSubmit ? submitUrl : ticketsUrl}
               target="_blank" rel="noopener noreferrer" className="ah-btn"
               style={{ fontSize: 17, padding: '16px 26px' }}>
              {isSubmit ? 'Jetzt einreichen' : 'Tickets sichern'} <span>→</span>
            </a>
            <a href="#programm" className="ah-btn ghost"
               onClick={(e) => { e.preventDefault();
                 const el = document.getElementById('programm');
                 el && window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
               }}
               style={{ fontSize: 17, padding: '16px 26px', color: fg, borderColor: fg }}>
              Programm ansehen
            </a>
          </div>
        </div>

        <div style={{
          position: 'relative', justifySelf: 'end',
          width: '100%', maxWidth: 520, aspectRatio: '1 / 1',
        }}>
          <img src={cover} alt="AH26"
            style={{
              width: '100%', height: '100%', objectFit: 'cover',
              border: '2px solid var(--ah-ink)', display: 'block',
            }} />
          <div style={{
            position: 'absolute', bottom: -22, left: -22,
            background: 'var(--ah-orange)', color: 'var(--ah-cream)',
            padding: '12px 16px', border: '2px solid var(--ah-ink)',
            boxShadow: '4px 4px 0 var(--ah-ink)',
            fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: .95,
            transform: 'rotate(-6deg)', letterSpacing: '-0.02em',
          }}>
            AH26
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '.2em',
              marginTop: 4, fontWeight: 400,
            }}>3. EDITION</div>
          </div>
        </div>
      </div>

      {showCountdown && (
        <CountdownBar deadlineDate="2026-06-28T23:59:59" fg={fg} bg={bg} accent={accent} mode={ctaMode} />
      )}
    </section>
  );
}

function CountdownBar({ deadlineDate, fg, accent, mode }) {
  const [t, setT] = useStateS(getCountdown(deadlineDate));
  useEffectS(() => {
    const id = setInterval(() => setT(getCountdown(deadlineDate)), 1000 * 30);
    return () => clearInterval(id);
  }, [deadlineDate]);
  const label = mode === 'submit' ? 'Bis Einreichungs-Deadline' : 'Bis Festival-Start';
  const target = mode === 'submit' ? t : getCountdown('2026-08-25T18:00:00');
  return (
    <div className="ah-countdown-mobile" style={{
      position: 'relative', zIndex: 2,
      marginTop: 48, marginBottom: 0,
      borderTop: `2px solid ${fg}`,
      display: 'grid', gridTemplateColumns: 'auto repeat(4, 1fr)',
      alignItems: 'center', gap: 0,
      fontFamily: 'var(--font-mono)',
    }}>
      <div style={{
        padding: '18px 24px 18px 0', textTransform: 'uppercase',
        letterSpacing: '.22em', fontSize: 11, opacity: .8,
      }}>{label}</div>
      {[['Tage', target.days], ['Std', target.hours], ['Min', target.minutes], ['Sek', target.seconds]].map(([k, v]) => (
        <div key={k} style={{
          padding: '14px 12px', borderLeft: `2px solid ${fg}`,
          display: 'flex', flexDirection: 'column', alignItems: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(36px,5vw,72px)',
            lineHeight: 1, color: accent, letterSpacing: '-0.02em',
          }}>{String(v).padStart(2, '0')}</div>
          <div style={{
            fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
            marginTop: 6, opacity: .7,
          }}>{k}</div>
        </div>
      ))}
    </div>
  );
}

function getCountdown(dateStr) {
  const diff = new Date(dateStr) - new Date();
  if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
  };
}

/* ====================================================================
   PROGRAMM
   ==================================================================== */
const PROGRAMM = [
  { day: 'DI', date: '25 AUG', title: 'Workshops', sub: 'Hands-on für Filmschaffende', location: 'Filmfabrique · Hamburg', color: 'cream' },
  { day: 'MI', date: '26 AUG', title: 'Panels & Talks', sub: 'Branchen-Gespräche, offen für alle', location: 'Filmfabrique · Hamburg', color: 'blue' },
  { day: 'DO', date: '27 AUG', title: 'Screening + Afterparty', sub: 'Die Filme. Das Publikum. Die Nacht.', location: 'Savoy Kino · 16:00–19:30 · Afterparty: Filmfabrique', color: 'cream' },
];

function Programm() {
  const ref = useScrollReveal();
  return (
    <section id="programm" ref={ref} style={{
      background: 'var(--ah-cream)', position: 'relative',
      padding: '120px 48px 96px',
    }} className="ah-grain ah-reveal">
      <header style={{
        position: 'relative', zIndex: 2,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        gap: 32, marginBottom: 48, paddingBottom: 16,
        borderBottom: '2px solid var(--ah-ink)',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(48px, 10vw, 160px)',
          margin: 0, lineHeight: .85, letterSpacing: '-0.025em',
        }}>
          Programm <span style={{ color: 'var(--ah-blue)' }}>'26</span>
        </h2>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          letterSpacing: '.2em', textTransform: 'uppercase',
          textAlign: 'right', lineHeight: 1.5,
        }}>
          3 Tage · 3 Disziplinen<br />
          <span style={{ opacity: .65 }}>Times subject to change</span>
        </div>
      </header>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        border: '2px solid var(--ah-ink)', position: 'relative', zIndex: 2,
      }} className="ah-stack-mobile ah-cards-stack">
        {PROGRAMM.map((d, i) => {
          const onBlue = d.color === 'blue';
          const bg = onBlue ? 'var(--ah-blue)' : 'var(--ah-cream-soft)';
          const fg = onBlue ? 'var(--ah-cream)' : 'var(--ah-ink)';
          const accent = onBlue ? 'var(--ah-cream)' : 'var(--ah-blue)';
          return (
            <div key={i} style={{
              background: bg, color: fg,
              borderLeft: i === 0 ? 'none' : `2px solid var(--ah-ink)`,
              padding: '32px 28px', display: 'flex', flexDirection: 'column',
              minHeight: 520,
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                borderBottom: `2px solid ${fg}`, paddingBottom: 12, marginBottom: 20,
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, lineHeight: .9, letterSpacing: '-0.02em' }}>{d.day}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase' }}>{d.date}</div>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 42,
                margin: '0 0 6px', lineHeight: .95, color: accent,
                letterSpacing: '-0.02em', fontWeight: 400,
              }}>{d.title}</h3>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, marginBottom: 4, opacity: .9 }}>{d.sub}</div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '.18em', textTransform: 'uppercase',
                opacity: .7, marginBottom: 22,
              }}>📍 {d.location}</div>
              <div style={{
                marginTop: 'auto', paddingTop: 24, borderTop: `1px solid ${fg}`,
                display: 'flex', flexDirection: 'column', gap: 10,
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', opacity: .7 }}>Detailprogramm</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2vw, 30px)', lineHeight: 1.05, letterSpacing: '-0.015em' }}>
                  Wird in Kürze bekannt gegeben.
                </div>
                <div style={{ fontSize: 13, opacity: .85, lineHeight: 1.5, maxWidth: '32ch' }}>
                  Folge uns auf Instagram für Updates zum Lineup und den Sessions.
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ====================================================================
   JURY
   ==================================================================== */
const JURY = [
  { n: 'Mira Stutz', r: 'Regisseurin', loc: 'Zürich · CH', tag: 'Vorsitz' },
  { n: 'Anouk Brunner', r: 'Produzentin', loc: 'Berlin · DE' },
  { n: 'Luca Frei', r: 'Festivalkurator', loc: 'Wien · AT' },
  { n: 'Davide Pellegrini', r: 'Editor', loc: 'Milano · IT' },
  { n: 'Hanna Albers', r: 'Drehbuchautorin', loc: 'Hamburg · DE' },
];

function Jury() {
  const ref = useScrollReveal();
  return (
    <section id="jury" ref={ref} className="ah-grain ah-on-blue ah-reveal" style={{
      padding: '120px 48px', position: 'relative', color: 'var(--ah-cream)',
    }}>
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '0.9fr 1.1fr',
        gap: 64, alignItems: 'start',
      }} className="ah-stack-mobile">
        <div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            letterSpacing: '.22em', textTransform: 'uppercase',
            opacity: .75, marginBottom: 18,
          }}>The 2026 Jury</div>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(48px, 9vw, 140px)',
            lineHeight: .85, margin: '0 0 28px', letterSpacing: '-0.025em',
          }}>Die<br />Jury.</h2>
          <p style={{ fontSize: 19, lineHeight: 1.45, maxWidth: '42ch', margin: '0 0 32px', opacity: .92 }}>
            Fünf Stimmen aus Regie, Produktion, Schnitt, Drehbuch und Kuration.
            Sie sichten alle Einreichungen — und entscheiden, welche Filme am
            27. August im Savoy Kino laufen.
          </p>
          <img src={`${A}/cover-jury-blue.jpg`} alt="Jury" className="ah-jury-img"
            style={{ width: '100%', maxWidth: 360, display: 'block', border: '2px solid var(--ah-ink)' }} />
        </div>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' }}>
          {JURY.map((p, i) => (
            <li key={i} style={{
              display: 'grid', gridTemplateColumns: '64px 1fr auto',
              gap: 24, alignItems: 'baseline', padding: '24px 0',
              borderTop: '2px solid var(--ah-cream)',
              borderBottom: i === JURY.length - 1 ? '2px solid var(--ah-cream)' : 'none',
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '.12em', opacity: .7 }}>0{i + 1}</span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 52px)', lineHeight: .95, letterSpacing: '-0.02em' }}>{p.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.16em', textTransform: 'uppercase', marginTop: 6, opacity: .8 }}>{p.r} · {p.loc}</div>
              </div>
              {p.tag && (
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
                  padding: '4px 10px', border: '2px solid var(--ah-cream)', whiteSpace: 'nowrap', alignSelf: 'center',
                }}>{p.tag}</span>
              )}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ====================================================================
   VERGANGENE EDITIONEN
   ==================================================================== */
const EDITIONEN = [
  {
    year: 'AH25', sub: '2025 · 2. Edition',
    cover: `${A}/cover-ah25-cream.jpg`,
    stats: [['Einreichungen', '184'], ['Filme gezeigt', '14'], ['Länder', '9'], ['Zuschauer', '~420']],
    quote: '«Klein, ehrlich, scharf kuratiert. Genau das, was die Szene gerade braucht.»',
    quoteWho: '— Filmbulletin, 2025',
  },
  {
    year: 'AH24', sub: '2024 · 1. Edition',
    cover: `${A}/cover-ah24-cream.jpg`,
    stats: [['Einreichungen', '96'], ['Filme gezeigt', '11'], ['Länder', '5'], ['Zuschauer', '~210']],
    quote: '«Eine Premiere, die mehr Substanz hatte als so manches etablierte Festival.»',
    quoteWho: '— DAS MAGAZIN, 2024',
  },
];

function Editionen() {
  const ref = useScrollReveal();
  return (
    <section id="editionen" ref={ref} style={{ background: 'var(--ah-cream)', padding: '120px 48px' }} className="ah-grain ah-reveal">
      <header style={{
        position: 'relative', zIndex: 2,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        gap: 32, marginBottom: 48, paddingBottom: 16, borderBottom: '2px solid var(--ah-ink)',
      }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 10vw, 160px)', margin: 0, lineHeight: .85, letterSpacing: '-0.025em' }}>Bisher.</h2>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase', textAlign: 'right', lineHeight: 1.5 }}>
          Vergangene Editionen<br /><span style={{ opacity: .65 }}>2024 — 2025</span>
        </div>
      </header>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 32, position: 'relative', zIndex: 2 }}>
        {EDITIONEN.map((e, i) => (
          <article key={e.year} style={{
            display: 'grid',
            gridTemplateColumns: i % 2 === 0 ? '0.9fr 1.1fr' : '1.1fr 0.9fr',
            gap: 40, alignItems: 'stretch',
            background: 'var(--ah-cream-soft)', border: '2px solid var(--ah-ink)',
          }} className="ah-stack-mobile">
            <div style={{
              order: i % 2 === 0 ? 1 : 2, padding: 0,
              borderRight: i % 2 === 0 ? '2px solid var(--ah-ink)' : 'none',
              borderLeft: i % 2 === 0 ? 'none' : '2px solid var(--ah-ink)',
            }}>
              <img src={e.cover} alt={e.year} style={{ width: '100%', height: '100%', minHeight: 360, objectFit: 'cover', display: 'block' }} />
            </div>
            <div style={{ order: i % 2 === 0 ? 2 : 1, padding: '32px 36px', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.22em', textTransform: 'uppercase', opacity: .75 }}>{e.sub}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6vw, 96px)', margin: 0, lineHeight: .9, color: 'var(--ah-blue)', letterSpacing: '-0.025em', fontWeight: 400 }}>{e.year}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '2px solid var(--ah-ink)', borderBottom: '2px solid var(--ah-ink)' }}>
                {e.stats.map(([k, v], j) => (
                  <div key={k} style={{ padding: '14px 12px', borderLeft: j === 0 ? 'none' : '1px solid var(--ah-ink)' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, lineHeight: 1, letterSpacing: '-0.02em' }}>{v}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', opacity: .7, marginTop: 6 }}>{k}</div>
                  </div>
                ))}
              </div>
              {/* Quote block with left accent line */}
              <blockquote style={{
                margin: 0,
                borderLeft: '4px solid var(--ah-blue)',
                paddingLeft: 20,
                padding: '16px 20px',
                background: 'var(--ah-cream)',
                borderTop: 'none', borderRight: 'none', borderBottom: 'none',
              }}>
                <p style={{
                  fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.2,
                  letterSpacing: '-0.01em', fontWeight: 400, margin: '0 0 10px',
                  maxWidth: 'none',
                }}>{e.quote}</p>
                <footer style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.16em',
                  textTransform: 'uppercase', opacity: .7,
                }}>{e.quoteWho}</footer>
              </blockquote>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ====================================================================
   MISSION
   ==================================================================== */
function Mission() {
  const ref = useScrollReveal();
  return (
    <section id="mission" ref={ref} className="ah-grain ah-on-blue ah-reveal" style={{
      padding: '160px 48px', position: 'relative', color: 'var(--ah-cream)',
    }}>
      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      }} className="ah-stack-mobile">
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.22em', textTransform: 'uppercase', opacity: .75, marginBottom: 18 }}>Über uns · Unsere Mission</div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4.4vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.015em', margin: '0 0 32px' }}>
            «Grossartige Kunst braucht nicht zwangsläufig grosse Budgets
            <span style={{ color: 'var(--ah-cream)', opacity: .5 }}>{' '}oder elitäre Kreise.»</span>
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: '52ch', opacity: .9, marginBottom: 18 }}>
            Einen Film zu machen, ist für Nachwuchs-Filmschaffende bereits eine enorme
            Herausforderung — ihn anschliessend auch gesehen zu bekommen, ist oft noch
            schwieriger. Ohne staatliche Förderung oder den Rückhalt einer renommierten
            Filmhochschule bleiben ihre Werke unsichtbar.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: '52ch', opacity: .9 }}>
            Wir präsentieren ausschliesslich Filme, die ohne staatliche Förderung oder
            institutionelle Unterstützung entstanden sind, und bieten aufstrebenden
            Filmschaffenden eine Bühne vor Publikum und Branchenprofis — plus
            Networking und Austausch zwischen neuen Talenten und etablierten Stimmen.
          </p>
          <a href="#richtlinien" className="ah-btn ghost"
             onClick={(e) => { e.preventDefault();
               const el = document.getElementById('richtlinien');
               el && window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
             }}
             style={{ color: 'var(--ah-cream)', borderColor: 'var(--ah-cream)', marginTop: 28 }}>
            Richtlinien lesen
          </a>
        </div>
        <div style={{ position: 'relative', justifySelf: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }}>
          <img src={`${A}/logo.png`} alt="After Hours"
            style={{ width: '100%', maxWidth: 380, display: 'block', filter: 'brightness(0) invert(1)' }} />
        </div>
      </div>
    </section>
  );
}

/* ====================================================================
   RICHTLINIEN / FAQ
   ==================================================================== */
const FAQ = [
  { q: 'Ziel des Festivals', a: 'Das Festival dient der Förderung von Filmschaffenden, die ausserhalb etablierter institutioneller und finanzieller Förderstrukturen arbeiten. Ziel ist es, insbesondere Werke sichtbar zu machen, die ohne massgebliche Unterstützung durch Filmhochschulen, staatliche Förderinstitutionen oder etablierte Branchennetzwerke entstanden sind.' },
  { q: '1. Unabhängigkeit der Produktion', a: 'Eingereichte Filme müssen eigenständig und unabhängig produziert worden sein. Eine Produktion gilt insbesondere dann als nicht unabhängig, wenn sie im Rahmen eines Studiums an einer anerkannten Film-, Kunst- oder Medienhochschule entstanden ist; eine anerkannte Hochschule, Akademie oder vergleichbare Institution als Produzentin, Koproduzentin oder massgebliche Unterstützerin beteiligt war; oder wesentliche Ressourcen (insbesondere Finanzierung, Infrastruktur oder Personal) durch eine solche Institution gestellt wurden.' },
  { q: '2. Ausschluss institutionell geprägter Produktionen', a: 'Von der Teilnahme ausgeschlossen sind insbesondere Filme, die im Kontext folgender Einrichtungen entstanden sind: Deutsche Film- und Fernsehakademie Berlin, Hochschule für Fernsehen und Film München, Filmuniversität Babelsberg Konrad Wolf, Filmakademie Baden-Württemberg, Internationale Filmschule Köln, Hamburg Media School, Macromedia Hochschule für Medien und Kommunikation, Mediadesign Hochschule, Hochschule der Medien Stuttgart, Universität der Künste Berlin, Kunsthochschule für Medien Köln, Kunstakademie Düsseldorf, Hochschule für bildende Künste Hamburg. Der Veranstalter behält sich vor, weitere Institutionen im Einzelfall als vergleichbar einzustufen.' },
  { q: '3. Teilnahme von Studierenden und Absolvent:innen', a: 'Eine Teilnahme ist nicht allein deshalb ausgeschlossen, weil Filmschaffende an einer Hochschule eingeschrieben sind oder waren. Voraussetzung ist jedoch, dass der eingereichte Film nicht im Rahmen des Studiums entstanden ist und ohne Nutzung institutioneller Ressourcen realisiert wurde. Die Darlegungs- und Nachweispflicht liegt bei den Einreichenden.' },
  { q: '4. Finanzierung und Förderung', a: 'Nicht zugelassen sind Filme, die massgeblich durch staatliche oder regionale Filmförderung finanziert wurden oder unter Beteiligung von Fernsehsendern, Streaming-Plattformen oder etablierten Produktionsfirmen entstanden sind. Eine Förderung gilt insbesondere dann als massgeblich, wenn sie einen wesentlichen Anteil der Gesamtfinanzierung ausmacht oder die Produktion strukturell ermöglicht hat.' },
  { q: '5. Transparenzpflicht', a: 'Einreichende sind verpflichtet, im Rahmen der Anmeldung vollständige und wahrheitsgemässe Angaben zu machen über Produktionskontext, Finanzierung, institutionelle Beteiligungen und genutzte Ressourcen. Der Veranstalter ist berechtigt, entsprechende Nachweise anzufordern.' },
  { q: '6. Ausschluss bei Falschangaben', a: 'Unrichtige oder unvollständige Angaben können zum Ausschluss vom Festival führen, auch nachträglich. Bereits vergebene Preise können in diesem Fall aberkannt werden.' },
  { q: '7. Ermessensspielraum des Veranstalters', a: 'Der Veranstalter behält sich vor, im Einzelfall eine inhaltliche Bewertung der Unabhängigkeit vorzunehmen. Massgeblich ist dabei nicht die formale Zuordnung zu einer Institution, sondern der tatsächliche Grad an strukturellem, finanziellem und netzwerkbezogenem Vorteil.' },
  { q: '8. Schlussbestimmung', a: 'Mit der Einreichung erkennen die Teilnehmenden diese Bedingungen an.' },
];

function Richtlinien({ submitUrl }) {
  const [openIdx, setOpenIdx] = useStateS(0);
  const ref = useScrollReveal();
  return (
    <section id="richtlinien" ref={ref} style={{
      background: 'var(--ah-cream)', padding: '120px 48px', position: 'relative',
    }} className="ah-grain ah-reveal">
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '0.95fr 1.05fr',
        gap: 64, alignItems: 'start',
      }} className="ah-stack-mobile">
        <div style={{ position: 'sticky', top: 110 }} className="ah-sticky-sidebar">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--ah-blue-deep)', marginBottom: 18 }}>Richtlinien · FAQ</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 9vw, 140px)', margin: '0 0 24px', lineHeight: .85, letterSpacing: '-0.025em' }}>
            Reich<br />deinen<br />
            <span style={{ color: 'var(--ah-blue)' }}>Film ein.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.45, maxWidth: '40ch', marginBottom: 24 }}>
            Wir lesen jede Einreichung. Wir antworten allen. Keine Gebühr, keine Quoten.
          </p>
          <div style={{
            display: 'inline-flex', flexDirection: 'column', gap: 6,
            border: '2px solid var(--ah-ink)', padding: '14px 18px',
            background: 'var(--ah-cream-soft)', marginBottom: 22,
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', opacity: .7 }}>Deadline</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--ah-blue)' }}>28. Juni 2026</span>
            <span style={{ fontSize: 13, opacity: .8 }}>23:59 Uhr (MESZ)</span>
          </div>
          <div>
            <a href={submitUrl} target="_blank" rel="noopener noreferrer" className="ah-btn" style={{ fontSize: 16 }}>
              Jetzt einreichen <span>→</span>
            </a>
          </div>
        </div>

        {/* Animated FAQ accordion */}
        <div>
          {FAQ.map((f, i) => {
            const isOpen = openIdx === i;
            return (
              <div key={i} style={{
                borderTop: '2px solid var(--ah-ink)',
                borderBottom: i === FAQ.length - 1 ? '2px solid var(--ah-ink)' : 'none',
              }}>
                <button
                  onClick={() => setOpenIdx(isOpen ? -1 : i)}
                  style={{
                    width: '100%', background: 'none', border: 'none', cursor: 'pointer',
                    padding: '20px 0', display: 'flex', justifyContent: 'space-between',
                    gap: 16, alignItems: 'center', textAlign: 'left',
                  }}
                >
                  <span style={{
                    fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.4vw, 30px)',
                    lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--ah-ink)',
                  }}>{f.q}</span>
                  <span style={{
                    fontFamily: 'var(--font-body)', fontSize: 24, lineHeight: 1,
                    color: 'var(--ah-blue)', display: 'inline-block', flexShrink: 0,
                    transform: isOpen ? 'rotate(45deg)' : 'none',
                    transition: 'transform .2s ease',
                  }}>+</span>
                </button>
                <div style={{
                  overflow: 'hidden',
                  maxHeight: isOpen ? '600px' : '0',
                  transition: 'max-height .3s ease',
                }}>
                  <p style={{ margin: '0 0 20px', fontSize: 16, lineHeight: 1.6, maxWidth: '60ch', paddingBottom: 4 }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ====================================================================
   FOOTER
   ==================================================================== */
function FooterAH({ ctaMode, submitUrl, ticketsUrl }) {
  const isSubmit = ctaMode === 'submit';
  return (
    <footer style={{
      background: 'var(--ah-ink)', color: 'var(--ah-cream)',
      padding: '80px 48px 32px', position: 'relative',
    }} className="ah-grain">
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
        paddingBottom: 56, borderBottom: '2px solid var(--ah-cream)',
      }} className="ah-stack-mobile">
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5vw, 80px)', lineHeight: .9, letterSpacing: '-0.025em' }}>
            After Hours<br />Filmfestival
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', marginTop: 14, opacity: .7 }}>
            3. Edition · 25–27 August 2026 · Hamburg
          </div>
          <div style={{ marginTop: 24 }}>
            <a href={isSubmit ? submitUrl : ticketsUrl} target="_blank" rel="noopener noreferrer"
               className="ah-btn"
               style={{ background: 'var(--ah-cream)', color: 'var(--ah-blue)', borderColor: 'var(--ah-cream)' }}>
              {isSubmit ? 'Film einreichen →' : 'Tickets sichern →'}
            </a>
          </div>
        </div>
        <FooterCol title="Festival" links={[
          ['Programm', '#programm'], ['Jury', '#jury'],
          ['Vergangene Editionen', '#editionen'], ['Über uns', '#mission'],
        ]} />
        <FooterCol title="Einreichen" links={[
          ['Richtlinien', '#richtlinien'],
          ['Tally Form', submitUrl],
          ['Partner werden', 'mailto:partner@afterhours.film'],
        ]} />
        <FooterCol title="Folgen" links={[
          ['Instagram', '#'], ['Newsletter', '#'],
          ['hallo@afterhours.film', 'mailto:hallo@afterhours.film'],
        ]} />
      </div>
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, paddingTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '.16em', textTransform: 'uppercase', opacity: .65, flexWrap: 'wrap',
      }}>
        <span>© 2026 After Hours Filmfestival e.V.</span>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <a href="/blog/" className="ah-footer-link">Journal</a>
          <a href="/impressum.html" className="ah-footer-link">Impressum</a>
          <a href="/datenschutz.html" className="ah-footer-link">Datenschutz</a>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', opacity: .6, marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {links.map(([l, href]) => (
          <li key={l}>
            <a href={href}
               target={href.startsWith('http') ? '_blank' : undefined}
               rel="noopener noreferrer"
               className="ah-footer-link">
              {l}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Hero, Programm, Jury, Editionen, Mission, Richtlinien, FooterAH });
