// 07 · Organiser Public Profile

function ScreenOrganiser({ onNav }) {
  const C = window.V4;
  const allEvents = window.DESI_EVENTS;
  const org = {
    name: 'NRI Events GmbH',
    handle: '@nrievents',
    city: 'Berlin-Mitte',
    verified: true,
    founded: 2014,
    followers: 12400,
    events: 47,
    eventsThisYear: 18,
    about: 'Germany\'s leading promoter of South Asian live entertainment. We brought Diljit, Arijit and Shreya to Berlin. 300+ events across 11 years, zero cancellations.',
    specialty: 'Arena concerts · Bollywood tours',
    languages: ['English', 'Hindi', 'Punjabi', 'German'],
    rating: 4.9,
    reviews: 2840,
    responseTime: '< 2 hrs',
    accent: '#E54558',
  };

  const events = allEvents.slice(0, 6);
  const past = allEvents.slice(6, 10);

  const [tab, setTab] = React.useState('upcoming');

  return (
    <div data-screen-label="07 Organiser" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      {/* Profile header */}
      <div style={{
        background: `linear-gradient(135deg, #3B2E4D 0%, ${org.accent} 100%)`,
        position: 'relative', color: '#fff', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255,255,255,0.12), transparent 60%)',
        }}/>
        <div style={{
          position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '60px 40px 48px',
          display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 32, alignItems: 'center',
        }}>
          {/* Logo */}
          <div style={{
            width: 140, height: 140, borderRadius: 22,
            background: '#fff', color: C.ink,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500,
            boxShadow: '0 20px 40px -12px rgba(0,0,0,0.4)',
          }}>
            {org.name[0]}
          </div>
          {/* Info */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.025em', margin: 0 }}>{org.name}</h1>
              {org.verified && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '4px 10px', borderRadius: 99,
                  background: 'rgba(255,255,255,0.2)', backdropFilter: 'blur(10px)',
                  fontSize: 11, letterSpacing: '0.08em', fontWeight: 600,
                }}><V4Icon name="verified" size={12}/> VERIFIED</span>
              )}
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'rgba(255,255,255,0.75)', marginBottom: 12 }}>
              {org.handle} · {org.city} · Since {org.founded}
            </div>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.85)', maxWidth: 640, lineHeight: 1.5, margin: 0 }}>
              {org.about}
            </p>
            <div style={{ display: 'flex', gap: 20, marginTop: 18, fontSize: 13, color: 'rgba(255,255,255,0.85)' }}>
              <span><V4Icon name="star" size={13}/> {org.rating} · {org.reviews.toLocaleString()} reviews</span>
              <span>·</span>
              <span>Responds in {org.responseTime}</span>
              <span>·</span>
              <span>{org.languages.join(' · ')}</span>
            </div>
          </div>
          {/* Actions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button style={{
              height: 48, padding: '0 22px', borderRadius: 99, border: 0,
              background: '#fff', color: C.ink, fontSize: 14, fontWeight: 600,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
            }}><V4Icon name="plus" size={14}/> Follow</button>
            <button style={{
              height: 48, padding: '0 22px', borderRadius: 99,
              background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)',
              color: '#fff', fontSize: 14, fontWeight: 600, cursor: 'pointer',
            }}>Share profile</button>
          </div>
        </div>

        {/* Stat strip */}
        <div style={{
          position: 'relative', borderTop: '1px solid rgba(255,255,255,0.15)',
          maxWidth: 1440, margin: '0 auto', padding: '0 40px',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        }}>
          {[
            { k: org.events, v: 'Events all-time' },
            { k: org.eventsThisYear, v: 'This year' },
            { k: org.followers.toLocaleString(), v: 'Followers' },
            { k: org.specialty, v: 'Specialty', small: true },
          ].map((s, i) => (
            <div key={s.v} style={{
              padding: '24px 28px',
              borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: s.small ? 16 : 36, fontWeight: 500,
                letterSpacing: '-0.02em', lineHeight: 1.1,
              }}>{s.k}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', marginTop: 4 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tabs */}
      <div style={{ background: C.paper, borderBottom: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px', display: 'flex', gap: 0 }}>
          {['Upcoming', 'Past events', 'About', 'Reviews'].map(t => {
            const active = tab === t.toLowerCase().split(' ')[0];
            return (
              <button key={t} onClick={() => setTab(t.toLowerCase().split(' ')[0])} style={{
                height: 54, padding: '0 20px', border: 0, background: 'transparent',
                fontSize: 14, fontWeight: 500, cursor: 'pointer',
                color: active ? C.ink : C.ink3,
                borderBottom: active ? `2px solid ${C.red}` : '2px solid transparent',
              }}>{t}</button>
            );
          })}
        </div>
      </div>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '50px 40px 80px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 50 }}>
        <div>
          {tab === 'upcoming' && (
            <>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, margin: '0 0 24px' }}>Upcoming shows ({events.length})</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                {events.map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
              </div>
            </>
          )}
          {tab === 'past' && (
            <>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, margin: '0 0 24px' }}>Past events</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {past.map(e => (
                  <div key={e.id} style={{
                    display: 'grid', gridTemplateColumns: '80px 1fr auto auto', gap: 20, alignItems: 'center',
                    padding: 14, background: C.paper, borderRadius: 12, border: `1px solid ${C.line}`, opacity: 0.8,
                  }}>
                    <div style={{ width: 80, aspectRatio: '3/4', borderRadius: 6, overflow: 'hidden' }}>
                      <window.DesiPoster event={e}/>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>{e.artist}</div>
                      <div style={{ fontSize: 12, color: C.ink3, marginTop: 2 }}>{e.venue} · {e.dateShort}</div>
                    </div>
                    <div style={{ fontSize: 12, color: C.green, fontWeight: 600 }}>✓ Sold out</div>
                    <div style={{ fontSize: 12, color: C.ink3 }}>{e.attendees.toLocaleString()} attended</div>
                  </div>
                ))}
              </div>
            </>
          )}
          {tab === 'about' && (
            <div style={{ maxWidth: 720 }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, margin: '0 0 18px' }}>About {org.name}</h2>
              <p style={{ fontSize: 16, color: C.ink2, lineHeight: 1.65 }}>{org.about}</p>
              <p style={{ fontSize: 16, color: C.ink2, lineHeight: 1.65 }}>
                Founded in {org.founded} out of a single office in Berlin-Mitte, we've grown to a team of 24. Our promise: verified artists, refund guarantee, and zero cancelled shows — a record we've held for 11 years.
              </p>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, margin: '36px 0 12px' }}>Press</h3>
              <div style={{ display: 'flex', gap: 40, color: C.ink3, fontSize: 13, fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic' }}>
                <span>"The Ticketmaster of desi Germany." — Berliner Morgenpost</span>
              </div>
            </div>
          )}
          {tab === 'reviews' && (
            <div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, margin: '0 0 24px' }}>
                {org.rating} <span style={{ fontSize: 20, color: C.ink3 }}>({org.reviews.toLocaleString()} reviews)</span>
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {[
                  { name: 'Priya S.', when: '2 days ago', stars: 5, body: 'Seamless entry, audio was crystal clear. Venue staff spoke Hindi — small touches that make a difference.' },
                  { name: 'Rahul K.', when: '1 week ago', stars: 5, body: 'Third NRI event I\'ve been to. Never disappointed. Diljit was unreal.' },
                  { name: 'Anika M.', when: '2 weeks ago', stars: 4, body: 'Great show. Queue was long at the bar but that\'s the venue\'s problem, not the organiser\'s.' },
                ].map(r => (
                  <div key={r.name} style={{ padding: 22, background: C.paper, borderRadius: 12, border: `1px solid ${C.line}` }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <strong style={{ fontSize: 14 }}>{r.name}</strong>
                      <span style={{ fontSize: 11, color: C.ink3, fontFamily: 'var(--font-mono)' }}>{r.when}</span>
                    </div>
                    <div style={{ color: C.saffron, fontSize: 13, marginBottom: 8 }}>{'★'.repeat(r.stars)}{'☆'.repeat(5-r.stars)}</div>
                    <p style={{ fontSize: 14, color: C.ink2, margin: 0, lineHeight: 1.5 }}>{r.body}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Sidebar */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ padding: 22, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}` }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: C.ink3, marginBottom: 10, textTransform: 'uppercase' }}>Contact organiser</div>
            <button style={{ width: '100%', height: 42, borderRadius: 10, border: `1px solid ${C.line}`, background: '#fff', fontSize: 13, fontWeight: 500, cursor: 'pointer', marginBottom: 8 }}>Send message</button>
            <div style={{ fontSize: 12, color: C.ink3, lineHeight: 1.5 }}>Typically replies in {org.responseTime}. For event inquiries, bookings, sponsorships.</div>
          </div>

          <div style={{ padding: 22, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}` }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: C.ink3, marginBottom: 14, textTransform: 'uppercase' }}>Trust signals</div>
            {[
              { i: 'verified', l: 'Verified by Desipass' },
              { i: 'shield', l: 'Money-back guarantee' },
              { i: 'check', l: 'Zero cancellations · 11 yrs' },
              { i: 'star', l: '4.9 avg — 2,840 reviews' },
            ].map(x => (
              <div key={x.l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 13 }}>
                <span style={{ color: C.green }}><V4Icon name={x.i} size={14}/></span> {x.l}
              </div>
            ))}
          </div>

          <div style={{ padding: 22, background: C.plumDeep, color: '#fff', borderRadius: 14 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: C.pink, marginBottom: 10, textTransform: 'uppercase' }}>Subscribe</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, marginBottom: 6 }}>Never miss a show.</div>
            <p style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.65)', margin: '0 0 14px', lineHeight: 1.5 }}>Get 48-hour pre-sale access to every NRI Events show.</p>
            <button style={{ width: '100%', height: 42, borderRadius: 10, background: C.red, color: '#fff', border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Subscribe — free</button>
          </div>
        </aside>
      </div>

      <V4Footer/>
    </div>
  );
}