// Shared UI components — exported to window

const { useState, useEffect } = React;

function Nav({ currentPage, setPage, theme }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const t = theme;

  const links = [
    { id: 'home', label: 'ホーム' },
    { id: 'profile', label: 'プロフィール' },
    { id: 'learn', label: 'リベ活の学び' },
    { id: 'books', label: '書籍・ツール' },
    { id: 'review', label: '振り返り日記' },
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: t.bg, borderBottom: `1px solid ${t.border}`,
      backdropFilter: 'blur(8px)',
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 60 }}>
        <button onClick={() => setPage('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 0 }}>
            <span style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 15, fontWeight: 600, color: t.accent, letterSpacing: '0.05em', lineHeight: 1.2 }}>パパのリベ活日記</span>
            <span style={{ fontSize: 10, color: t.textMuted, letterSpacing: '0.08em' }}>かなさんの自由への記録</span>
          </div>
        </button>

        {/* Desktop links */}
        <div style={{ display: 'flex', gap: 4 }} className="nav-desktop">
          {links.slice(1).map(l => (
            <button key={l.id} onClick={() => setPage(l.id)} style={{
              background: currentPage === l.id ? t.bgAccent : 'none',
              border: 'none', cursor: 'pointer',
              padding: '6px 12px', borderRadius: 6,
              fontSize: 13, color: currentPage === l.id ? t.accent : t.textMuted,
              fontWeight: currentPage === l.id ? 500 : 400,
              fontFamily: "'Noto Sans JP', sans-serif",
              transition: 'all 0.15s',
            }}>{l.label}</button>
          ))}
        </div>

        {/* Mobile hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)} style={{
          background: 'none', border: 'none', cursor: 'pointer', display: 'none', padding: 8,
        }} className="nav-mobile">
          <div style={{ width: 20, height: 2, background: t.text, margin: '4px 0', transition: 'all 0.2s', transform: menuOpen ? 'rotate(45deg) translate(4px, 4px)' : 'none' }} />
          <div style={{ width: 20, height: 2, background: t.text, margin: '4px 0', opacity: menuOpen ? 0 : 1 }} />
          <div style={{ width: 20, height: 2, background: t.text, margin: '4px 0', transition: 'all 0.2s', transform: menuOpen ? 'rotate(-45deg) translate(4px, -4px)' : 'none' }} />
        </button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ background: t.bg, borderTop: `1px solid ${t.border}`, padding: '8px 24px 16px' }}>
          {links.map(l => (
            <button key={l.id} onClick={() => { setPage(l.id); setMenuOpen(false); }} style={{
              display: 'block', width: '100%', textAlign: 'left',
              background: currentPage === l.id ? t.bgAccent : 'none',
              border: 'none', cursor: 'pointer',
              padding: '10px 12px', borderRadius: 6,
              fontSize: 14, color: currentPage === l.id ? t.accent : t.text,
              fontFamily: "'Noto Sans JP', sans-serif",
            }}>{l.label}</button>
          ))}
        </div>
      )}
    </nav>
  );
}

function Footer({ theme: t }) {
  return (
    <footer style={{ background: t.bgSecondary, borderTop: `1px solid ${t.border}`, marginTop: 80, padding: '40px 24px', textAlign: 'center' }}>
      <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: t.accent, marginBottom: 8 }}>パパのリベ活日記</p>
      <p style={{ fontSize: 12, color: t.textMuted, marginBottom: 4 }}>かなさん｜沖縄在住｜医療職・WWS認定ライター</p>
      <p style={{ fontSize: 11, color: t.textMuted, marginTop: 16 }}>今日が人生で一番若い日！✨</p>
    </footer>
  );
}

function ArticleCard({ article, onClick, theme: t }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: t.bg, border: `1px solid ${hovered ? t.accentLight : t.border}`,
        borderRadius: 12, padding: '20px 24px', cursor: 'pointer',
        transition: 'all 0.2s', transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered ? `0 8px 24px ${t.shadow}` : 'none',
      }}
    >
      <div style={{ display: 'flex', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
        {article.tags.map(tag => (
          <span key={tag} style={{
            fontSize: 11, padding: '2px 8px', borderRadius: 20,
            background: t.bgAccent, color: t.accent, fontWeight: 500,
          }}>{tag}</span>
        ))}
      </div>
      <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 16, fontWeight: 600, color: t.text, marginBottom: 8, lineHeight: 1.6, textWrap: 'pretty' }}>{article.title}</h3>
      <p style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.7, marginBottom: 12 }}>{article.excerpt}</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 12, color: t.textMuted }}>{article.date}</span>
        <span style={{ fontSize: 12, color: t.accent, fontWeight: 500 }}>続きを読む →</span>
      </div>
    </div>
  );
}

function SectionTitle({ title, subtitle, theme: t, center = false }) {
  return (
    <div style={{ marginBottom: 32, textAlign: center ? 'center' : 'left' }}>
      <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 22, fontWeight: 600, color: t.text, marginBottom: 6 }}>{title}</h2>
      {subtitle && <p style={{ fontSize: 14, color: t.textMuted }}>{subtitle}</p>}
      <div style={{ width: 32, height: 2, background: t.accent, borderRadius: 2, marginTop: 10, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }} />
    </div>
  );
}

function ForceCard({ icon, label, items, theme: t }) {
  return (
    <div style={{ background: t.bgSecondary, borderRadius: 12, padding: '20px', border: `1px solid ${t.border}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <span style={{ fontSize: 22 }}>{icon}</span>
        <span style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 15, fontWeight: 600, color: t.accent }}>{label}</span>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((item, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: t.text, lineHeight: 1.5 }}>
            <span style={{ color: t.accent, marginTop: 1, flexShrink: 0 }}>✓</span>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Nav, Footer, ArticleCard, SectionTitle, ForceCard });