// Final CTA section + Footer

function CTA({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <section id="cta-section" style={{
      padding: '180px 0 140px',
      borderTop: '1px solid var(--line)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* big backdrop */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `radial-gradient(ellipse at center 60%, ${accent}30 0%, transparent 55%)`,
      }}></div>

      {/* Big DIGME word */}
      <div aria-hidden="true" style={{
        position: 'absolute', bottom: -40, left: 0, right: 0,
        textAlign: 'center', zIndex: 0,
        fontFamily: 'Bricolage Grotesque, sans-serif',
        fontWeight: 800, fontSize: 'clamp(140px, 22vw, 360px)',
        letterSpacing: '-0.06em', lineHeight: 0.85,
        color: 'transparent',
        WebkitTextStroke: '1px rgba(245,243,238,0.08)',
        userSelect: 'none', pointerEvents: 'none',
      }}>DIGME</div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            textAlign: 'center', gap: 32, maxWidth: 880, margin: '0 auto',
          }}>
            <DigmeMark size={80} />

            <span className="uppercase-tag" style={{ color: accent }}>NOW AVAILABLE</span>

            <h2 className="display" style={{
              fontSize: 'clamp(48px, 7vw, 96px)',
              fontWeight: 800, lineHeight: 0.95,
              letterSpacing: '-0.035em',
              textWrap: 'balance',
            }}>
              さあ、<br />
              <span style={{ color: accent }}>掘り始めよう。</span>
            </h2>

            <p style={{
              fontSize: 17, lineHeight: 1.7, color: 'rgba(245,243,238,0.7)',
              maxWidth: 520,
            }}>
              DIGME は App Store で配信中。<br />
              あなたが知ってる音楽を、みんなに広げよう。
            </p>

            <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', marginTop: 8 }}>
              <AppStoreBadge accent={accent} />
              <span style={{ fontSize: 13, color: 'rgba(245,243,238,0.4)', fontFamily: 'JetBrains Mono, monospace' }}>
                iOS 16.0+ / 無料
              </span>
            </div>

            {/* QR-ish thing */}
            <div className="sp-hide-qr" style={{
              display: 'flex', alignItems: 'center', gap: 16,
              marginTop: 16, padding: 16,
              border: '1px solid var(--line)', borderRadius: 16,
              background: 'rgba(255,255,255,0.02)',
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: 8,
                background: '#fff',
                display: 'grid',
                gridTemplateColumns: 'repeat(8, 1fr)',
                gridTemplateRows: 'repeat(8, 1fr)',
                gap: 1, padding: 4, boxSizing: 'border-box',
              }}>
                {Array.from({length: 64}).map((_, i) => {
                  // deterministic pseudo-QR pattern
                  const on = ((i * 7 + ((i / 8) | 0) * 3) % 5) < 2 || i < 3 || i % 8 < 1 || i > 60;
                  // corner squares
                  const r = (i / 8) | 0, c = i % 8;
                  const corner = (r < 3 && c < 3) || (r < 3 && c > 4) || (r > 4 && c < 3);
                  return <div key={i} style={{ background: (on || corner) ? '#000' : '#fff', borderRadius: 1 }}></div>;
                })}
              </div>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(245,243,238,0.5)', fontFamily: 'JetBrains Mono, monospace' }}>SCAN ME</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>App Storeへ直接ジャンプ</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.CTA = CTA;