// 1. トップページ (イベント情報)

function ScreenTop({ theme }) {
  return (
    <Phone theme={theme}>
      <StatusBar theme={theme} />

      {/* ヒーロー */}
      <div style={{
        position: 'relative',
        padding: '24px 20px 36px',
        background: `linear-gradient(180deg, ${theme.primarySoft} 0%, ${theme.bg} 100%)`,
        overflow: 'hidden',
      }}>
        <Pattern theme={theme} intensity={1.4} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <BrandMark theme={theme} size="sm" />
            <div style={{ fontSize: 11, fontWeight: 700, color: theme.textMuted, letterSpacing: 1 }}>
              MIE OFFLINE MEETUP · 第3回
            </div>
          </div>

          <div style={{
            display: 'inline-block', padding: '4px 10px',
            background: theme.accent, color: '#fff',
            fontSize: 11, fontWeight: 700, borderRadius: 999, marginBottom: 12,
          }}>公認オフ会</div>

          <h1 style={{
            margin: 0, fontFamily: theme.headingFont,
            fontSize: 28, lineHeight: 1.25, fontWeight: 900, color: theme.text,
            letterSpacing: -0.5,
          }}>
            三重から南まで、<br/>
            <span style={{ color: theme.primary }}>つながる夏</span>。
          </h1>
          <p style={{
            margin: '12px 0 0', fontSize: 13.5, lineHeight: 1.7,
            color: theme.textMuted,
          }}>
            北勢から東紀州まで、200名で集う一日。<br/>
            初参加の方もどうぞ、もてなします。
          </p>
        </div>
      </div>

      {/* 日時情報カード */}
      <div style={{ padding: '0 16px', marginTop: -18, position: 'relative', zIndex: 2 }}>
        <Card theme={theme} padding={0}>
          <div style={{ padding: '16px 18px', borderBottom: `1px dashed ${theme.border}` }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
              DATE
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: theme.headingFont, fontSize: 24, fontWeight: 900, color: theme.text }}>
                8.11
              </span>
              <span style={{ fontSize: 12, color: theme.textMuted }}>(火・祝)</span>
              <span style={{
                fontSize: 10, padding: '2px 6px', background: theme.accentSoft,
                color: theme.accent, borderRadius: 4, fontWeight: 700,
              }}>変更後</span>
            </div>
            <div style={{ fontSize: 11.5, color: theme.textSub, marginTop: 2, textDecoration: 'line-through' }}>
              旧: 8月9日(日)
            </div>
          </div>
          <div style={{ padding: '14px 18px', borderBottom: `1px dashed ${theme.border}` }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
              TIME
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: theme.text }}>10:00 – 16:00</div>
            <div style={{ fontSize: 11.5, color: theme.textSub, marginTop: 2 }}>
              会場利用: 9:00 – 17:00
            </div>
          </div>
          <div style={{ padding: '14px 18px' }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
              PLACE
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: theme.text }}>三重県文化会館</div>
            <div style={{ fontSize: 12, color: theme.textMuted, marginTop: 2 }}>
              第一ギャラリー
              <span style={{
                fontSize: 10, padding: '1px 5px', background: theme.accentSoft,
                color: theme.accent, borderRadius: 4, fontWeight: 700, marginLeft: 6,
              }}>変更後</span>
            </div>
          </div>
        </Card>
      </div>

      {/* CTA */}
      <div style={{ padding: '20px 16px 16px' }}>
        <Btn theme={theme} fullWidth size="lg">事前アンケートに回答する</Btn>
        <Btn theme={theme} fullWidth size="md" variant="plain" style={{ marginTop: 8 }}>
          参加者一覧を見る
        </Btn>
      </div>

      {/* コンセプト */}
      <div style={{ padding: '8px 20px 24px' }}>
        <SectionTitle theme={theme} kicker="CONCEPT">今回のコンセプト</SectionTitle>
        {[
          { n: '01', t: '北から南まで交流活性化', d: '同じ三重でも、まだ会ったことない人がきっといる。' },
          { n: '02', t: '初参加を後押し', d: '公認オフ会だから安心。初心者さんをもてなしたい。' },
          { n: '03', t: '人と人で人生を豊かに', d: '一生の思い出に残る一日を。' },
        ].map(c => (
          <div key={c.n} style={{
            display: 'flex', gap: 12, padding: '12px 0',
            borderBottom: `1px solid ${theme.border}`,
          }}>
            <span style={{
              fontFamily: theme.headingFont, fontSize: 20, fontWeight: 900,
              color: theme.primary, lineHeight: 1, flexShrink: 0, minWidth: 32,
            }}>{c.n}</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: theme.text, marginBottom: 2 }}>{c.t}</div>
              <div style={{ fontSize: 12.5, color: theme.textMuted, lineHeight: 1.6 }}>{c.d}</div>
            </div>
          </div>
        ))}
      </div>

      {/* 参加者数 */}
      <div style={{ padding: '8px 16px 32px' }}>
        <Card theme={theme}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: theme.textMuted, marginBottom: 2 }}>目標 200 名</div>
              <div style={{ fontSize: 12, color: theme.text, fontWeight: 600 }}>現在の事前回答</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ fontFamily: theme.headingFont, fontSize: 28, fontWeight: 900, color: theme.primary, fontFeatureSettings: '"tnum"' }}>
                127
              </span>
              <span style={{ fontSize: 13, color: theme.textMuted, marginLeft: 4 }}>名</span>
            </div>
          </div>
          <div style={{ marginTop: 10, height: 6, background: theme.chipBg, borderRadius: 999 }}>
            <div style={{ width: '63.5%', height: '100%', background: theme.primary, borderRadius: 999 }}></div>
          </div>
        </Card>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScreenTop });