// Desipass V4 — shared chrome (top nav + footer) + hero

const C4 = window.V4;

// ───────────────────────────────────────────────
// Top navigation
// ───────────────────────────────────────────────
function V4TopNav({ onNav, transparent }) {
  const [city, setCity] = React.useState('Berlin');
  const [q, setQ] = React.useState('');

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: transparent ? 'rgba(20,20,20,0.45)' : '#fff',
      backdropFilter: transparent ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: transparent ? 'blur(14px)' : 'none',
      borderBottom: transparent ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${C4.line}`,
      color: transparent ? '#fff' : C4.ink,
      transition: 'background 200ms ease',
    }}>
      {/* Thin top bar — trust strip */}
      <div style={{
        background: transparent ? 'rgba(0,0,0,0.35)' : C4.plumDeep,
        color: '#f5efe5',
        fontSize: 11.5, letterSpacing: '0.04em',
        padding: '7px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 24, fontFamily: 'var(--font-ui)',
        whiteSpace: 'nowrap',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <V4Icon name="shield" size={12}/> Secure checkout
        </span>
        <span style={{ opacity: 0.25 }}>·</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <V4Icon name="wallet" size={12}/> Klarna · Pay in 3
        </span>
        <span style={{ opacity: 0.25 }}>·</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <V4Icon name="ticket" size={12}/> Instant mobile e-ticket
        </span>
        <span style={{ opacity: 0.25 }}>·</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <V4Icon name="globe" size={12}/> EN · DE · हिंदी
        </span>
      </div>

      <div style={{
        maxWidth: 1440, margin: '0 auto',
        padding: '14px 40px',
        display: 'flex', alignItems: 'center', gap: 28,
      }}>
        {/* Wordmark */}
        <a onClick={() => onNav('landing')} style={{
          cursor: 'pointer', display: 'flex', alignItems: 'baseline', gap: 2,
          fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600,
          letterSpacing: '-0.03em', color: 'inherit', textDecoration: 'none',
        }}>
          desi<span style={{ fontStyle: 'italic', color: C4.red, fontFamily: 'var(--font-serif-italic)', fontWeight: 400, fontSize: 30 }}>pass</span>
        </a>

        {/* Main nav */}
        <nav style={{ display: 'flex', gap: 22, fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap' }}>
          {['Concerts', 'Festivals', 'Club nights', 'Comedy', 'Theatre', 'Originals'].map(x => (
            <a key={x} style={{
              cursor: 'pointer', color: 'inherit',
              opacity: transparent ? 0.9 : 0.85,
              textDecoration: 'none',
              display: 'flex', alignItems: 'center', gap: 3,
            }}>
              {x === 'Originals' && <V4Icon name="sparkle" size={13}/>}
              {x}
            </a>
          ))}
        </nav>

        {/* Search */}
        <div style={{
          flex: 1, maxWidth: 420, marginLeft: 'auto',
          display: 'flex', alignItems: 'center', gap: 0,
          height: 40, padding: '0 6px 0 14px', borderRadius: 99,
          border: transparent ? '1px solid rgba(255,255,255,0.3)' : `1px solid ${C4.line}`,
          background: transparent ? 'rgba(255,255,255,0.12)' : '#fff',
        }}>
          <V4Icon name="search" size={15}/>
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Diljit · Arijit · Holi · Karan Aujla…"
            style={{
              flex: 1, height: '100%', border: 0, background: 'transparent',
              outline: 'none', padding: '0 12px',
              fontSize: 13.5, color: 'inherit',
            }}
          />
          <button style={{
            height: 30, padding: '0 14px', borderRadius: 99,
            background: C4.red, color: '#fff', border: 0,
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
          }}>Search</button>
        </div>

        {/* City + account */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={{
            display: 'flex', alignItems: 'center', gap: 6,
            height: 40, padding: '0 12px', borderRadius: 99,
            background: 'transparent',
            border: transparent ? '1px solid rgba(255,255,255,0.25)' : `1px solid ${C4.line}`,
            color: 'inherit', fontSize: 13, fontWeight: 500, cursor: 'pointer',
          }}>
            <V4Icon name="pin" size={14}/> {city}
            <V4Icon name="cheD" size={13}/>
          </button>
          <button style={{
            width: 40, height: 40, borderRadius: 99,
            background: 'transparent',
            border: transparent ? '1px solid rgba(255,255,255,0.25)' : `1px solid ${C4.line}`,
            color: 'inherit', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><V4Icon name="heart" size={15}/></button>
          <button style={{
            height: 40, padding: '0 18px', borderRadius: 99,
            background: transparent ? '#fff' : C4.ink,
            color: transparent ? C4.ink : '#fff',
            border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
          }}><V4Icon name="user" size={14}/> <span style={{whiteSpace:'nowrap'}}>Sign in</span></button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// HERO — cinematic, editorial headline, pinned search
// ───────────────────────────────────────────────
function V4Hero({ onNav }) {
  const events = window.DESI_EVENTS;
  // Cycle through 3 hero events
  const [idx, setIdx] = React.useState(0);
  const featured = events.filter(e => e.featured).slice(0, 4);
  const current = featured[idx] || events[0];

  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % featured.length), 5200);
    return () => clearInterval(t);
  }, [featured.length]);

  return (
    <div style={{
      position: 'relative', width: '100%', height: 720,
      overflow: 'hidden', background: C4.plumDeep,
      marginTop: -88, paddingTop: 88,
    }}>
      {/* Animated background — layered gradient "crowd" */}
      {featured.map((e, i) => (
        <div key={e.id} style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(ellipse 60% 40% at 20% 30%, ${e.poster[0]}cc 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 80% 70%, ${e.poster[1]}cc 0%, transparent 60%),
            linear-gradient(180deg, ${C4.plumDeep} 0%, #000 100%)
          `,
          opacity: i === idx ? 1 : 0,
          transition: 'opacity 1200ms ease',
        }}/>
      ))}

      {/* Film grain texture via inline SVG */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.2, mixBlendMode: 'overlay', pointerEvents: 'none' }}>
        <filter id="v4grain">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/>
          <feColorMatrix values="0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0.6 0"/>
        </filter>
        <rect width="100%" height="100%" filter="url(#v4grain)"/>
      </svg>

      {/* Faux stage lights */}
      <div style={{
        position: 'absolute', top: 0, left: '15%', width: 2, height: '70%',
        background: 'linear-gradient(180deg, rgba(255,200,150,0.4), transparent)',
        filter: 'blur(1px)',
      }}/>
      <div style={{
        position: 'absolute', top: 0, left: '28%', width: 2, height: '80%',
        background: 'linear-gradient(180deg, rgba(229,69,88,0.35), transparent)',
        filter: 'blur(1px)',
      }}/>
      <div style={{
        position: 'absolute', top: 0, right: '20%', width: 2, height: '75%',
        background: 'linear-gradient(180deg, rgba(244,181,160,0.4), transparent)',
        filter: 'blur(1px)',
      }}/>

      {/* Crowd silhouette using SVG path — heads & hands */}
      <svg viewBox="0 0 1440 220" preserveAspectRatio="none" style={{
        position: 'absolute', bottom: 0, left: 0, width: '100%', height: 240,
        opacity: 0.7,
      }}>
        <defs>
          <linearGradient id="crowdGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(0,0,0,0.2)"/>
            <stop offset="100%" stopColor="rgba(0,0,0,1)"/>
          </linearGradient>
        </defs>
        {/* A wavy crowd silhouette: heads + arms */}
        <path d="M0 220 L0 140
          C 40 120, 60 100, 80 120 C 100 140, 110 90, 130 110
          C 150 130, 170 80, 190 100 C 210 120, 220 70, 240 90
          L 250 50 L 260 80 C 280 70, 300 110, 320 100
          C 340 90, 360 130, 380 120 C 400 110, 420 80, 440 100
          C 460 120, 475 60, 490 90 C 505 120, 520 80, 540 110
          L 550 60 L 555 100 C 580 90, 600 130, 620 120
          C 640 110, 660 140, 680 130 C 700 120, 720 90, 740 110
          C 760 130, 780 80, 800 100 C 820 120, 840 90, 860 120
          L 870 50 L 880 90 C 900 80, 920 120, 940 110
          C 960 100, 980 130, 1000 120 C 1020 110, 1040 80, 1060 100
          C 1080 120, 1100 90, 1120 110 C 1140 130, 1160 80, 1180 100
          C 1200 120, 1220 90, 1240 120 C 1260 150, 1280 100, 1300 120
          C 1320 140, 1340 110, 1360 130 C 1380 150, 1400 120, 1440 140
          L 1440 220 Z" fill="url(#crowdGrad)"/>
      </svg>

      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 10, maxWidth: 1440, margin: '0 auto',
        padding: '60px 40px 0',
        color: '#fff',
        display: 'grid', gridTemplateColumns: '1fr 420px',
        gap: 60, alignItems: 'center',
        height: 'calc(100% - 88px)',
      }}>
        {/* Left — editorial headline */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 14px 8px 10px', borderRadius: 99,
            background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,0.15)',
            fontSize: 12, fontWeight: 500, letterSpacing: '0.02em',
            marginBottom: 28, whiteSpace: 'nowrap',
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: 99,
              background: C4.red, boxShadow: `0 0 0 4px ${C4.red}33`,
              animation: 'v4pulse 1.6s infinite ease-in-out',
            }}/>
            <span style={{ opacity: 0.9 }}>Now booking · Summer 2026</span>
            <span style={{ opacity: 0.3 }}>·</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.8 }}>
              {events.length * 3}+ events across Germany
            </span>
          </div>

          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 88, fontWeight: 400,
            letterSpacing: '-0.035em', lineHeight: 1.02,
            margin: '0 0 32px', textWrap: 'balance',
            color: '#fff',
          }}>
            Your home for <em style={{
              fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
              fontWeight: 400, color: C4.pink, fontSize: 96,
            }}>desi nights</em><br/>
            in Germany.
          </h1>

          <p style={{
            fontSize: 17, lineHeight: 1.55, maxWidth: 520,
            color: 'rgba(255,255,255,0.78)', margin: '0 0 40px',
          }}>
            Bollywood concerts. Punjabi tours. Candlelight classical.<br/>
            Holi, Diwali, Garba — every weekend, every big city.
          </p>

          {/* Pinned search bar — 4 fields */}
          <div style={{
            display: 'flex', alignItems: 'stretch',
            background: '#fff', borderRadius: 99,
            height: 72, boxShadow: '0 20px 60px -10px rgba(0,0,0,0.5)',
            maxWidth: 680,
          }}>
            {[
              { label: 'Artist / Event', value: 'Diljit Dosanjh', w: '1.4fr', icon: 'search' },
              { label: 'City', value: 'Berlin', w: '1fr', icon: 'pin' },
              { label: 'When', value: 'Next 30 days', w: '1fr', icon: 'calendar' },
            ].map((f, i) => (
              <div key={i} style={{
                flex: f.w === '1.4fr' ? 1.4 : 1,
                padding: '14px 18px 12px 22px',
                display: 'flex', flexDirection: 'column', gap: 2,
                borderRight: i < 2 ? `1px solid ${C4.line}` : 'none',
                cursor: 'pointer', position: 'relative',
                color: C4.ink,
              }}>
                <div style={{
                  fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em',
                  textTransform: 'uppercase', color: C4.ink3,
                }}>{f.label}</div>
                <div style={{
                  fontSize: 14, fontWeight: 500, color: C4.ink,
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {f.value}
                </div>
              </div>
            ))}
            <button style={{
              width: 72, background: C4.red, border: 0,
              borderTopRightRadius: 99, borderBottomRightRadius: 99,
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
            }}>
              <V4Icon name="search" size={22} sw={2.2}/>
            </button>
          </div>

          {/* Trust micro-row */}
          <div style={{
            display: 'flex', gap: 24, marginTop: 22,
            fontSize: 12, color: 'rgba(255,255,255,0.6)',
          }}>
            {[
              'Verified organisers only',
              'Money-back guarantee',
              '24/7 English/Hindi support',
            ].map(x => (
              <span key={x} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <V4Icon name="check" size={13}/> {x}
              </span>
            ))}
          </div>
        </div>

        {/* Right — featured event card (tall poster floated right) */}
        <div style={{
          position: 'relative', height: 520,
        }}>
          {featured.map((e, i) => (
            <div key={e.id} onClick={() => onNav('event', e.id)} style={{
              position: 'absolute', inset: 0,
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(20px)',
              transition: 'opacity 900ms ease, transform 900ms ease',
              cursor: 'pointer', pointerEvents: i === idx ? 'auto' : 'none',
            }}>
              <div style={{
                width: '100%', height: '100%',
                borderRadius: 16, overflow: 'hidden', position: 'relative',
                boxShadow: '0 40px 80px -20px rgba(0,0,0,0.6)',
                border: '1px solid rgba(255,255,255,0.1)',
              }}>
                <window.DesiPoster event={e} size="lg" style={{ height: '100%', borderRadius: 0, aspectRatio: 'auto' }}/>
                {/* Small badge top-right */}
                <div style={{
                  position: 'absolute', top: 16, right: 16,
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {e.status === 'selling-fast' && (
                    <span style={{
                      fontSize: 10, fontWeight: 700, letterSpacing: '0.15em',
                      padding: '5px 11px', borderRadius: 99,
                      background: 'rgba(0,0,0,0.55)', color: '#fff',
                      backdropFilter: 'blur(6px)',
                      fontFamily: 'var(--font-mono)',
                    }}>SELLING FAST</span>
                  )}
                </div>
                {/* Small price pill + CTA button floating at bottom */}
                <div style={{
                  position: 'absolute', bottom: 16, left: 16, right: 16,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <div style={{
                    padding: '8px 14px', borderRadius: 99,
                    background: 'rgba(0,0,0,0.55)', color: '#fff',
                    backdropFilter: 'blur(8px)',
                    display: 'inline-flex', alignItems: 'baseline', gap: 6,
                  }}>
                    <span style={{ fontSize: 10, opacity: 0.7, letterSpacing: '0.1em', fontFamily: 'var(--font-mono)' }}>FROM</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>{v4Eur(e.priceFrom)}</span>
                  </div>
                  <button style={{
                    height: 38, padding: '0 16px', borderRadius: 99,
                    background: '#fff', color: C4.ink, border: 0,
                    fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
                    display: 'flex', alignItems: 'center', gap: 6,
                    whiteSpace: 'nowrap',
                  }}>
                    Book <V4Icon name="arrow" size={12}/>
                  </button>
                </div>
              </div>
            </div>
          ))}

          {/* Tiny dot indicators */}
          <div style={{
            position: 'absolute', bottom: -30, left: 0, right: 0,
            display: 'flex', justifyContent: 'center', gap: 6,
          }}>
            {featured.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                width: i === idx ? 24 : 6, height: 6,
                borderRadius: 99, border: 0,
                background: i === idx ? '#fff' : 'rgba(255,255,255,0.3)',
                cursor: 'pointer', transition: 'all 300ms',
              }}/>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes v4pulse {
          0%, 100% { box-shadow: 0 0 0 0 ${C4.red}66; }
          50% { box-shadow: 0 0 0 8px ${C4.red}00; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { V4TopNav, V4Hero });