const { Button, Chip, StatCard, WaveDivider, BrandCard } = window.NaVlnChDesignSystem_5175fe;
const DS = '_ds/na-vln-ch-design-system-5175fe06-79d3-4f56-af83-85bce5f21438/';
const IG_URL = 'https://instagram.com/navlnaach';
const FORM_URL = 'https://tally.so/r/Y5b8RN';
const NAV_ITEMS = [
  { id: 'home', label: 'Domů', icon: 'house', href: 'index.html' },
  { id: 'trip', label: 'Trasa', icon: 'route', href: 'trip.html' },
  { id: 'about', label: 'O nás', icon: 'users', href: 'about.html' },
];

function SiteStyles() {
  return (
    <style>{`
      .nv-desktopnav{display:none}
      .nv-navfab-wrap{display:flex}
      @media (min-width:880px){
        .nv-desktopnav{display:flex}
        .nv-navfab-wrap{display:none}
      }
      .nv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
      @media (min-width:600px){.nv-grid{grid-template-columns:repeat(3,1fr)}}
      .nv-tile{position:relative;aspect-ratio:9/13;border-radius:var(--radius-sm);overflow:hidden;background:var(--navy-3);box-shadow:var(--shadow-sm)}
      .nv-tile video,.nv-tile img{width:100%;height:100%;object-fit:cover;display:block}
      .nv-tile video:fullscreen,.nv-tile video:-webkit-full-screen{object-fit:contain;background:#000}
      .nv-statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
      @media (min-width:600px){.nv-statgrid{grid-template-columns:repeat(4,1fr)}}
      a{color:var(--navy)}
      a:hover{color:var(--navy-2)}
    `}</style>
  );
}

function TopBar({ active }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(250,247,238,.92)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 'var(--wrap)', margin: '0 auto', padding: '10px 18px', display: 'flex', alignItems: 'center', gap: 14 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none', color: 'inherit', flex: '0 0 auto' }}>
          <img src="assets/logo-mark-navy.svg" alt="Na Vlnách" style={{ width: 30, height: 30 }} />
          <div>
            <b style={{ fontWeight: 800, fontSize: 14, lineHeight: 1 }}>Na Vlnách</b>
            <span style={{ display: 'block', fontSize: 9.5, color: 'var(--muted)', marginTop: 1, letterSpacing: '1.4px' }}>YACHT WEEK 2027</span>
          </div>
        </a>
        <nav className="nv-desktopnav" style={{ gap: 8, marginLeft: 'auto' }}>
          {NAV_ITEMS.map(s => <Chip key={s.id} as="a" href={s.href} active={active === s.id}>{s.label}</Chip>)}
        </nav>
        <a href={IG_URL} target="_blank" rel="noreferrer" aria-label="Instagram" style={{ marginLeft: active ? 0 : 'auto', width: 34, height: 34, borderRadius: 999, background: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
          <i data-lucide="instagram" style={{ width: 17, height: 17, color: '#fff' }}></i>
        </a>
      </div>
    </div>
  );
}

function BottomNav({ active }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open]);
  return (
    <div className="nv-navfab-wrap" style={{ position: 'fixed', left: 18, bottom: 'calc(18px + env(safe-area-inset-bottom))', zIndex: 60, flexDirection: 'column-reverse', alignItems: 'center', gap: 12 }}>
      <button onClick={() => setOpen(o => !o)} aria-label="Menu" style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--navy)', border: 'none', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow)', cursor: 'pointer' }}>
        <i data-lucide={open ? 'x' : 'menu'} style={{ width: 22, height: 22 }}></i>
      </button>
      {open && NAV_ITEMS.map(s => (
        <a key={s.id} href={s.href} aria-label={s.label} style={{ width: 48, height: 48, borderRadius: 999, background: active === s.id ? 'var(--navy)' : 'var(--paper)', boxShadow: 'var(--shadow)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: active === s.id ? '#fff' : 'var(--navy)', textDecoration: 'none' }}>
          <i data-lucide={s.icon} style={{ width: 20, height: 20 }}></i>
        </a>
      ))}
    </div>
  );
}

function StatBand() {
  return (
    <div className="nv-statgrid" style={{ margin: '24px 0' }}>
      <StatCard value="7" label="dní na moři" />
      <StatCard value="až 9" label="parťáků na lodi" />
      <StatCard value="~127" label="námořních mil" />
      <StatCard value="6" label="zátok a ostrovů" />
    </div>
  );
}

function VideoTile({ src, poster, kind, videoRef, onVideoClick }) {
  const localRef = React.useRef(null);
  const ref = (el) => { localRef.current = el; if (videoRef) videoRef(el); };
  React.useEffect(() => {
    const v = localRef.current;
    if (!v) return;
    const nudge = () => { try { if (v.currentTime < 0.05) v.currentTime = 0.05; } catch (e) {} };
    v.addEventListener('loadedmetadata', nudge);
    v.addEventListener('loadeddata', nudge);
    v.addEventListener('canplay', nudge);
    v.load();
    return () => { v.removeEventListener('loadedmetadata', nudge); v.removeEventListener('loadeddata', nudge); v.removeEventListener('canplay', nudge); };
  }, []);
  return (
    <div className="nv-tile">
      {kind === 'img'
        ? <img src={src} alt="Na Vlnách" />
        : <video ref={ref} src={src + '#t=0.05'} muted playsInline preload="auto" style={{ cursor: 'pointer' }} onClick={onVideoClick}></video>}
    </div>
  );
}

function useVideoSequence(count) {
  const refs = React.useRef([]);
  const activeRef = React.useRef(0);
  const setRef = (idx) => (el) => { refs.current[idx] = el; };
  const playAt = (idx) => {
    const vids = refs.current.filter(Boolean);
    vids.forEach(v => v.pause());
    const v = refs.current[idx];
    if (!v) return;
    v.muted = true;
    v.currentTime = 0;
    v.play().catch(() => {});
  };
  const handleClick = (idx) => (e) => {
    e.stopPropagation();
    refs.current.filter(Boolean).forEach(v => v.pause());
    const v = refs.current[idx];
    if (!v) return;
    activeRef.current = idx;
    v.muted = false;
    v.currentTime = 0;
    if (v.requestFullscreen) v.requestFullscreen().catch(() => {});
    else if (v.webkitEnterFullscreen) v.webkitEnterFullscreen();
    v.play().catch(() => {});
  };
  React.useEffect(() => {
    const vids = refs.current.filter(Boolean);
    if (!vids.length) return;
    vids.forEach((v, idx) => {
      v.addEventListener('ended', () => {
        if (v.muted) { activeRef.current = (idx + 1) % refs.current.length; playAt(activeRef.current); }
      });
    });
    const onFsChange = () => {
      if (!document.fullscreenElement) {
        const v = refs.current[activeRef.current];
        if (v) v.muted = true;
        playAt(activeRef.current);
      }
    };
    document.addEventListener('fullscreenchange', onFsChange);
    playAt(0);
    return () => document.removeEventListener('fullscreenchange', onFsChange);
  }, [count]);
  return { setRef, handleClick };
}
window.useVideoSequence = useVideoSequence;

function CTASection({ eyebrow, title, body, hideInstagram }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div style={{ background: 'linear-gradient(135deg,var(--navy),#073257)', color: '#fff', borderRadius: 'var(--radius)', padding: '38px 22px', textAlign: 'center', position: 'relative', overflow: 'hidden', margin: '30px 0' }}>
      <WaveDivider color="rgba(255,255,255,.06)" accent="rgba(127,196,221,.25)" height={44} flip style={{ position: 'absolute', left: 0, right: 0, top: -1 }} />
      {eyebrow && <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '3px', textTransform: 'uppercase', color: '#a9c8e6', marginBottom: 8 }}>{eyebrow}</div>}
      <div className="nv-script" style={{ fontSize: 'clamp(34px,7vw,48px)', color: '#fff', lineHeight: .9 }}>{title}</div>
      <p style={{ color: '#d7e6f4', maxWidth: 480, margin: '12px auto 22px', fontSize: 16 }}>{body}</p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Button variant="onBrand" as="a" href={FORM_URL} target="_blank" rel="noreferrer" iconRight={<i data-lucide="arrow-right" style={{ width: 17, height: 17 }}></i>}>Přihlásit se na plavbu</Button>
        {!hideInstagram && <Button variant="onBrand" as="a" href={IG_URL} target="_blank" rel="noreferrer" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.5)', display: 'inline-flex', alignItems: 'center', gap: 8 }} iconLeft={<i data-lucide="instagram" style={{ width: 16, height: 16 }}></i>}>Instagram</Button>}
      </div>
    </div>
  );
}

function PageBanner({ image, eyebrow, title }) {
  return (
    <header style={{ position: 'relative', overflow: 'hidden', textAlign: 'center', color: '#fff' }}>
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg,rgba(5,61,114,.55),rgba(4,48,95,.82)), url(${image}) center/cover` }}></div>
      <div style={{ position: 'relative', zIndex: 2, padding: '54px 22px 66px' }}>
        <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '3px', textTransform: 'uppercase', color: '#a9c8e6' }}>{eyebrow}</div>
        <div className="nv-script" style={{ fontSize: 'clamp(44px,10vw,72px)', color: '#fff', margin: '4px 0 0' }}>{title}</div>
      </div>
      <WaveDivider color="var(--cream)" accent="var(--aqua)" height={40} style={{ position: 'absolute', left: 0, right: 0, bottom: -1, zIndex: 1 }} />
    </header>
  );
}

function Footer() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <footer style={{ padding: '10px 22px 40px', textAlign: 'center' }}>
      <div className="nv-script" style={{ fontSize: 26, color: 'var(--navy)', marginBottom: 8 }}>Uvidíme se na vlnách</div>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 12, fontSize: 13.5 }}>
        {NAV_ITEMS.map(s => <a key={s.id} href={s.href} style={{ color: 'var(--muted)', textDecoration: 'none' }}>{s.label}</a>)}
        <a href={IG_URL} target="_blank" rel="noreferrer" style={{ color: 'var(--muted)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}><i data-lucide="instagram" style={{ width: 14, height: 14 }}></i>Instagram</a>
      </div>
      <div style={{ color: 'var(--muted)', fontSize: 12 }}>Na Vlnách 2026 · vytvořeno s láskou k moři</div>
    </footer>
  );
}

Object.assign(window, { DS, IG_URL, FORM_URL, NAV_ITEMS, SiteStyles, TopBar, BottomNav, StatBand, VideoTile, CTASection, PageBanner, Footer });