// HERO — event-popup mobile buying model

function KBHero() {
  const K = window.KB;
  const { Phone, Line, ArrowRight, Sparkle, Pin } = window.KBIcon;
  const [ripples, setRipples] = React.useState([]);

  const fireCTARipple = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const t = e.touches ? e.touches[0] : e;
    const id = Date.now() + Math.random();
    setRipples(prev => [...prev, { id, x: t.clientX - rect.left, y: t.clientY - rect.top }]);
    setTimeout(() => setRipples(prev => prev.filter(r => r.id !== id)), 800);
  };

  return (
    <section style={{
      position: 'relative',
      minHeight: 'auto',
      background: `
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(201,169,97,0.18), transparent 55%),
        radial-gradient(circle at 85% 20%, rgba(201,169,97,0.12), transparent 40%),
        linear-gradient(180deg, #050B18 0%, #0A1628 70%, #111F36 100%)
      `,
      overflow: 'hidden',
      paddingTop: 64, paddingBottom: 32,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(90deg, rgba(201,169,97,0.018) 0, rgba(201,169,97,0.018) 1px, transparent 1px, transparent 4px)',
        pointerEvents: 'none',
      }} />

      <div style={{
        position: 'absolute', top: 76, left: 18, right: 18, bottom: 18,
        border: `1px solid rgba(201,169,97,0.18)`, pointerEvents: 'none',
      }}>
        {[[0,0],[1,0],[0,1],[1,1]].map(([x,y], i) => (
          <div key={i} style={{
            position: 'absolute',
            [x ? 'right' : 'left']: -4, [y ? 'bottom' : 'top']: -4,
            width: 8, height: 8, background: K.gold,
          }} />
        ))}
      </div>

      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
        padding: '16px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <KBLogo />
        <div style={{ display: 'flex', gap: 8 }}>
          <a href="tel:0644008382" style={{
            width: 40, height: 40, borderRadius: 10,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(201,169,97,0.3)',
            color: K.gold, display: 'grid', placeItems: 'center', padding: 0,
            textDecoration: 'none',
          }}><Phone size={16} /></a>
          <a href="https://line.me/ti/p/xWmu96gEhw" target="_blank" rel="noopener noreferrer" style={{
            height: 40, padding: '0 14px', borderRadius: 10,
            background: '#06C755', border: 'none', color: '#fff',
            fontFamily: K.fontSans, fontWeight: 700, fontSize: 13,
            display: 'flex', alignItems: 'center', gap: 6,
            textDecoration: 'none',
          }}><Line size={16} color="#fff" /> LINE査定</a>
        </div>
      </div>

      <div style={{
        position: 'relative', zIndex: 2,
        padding: '32px 20px 0',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 16px', marginTop: 12,
          border: `1px solid ${K.gold}40`, borderRadius: 999,
          fontFamily: K.fontMono, fontSize: 9.5,
          letterSpacing: '0.3em', color: K.goldLight,
        }}>
          <span style={{ width: 4, height: 4, background: K.gold, borderRadius: '50%' }} />
          OSAKA · KANSAI · AREA
          <span style={{ width: 4, height: 4, background: K.gold, borderRadius: '50%' }} />
        </div>

        {/* 買取 IMPACT — prominent brand display */}
        <div className="shimmer-gold" style={{
          marginTop: 22,
          fontFamily: K.fontSerif, fontWeight: 700,
          fontSize: 26, letterSpacing: '0.2em', lineHeight: 1,
        }}>買取バンク IMPACT</div>

        <h1 style={{
          margin: '16px 0 0',
          fontFamily: K.fontSerif, fontWeight: 600,
          fontSize: 34, lineHeight: 1.2, letterSpacing: '0.04em',
          color: K.ink,
          textShadow: '0 0 60px rgba(201,169,97,0.15)',
        }}>
          <div>お近くの会場で、</div>
          <div className="shimmer-gold">最高の買取</div>
          <div>を、その場で。</div>
        </h1>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0 0',
        }}>
          <div style={{ width: 40, height: 1, background: `linear-gradient(90deg, transparent, ${K.gold})` }} />
          <div style={{ width: 8, height: 8, transform: 'rotate(45deg)', background: K.gold }} />
          <div style={{ width: 40, height: 1, background: `linear-gradient(270deg, transparent, ${K.gold})` }} />
        </div>

        <div style={{
          marginTop: 18,
          fontFamily: K.fontSerif, fontWeight: 500,
          fontSize: 13.5, lineHeight: 2, color: 'rgba(232,230,224,0.78)',
          letterSpacing: '0.08em',
        }}>
          スーパー前・モール・お祭り会場へ<br/>
          鑑定士がお伺いします。<br/>
          通りがかりに、お気軽にどうぞ。即現金化。
        </div>

        <div style={{
          marginTop: 24, width: '100%',
          padding: '14px 16px',
          background: 'rgba(201,169,97,0.06)',
          border: `1px solid ${K.gold}40`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            flexShrink: 0, width: 40, height: 40,
            display: 'grid', placeItems: 'center',
            background: K.navy900,
            border: `1px solid ${K.gold}`,
          }}>
            <Pin size={16} color={K.goldLight} />
          </div>
          <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
            <div style={{
              fontFamily: K.fontMono, fontSize: 8.5, letterSpacing: '0.22em', color: K.goldLight,
            }}>● OSAKA & KANSAI AREA</div>
            <div style={{
              marginTop: 4,
              fontFamily: K.fontSerif, fontWeight: 700, fontSize: 14, color: K.ink,
              letterSpacing: '0.03em', lineHeight: 1.4,
            }}>大阪を中心とした関西一円、<span style={{ color: K.goldLight }}>鑑定士がお伺い</span>します</div>
            <div style={{
              marginTop: 3,
              fontFamily: K.fontSans, fontSize: 10.5, color: K.inkDim,
            }}>ご自宅への出張買取、LINE査定、随時承り中。</div>
          </div>
        </div>

        {/* Primary CTA */}
        <a href="#form" className="cta-breath" onTouchStart={fireCTARipple} style={{
          position: 'relative', overflow: 'hidden',
          marginTop: 16, width: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          height: 60, borderRadius: 4,
          background: `linear-gradient(180deg, ${K.goldLight} 0%, ${K.gold} 50%, ${K.goldDeep} 100%)`,
          color: K.navy900,
          fontFamily: K.fontSans, fontWeight: 900, fontSize: 16,
          letterSpacing: '0.12em', textDecoration: 'none',
        }}>
          {ripples.map(r => (
            <span key={r.id} className="kb-ripple" style={{ left: r.x, top: r.y }} />
          ))}
          <Sparkle size={14} color={K.navy900} />
          無料査定をはじめる
          <ArrowRight size={16} color={K.navy900} />
        </a>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, width: '100%', marginTop: 10 }}>
          <a href="https://line.me/ti/p/xWmu96gEhw" target="_blank" rel="noopener noreferrer" style={{
            height: 52, borderRadius: 4, background: '#06C755', border: 'none',
            color: '#fff', fontFamily: K.fontSans, fontWeight: 800, fontSize: 13,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            boxShadow: '0 10px 24px rgba(6,199,85,0.3)',
            textDecoration: 'none',
          }}><Line size={18} color="#fff" /> LINE査定</a>
          <a href="tel:0644008382" style={{
            height: 52, borderRadius: 4,
            background: 'rgba(255,255,255,0.04)', border: `1px solid ${K.gold}`,
            color: K.goldLight, fontFamily: K.fontSans, fontWeight: 800, fontSize: 13,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            textDecoration: 'none',
          }}><Phone size={16} /> 06-4400-8382</a>
        </div>

        <div style={{
          marginTop: 22, paddingTop: 16, width: '100%',
          borderTop: `1px solid rgba(201,169,97,0.18)`,
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8,
        }}>
          {[['査定','無料'],['出張費','0円'],['営業','月〜金']].map(([k,v]) => (
            <div key={k} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: K.fontMono, fontSize: 9, letterSpacing: '0.2em', color: K.inkMute }}>{k}</div>
              <div style={{ marginTop: 4, fontFamily: K.fontSerif, fontWeight: 700, fontSize: 20, color: K.goldLight }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 14, padding: '8px 12px',
          border: `1px solid ${K.gold}25`,
          background: 'rgba(201,169,97,0.04)',
          fontFamily: K.fontMono, fontSize: 10, letterSpacing: '0.16em', color: K.goldLight,
          textAlign: 'center', lineHeight: 1.8,
        }}>
          大阪府公安委員会許可 · 第 621118R072427 号
        </div>
      </div>
    </section>
  );
}

function KBLogo({ size = 'sm' }) {
  const K = window.KB;
  const d = size === 'lg';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: d ? 14 : 11 }}>
      <div style={{
        width: d ? 54 : 42, height: d ? 54 : 42,
        borderRadius: 4, overflow: 'hidden',
        background: '#0A0F1C',
        border: `1px solid ${K.gold}70`,
        boxShadow: `0 0 14px rgba(201,169,97,0.12)`,
        display: 'grid', placeItems: 'center',
      }}>
        <img src="/legacy/assets/impact-logo.jpg" alt="IMPACT" style={{
          width: '115%', height: '115%', objectFit: 'cover',
          filter: 'contrast(1.08) brightness(1.1)',
        }} />
      </div>
      <div>
        <div style={{
          fontFamily: K.fontSerif, fontWeight: 700, fontSize: d ? 18 : 16,
          letterSpacing: '0.1em', color: K.ink, lineHeight: 1,
        }}>買取バンク</div>
        <div style={{
          marginTop: 4,
          fontFamily: K.fontMono, fontSize: d ? 10 : 9,
          letterSpacing: '0.35em', color: K.gold,
        }}>IMPACT</div>
      </div>
    </div>
  );
}

Object.assign(window, { KBHero, KBLogo });