// Variant 1: Comic Red — banner-derived. Halftone red bg, big WEC C, sunburst,
// roster as comic-card grid, schedule as ticker rows. Loud but ordered.

const cr = {
  red: '#C8102E',
  redDeep: '#8a0a1f',
  redDark: '#3a0610',
  ink: '#0e0608',
  paper: '#f6efe2',
  pink: '#FF1AAE',
  green: '#27FF4E',
  yellow: '#FFD60A',
  font: '"Anton", "Bebas Neue", Impact, sans-serif',
  jp: '"Noto Sans JP", system-ui, sans-serif',
  hand: '"Kalam", "Caveat", cursive',
  mono: '"JetBrains Mono", "IBM Plex Mono", monospace',
};

function useViewportWidth() {
  const [width, setWidth] = React.useState(
    typeof window === 'undefined' ? 1280 : window.innerWidth
  );

  React.useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return width;
}

function ComicRedSite() {
  const vw = useViewportWidth();
  const isMobile = vw < 700;
  const isNarrow = vw < 1024;
  const heroTitleSize = isMobile ? Math.max(74, Math.min(112, vw * 0.25)) : isNarrow ? 160 : 220;
  const heroGhostSize = isMobile ? 170 : isNarrow ? 320 : 460;
  const logoBox = isMobile ? 132 : isNarrow ? 190 : 240;
  const logoImg = isMobile ? 108 : isNarrow ? 156 : 200;
  const sectionTitleSize = isMobile ? 72 : isNarrow ? 104 : 130;

  return (
    <div style={{
      width: '100%', position: 'relative',
      background: cr.red, color: cr.paper, fontFamily: cr.jp, overflow: 'hidden',
    }}>
      {/* top marquee */}
      <Marquee text="#WECCWIN  ·  WECC FOREVER  ·  " bg={cr.ink} color={cr.paper} speed={40}
        style={{ fontFamily: cr.font, fontSize: isMobile ? 18 : 22, letterSpacing: isMobile ? 2 : 4, padding: '10px 0', borderBottom: `3px solid ${cr.paper}` }} />

      {/* HERO */}
      <section style={{ position: 'relative', padding: isMobile ? '30px 18px 34px' : '60px 60px 40px', minHeight: isMobile ? 'auto' : 760 }}>
        <Sunburst color={cr.redDeep} count={36} />
        <div style={{ position: 'absolute', inset: 0 }}>
          <HalftonePattern color={cr.redDark} size={10} opacity={0.55} />
        </div>

        {/* Big background WECC ghost */}
        <div style={{
          position: 'absolute', right: isMobile ? -24 : -40, top: isMobile ? 110 : 80, fontFamily: cr.font, fontSize: heroGhostSize, fontWeight: 900,
          color: cr.paper, opacity: 0.08, letterSpacing: isMobile ? -6 : -16, lineHeight: 0.85, pointerEvents: 'none',
        }}>WECC</div>

        <div style={{ position: 'relative', zIndex: 2 }}>
          {/* small tag */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: cr.ink, color: cr.paper,
            padding: isMobile ? '7px 10px' : '8px 14px', fontFamily: cr.mono, fontSize: isMobile ? 10 : 13, letterSpacing: isMobile ? 1 : 2, border: `2px solid ${cr.paper}`, maxWidth: '100%', lineHeight: 1.45 }}>
            <span style={{ width: 10, height: 10, background: cr.green, display: 'inline-block', boxShadow: `0 0 12px ${cr.green}` }} />
            VALORANT CHALLENGERS JAPAN · SPLIT 2 · ADVANCE STAGE · 2026
          </div>

          <h1 style={{
            fontFamily: cr.font, fontSize: heroTitleSize, lineHeight: 0.85, margin: '20px 0 0', letterSpacing: isMobile ? -2 : -6,
            color: cr.paper, textShadow: isMobile ? `4px 4px 0 ${cr.ink}, 7px 7px 0 ${cr.redDark}` : `8px 8px 0 ${cr.ink}, 12px 12px 0 ${cr.redDark}`,
          }}>
            WECC<br/>FOREVER.
          </h1>

          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between', marginTop: isMobile ? 26 : 36, gap: isMobile ? 22 : 30 }}>
            <p style={{
              fontFamily: cr.jp, fontSize: isMobile ? 16 : 22, lineHeight: 1.6, maxWidth: 560, margin: 0,
              color: cr.paper, fontWeight: 600,
            }}>
              VALORANT Challengers Japan に挑むカオス集団<b>「WEC C（ウェックシー）」</b>
            </p>

            {/* WEC C mark badge */}
            <div style={{ position: 'relative' }}>
              <div style={{
                width: logoBox, height: logoBox, background: cr.paper, border: `5px solid ${cr.ink}`,
                boxShadow: isMobile ? `7px 7px 0 ${cr.ink}` : `12px 12px 0 ${cr.ink}`, display: 'grid', placeItems: 'center', position: 'relative',
              }}>
                <img src="uploads/pasted-1778402151797-0.png" alt="WEC C logo" style={{ width: logoImg, height: logoImg, objectFit: 'contain' }} />
              </div>
            </div>
          </div>
        </div>

        {/* speech bubble accent */}
        <div style={{ position: isMobile ? 'relative' : 'absolute', right: isMobile ? 'auto' : 60, top: isMobile ? 'auto' : 40, marginTop: isMobile ? 22 : 0, transform: 'rotate(6deg)' }}>
          <div style={{ position: 'relative', width: isMobile ? 190 : 240, height: isMobile ? 104 : 130 }}>
            <ScribbleSpeech color={cr.paper} style={{ position: 'absolute', inset: 0, width: isMobile ? 190 : 240, height: isMobile ? 104 : 130 }} />
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
              fontFamily: cr.font, fontSize: isMobile ? 25 : 32, color: cr.paper, paddingBottom: isMobile ? 18 : 24 }}>
              ganbarony!!
            </div>
          </div>
        </div>
      </section>


      {/* GAME DAY section */}
      <section style={{ position: 'relative', padding: isMobile ? '46px 18px' : '70px 60px', background: cr.paper, color: cr.ink }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
          <HalftonePattern color="#d8c8a8" size={6} opacity={0.7} />
        </div>

        <div style={{ position: 'relative', display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'flex-end', gap: isMobile ? 8 : 20, marginBottom: 30, justifyContent: 'space-between' }}>
          <h2 style={{ fontFamily: cr.font, fontSize: sectionTitleSize, margin: 0, lineHeight: 0.9, letterSpacing: isMobile ? -1 : -3, color: cr.red }}>
            GAME DAY
          </h2>
          <div style={{ position: 'relative', textAlign: 'right' }}>
            <div style={{ fontFamily: cr.hand, fontSize: isMobile ? 26 : 38, color: cr.pink, transform: 'rotate(-3deg)' }}>
              次の試合 ↓
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'grid', gap: 14 }}>
          {MATCHES.map((m, i) => (
            <div key={i} style={{
              background: i === 0 ? cr.ink : cr.paper, color: i === 0 ? cr.paper : cr.ink,
              border: `4px solid ${cr.ink}`, padding: isMobile ? '16px 14px' : '22px 28px', display: 'grid',
              gridTemplateColumns: isMobile ? '1fr 1fr' : '120px 100px 1fr 130px 110px', alignItems: 'center', gap: isMobile ? 10 : 24,
              boxShadow: i === 0 ? (isMobile ? `5px 5px 0 ${cr.red}` : `8px 8px 0 ${cr.red}`) : 'none',
            }}>
              <div style={{ fontFamily: cr.font, fontSize: isMobile ? 30 : 38, lineHeight: 1, letterSpacing: -1 }}>
                {m.date.slice(5).replace('.', '/')}
                <div style={{ fontSize: 14, fontFamily: cr.mono, opacity: 0.6, letterSpacing: 2 }}>{m.day}</div>
              </div>
              <div style={{ fontFamily: cr.font, fontSize: isMobile ? 34 : 42, color: i === 0 ? cr.yellow : cr.red, textAlign: isMobile ? 'right' : 'left' }}>
                {m.time}
              </div>
              <div style={{ fontFamily: cr.font, fontSize: isMobile ? 34 : 44, letterSpacing: -1, gridColumn: isMobile ? '1 / -1' : 'auto', minWidth: 0 }}>
                <span style={{ opacity: 0.5, fontSize: isMobile ? 18 : 22, marginRight: 10 }}>vs</span>
                {m.vs}
              </div>
              <div style={{ fontFamily: cr.mono, fontSize: 14, opacity: 0.7, letterSpacing: 2 }}>{m.format}</div>
              <div style={{
                fontFamily: cr.font, fontSize: isMobile ? 16 : 18, padding: isMobile ? '7px 10px' : '8px 14px',
                background: i === 0 ? cr.green : 'transparent', color: cr.ink,
                border: i === 0 ? 'none' : `2px solid ${cr.ink}`, textAlign: 'center', letterSpacing: 2, justifySelf: isMobile ? 'end' : 'auto',
              }}>
                {i === 0 ? 'NEXT UP' : 'UPCOMING'}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ROSTER */}
      <section style={{ position: 'relative', padding: isMobile ? '52px 18px 42px' : '80px 60px 60px', background: cr.ink, color: cr.paper, overflow: 'hidden' }}>
        <Sunburst color="#1a0a0d" count={32} />
        <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
          <HalftonePattern color={cr.red} size={8} opacity={0.5} />
        </div>

        <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 24, marginBottom: 36 }}>
          <h2 style={{ fontFamily: cr.font, fontSize: sectionTitleSize, margin: 0, lineHeight: 0.9, letterSpacing: isMobile ? -1 : -3, color: cr.paper }}>
            ROSTER
          </h2>
        </div>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isNarrow ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gridAutoRows: isMobile ? '330px' : '360px', gap: isMobile ? 14 : 18 }}>
          {ROSTER.map((p, i) => (
            <div key={p.handle} style={{
              background: cr.paper, color: cr.ink, border: `4px solid ${cr.paper}`,
              boxShadow: isMobile ? `5px 5px 0 ${cr.red}` : `8px 8px 0 ${cr.red}`, padding: 0, position: 'relative', overflow: 'hidden',
              transform: isMobile ? 'none' : i % 2 === 0 ? 'rotate(-0.6deg)' : 'rotate(0.6deg)',
              display: 'flex', flexDirection: 'column',
            }}>
              {/* portrait area */}
              <div style={{ position: 'relative', flex: 1, background: cr.red, overflow: 'hidden' }}>
                <Sunburst color={cr.redDeep} count={20} />
                <div style={{ position: 'absolute', inset: 0 }}>
                  <HalftonePattern color={cr.redDark} size={5} opacity={0.55} />
                </div>
                <div style={{
                  position: 'absolute', right: 10, top: 10, background: cr.ink, color: cr.paper,
                  fontFamily: cr.font, fontSize: 26, padding: '4px 10px', letterSpacing: 1, border: `2px solid ${cr.paper}`, zIndex: 2,
                }}>#{p.num}</div>
                {p.img ? (
                  <img src={p.img} alt={p.handle} style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%',
                    objectFit: 'cover', objectPosition: 'center top',
                  }} />
                ) : (
                  <>
                    <div style={{
                      position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                      fontFamily: cr.font, fontSize: 130, color: cr.paper, opacity: 0.95, letterSpacing: -4, lineHeight: 1,
                      textShadow: `4px 4px 0 ${cr.ink}`,
                    }}>
                      {p.handle.slice(0, 1).toUpperCase()}
                    </div>
                    <div style={{ position: 'absolute', left: 8, bottom: 8, fontFamily: cr.mono, fontSize: 10, color: cr.paper, opacity: 0.6, letterSpacing: 1 }}>
                      [PORTRAIT]
                    </div>
                  </>
                )}
              </div>
              <div style={{ padding: '14px 18px 18px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ fontFamily: cr.font, fontSize: isMobile ? 36 : 42, lineHeight: 1, letterSpacing: -1 }}>{p.handle}</div>
                  <div style={{ fontFamily: cr.mono, fontSize: 11, opacity: 0.6, letterSpacing: 1 }}>
                    JP <span style={{ fontFamily: 'system-ui, sans-serif' }}>🇯🇵</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <a href="https://x.com/weccforever" target="_blank" rel="noopener" style={{
          display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: isMobile ? 8 : 0,
          background: cr.green, color: cr.ink, border: `4px solid ${cr.paper}`, boxShadow: `8px 8px 0 ${cr.red}`,
          padding: isMobile ? '18px 20px' : '22px 36px', marginTop: 18, textDecoration: 'none',
          position: 'relative', zIndex: 2,
        }}>
          <div style={{ fontFamily: cr.mono, fontSize: 14, letterSpacing: 2 }}>FOLLOW ON X</div>
          <div style={{ fontFamily: cr.font, fontSize: isMobile ? 40 : 56, lineHeight: 1, letterSpacing: -2 }}>@weccforever</div>
          <div style={{ fontFamily: cr.jp, fontWeight: 800, fontSize: 16 }}>X (旧Twitter) で応援する →</div>
        </a>
      </section>

      {/* footer marquee */}
      <Marquee text="#WECCWIN  ·  GANBARONY  ·  PLZ WIN  ·  WECC FOREVER  ·  " bg={cr.red} color={cr.paper} speed={45}
        style={{ fontFamily: cr.font, fontSize: isMobile ? 20 : 26, letterSpacing: isMobile ? 2 : 4, padding: '14px 0', borderTop: `4px solid ${cr.paper}` }} />

      <footer style={{ background: cr.ink, color: cr.paper, padding: isMobile ? '28px 18px' : '36px 60px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 14 : 20 }}>
        <div style={{ fontFamily: cr.mono, fontSize: 12, letterSpacing: 2, opacity: 0.6 }}>
          © WEC C · wec-c.com · 2026
        </div>
        <div style={{ display: 'flex', gap: isMobile ? 10 : 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="https://x.com/weccforever" style={{ color: cr.paper, fontFamily: cr.font, fontSize: 22, textDecoration: 'none', letterSpacing: 1 }}>X / @weccforever</a>
          <span style={{ opacity: 0.3 }}>·</span>
          <span style={{ fontFamily: cr.hand, fontSize: 26, color: cr.green }}>#WECCWIN</span>
        </div>
      </footer>
    </div>
  );
}

window.ComicRedSite = ComicRedSite;