// Major page sections

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

// ----- Cinematic icons -----
function CinIcon({ name, size = 18 }) {
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "star": return <svg {...c} fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>;
    case "clock": return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "calendar": return <svg {...c}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>;
    case "play": return <svg {...c} fill="currentColor" stroke="none"><path d="M7 5l12 7-12 7z"/></svg>;
    case "chevL": return <svg {...c}><path d="M15 6l-6 6 6 6"/></svg>;
    case "chevR": return <svg {...c}><path d="M9 6l6 6-6 6"/></svg>;
    default: return null;
  }
}

// ----- HERO (cinematic streaming style) -----
function Hero({ copy, heroVariant }) {
  // Local hero video as primary source
  const src = "hero_video.MOV";

  // German labels for metadata pills (fallback to copy)
  const lang = copy.hero.countdownLabels[0] === 'Tage' ? 'de' : 'en';
  const metaRating = lang === 'de' ? '5. Edition' : '5th Edition';
  const metaDuration = lang === 'de' ? '13 Std · Day & Night' : '13 hrs · Day & Night';

  // Stagger helper
  const fade = (delay) => ({
    className: 'animate-blur-fade-up',
    style: { animationDelay: `${delay}ms` },
  });

  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <video autoPlay muted loop playsInline key={src} className="hero-video">
          <source src={src} type="video/mp4"/>
          <source src={src} type="video/quicktime"/>
        </video>
      </div>

      {/* Bottom-only blur overlay */}
      <div className="hero-blur-overlay"></div>
      {/* Golden summer sun glow from below */}
      <div className="hero-sun-glow"></div>

      <div className="hero-content-cinema">
        <div className="hero-bottom-row">
          <div style={{ flex: 1, minWidth: 0 }}>
            {/* Metadata row */}
            <div className="hero-meta-row" {...fade(300)}>
              <span className="meta-pill">
                <CinIcon name="star" size={16}/> {metaRating}
              </span>
              <span className="meta-sep">·</span>
              <span className="meta-pill">
                <CinIcon name="clock" size={16}/> {metaDuration}
              </span>
              <span className="meta-sep">·</span>
              <span className="meta-pill">
                <CinIcon name="calendar" size={16}/> {copy.hero.date}
              </span>
            </div>

            {/* Title */}
            <h1 className="hero-cinema-title" {...fade(400)}>
              {copy.hero.title.split('\n').map((l, i) => <div key={i}>{l}</div>)}
            </h1>

            {/* Claim */}
            <div className="hero-cinema-claim" {...fade(450)}>— {copy.hero.claim}</div>

            {/* Description */}
            <p className="hero-cinema-desc" {...fade(500)}>{copy.hero.intro}</p>

            {/* CTAs */}
            <div className="hero-cta-flex">
              <a href="https://shop.paylogic.com/9c9e7cbdc9e542c99b445655d5ff0459" target="_blank" rel="noopener" className="btn-watch animate-blur-fade-up" style={{ animationDelay: '600ms' }}>
                <CinIcon name="play" size={16}/> {copy.hero.ctaPrimary}
              </a>
              <a href="#info" className="btn-glass liquid-glass animate-blur-fade-up" style={{ animationDelay: '700ms' }}>
                {copy.hero.ctaGhost}
              </a>
            </div>
          </div>

        </div>

        {/* Countdown still beneath, but tightened */}
        <div className="animate-blur-fade-up" style={{ animationDelay: '1000ms', marginTop: 32 }}>
          <Countdown labels={copy.hero.countdownLabels}/>
        </div>
      </div>
    </section>
  );
}

// ----- INFO -----
function Info({ copy }) {
  return (
    <section id="info" className="section-pad" data-screen-label="01 Info">
      <div className="container">
        <SectionHead num="01" eyebrow={copy.info.eyebrow} heading={copy.info.heading.split('\n').map((l,i)=><div key={i}>{l}</div>)}/>
        <div className="info-grid">
          <div>
            <Reveal>
              <p className="info-lead">{copy.info.lead}</p>
            </Reveal>
            <Reveal delay={120}>
              <p className="info-body">{copy.info.body}</p>
            </Reveal>
          </div>
          <div>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{copy.info.featuresHead}</div>
            </Reveal>
            <div className="feature-list">
              {copy.info.features.map((f, i) => (
                <Reveal key={i} delay={i * 60} className="feature-row">
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="label">{f.label}</span>
                  <span className="meta">{f.meta}</span>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- TICKETS -----
function Tickets({ copy }) {
  return (
    <section id="tickets" className="tickets section-pad" data-screen-label="02 Tickets">
      <div className="container">
        <div className="tickets-inner">
          <Reveal as="h2" className="display tickets-headline">
            {copy.tickets.headline.split('\n').map((l, i) => <div key={i}>{l}</div>)}
          </Reveal>
          <div className="tickets-side">
            <span className="eyebrow">{copy.tickets.eyebrow}</span>
            <p className="tickets-warning">{copy.tickets.warning}</p>
            <a href="https://shop.paylogic.com/9c9e7cbdc9e542c99b445655d5ff0459" target="_blank" rel="noopener" className="btn btn-primary btn-large" style={{ alignSelf: 'flex-start' }}>
              {copy.tickets.cta}<span className="arrow"><Icon name="arrow" size={14}/></span>
            </a>
            <span className="mono" style={{ color: 'var(--fg-3)' }}>{copy.tickets.sub}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- GALLERY -----
function Gallery({ copy }) {
  const trackRef = useRefS(null);
  const [idx, setIdx] = useStateS(0);

  // Real festival photography from Rave im Schloss 2025 by Adrian Camo
  const images = [
    { src: "bilder/A7408395_RaveimSchloss_adrian.camo.jpg", caption: "Stage 01 · 2025" },
    { src: "bilder/A7408440_RaveimSchloss_adrian.camo.jpg", caption: "Crowd · Sonnenuntergang" },
    { src: "bilder/A7408615_RaveimSchloss_adrian.camo.jpg", caption: "Dance Floor" },
    { src: "bilder/A7408675_RaveimSchloss_adrian.camo.jpg", caption: "Night · Lights" },
    { src: "bilder/A7408800_RaveimSchloss_adrian.camo.jpg", caption: "Solstice Glow" },
    { src: "bilder/A7408883_RaveimSchloss_adrian.camo.jpg", caption: "Light Show" },
    { src: "bilder/A7409313_RaveimSchloss_adrian.camo.jpg", caption: "Late Night" },
    { src: "bilder/A7409372_RaveimSchloss_adrian.camo.jpg", caption: "Sunrise Closing" },
  ];

  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('.gallery-card');
    const w = card ? card.offsetWidth + 16 : 400;
    el.scrollBy({ left: dir * w, behavior: 'smooth' });
  };

  useEffectS(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const card = el.querySelector('.gallery-card');
      const w = card ? card.offsetWidth + 16 : 400;
      setIdx(Math.round(el.scrollLeft / w));
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  // Vary card sizes for visual rhythm
  const sizes = [
    { w: 540, h: 380 }, { w: 420, h: 540 }, { w: 640, h: 420 }, { w: 380, h: 540 },
    { w: 520, h: 380 }, { w: 460, h: 540 }, { w: 600, h: 420 }, { w: 480, h: 540 },
  ];

  return (
    <section id="impressions" className="section-pad" data-screen-label="03 Impressions">
      <div className="container">
        <SectionHead num="03" eyebrow={copy.gallery.eyebrow} heading={copy.gallery.heading.split('\n').map((l,i)=><div key={i}>{l}</div>)}/>
      </div>
      <div className="gallery-wrap">
        <div className="gallery-track" ref={trackRef} style={{ paddingLeft: 'clamp(20px, 4vw, 64px)', paddingRight: 'clamp(20px, 4vw, 64px)' }}>
          {images.map((img, i) => {
            const s = sizes[i % sizes.length];
            return (
              <div className="gallery-card" key={i} style={{ width: s.w, height: s.h }}>
                <img src={img.src} alt={img.caption} loading="lazy"/>
              </div>
            );
          })}
        </div>
        <div className="container">
          <div className="gallery-controls">
            <span className="gallery-counter">{String(idx + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')} · {copy.gallery.counter}</span>
            <div className="gallery-arrows">
              <button className="icon-btn" onClick={() => scroll(-1)} aria-label="prev"><Icon name="chevronLeft" size={18}/></button>
              <button className="icon-btn" onClick={() => scroll(1)} aria-label="next"><Icon name="chevronRight" size={18}/></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- TRAVEL -----
function Travel({ copy }) {
  return (
    <section id="travel" className="section-pad" data-screen-label="04 Travel">
      <div className="container">
        <SectionHead num="04" eyebrow={copy.travel.eyebrow} heading={copy.travel.heading.split('\n').map((l,i)=><div key={i}>{l}</div>)}/>
        <Reveal>
          <p className="info-lead" style={{ maxWidth: '70ch', marginBottom: 64 }}>{copy.travel.intro}</p>
        </Reveal>
        <div className="travel-grid">
          {copy.travel.cards.map((c, i) => (
            <Reveal key={i} delay={i * 70} className="travel-card">
              <div className="travel-icon"><Icon name={c.icon} size={32}/></div>
              <h3>{c.title}</h3>
              <ul>{c.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
              {c.address && <pre className="address-block">{c.address}</pre>}
              {c.cta && <a href={c.link || "#"} target={c.link ? "_blank" : undefined} rel={c.link ? "noopener" : undefined} className="small-cta">{c.cta}<Icon name="arrow" size={12}/></a>}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- FAQ -----
function FAQ({ copy }) {
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" className="section-pad" data-screen-label="05 FAQ">
      <div className="container">
        <SectionHead num="05" eyebrow={copy.faq.eyebrow} heading={copy.faq.heading.split('\n').map((l,i)=><div key={i}>{l}</div>)}/>
        <div className="faq-list">
          {copy.faq.items.map((item, i) => (
            <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <span>{item.q}</span>
                <span className="toggle"><Icon name="plus" size={14}/></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">
                  <div className="faq-a-content">{item.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- IMPRESSUM MODAL -----
function ImpressumModal({ onClose }) {
  return (
    <div className="impressum-overlay" onClick={onClose}>
      <div className="impressum-modal" onClick={e => e.stopPropagation()}>
        <button className="impressum-close" onClick={onClose} aria-label="Schließen">×</button>
        <h2 className="impressum-title">Impressum</h2>
        <div className="impressum-content">
          <p><strong>Midsummer Festival</strong></p>
          <p>Adresse: Sportplatzweg 23, 6336 Langkampfen, Österreich</p>
          <p>Firmenbuchnummer: FN 554118 f</p>
          <p>Firmenbuchgericht: Landesgericht Innsbruck</p>
          <br/>
          <p>Website: <a href="https://www.midsummerfestival.at" target="_blank" rel="noopener">www.midsummerfestival.at</a></p>
          <p>Zuständige Aufsichtsbehörde: Bezirkshauptmannschaft Kufstein</p>
          <p>Mitglied der WKO, Sparte Freizeit- und Sportbetriebe</p>
          <p>Gewerbeordnung: Veranstaltungsorganisation, Gastronomie</p>
          <br/>
          <p>Plattform der EU-Kommission zur Online-Streitbeilegung (OS):<br/>
          <a href="https://ec.europa.eu/odr" target="_blank" rel="noopener">https://ec.europa.eu/odr</a></p>
          <br/>
          <p>Wir sind nicht verpflichtet, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
        </div>
      </div>
    </div>
  );
}

// ----- FOOTER -----
function Footer({ copy }) {
  const [showImpressum, setShowImpressum] = useStateS(false);

  const handleColLink = (e, l) => {
    if (l.modal === 'impressum') {
      e.preventDefault();
      setShowImpressum(true);
    }
  };

  return (
    <>
      {showImpressum && <ImpressumModal onClose={() => setShowImpressum(false)}/>}
      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div>
              <div className="footer-brand">
                {copy.footer.tagline.split('\n').map((l, i) => (
                  <div key={i}>{i === 0 ? l : <span className="accent">{l}</span>}</div>
                ))}
              </div>
            </div>
            {copy.footer.cols.map((col, i) => (
              <div key={i}>
                <h4>{col.head}</h4>
                <ul>{col.links.map((l, j) => (
                  <li key={j}>
                    <a
                      href={l.href || "#"}
                      target={l.external ? "_blank" : undefined}
                      rel={l.external ? "noopener noreferrer" : undefined}
                      onClick={(e) => handleColLink(e, l)}
                    >{l.label}</a>
                  </li>
                ))}</ul>
              </div>
            ))}
          </div>
          <div className="footer-bottom">
            <span className="mono">{copy.footer.copy}</span>
            <span className="mono">Sportplatzweg 23 · 6336 Langkampfen · Austria</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Hero, Info, Tickets, Gallery, Travel, FAQ, Footer, CinIcon, ImpressumModal });