// components/LineCTA.jsx

// Big comic-style CTA banner with penlight 亀
const LineCTABanner = ({ openLineModal, compact = false }) => {
  return (
    <div className="chunky chunky-lg" style={{
      background: 'var(--yellow)',
      padding: compact ? 28 : 40,
      position: 'relative',
      overflow: 'hidden',
    }} data-reveal>
      {/* Hatching bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(45deg, rgba(26,26,46,.06) 0 10px, transparent 10px 20px)',
        pointerEvents: 'none',
      }} />
      <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr auto' : '1.4fr 1fr', gap: 30, position: 'relative', alignItems: 'center' }}>
        <div>
          <span className="tag" style={{ background: 'var(--ink)', color: '#fff', marginBottom: 14 }}>
            <Icon name="gift" size={12} /> 今だけ無料
          </span>
          <h2 style={{
            margin: '8px 0 12px',
            fontSize: compact ? 26 : 36,
            fontWeight: 900, lineHeight: 1.25, textWrap: 'balance',
          }}>
            LINE登録で<br/>
            <span style={{ background: '#fff', border: '2.5px solid var(--line)', padding: '2px 12px', borderRadius: 10, display: 'inline-block', marginTop: 6 }}>
              無料AIロードマップ
            </span>
            <br/>もらえるカメ〜！
          </h2>
          <ul style={{ margin: '0 0 20px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <li style={{ display: 'flex', gap: 8, fontSize: 14, fontWeight: 700 }}>
              <Icon name="check" size={18} /> 30日で使える！AI学習ロードマップPDF
            </li>
            <li style={{ display: 'flex', gap: 8, fontSize: 14, fontWeight: 700 }}>
              <Icon name="check" size={18} /> コピペで使えるプロンプト5技法早見表
            </li>
            <li style={{ display: 'flex', gap: 8, fontSize: 14, fontWeight: 700 }}>
              <Icon name="check" size={18} /> 新着記事＆動画の配信通知
            </li>
          </ul>
          <button className="btn btn-line btn-lg" onClick={openLineModal}>
            <Icon name="line" size={18} />
            無料でLINE登録する
            <Icon name="arrow-right" size={16} />
          </button>
        </div>
        {!compact && (
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <KamePenlight size="lg" />
            <div className="bubble" style={{
              position: 'absolute',
              top: -10,
              right: -20,
              background: '#fff',
              fontSize: 13,
              maxWidth: 150,
              transform: 'rotate(4deg)',
            }}>
              みんな〜<br/>登録してくれカメ〜！
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// Small inline CTA for within articles
const LineCTAInline = ({ openLineModal }) => {
  return (
    <div className="chunky" style={{ background: 'var(--sub)', padding: 20, margin: '28px 0' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <KamePenlight size="sm" />
        <div style={{ flex: 1 }}>
          <div className="bubble bubble-up" style={{ background: '#fff', marginTop: 12, fontSize: 14 }}>
            <strong>ここまで読んでくれてありがとカメ〜！</strong><br/>
            <span style={{ fontSize: 12, fontWeight: 600 }}>続きはLINEで限定配信中。今ならロードマップPDFも無料でもらえるで。</span>
          </div>
        </div>
        <button className="btn btn-line" onClick={openLineModal}>
          <Icon name="line" size={14} /> 登録する
        </button>
      </div>
    </div>
  );
};

// LINE Modal
const LineModal = ({ open, onClose }) => {
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-body" onClick={e => e.stopPropagation()}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <button className="btn btn-ghost" onClick={onClose} style={{ padding: 8 }}>
            <Icon name="close" size={18} />
          </button>
        </div>
        <div style={{ textAlign: 'center', marginTop: -10 }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
            <KamePenlight size="md" />
          </div>
          <h3 style={{ fontSize: 22, fontWeight: 900, margin: '12px 0 6px' }}>登録してくれるカメ〜？</h3>
          <p style={{ fontSize: 13, margin: '0 0 18px', opacity: .8 }}>
            LINE登録すると、すぐに<br/>
            <strong>無料AIロードマップPDF</strong>＋<strong>プロンプト早見表</strong>が届くで。
          </p>
          <div style={{ background: 'var(--sub)', border: '2px solid var(--line)', borderRadius: 14, padding: 16, margin: '0 0 20px' }}>
            <div style={{ fontSize: 11, fontFamily: 'IBM Plex Mono, monospace', marginBottom: 8, opacity: .7 }}>QRコードから友だち追加</div>
            <div style={{
              width: 140, height: 140,
              margin: '0 auto',
              background: '#fff',
              border: '2px solid var(--line)',
              display: 'grid',
              gridTemplateColumns: 'repeat(12, 1fr)',
              gridTemplateRows: 'repeat(12, 1fr)',
              gap: 2,
              padding: 8,
              borderRadius: 8,
            }}>
              {Array.from({length: 144}).map((_, i) => (
                <div key={i} style={{ background: Math.random() > 0.55 ? 'var(--ink)' : 'transparent' }} />
              ))}
            </div>
          </div>
          <button className="btn btn-line btn-lg" style={{ width: '100%', justifyContent: 'center' }} onClick={() => alert('（デモ）LINEに遷移します')}>
            <Icon name="line" size={18} />
            LINEで友だち追加する
          </button>
          <div style={{ fontSize: 11, marginTop: 10, opacity: .6 }}>
            ※ いつでもブロック解除できるので安心してな
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LineCTABanner, LineCTAInline, LineModal });