// sections3.jsx — B 자기선택 + C 실물 판단 노트
const C3 = window.KEITTA_COLORS;

// ── B. 이런 분께 맞아요 / 아니에요 (+D 한 줄) ──
function SelfSelect() {
  const { Section, SectionLabel } = window.LandingSections1;
  const accent = C3.body;
  const fit = ['개별 종목을 직접 판단해서 사는 분', '손실 뒤 "내가 뭘 놓쳤지" 생각해본 분', '판단 이유를 적어봤거나, 적어야지 하다 만 분'];
  const notFit = ['매수·매도 시그널이나 리딩을 원하는 분', 'ETF·적립식만 하는 분', '소액으로 재미로 하는 분 / 초단타 위주인 분'];
  const col = (title, items, ok) => (
    <div style={{ flex: '1 1 300px', background: '#fff', border: `1px solid ${ok ? 'rgba(31,138,91,0.25)' : 'rgba(124,92,252,0.14)'}`, borderRadius: 18, padding: '26px 26px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 18 }}>
        <span style={{ width: 26, height: 26, borderRadius: '50%', flexShrink: 0, background: ok ? 'rgba(31,138,91,0.12)' : 'rgba(124,92,252,0.1)', color: ok ? '#1F8A5B' : accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 900 }}>{ok ? '✓' : '·'}</span>
        <span style={{ fontSize: 16, fontWeight: 700, color: '#241C3D' }}>{title}</span>
      </div>
      {items.map((t, i) => (
        <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '9px 0', borderTop: i ? '1px solid #F1ECFA' : 'none' }}>
          <span style={{ color: ok ? '#1F8A5B' : '#B9B2CE', fontWeight: 800, flexShrink: 0, lineHeight: 1.5 }}>{ok ? '✓' : '—'}</span>
          <span style={{ fontSize: 14.5, lineHeight: 1.55, color: ok ? '#3A3352' : '#8A82A6' }}>{t}</span>
        </div>
      ))}
    </div>
  );
  return (
    <Section bg="#F7F4FF" id="fit">
      <div style={{ textAlign: 'center', marginBottom: 34 }}>
        <SectionLabel>IS THIS FOR YOU</SectionLabel>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontWeight: 600, fontSize: 36, letterSpacing: '-0.02em', color: '#241C3D', margin: '10px 0 0', lineHeight: 1.15 }}>
          이런 분께 <span style={{ color: accent }}>맞아요</span>.
        </h2>
      </div>
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', maxWidth: 760, margin: '0 auto' }}>
        {col('잘 맞아요', fit, true)}
        {col('잘 안 맞아요', notFit, false)}
      </div>
      <div style={{ maxWidth: 760, margin: '18px auto 0', textAlign: 'center', fontSize: 13.5, fontWeight: 600, color: '#8A82A6' }}>
        Keitta는 리딩방·자동매매·수익 보장이 아닙니다.
      </div>
    </Section>
  );
}

// ── C. 실물 판단 노트 예시 (서술 먼저 · 점수 하단·작게) ──
function NoteExample() {
  const { Section, SectionLabel } = window.LandingSections1;
  const accent = C3.body;
  return (
    <Section bg="#FFFFFF" id="note">
      <div style={{ textAlign: 'center', marginBottom: 34 }}>
        <SectionLabel>ONE NOTE</SectionLabel>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontWeight: 600, fontSize: 36, letterSpacing: '-0.02em', color: '#241C3D', margin: '10px 0 8px', lineHeight: 1.15 }}>
          판단 노트 <span style={{ color: accent }}>한 장</span>은 이렇게 남아요
        </h2>
        <p style={{ fontSize: 15, color: '#6A6480', fontWeight: 500, margin: 0 }}>한 줄을 적으면, 이런 되물음이 돌아와요.</p>
      </div>
      <div style={{ maxWidth: 560, margin: '0 auto', background: '#fff', border: '1px solid rgba(124,92,252,0.16)', borderRadius: 20, overflow: 'hidden', boxShadow: '0 20px 50px rgba(124,92,252,0.10)' }}>
        {/* 입력부 */}
        <div style={{ padding: '22px 26px', borderBottom: '1px solid #F1ECFA' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', color: accent }}>내가 적은 것</span>
            <span style={{ fontSize: 11, color: '#9A93AE', marginLeft: 'auto' }}>2026.05.04 · 오후 2:14</span>
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: '#241C3D', background: '#F3EEFF', borderRadius: 7, padding: '5px 11px' }}>어느 반도체주</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: '#fff', background: accent, borderRadius: 7, padding: '5px 11px' }}>매수</span>
          </div>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: '#241C3D', fontWeight: 500 }}>"실적 발표 직전이라 단기 반등을 기대. 최근 뉴스 흐름도 좋아 보임."</p>
        </div>
        {/* 결과: 서술 먼저 */}
        <div style={{ padding: '22px 26px', background: '#FBFAFF' }}>
          <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', color: accent, marginBottom: 14 }}>돌아온 되물음</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
              <span style={{ color: accent, fontWeight: 800, flexShrink: 0, lineHeight: 1.5 }}>·</span>
              <span style={{ fontSize: 14.5, lineHeight: 1.55, color: '#241C3D' }}>근거에 <b>구체적 수치</b>는 없어요 — "좋아 보임"은 인상이에요.</span>
            </div>
            <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
              <span style={{ color: accent, fontWeight: 800, flexShrink: 0, lineHeight: 1.5 }}>·</span>
              <span style={{ fontSize: 14.5, lineHeight: 1.55, color: '#241C3D' }}><b>반대 시나리오</b>가 비어 있어요 — 실적이 빗나가면?</span>
            </div>
            <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
              <span style={{ color: accent, fontWeight: 800, flexShrink: 0, lineHeight: 1.5 }}>·</span>
              <span style={{ fontSize: 14.5, lineHeight: 1.55, color: '#241C3D' }}><b>손절 기준</b>이 적혀 있지 않아요.</span>
            </div>
          </div>
          {/* 점수: 하단·작게 */}
          <div style={{ display: 'flex', gap: 18, marginTop: 20, paddingTop: 16, borderTop: '1px solid #EFE9FB' }}>
            {[['근거 구체성', '낮음', '#E0A24A'], ['반대 시나리오', '없음', '#B4308A'], ['손절 기준', '없음', '#B4308A']].map(([k, v, c], i) => (
              <div key={i} style={{ flex: 1 }}>
                <div style={{ fontSize: 10.5, color: '#9A93AE', fontWeight: 600, marginBottom: 4 }}>{k}</div>
                <div style={{ fontSize: 13, fontWeight: 800, color: c }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <p style={{ maxWidth: 560, margin: '16px auto 0', textAlign: 'center', fontSize: 12.5, color: '#9A93AE', lineHeight: 1.55 }}>
        점수는 판정이 아니라, 무엇이 있었고 무엇이 비었는지를 표시할 뿐이에요.
      </p>
    </Section>
  );
}

window.LandingSections3 = { SelfSelect, NoteExample };