// TRUST — 3 principles + numeric proof + company info

function KBTrust() {
  const K = window.KB;
  const { Shield, Scale, Bolt } = window.KBIcon;

  const principles = [
    {
      num: '壱',
      icon: Shield,
      title: '信頼 · 安心 · 安全',
      en: 'TRUST & SAFETY',
      body: '株式会社として登記。大阪府公安委員会許可のもと、お客様の大切なお品物を安全・安心にお預かりいたします。',
    },
    {
      num: '弐',
      icon: Scale,
      title: '透明な鑑定',
      en: 'TRANSPARENT',
      body: '査定根拠を一点ずつご説明。市場相場・状態・希少性。全て開示。',
    },
    {
      num: '参',
      icon: Bolt,
      title: '最高の買取額',
      en: 'BEST OFFER',
      body: '他社査定書お持込で必ず上回る額を。仲介を挟まない直買取だから実現。',
    },
  ];

  return (
    <section style={{
      background: K.navy800,
      padding: '72px 24px 56px',
    }}>
      <SectionHeader
        kicker="OUR PRINCIPLES"
        title="三つの、こだわり。"
        note="買取バンクが、選ばれる理由。"
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 36 }}>
        {principles.map((p, i) => (
          <article key={p.num} style={{
            position: 'relative',
            padding: '24px 22px',
            background: i === 1
              ? `linear-gradient(135deg, rgba(201,169,97,0.08) 0%, rgba(201,169,97,0.02) 100%)`
              : K.navy700,
            border: `1px solid ${i === 1 ? K.gold + '50' : 'rgba(201,169,97,0.15)'}`,
            borderRadius: 4,
          }}>
            <div style={{
              position: 'absolute', top: -14, left: 22,
              padding: '4px 12px',
              background: K.navy900,
              border: `1px solid ${K.gold}`,
              fontFamily: K.fontSerif, fontWeight: 700, fontSize: 16,
              color: K.gold, letterSpacing: '0.1em',
            }}>
              其の {p.num}
            </div>

            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginTop: 8 }}>
              <div style={{
                flexShrink: 0,
                width: 60, height: 60,
                display: 'grid', placeItems: 'center',
                background: 'rgba(201,169,97,0.06)',
                border: `1px solid ${K.gold}30`,
              }}>
                <p.icon size={32} color={K.gold} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: K.fontMono, fontSize: 9,
                  letterSpacing: '0.25em', color: K.goldLight,
                }}>{p.en}</div>
                <h3 style={{
                  margin: '4px 0 8px',
                  fontFamily: K.fontSerif, fontWeight: 700, fontSize: 22,
                  color: K.ink, letterSpacing: '0.04em',
                }}>{p.title}</h3>
                <div style={{
                  fontFamily: K.fontSans, fontSize: 12.5, lineHeight: 1.85,
                  color: K.inkDim,
                }}>{p.body}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

const STAT_DEFS = [
  { label: '年間査定実績', en: 'APPRAISED / YR', unit: '点', target: 12480, fmt: v => Math.floor(v).toLocaleString('ja-JP') },
  { label: 'ご成約率',     en: 'CONVERSION',    unit: '%',  target: 98.2,  fmt: v => v.toFixed(1) },
  { label: '年間営業日数', en: 'BUSINESS DAYS',  unit: '日', target: 261,   fmt: v => Math.floor(v) },
  { label: '出張・査定料', en: 'NO FEES',        unit: '',   target: null,  fmt: () => '¥0' },
];

function KBStats() {
  const K = window.KB;
  const containerRef = React.useRef(null);
  const firedRef = React.useRef(false);

  const [displays, setDisplays] = React.useState(STAT_DEFS.map(s => s.target === null ? '¥0' : '0'));

  React.useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting || firedRef.current) return;
      firedRef.current = true;
      const duration = 2000;
      const t0 = performance.now();
      const tick = (now) => {
        const prog = Math.min((now - t0) / duration, 1);
        const ease = 1 - Math.pow(1 - prog, 4);
        setDisplays(STAT_DEFS.map(s => s.target === null ? '¥0' : s.fmt(ease * s.target)));
        if (prog < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={containerRef} style={{
      position: 'relative',
      padding: '72px 24px',
      background: `
        radial-gradient(ellipse 100% 50% at 50% 50%, rgba(201,169,97,0.15), transparent 60%),
        #050B18
      `,
    }}>
      <div style={{
        position: 'absolute', top: 24, left: 24, right: 24, bottom: 24,
        border: `1px solid ${K.gold}30`,
        pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', textAlign: 'center' }}>
        <div style={{
          fontFamily: K.fontMono, fontSize: 9.5,
          letterSpacing: '0.3em', color: K.gold,
        }}>— THE NUMBERS —</div>
        <h2 style={{
          margin: '12px 0 0',
          fontFamily: K.fontSerif, fontWeight: 700, fontSize: 26,
          color: K.ink, letterSpacing: '0.06em',
        }}>数字が、証明する。</h2>
      </div>

      <div style={{
        marginTop: 36,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 24px',
      }}>
        {STAT_DEFS.map((s, i) => (
          <div key={s.label} style={{ textAlign: 'center' }}>
            <div style={{
              fontFamily: K.fontLatin, fontWeight: 500, fontStyle: 'italic',
              fontSize: 8, color: K.inkMute, letterSpacing: '0.3em',
            }}>{s.en}</div>
            <div style={{
              marginTop: 6,
              display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4,
              fontFamily: K.fontLatin, fontWeight: 500,
              background: `linear-gradient(180deg, ${K.goldLight}, ${K.gold})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>
              <span style={{ fontSize: 46, lineHeight: 1 }}>{displays[i]}</span>
              <span style={{ fontSize: 18, fontFamily: K.fontSerif }}>{s.unit}</span>
            </div>
            <div style={{
              marginTop: 8,
              fontFamily: K.fontSans, fontSize: 11, fontWeight: 700,
              color: K.ink, letterSpacing: '0.1em',
            }}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { KBTrust, KBStats });