// sections.jsx — Keitta 랜딩 섹션들
// 모든 섹션은 max-width 컨테이너 안에서 정렬, 보라+그레이 팔레트 사용

const C = window.KEITTA_COLORS;

// ─────────────────────────────────────────────────────────────────────────────
// 공통 wrapper
const Section = ({ children, style, ...rest }) => (
  <section style={{ width: '100%', padding: '120px 24px', ...style }} {...rest}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>{children}</div>
  </section>
);

const SectionLabel = ({ children, color = C.body }) => (
  <div style={{
    fontSize: 13, fontWeight: 700, letterSpacing: '0.18em',
    color, textTransform: 'uppercase', marginBottom: 18,
  }}>{children}</div>
);

const SectionTitle = ({ children, style }) => (
  <h2 style={{
    fontSize: 38, fontWeight: 800, lineHeight: 1.3, letterSpacing: '-0.02em',
    color: '#1A1530', margin: 0, textWrap: 'pretty', ...style,
  }}>{children}</h2>
);

const DarkLabel = ({ children, style }) => (
  <div style={{
    background: '#2A2440', color: 'white',
    padding: '18px 28px', borderRadius: 16,
    fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em',
    textAlign: 'center', boxShadow: '0 8px 24px rgba(42,36,64,0.18)',
    ...style,
  }}>{children}</div>
);

// 카드 → 다크 라벨 연결선 (참고 이미지 패턴)
const ConnectorDot = ({ style }) => (
  <div style={{
    width: 14, height: 14, borderRadius: '50%',
    background: '#2A2440', margin: '0 auto',
    boxShadow: '0 0 0 6px rgba(42,36,64,0.08)',
    ...style,
  }}/>
);

// ─────────────────────────────────────────────────────────────────────────────
// 1. HERO
function Hero() {
  return (
    <section style={{
      position: 'relative',
      padding: '140px 24px 100px',
      background: 'linear-gradient(180deg, #FAF8FF 0%, #F4F0FF 100%)',
      overflow: 'hidden',
    }}>
      {/* 배경 장식 도트 */}
      <div style={{
        position: 'absolute', top: 80, right: -40,
        width: 380, height: 380, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(124,92,252,0.08) 0%, transparent 70%)',
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', bottom: -60, left: -60,
        width: 280, height: 280, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(124,92,252,0.06) 0%, transparent 70%)',
        pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 980, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 14px', borderRadius: 999,
          background: 'rgba(124,92,252,0.1)', color: C.body,
          fontSize: 12, fontWeight: 700, letterSpacing: '0.06em',
          marginBottom: 28,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.body }}/>
          CLOSED BETA · 모집 중
        </div>

        <h1 style={{
          fontSize: 64, fontWeight: 800, lineHeight: 1.18,
          letterSpacing: '-0.035em', color: '#1A1530', margin: 0,
          textWrap: 'balance',
        }}>
          매수 버튼 누르기 전에,<br/>
          <span style={{ color: C.body }}>한 번만</span> 보여주는 앱
        </h1>

        <p style={{
          fontSize: 18, lineHeight: 1.65, color: '#5A5470',
          marginTop: 28, maxWidth: 540, margin: '28px auto 0',
          textWrap: 'pretty',
        }}>
          Keitta는 투자 판단을 점검합니다.<br/>
          결과 말고, 판단 자체를요.
        </p>

        <div style={{ marginTop: 44, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#beta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '16px 28px', borderRadius: 14,
            background: C.body, color: 'white',
            fontSize: 15, fontWeight: 700, letterSpacing: '-0.005em',
            textDecoration: 'none',
            whiteSpace: 'nowrap',
            boxShadow: '0 8px 22px rgba(124,92,252,0.32)',
            transition: 'transform .15s, box-shadow .15s',
          }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 28px rgba(124,92,252,0.38)'; }}
             onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 8px 22px rgba(124,92,252,0.32)'; }}>
            베타 신청하기
            <span style={{ fontSize: 16 }}>→</span>
          </a>
          <a href="#how" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '16px 28px', borderRadius: 14,
            background: 'white', color: '#1A1530',
            fontSize: 15, fontWeight: 600,
            border: '1px solid rgba(26,21,48,0.1)',
            whiteSpace: 'nowrap',
            textDecoration: 'none',
          }}>어떻게 쓰나요?</a>
        </div>

        {/* 캐릭터 — 히어로 우측에 살짝 걸치게 */}
        <div style={{
          position: 'absolute', right: -10, top: -40,
          transform: 'rotate(-8deg)',
        }}>
          <Keitta pose="wave" size={150} followCursor/>
        </div>
        <div style={{
          position: 'absolute', left: -20, bottom: -40,
          transform: 'rotate(6deg)',
        }}>
          <Keitta pose="peek" size={100}/>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 2. PROBLEM (왜 답답했나)
function Problem() {
  return (
    <Section style={{ background: 'white', padding: '140px 24px' }}>
      <div style={{ display: 'flex', gap: 64, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 360px', minWidth: 280 }}>
          <SectionLabel>WHY KEITTA</SectionLabel>
          <SectionTitle>
            손실 났을 때 진짜 답답한 건,<br/>
            <span style={{ color: C.body }}>왜 샀는지 기억이 안 난다는 것.</span>
          </SectionTitle>
          <p style={{
            marginTop: 28, fontSize: 16, lineHeight: 1.75, color: '#5A5470', textWrap: 'pretty',
          }}>
            어제는 분명한 이유였는데,<br/>
            떨어지고 나면 흐려진다.<br/><br/>
            그 이유가 뭐였는지,<br/>
            진짜 분석이었는지,<br/>
            아니면 그냥 분위기였는지.
          </p>
        </div>

        <div style={{ flex: '1 1 360px', minWidth: 280, position: 'relative' }}>
          {/* 말풍선 + 캐릭터 그룹 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              '“그때 왜 샀더라…”',
              '“이게 진짜 분석이었나?”',
              '“그냥 분위기에 휩쓸린 건가?”',
            ].map((text, i) => (
              <div key={i} style={{
                background: '#F6F3FF', borderRadius: 16,
                padding: '18px 22px',
                fontSize: 15.5, fontWeight: 500, color: '#3D2799',
                alignSelf: i === 1 ? 'flex-end' : (i === 0 ? 'flex-start' : 'center'),
                maxWidth: '85%',
                border: '1px solid rgba(124,92,252,0.12)',
              }}>{text}</div>
            ))}
          </div>
          <div style={{ position: 'absolute', bottom: -20, right: 0 }}>
            <Keitta pose="think" size={110}/>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 3. SOLUTION (적기 / 보기 / 다시보기)
function Solution() {
  const items = [
    {
      step: '01', title: '적기', en: 'WRITE',
      desc: '매수든 매도든, 누르기 전에 한 줄.\n"왜" 사고 싶은지.',
      icon: 'pencil',
      pose: 'point',
    },
    {
      step: '02', title: '보기', en: 'REFLECT',
      desc: 'AI가 그 한 줄을 분석합니다.\n점수 아니라 — 어떤 부분에서\n흔들리는지 보여줍니다.',
      icon: 'lens',
      pose: 'look',
    },
    {
      step: '03', title: '다시 보기', en: 'REVIEW',
      desc: '1주 후, 1개월 후, 1년 후.\n그때 그 판단이 옳았는지\n함께 봅니다.',
      icon: 'clock',
      pose: 'sit',
    },
  ];
  return (
    <Section id="how" style={{ background: '#FAF8FF' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <SectionLabel>HOW IT WORKS</SectionLabel>
        <SectionTitle>매매 직전, 판단을 적어두는 곳.</SectionTitle>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            position: 'relative',
            background: 'white', borderRadius: 24, padding: '36px 28px 32px',
            border: '1px solid rgba(26,21,48,0.06)',
            boxShadow: '0 1px 0 rgba(255,255,255,1) inset, 0 4px 18px rgba(60,40,140,0.06)',
          }}>
            {/* 캐릭터 카드 위에 살짝 걸치게 */}
            <div style={{
              position: 'absolute', top: -32, right: 16,
              transform: `rotate(${(i - 1) * 6}deg)`,
            }}>
              <Keitta pose={it.pose} size={72}/>
            </div>

            <div style={{
              fontSize: 12, fontWeight: 800, letterSpacing: '0.14em',
              color: C.body, marginBottom: 12,
            }}>{it.step} · {it.en}</div>

            <h3 style={{
              fontSize: 26, fontWeight: 800, color: '#1A1530',
              margin: 0, letterSpacing: '-0.02em',
            }}>{it.title}</h3>

            <p style={{
              marginTop: 14, fontSize: 14.5, lineHeight: 1.7,
              color: '#5A5470', whiteSpace: 'pre-line', textWrap: 'pretty',
            }}>{it.desc}</p>

            {/* 미니 일러스트 */}
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px dashed rgba(26,21,48,0.08)' }}>
              <SolutionMini icon={it.icon}/>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// 솔루션 카드 안의 미니 시각화
function SolutionMini({ icon }) {
  if (icon === 'pencil') {
    return (
      <div style={{ background: '#F6F3FF', borderRadius: 12, padding: '14px 16px', fontSize: 13, color: '#3D2799', fontWeight: 500 }}>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', color: C.body, marginBottom: 6 }}>NEW NOTE</div>
        <div>실적 발표 직전이라 단기 반등 기대.</div>
        <div style={{ marginTop: 8, height: 1, background: 'rgba(124,92,252,0.2)' }}/>
        <div style={{ fontSize: 11, color: '#7A6FA0', marginTop: 8 }}>2026.05.04 · 오후 2:14</div>
      </div>
    );
  }
  if (icon === 'lens') {
    return (
      <div style={{ background: '#F6F3FF', borderRadius: 12, padding: '14px 16px' }}>
        {[
          { label: '근거의 구체성', val: 72 },
          { label: '감정 신호', val: 38 },
          { label: '시점 의존도', val: 58 },
        ].map((r, i) => (
          <div key={i} style={{ marginBottom: i === 2 ? 0 : 10 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, fontSize: 11, color: '#5A5470', marginBottom: 4 }}>
              <span style={{ whiteSpace: 'nowrap' }}>{r.label}</span><span style={{ fontWeight: 700, color: '#3D2799', flexShrink: 0 }}>{r.val}</span>
            </div>
            <div style={{ height: 5, background: 'rgba(124,92,252,0.15)', borderRadius: 3 }}>
              <div style={{ width: `${r.val}%`, height: '100%', background: C.body, borderRadius: 3 }}/>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (icon === 'clock') {
    return (
      <div style={{ background: '#F6F3FF', borderRadius: 12, padding: '14px 16px', display: 'flex', justifyContent: 'space-between' }}>
        {['1주', '1개월', '1년'].map((t, i) => (
          <div key={i} style={{ textAlign: 'center', flex: 1 }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%',
              background: i === 0 ? C.body : 'rgba(124,92,252,0.2)',
              margin: '0 auto 6px', display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: i === 0 ? 'white' : C.body, fontSize: 11, fontWeight: 800,
            }}>{i + 1}</div>
            <div style={{ fontSize: 11, color: '#5A5470', fontWeight: 600 }}>{t} 후</div>
          </div>
        ))}
      </div>
    );
  }
  return null;
}

// ─────────────────────────────────────────────────────────────────────────────
// 4. FLOW (4단계)
function Flow() {
  const steps = [
    { n: 1, title: '매수·매도 종목과 이유를 적습니다.', desc: '한 줄이면 충분합니다.' },
    { n: 2, title: 'AI가 그 판단을 살펴봅니다.', desc: '근거·감정·시점을 분리해서 봅니다.' },
    { n: 3, title: '강점과 빈틈을 보고서로 정리합니다.', desc: '점수 아니라, 흔들린 부분을 짚어줍니다.' },
    { n: 4, title: '시간이 지나면 다시 알려줍니다.', desc: '“그때 판단, 어땠다고 보세요?”' },
  ];
  return (
    <Section style={{ background: 'white', padding: '120px 24px' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <SectionLabel>FLOW</SectionLabel>
        <SectionTitle>흐름은 이렇습니다.</SectionTitle>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20,
        position: 'relative',
      }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            background: '#FAF8FF', borderRadius: 20, padding: '28px 24px',
            border: '1px solid rgba(124,92,252,0.1)',
            position: 'relative',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: C.body, color: 'white',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 800, marginBottom: 16,
              boxShadow: '0 4px 12px rgba(124,92,252,0.3)',
            }}>{s.n}</div>
            <div style={{
              fontSize: 15, fontWeight: 700, color: '#1A1530',
              lineHeight: 1.5, letterSpacing: '-0.01em', textWrap: 'pretty',
            }}>{s.title}</div>
            <div style={{ fontSize: 13, color: '#7A6FA0', marginTop: 8, lineHeight: 1.5 }}>{s.desc}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

window.LandingSections1 = { Hero, Problem, Solution, Flow, Section, SectionLabel, SectionTitle, DarkLabel, ConnectorDot };