import React from 'react';
import './_shell/tokens.css';
import './_shell/shell.css';
import useViewportMode from './_shell/useViewportMode';
import BottomNav from './_shell/BottomNav';
import DesktopHeader from './_shell/DesktopHeader';
import TopRibbon from './_shell/TopRibbon';
import Mascot from './_shell/Mascot';
import MascotBubble from './_shell/MascotBubble';
import OrnateFrame from './_shell/OrnateFrame';
import DesktopHero from './_shell/DesktopHero';
import DesktopFooter from './_shell/DesktopFooter';
import PrimaryButton from './_shell/PrimaryButton';
import { IconPaw } from './_shell/Icons';

const DISABLED_CARDS = [
  { title: '내 사주 이력', desc: '저장된 풀이를 한 번에' },
  { title: '북마크',        desc: '관심 가는 해석 즐겨찾기' },
  { title: '설정',          desc: '알림·테마·계정' },
  { title: '문의',          desc: '호령이 듣고 있어요' },
];

export default function Me() {
  const mode = useViewportMode();
  return (
    <div className="saju-v2">
      {mode === 'desktop' && <DesktopHeader />}
      {mode === 'desktop' ? (
        <main className="page paper-bg screen-in" style={{ marginTop: -78, paddingTop: 78 }}>
          <DesktopHero
            title="상담안내"
            subtitle="필요할 때 언제든 1:1 상담으로 함께 합니다."
            accent="#1F2A44"
            bubble={<div>걱정 마세요!<br />저와 함께 차근차근<br />풀어가요.</div>}
          />
          <div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 36px 32px' }}>
            <div className="k-frame" style={{ padding: '42px 48px', textAlign: 'center' }}>
              <div className="font-title" style={{ fontSize: 24, color: '#1F2A44', letterSpacing: '-0.03em' }}>
                전문가와 1:1 맞춤 상담
              </div>
              <div style={{ marginTop: 12, fontSize: 15, color: '#6B6B6B', lineHeight: 1.75 }}>
                사주풀이를 넘어, 인생의 큰 결정 앞에서 길잡이가 필요하실 때<br />
                검증된 명리학 전문가가 30분간 깊이 있게 풀어드립니다.
              </div>
              <PrimaryButton color="#1F2A44" full={false} style={{ margin: '24px auto 0', borderRadius: 999 }}>
                상담 신청하기 <IconPaw size={13} color="#E8C76B" />
              </PrimaryButton>
            </div>
          </div>
          <DesktopFooter />
        </main>
      ) : (
      <main className="page paper-bg screen-in">
        <TopRibbon />
        <div style={{
          maxWidth: mode === 'desktop' ? 720 : 'none',
          margin: '0 auto', padding: '24px 20px 40px',
          textAlign: 'center',
        }}>
          <Mascot variant="thinking" size={140} style={{ margin: '0 auto 12px' }} />
          <MascotBubble tone="purple" tail={false}
            text={'마이페이지는 곧 만나요.\n조금만 기다려주세요.'}
            style={{ margin: '0 auto 24px' }} />
          <div style={{ display: 'grid', gap: 12 }}>
            {DISABLED_CARDS.map((card) => (
              <OrnateFrame key={card.title} color="#6A4C7C" bg="#FBF7EF" padding="18px 16px"
                style={{ opacity: 0.55, textAlign: 'left' }}>
                <div className="font-title" style={{ fontSize: 16, color: '#1F2A44' }}>
                  {card.title}
                </div>
                <div style={{ marginTop: 6, fontSize: 12, color: '#6B6B6B' }}>{card.desc}</div>
              </OrnateFrame>
            ))}
          </div>
        </div>
      </main>
      )}
      {mode === 'mobile' && <BottomNav theme="ivory" />}
    </div>
  );
}