// Reusable components for Midsummer Festival site

const { useState, useEffect, useRef } = React;

// ----- Icons -----
function Icon({ name, size = 24 }) {
  const stroke = "currentColor";
  const sw = 1.5;
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "train":
      return <svg {...common}><rect x="5" y="3" width="14" height="14" rx="3"/><path d="M5 11h14"/><path d="M9 17l-2 4"/><path d="M15 17l2 4"/><circle cx="9" cy="14" r="0.5" fill={stroke}/><circle cx="15" cy="14" r="0.5" fill={stroke}/></svg>;
    case "bus":
      return <svg {...common}><rect x="4" y="4" width="16" height="14" rx="2"/><path d="M4 11h16"/><path d="M7 18v2"/><path d="M17 18v2"/><circle cx="8" cy="15" r="0.5" fill={stroke}/><circle cx="16" cy="15" r="0.5" fill={stroke}/></svg>;
    case "shuttle":
      return <svg {...common}><path d="M3 16l1-7a2 2 0 0 1 2-1.7h12a2 2 0 0 1 2 1.7l1 7"/><circle cx="7" cy="16" r="2"/><circle cx="17" cy="16" r="2"/><path d="M9 16h6"/></svg>;
    case "car":
      return <svg {...common}><path d="M5 17l1.5-6a2 2 0 0 1 2-1.5h7a2 2 0 0 1 2 1.5L19 17"/><path d="M3 17h18v3H3z"/><circle cx="7" cy="17" r="1.2"/><circle cx="17" cy="17" r="1.2"/></svg>;
    case "plane":
      return <svg {...common}><path d="M21 12c0 1-9 5-9 5l-2-2 2-3-5-1-2 2-2-1 3-3-3-3 2-1 2 2 5-1-2-3 2-2s9 4 9 5z"/></svg>;
    case "bike":
      return <svg {...common}><circle cx="6" cy="17" r="3.5"/><circle cx="18" cy="17" r="3.5"/><path d="M6 17l3-7h6l3 7"/><path d="M9 10l-1-4h-2"/><path d="M15 10h2"/></svg>;
    case "arrow":
      return <svg {...common}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14"/><path d="M5 12h14"/></svg>;
    case "play":
      return <svg {...common}><path d="M7 5l12 7-12 7z" fill={stroke}/></svg>;
    case "chevronLeft":
      return <svg {...common}><path d="M15 6l-6 6 6 6"/></svg>;
    case "chevronRight":
      return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    default: return null;
  }
}

// ----- Sticky Nav -----
function Nav({ lang, setLang, copy, activeSection }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { id: 'info', label: copy.nav.info },
    { id: 'tickets', label: copy.nav.tickets },
    { id: 'impressions', label: copy.nav.impressions },
    { id: 'travel', label: copy.nav.travel },
    { id: 'faq', label: copy.nav.faq },
  ];

  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <a href="#top" className="nav-brand">
        <img src="assets/logo.png" alt="Midsummer Festival" className="nav-logo-img" />
      </a>
      <div className="nav-links">
        {items.map(it => (
          <a key={it.id} href={`#${it.id}`} className={activeSection === it.id ? "active" : ""}>{it.label}</a>
        ))}
        <div className="lang-toggle">
          <button onClick={() => setLang('de')} className={lang === 'de' ? 'active' : ''}>DE</button>
          <button onClick={() => setLang('en')} className={lang === 'en' ? 'active' : ''}>EN</button>
        </div>
      </div>
      <a href="https://shop.paylogic.com/9c9e7cbdc9e542c99b445655d5ff0459" target="_blank" rel="noopener" className="nav-cta">
        {copy.nav.ctaTickets}
        <Icon name="arrow" size={14}/>
      </a>
    </nav>
  );
}

// ----- Countdown -----
function Countdown({ labels }) {
  const target = new Date('2026-06-20T12:00:00+02:00').getTime();
  const calc = () => {
    const diff = Math.max(0, target - Date.now());
    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    return { d, h, m, s };
  };
  const [t, setT] = useState(calc());
  useEffect(() => {
    const i = setInterval(() => setT(calc()), 1000);
    return () => clearInterval(i);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="countdown">
      <div className="countdown-cell"><span className="countdown-num">{pad(t.d)}</span><span className="countdown-label">{labels[0]}</span></div>
      <div className="countdown-cell"><span className="countdown-num">{pad(t.h)}</span><span className="countdown-label">{labels[1]}</span></div>
      <div className="countdown-cell"><span className="countdown-num">{pad(t.m)}</span><span className="countdown-label">{labels[2]}</span></div>
      <div className="countdown-cell"><span className="countdown-num">{pad(t.s)}</span><span className="countdown-label">{labels[3]}</span></div>
    </div>
  );
}

// ----- Reveal on scroll -----
function Reveal({ children, delay = 0, as = 'div', ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={"reveal " + (visible ? "in " : "") + (rest.className || "")} style={{ transitionDelay: `${delay}ms`, ...(rest.style || {}) }}>{children}</Tag>;
}

// ----- Ticker -----
function Ticker({ items }) {
  const content = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span className="sep"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="ticker">
      <div className="ticker-track">
        {content}{content}
      </div>
    </div>
  );
}

// ----- Section header -----
function SectionHead({ num, eyebrow, heading }) {
  return (
    <div className="section-head">
      <div className="num">
        <span className="eyebrow">{eyebrow}</span>
      </div>
      <Reveal as="h2" className="display">{heading}</Reveal>
    </div>
  );
}

Object.assign(window, { Icon, Nav, Countdown, Reveal, Ticker, SectionHead });