// FanCardsE.jsx — "Connect" pillar, with REAL fan cards from the app
// shown inside an iPhone: "Find Your Crew" feed

const CONNECT_FEED = [
  {
    initials: 'CS', avatarBg: '#E5E7EB', avatarInk: '#0A0B13',
    name: 'Cameron S.', city: 'Henderson, NV',
    team: 'RAIDERS', teamEmoji: '🏴‍☠️',
    bandBg: '#0A0B13',
    badges: [
      { icon: '🎟️', label: 'Season Ticket' },
      { icon: '🍕', label: 'Tailgate' },
      { icon: '✅', label: 'Verified', tone: 'green' },
    ],
  },
  {
    initials: 'BM', avatarBg: '#E5E7EB', avatarInk: '#0A0B13',
    name: 'Blake M.', city: 'Las Vegas, NV',
    team: 'GOLDEN KNIGHTS', teamEmoji: '⚔️',
    bandBg: '#B9975B',
    outline: '#000000',
    badges: [
      { icon: '🌟', label: 'Superfan' },
      { icon: '📍', label: 'My Section' },
      { icon: '✈️', label: 'Away Games' },
    ],
  },
  {
    initials: 'SP', avatarBg: '#6B3DE8', avatarInk: '#fff',
    name: 'Sydney P.', city: 'Las Vegas, NV',
    team: 'LIONS', teamEmoji: '🦁',
    bandBg: '#1C6EA4',
    badges: [
      { icon: '👑', label: 'Suite Member' },
      { icon: '🍔', label: 'Watch Party' },
      { icon: '🙏', label: 'Born Into This' },
    ],
  },
  {
    initials: 'JT', avatarBg: '#CE1141', avatarInk: '#fff',
    name: 'Jordan T.', city: 'Summerlin, NV',
    team: 'BULLS', teamEmoji: '🐂',
    bandBg: '#0A0B13',
    badges: [
      { icon: '🤖', label: 'The Analyst' },
      { icon: '🧦', label: 'Lucky Socks' },
      { icon: '⚡', label: 'Last Minute' },
    ],
  },
];

// Individual feed card — matches the app UI exactly
const FeedFanCard = ({ f }) => (
  <div style={{
    borderRadius: 14,
    overflow: 'hidden',
    border: f.outline
      ? `1.5px solid ${f.outline}`
      : f.highlight
        ? '1.5px solid #EF4444'
        : '1px solid rgba(0,0,0,0.08)',
    boxShadow: f.outline
      ? '0 2px 6px rgba(10,8,30,0.08)'
      : f.highlight
        ? '0 0 0 3px rgba(239, 68, 68, 0.08)'
        : '0 1px 2px rgba(10,8,30,0.04)',
    background: '#1B1F35',
  }}>
    {/* top band — avatar, name, team pill */}
    <div style={{
      background: f.bandBg,
      padding: '14px 14px 13px',
      display: 'flex', alignItems: 'center', gap: 11,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: '50%',
        background: f.avatarBg, color: f.avatarInk,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 800, fontSize: 14, letterSpacing: '0.02em',
        flexShrink: 0,
        textTransform: f.initials.length > 1 ? 'uppercase' : 'none',
      }}>{f.initials}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 14, fontWeight: 700, color: '#fff',
          letterSpacing: '-0.005em', lineHeight: 1.15,
        }}>{f.name}</div>
        <div style={{
          fontSize: 11, color: 'rgba(255,255,255,0.7)',
          marginTop: 2, letterSpacing: '-0.005em',
          whiteSpace: 'nowrap',
        }}>{f.city}</div>
      </div>
      <div style={{
        background: '#fff', color: '#0A0B13',
        borderRadius: 999,
        padding: '5px 10px 5px 7px',
        display: 'inline-flex', alignItems: 'center', gap: 5,
        fontSize: 10, fontWeight: 800, letterSpacing: '0.04em',
      }}>
        <span style={{ fontSize: 12 }}>{f.teamEmoji}</span>
        {f.team}
      </div>
    </div>

    {/* ABOUT ME + badges */}
    <div style={{ padding: '11px 14px 14px' }}>
      <div style={{
        fontSize: 10, fontWeight: 700, color: '#F7931E',
        letterSpacing: '0.14em', marginBottom: 8,
      }}>ABOUT ME</div>
      <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, width: '100%' }}>
        {f.badges.map(b => (
          <span key={b.label} style={{
            display: 'inline-flex', alignItems: 'center', gap: 3,
            padding: '4px 7px',
            borderRadius: 999,
            background: b.tone === 'green' ? 'rgba(34,197,94,0.18)' : 'rgba(255,255,255,0.08)',
            border: b.tone === 'green'
              ? '1px solid rgba(34,197,94,0.5)'
              : '1px solid rgba(255,255,255,0.12)',
            fontSize: 9, fontWeight: 600, color: '#fff',
            letterSpacing: '0.01em',
            whiteSpace: 'nowrap',
            flexShrink: 1, minWidth: 0,
          }}>
            <span style={{ fontSize: 10, flexShrink: 0 }}>{b.icon}</span>
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{b.label}</span>
          </span>
        ))}
      </div>

      {/* Action buttons */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
        marginTop: 11,
      }}>
        <div style={{
          padding: '10px 0', textAlign: 'center',
          borderRadius: 10,
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.1)',
          fontSize: 12, fontWeight: 700, color: '#fff',
        }}>Connect</div>
        <div style={{
          padding: '10px 0', textAlign: 'center',
          borderRadius: 10,
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.1)',
          fontSize: 12, fontWeight: 700, color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
          View Fan Card
        </div>
      </div>
    </div>
  </div>
);

// Filter chip at top of the in-app feed
const FilterChip = ({ label, icon, active, caret }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '7px 13px', borderRadius: 999, flexShrink: 0,
    background: active ? 'rgba(107,61,232,0.12)' : '#fff',
    border: active ? '1.5px solid var(--accent)' : '1px solid rgba(10,8,30,0.08)',
    color: active ? 'var(--accent)' : 'var(--ink)',
    fontSize: 12, fontWeight: 700,
    boxShadow: active ? 'none' : '0 1px 2px rgba(10,8,30,0.04)',
  }}>
    <span style={{ fontSize: 13 }}>{icon}</span>
    {label}
    {caret && (
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="6 9 12 15 18 9"/>
      </svg>
    )}
  </div>
);

// The in-app "Find Your Crew" screen, designed to go inside the iPhone
const FindYourCrewScreen = () => (
  <div style={{
    height: '100%', width: '100%',
    background: '#F3F4F8',
    display: 'flex', flexDirection: 'column',
    fontFamily: 'var(--font-sans)',
    color: 'var(--ink)',
    overflow: 'hidden',
  }}>
    {/* Purple header — matches the hero phone header exactly */}
    <div style={{
      background: 'linear-gradient(180deg, #6B3DE8 0%, #5A2FD6 100%)',
      padding: '0 18px 14px',
      position: 'relative', overflow: 'hidden',
      borderBottomLeftRadius: 20, borderBottomRightRadius: 20,
    }}>
      {/* dotted texture */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 40%, rgba(255,255,255,0.08) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.05) 1px, transparent 1px)',
        backgroundSize: '12px 12px, 18px 18px',
        opacity: 0.7, pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative' }}>
        <StatusBar dark/>
      </div>
      <div style={{
        position: 'relative', display: 'flex',
        alignItems: 'center', justifyContent: 'center', marginTop: 4,
      }}>
        <img src="assets/logo.png" alt="SeatConnect" style={{
          height: 11, display: 'block',
          filter: 'brightness(0) invert(1)',
        }}/>
        <div style={{
          position: 'absolute', right: 0,
          width: 30, height: 30, borderRadius: '50%',
          background: 'rgba(255,255,255,0.14)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13,
        }}>
          <span style={{ color: '#fff' }}>🔔</span>
          <div style={{
            position: 'absolute', top: -2, right: -2,
            width: 13, height: 13, borderRadius: '50%',
            background: '#EF4444', color: '#fff',
            fontSize: 8, fontWeight: 800,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>3</div>
        </div>
      </div>
    </div>

    {/* screen content — scrollable feed */}
    <div style={{ flex: 1, overflow: 'hidden', background: '#F3F4F8' }}>
      <div style={{ padding: '18px 18px 10px', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 24, fontWeight: 800, letterSpacing: '-0.015em',
          color: 'var(--ink)',
        }}>Find Your Crew</div>
        <div style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
          color: 'var(--ink-3)', marginTop: 4,
        }}>FANS LOOKING TO CONNECT</div>
      </div>

      {/* Filter chips */}
      <div style={{
        display: 'flex', gap: 8, padding: '4px 18px 14px',
        overflowX: 'auto', WebkitOverflowScrolling: 'touch',
      }}>
        <FilterChip icon="🌐" label="All Fans" active/>
        <FilterChip icon="🏈" label="Teams" caret/>
        <FilterChip icon="∞" label="Connections"/>
        <FilterChip icon="🎫" label="Buy"/>
      </div>

      {/* Count */}
      <div style={{
        padding: '0 18px 8px', display: 'flex', justifyContent: 'flex-end',
      }}>
        <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>19 fans</span>
      </div>

      {/* Feed of fan cards */}
      <div style={{
        padding: '0 14px 14px',
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {CONNECT_FEED.map(f => <FeedFanCard key={f.name} f={f}/>)}
      </div>
    </div>

    {/* bottom tab bar */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      background: '#fff', borderTop: '1px solid rgba(10,8,30,0.06)',
      padding: '8px 0 22px',
    }}>
      {[
        { icon: '🎫', label: 'Tickets' },
        { icon: '📱', label: 'Hubs' },
        { icon: '👥', label: 'Connect', active: true },
        { icon: '💬', label: 'Inbox', badge: 2 },
        { icon: '👤', label: 'Profile' },
      ].map(t => (
        <div key={t.label} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          position: 'relative',
        }}>
          <div style={{
            width: 38, height: 28, borderRadius: 14,
            background: t.active ? 'rgba(107,61,232,0.14)' : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14, position: 'relative',
            filter: t.active ? 'none' : 'grayscale(0.3) opacity(0.7)',
          }}>
            {t.icon}
            {t.badge && (
              <div style={{
                position: 'absolute', top: -1, right: 4,
                width: 13, height: 13, borderRadius: '50%',
                background: '#EF4444', color: '#fff',
                fontSize: 8, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{t.badge}</div>
            )}
          </div>
          <div style={{
            fontSize: 9, fontWeight: 600,
            color: t.active ? 'var(--accent)' : 'var(--ink-3)',
          }}>{t.label}</div>
        </div>
      ))}
    </div>
  </div>
);

// Clean side callout for anatomy diagram
const AnatomyCallout = ({ label, body, align = 'left' }) => (
  <div style={{
    display: 'flex', flexDirection: 'column', gap: 6,
    textAlign: align === 'right' ? 'right' : 'left',
  }}>
    <div style={{
      fontFamily: 'var(--font-mono)', fontSize: 10,
      color: 'var(--accent)', letterSpacing: '0.18em',
      textTransform: 'uppercase', fontWeight: 700,
      display: 'flex', alignItems: 'center', gap: 8,
      justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
    }}>
      {align === 'left' && <span style={{ width: 20, height: 1, background: 'var(--accent)' }}/>}
      {label}
      {align === 'right' && <span style={{ width: 20, height: 1, background: 'var(--accent)' }}/>}
    </div>
    <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, maxWidth: 260 }}>
      {body}
    </div>
  </div>
);

// Purpose-built mobile benefit pill — used only on narrow screens
const BenefitPill = ({ num, label, body }) => (
  <div className="sc-benefit-pill">
    <div className="sc-benefit-pill__num">{num}</div>
    <div className="sc-benefit-pill__label">{label}</div>
    <div className="sc-benefit-pill__body">{body}</div>
  </div>
);

const FanCardsE = () => {
  return (
    <section id="fan-cards" style={{
      padding: '140px 0', background: 'var(--bg)',
      position: 'relative', overflow: 'hidden',
      scrollMarginTop: 80,
    }}>
      {/* subtle purple blob top-right */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        borderRadius: '50%', zIndex: 0,
        background: 'radial-gradient(circle, rgba(107,61,232,0.08), transparent 60%)',
        filter: 'blur(40px)',
      }}/>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        {/* SECTION HEADER */}
        <div className="sc-split-header" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 90, alignItems: 'end' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--accent)' }}>The Fan Card — where it all starts</div>
            <h2 className="display" style={{
              fontSize: 'clamp(48px, 6vw, 88px)',
              margin: 0, lineHeight: 0.98, letterSpacing: '-0.035em',
            }}>
              Who you are,<br/>
              <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>as a fan</em>.
            </h2>
          </div>
          <div>
            <p style={{
              fontSize: 19, color: 'var(--ink-3)',
              lineHeight: 1.55, margin: 0, maxWidth: 520,
            }}>
              Your Fan Card is how fans find you.
              One card, every door.
            </p>
          </div>
        </div>

        {/* PHONE + CALLOUTS */}
        <div className="sc-anatomy-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr auto 1fr',
          gap: 60, alignItems: 'center', maxWidth: 1200, margin: '0 auto 120px',
        }}>
          {/* LEFT callouts */}
          <div className="sc-anatomy-callouts sc-anatomy-callouts--left" style={{ display: 'flex', flexDirection: 'column', gap: 56, alignItems: 'flex-end' }}>
            <AnatomyCallout align="right" label="Team identity" body="Team colors, crest, and fan-since date — stacked as deep as your fandoms run."/>
          </div>

          {/* PHONE with the real Find Your Crew UI */}
          <div className="sc-anatomy-phone" style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneFrame width={340}>
              <FindYourCrewScreen/>
            </PhoneFrame>
          </div>

          {/* Mobile-only swipe hint — rendered above the callouts on mobile */}
          <div className="sc-anatomy-hint" aria-hidden="true">
            <span>Swipe to see more benefits</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </div>

          {/* RIGHT callouts */}
          <div className="sc-anatomy-callouts sc-anatomy-callouts--right" style={{ display: 'flex', flexDirection: 'column', gap: 56, alignItems: 'flex-start' }}>
            <AnatomyCallout align="left" label="Fan style badges" body="Tailgater, Die Hard, Suite Member — the vibes that make you, you."/>
            <AnatomyCallout align="left" label="Connect, 1-tap" body="Tap Connect to start a conversation. Tap View Fan Card to see the full profile."/>
          </div>
        </div>

        {/* Mobile-only: purpose-built benefit rail — sibling of the grid, not a child.
            This escapes the nested container width trap entirely. */}
        <div className="sc-benefit-rail-wrap" aria-hidden="false">
          <div className="sc-benefit-rail">
            <BenefitPill num="01" label="Team identity" body="Team colors, crest, and fan-since date — stacked as deep as your fandoms run."/>
            <BenefitPill num="02" label="Fan style badges" body="Tailgater, Die Hard, Stadium Foodie, Suite Member — the vibes that make you, you."/>
            <BenefitPill num="03" label="Connect, 1-tap" body="Tap Connect to start a conversation. Tap View Fan Card to see their full profile."/>
          </div>
        </div>

        {/* FOUR PILLARS — light panel; cards flip dark on hover, matching Trust & Safety */}
        <FourPillars />
      </div>
    </section>
  );
};

// Subcomponent so hover state is scoped per-card without bloating the main render
const FourPillars = () => {
  const [hovered, setHovered] = React.useState(-1);

  const PILLARS = [
    { n: '01', k: 'Marketplace', t: 'Buy & sell, direct',
      d: 'Verified fans. No middlemen. Zero buyer fees.' },
    { n: '02', k: 'Team Hubs', t: 'Your fanbase, year-round',
      d: 'Gameday threads, trade takes, ticket chat.' },
    { n: '03', k: 'All Teams', t: 'Across the league',
      d: 'Talk across fanbases. Debate matchups, argue rankings.' },
    { n: '04', k: 'Connect', t: 'Fan discovery',
      d: 'Find fans by section, city, or style.',
      highlighted: true },
  ];

  return (
    <div className="sc-pillars-wrap" style={{
      padding: '56px 48px 48px',
      background: 'transparent',
      position: 'relative',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-end', flexWrap: 'wrap', gap: 20,
        marginBottom: 48,
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--accent)', letterSpacing: '0.18em',
            textTransform: 'uppercase', marginBottom: 14, fontWeight: 700,
          }}>What your card unlocks</div>
          <h3 style={{
            fontSize: 'clamp(36px, 4vw, 56px)', margin: 0,
            fontFamily: 'var(--font-display)', fontWeight: 800,
            letterSpacing: '-0.03em', lineHeight: 1.02,
            color: 'var(--ink)',
          }}>
            Your card opens every<br/>door in the app.
          </h3>
        </div>
        <div style={{
          fontSize: 14, color: 'var(--ink-3)',
          maxWidth: 360, lineHeight: 1.5,
        }}>
          Connect. Discover. Talk. Buy direct —
          all from one card.
        </div>
      </div>

      <div className="sc-card-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {PILLARS.map((p, i) => {
          const isHovered = hovered === i;
          // All cards start light & identical. Hover flips them into the dark+glow treatment.
          const active = isHovered;

          const cardBg = active
            ? 'var(--ink)'
            : 'var(--card)';
          const cardBorder = active
            ? '1px solid rgba(255,255,255,0.08)'
            : '1px solid var(--line)';
          const glowLayer = active
            ? 'radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 55%)'
            : 'none';
          const hoverShadow = active
            ? '0 20px 40px rgba(10,8,30,0.35), 0 0 0 1px rgba(255,255,255,0.06)'
            : 'none';
          const labelColor = active ? 'var(--accent-2)' : 'var(--accent)';
          const titleColor = active ? '#fff' : 'var(--ink)';
          const copyColor = active ? 'rgba(255,255,255,0.72)' : 'var(--ink-3)';

          return (
            <div key={p.n}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(-1)}
              style={{
                padding: 24,
                background: cardBg,
                border: cardBorder,
                borderRadius: 18,
                display: 'flex', flexDirection: 'column', gap: 14,
                minHeight: 220,
                position: 'relative', overflow: 'hidden',
                transition: 'background 0.35s ease, border-color 0.35s ease, transform 0.3s, box-shadow 0.3s',
                transform: isHovered ? 'translateY(-4px)' : 'none',
                boxShadow: hoverShadow,
                cursor: 'default',
              }}>
              {/* Radial glow layer */}
              {glowLayer !== 'none' && (
                <div aria-hidden="true" style={{
                  position: 'absolute', inset: 0,
                  background: glowLayer,
                  pointerEvents: 'none',
                  transition: 'opacity 0.35s ease',
                  opacity: active ? 1 : 0,
                }}/>
              )}

              {p.highlighted && (
                <div style={{
                  position: 'absolute', top: 14, right: 14, zIndex: 2,
                  fontSize: 9, fontFamily: 'var(--font-mono)',
                  color: 'var(--accent-2)', letterSpacing: '0.12em', textTransform: 'uppercase',
                  background: 'rgba(155,122,240,0.18)',
                  border: '1px solid rgba(155,122,240,0.35)',
                  padding: '3px 8px', borderRadius: 999,
                  fontWeight: 700,
                }}>You are here</div>
              )}
              <div style={{
                position: 'relative', zIndex: 1,
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: labelColor,
                letterSpacing: '0.14em', fontWeight: 700,
                transition: 'color 0.35s ease',
              }}>{p.n} · {p.k.toUpperCase()}</div>
              <div style={{
                position: 'relative', zIndex: 1,
                fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em',
                lineHeight: 1.1, fontFamily: 'var(--font-display)',
                color: titleColor,
                transition: 'color 0.35s ease',
              }}>{p.t}</div>
              <div style={{
                position: 'relative', zIndex: 1,
                fontSize: 13, lineHeight: 1.5,
                color: copyColor,
                transition: 'color 0.35s ease',
              }}>{p.d}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { FanCardsE });