// TwoWorlds.jsx — the thesis bridge: "Two worlds. One app."
// Sits between FanCards (community) and TeamHubs (system).

const TwoWorlds = () => (
  <section style={{
    padding: '40px 0 72px',
    background: 'var(--bg)',
  }}>
    <div className="container">
      <div style={{
        padding: '56px 48px',
        background: 'linear-gradient(180deg, #0A0812 0%, #13101F 55%, #0A0812 100%)',
        color: '#fff',
        borderRadius: 48,
        position: 'relative',
        overflow: 'hidden',
        boxShadow: '0 10px 30px -18px rgba(10,8,30,0.15)',
      }}>
        <div aria-hidden style={{
          position: 'absolute', top: -180, left: '15%', width: 460, height: 460,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(107,61,232,0.22), transparent 65%)',
          filter: 'blur(80px)', pointerEvents: 'none',
        }}/>
        <div aria-hidden style={{
          position: 'absolute', bottom: -180, right: '15%', width: 460, height: 460,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(155,122,240,0.18), transparent 65%)',
          filter: 'blur(80px)', pointerEvents: 'none',
        }}/>

        <div style={{ position: 'relative' }}>
      <div style={{
        textAlign: 'center',
        marginBottom: 28,
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 16px',
          background: 'rgba(155,122,240,0.12)',
          border: '1px solid rgba(155,122,240,0.28)',
          borderRadius: 999,
          fontFamily: 'var(--font-mono)',
          fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'var(--accent-2)', fontWeight: 700,
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: '50%',
            background: 'var(--accent-2)',
            boxShadow: '0 0 8px rgba(155,122,240,0.6)',
          }}/>
          Two worlds. One app.
        </span>
      </div>

      <div className="two-worlds-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        gap: 40,
        alignItems: 'start',
        maxWidth: 1200,
        margin: '0 auto 20px',
      }}>
        <div className="tw-col tw-col--left" style={{ textAlign: 'right' }}>
          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 14,
          }}>The Fan Forum</div>
          <h2 className="display" style={{
            fontSize: 'clamp(30px, 3.8vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.025em',
            margin: 0, fontWeight: 600,
          }}>
            The social home<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent-2)' }}>for sports fans.</em>
          </h2>
          <p style={{
            marginTop: 18, fontSize: 14, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.65)', maxWidth: 380, marginLeft: 'auto',
          }}>
            Fan Cards. Team Hubs. Cross-fanbase threads. Where every fan of every team shows up — 365 days a year, not just gameday.
          </p>
        </div>

        <div className="sc-tw-orb" style={{
          position: 'relative', width: 96, height: 96,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, rgba(107,61,232,0.35), rgba(155,122,240,0.22))',
          border: '1px solid rgba(155,122,240,0.5)',
          boxShadow: '0 12px 32px -8px rgba(107,61,232,0.5), inset 0 1px 0 rgba(255,255,255,0.12)',
          flexShrink: 0,
          alignSelf: 'center',
          marginTop: 32,
          marginInline: 'auto',
        }}>
          <img
            src="assets/seatconnect-submark-white.png"
            alt="SeatConnect"
            style={{ width: 56, height: 56, objectFit: 'contain', display: 'block' }}
          />
          <span aria-hidden style={{
            position: 'absolute', top: '50%', left: -1, width: 6, height: 6,
            borderRadius: '50%', background: 'var(--accent-2)',
            transform: 'translate(-50%, -50%)',
            boxShadow: '0 0 10px rgba(155,122,240,0.8)',
          }}/>
          <span aria-hidden style={{
            position: 'absolute', top: '50%', right: -1, width: 6, height: 6,
            borderRadius: '50%', background: 'var(--accent-2)',
            transform: 'translate(50%, -50%)',
            boxShadow: '0 0 10px rgba(155,122,240,0.8)',
          }}/>
        </div>

        <div className="tw-col tw-col--right" style={{ textAlign: 'left' }}>
          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 14,
          }}>The Marketplace</div>
          <h2 className="display" style={{
            fontSize: 'clamp(30px, 3.8vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.025em',
            margin: 0, fontWeight: 600,
          }}>
            The ticket marketplace<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent-2)' }}>that backs it up.</em>
          </h2>
          <p style={{
            marginTop: 18, fontSize: 14, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.65)', maxWidth: 380,
          }}>
            Tickets from verified fans — season members, direct sellers, trusted resellers. Zero buyer fees. Chat before you buy.
          </p>
        </div>
      </div>

      <div style={{
        textAlign: 'center', maxWidth: 720, margin: '0 auto',
        paddingTop: 8, position: 'relative',
      }}>
        {/* Kicker: the contrast line, dressed in the same dash-flanked mono purple treatment */}
        <div aria-hidden className="tw-kicker" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 12, marginBottom: 10,
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
          textTransform: 'uppercase', fontWeight: 700,
        }}>
          <span style={{ flex: '0 1 56px', height: 1, background: 'linear-gradient(90deg, transparent, rgba(155,122,240,0.55))' }}/>
          <span className="tw-kicker-text" style={{ color: 'var(--accent-2)', whiteSpace: 'nowrap' }}>Other ticket apps forget you the second the game ends</span>
          <span style={{ flex: '0 1 56px', height: 1, background: 'linear-gradient(90deg, rgba(155,122,240,0.55), transparent)' }}/>
        </div>

        {/* The hero moment — matched to the mono/uppercase kicker, 365 in brand lavender */}
        <h3 style={{
          margin: 0,
          fontFamily: 'var(--font-mono)', fontWeight: 700,
          fontSize: 10, letterSpacing: '0.18em',
          lineHeight: 1.4, color: '#fff', textTransform: 'uppercase',
        }}>
          Here, the conversation runs{' '}
          <span style={{
            color: 'var(--accent-2)',
            fontWeight: 700,
          }}>365</span>
          <span style={{ color: '#fff' }}>.</span>
        </h3>
      </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .two-worlds-grid {
          grid-template-columns: 1fr !important;
          gap: 32px !important;
        }
        .tw-col { text-align: center !important; }
        .tw-col p { margin-left: auto !important; margin-right: auto !important; }
      }
      @media (max-width: 640px) {
        .tw-kicker { flex-direction: column !important; gap: 8px !important; }
        .tw-kicker > span:first-child,
        .tw-kicker > span:last-child { display: none !important; }
        .tw-kicker-text {
          white-space: normal !important;
          padding: 0 24px !important;
          line-height: 1.55 !important;
          max-width: 320px !important;
        }
      }
    `}</style>
  </section>
);

Object.assign(window, { TwoWorlds });