// components.jsx — shared building blocks for 転職ブログ
// Style: 金融メディア風 / 信頼感重視

// ─────────────────────────────────────────────────────────────
// Theme helpers
// ─────────────────────────────────────────────────────────────
const THEMES = {
  casual:  { accent: '#ef6c4a', accentSoft: '#ffeee6', accentInk: '#ffffff', tag: '#ef6c4a' },
  peach:   { accent: '#e07a8a', accentSoft: '#ffeef0', accentInk: '#ffffff', tag: '#e07a8a' },
  mint:    { accent: '#3aa57a', accentSoft: '#e6f5ec', accentInk: '#ffffff', tag: '#3aa57a' },
  luxe:    { accent: '#8a6a2e', accentSoft: '#f3ecdc', accentInk: '#ffffff', tag: '#8a6a2e' },
  noir:    { accent: '#b8965a', accentSoft: '#1a1815', accentInk: '#0a0907', tag: '#b8965a' },
  navy:    { accent: '#1a2c4e', accentSoft: '#e8eef5', accentInk: '#ffffff', tag: '#1a2c4e' },
  forest:  { accent: '#1f4a3a', accentSoft: '#e8f0eb', accentInk: '#ffffff', tag: '#1f4a3a' },
  crimson: { accent: '#6b1822', accentSoft: '#f5e7e9', accentInk: '#ffffff', tag: '#6b1822' },
  ink:     { accent: '#1a1a1a', accentSoft: '#ececec', accentInk: '#ffffff', tag: '#1a1a1a' },
};

const FONT_SETS = {
  serif:   { display: "'Shippori Mincho', 'Noto Serif JP', serif", body: "'Noto Sans JP', system-ui, sans-serif" },
  sans:    { display: "'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif", body: "'Noto Sans JP', system-ui, sans-serif" },
  hybrid:  { display: "'Noto Serif JP', serif", body: "'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif" },
  rounded: { display: "'Zen Maru Gothic', 'Klee One', 'Noto Sans JP', sans-serif", body: "'Zen Maru Gothic', 'Noto Sans JP', sans-serif" },
};

function getThemeVars(t) {
  const theme = THEMES[t.theme] || THEMES.luxe;
  const fonts = FONT_SETS[t.fonts] || FONT_SETS.hybrid;
  const dark = !!t.dark || t.theme === 'noir';
  const cream = t.theme === 'luxe';
  const casual = ['casual','peach','mint'].includes(t.theme);
  return {
    '--accent': theme.accent,
    '--accent-soft': dark ? 'rgba(184,150,90,.10)' : theme.accentSoft,
    '--accent-ink': theme.accentInk,
    '--tag': theme.tag,
    '--bg': dark ? '#13110d' : (cream ? '#fbf8f1' : (casual ? '#fffaf5' : '#ffffff')),
    '--bg-soft': dark ? '#1c1814' : (cream ? '#f3ecdc' : (casual ? '#fff2e8' : '#f7f7f5')),
    '--bg-deep': dark ? '#0a0907' : (cream ? '#ebe4cf' : (casual ? '#ffece0' : '#f0eee9')),
    '--ink': dark ? '#ece4d0' : '#1a1612',
    '--ink-2': dark ? '#b8ad96' : '#4a4036',
    '--ink-3': dark ? '#857c69' : '#807565',
    '--rule': dark ? 'rgba(232,212,170,.10)' : 'rgba(54,40,20,.10)',
    '--rule-strong': dark ? 'rgba(232,212,170,.22)' : 'rgba(54,40,20,.20)',
    '--font-display': fonts.display,
    '--font-body': fonts.body,
    '--font-num': "'Manrope','Inter',sans-serif",
  };
}

// ─────────────────────────────────────────────────────────────
// Icons (line-style)
// ─────────────────────────────────────────────────────────────
const Icon = {
  search: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>,
  menu:   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>,
  arrow:  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  star:   <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18.2 22 12 18l-6.2 4 1.7-7.2L2 10l7.1-1.1L12 2z"/></svg>,
  check:  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></svg>,
  clock:  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  user:   <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>,
  shield: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"><path d="M12 2 4 5v7c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>,
  ext:    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M14 4h6v6M20 4l-9 9M10 6H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5"/></svg>,
  bookmark: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"><path d="M6 3h12v18l-6-4-6 4z"/></svg>,
};

// ─────────────────────────────────────────────────────────────
// Placeholder imagery — striped SVG with mono label
// ─────────────────────────────────────────────────────────────
function Placeholder({ label, ratio = '16/9', tone = 'warm', dark, style }) {
  const stripeA = dark ? '#1d2230' : (tone === 'cool' ? '#e6ecf3' : '#ece8df');
  const stripeB = dark ? '#171b25' : (tone === 'cool' ? '#dde4ee' : '#e3dfd2');
  const text = dark ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.45)';
  return (
    <div style={{
      width: '100%', aspectRatio: ratio,
      backgroundImage: `repeating-linear-gradient(135deg, ${stripeA} 0 14px, ${stripeB} 14px 28px)`,
      position: 'relative', overflow: 'hidden', ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'ui-monospace,SFMono-Regular,Menlo,monospace', fontSize: 11, letterSpacing: '.04em',
        color: text, padding: 8, textAlign: 'center',
      }}>
        {label}
      </div>
    </div>
  );
}

// Avatar circle
function Avatar({ initials, size = 28, dark }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: dark ? '#2a3140' : '#d9d3c4', color: dark ? '#aab1bb' : '#5a4a2a',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.4, fontWeight: 700, letterSpacing: '.02em',
      fontFamily: 'var(--font-num)', flex: '0 0 auto',
    }}>{initials}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────────────────────
function SiteHeader({ mobile }) {
  const navItems = ['ランキング', 'エージェント', '転職ノウハウ', '業界別', '年代別', 'コラム'];
  return (
    <header style={{
      background: 'var(--bg)', borderBottom: '1px solid var(--rule)',
      position: 'relative', zIndex: 5,
    }}>
      {/* Top utility strip */}
      <div style={{
        display: mobile ? 'none' : 'flex', borderBottom: '1px solid var(--rule)',
        padding: '8px 40px', fontSize: 10.5, color: 'var(--ink-3)', justifyContent: 'space-between',
        letterSpacing: '.06em',
      }}>
        <div style={{display:'flex',gap:18}}>
          <span>2026.05.12 (火)</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:6}}>{Icon.shield} 編集ポリシー</span>
          <span>監修体制</span>
        </div>
        <div style={{display:'flex',gap:18}}>
          <span>会員登録</span>
          <span>ログイン</span>
        </div>
      </div>
      {/* Brand row */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: mobile ? '18px 20px' : '32px 40px',
      }}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          {mobile && <span style={{color:'var(--ink)'}}>{Icon.menu}</span>}
          <div style={{display:'flex',flexDirection:'column',gap:4}}>
            <div style={{
              fontFamily:'var(--font-num)', fontSize: 9, letterSpacing:'.42em',
              color:'var(--accent)', textTransform:'uppercase', fontWeight: 600,
            }}>— Est. 2024 —</div>
            <div style={{
              fontFamily:'var(--font-display)', fontWeight: 700, fontSize: mobile ? 22 : 30,
              letterSpacing: '.06em', color:'var(--ink)', lineHeight: 1,
            }}>転職ブログ</div>
            <div style={{
              fontFamily:'var(--font-num)', fontSize: 9, letterSpacing:'.38em',
              color:'var(--ink-3)', textTransform:'uppercase', fontWeight: 500,
            }}>TENSHOKU JOURNAL</div>
          </div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:mobile?10:16}}>
          {!mobile && (
            <div style={{
              display:'flex', alignItems:'center', gap:8,
              background:'var(--bg-soft)', border:'1px solid var(--rule)',
              padding:'7px 12px', borderRadius: 2, width: 240, color:'var(--ink-3)', fontSize: 12,
            }}>{Icon.search}<span>キーワードで記事を検索</span></div>
          )}
          {mobile && <span style={{color:'var(--ink-2)'}}>{Icon.search}</span>}
          {!mobile && (
            <button style={{
              background:'transparent', color:'var(--accent)',
              border:'1px solid var(--accent)', padding:'11px 22px',
              fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, letterSpacing:'.18em',
              cursor:'pointer', borderRadius: 0,
            }}>無料相談</button>
          )}
        </div>
      </div>
      {/* Nav */}
      {!mobile && (
        <nav style={{
          display:'flex', gap: 40, padding: '0 40px', borderTop:'1px solid var(--rule)',
          justifyContent:'center',
        }}>
          {navItems.map((n,i)=>(
            <a key={i} style={{
              padding:'16px 0', fontSize: 12, fontWeight: 500, letterSpacing:'.15em',
              color: i===0?'var(--ink)':'var(--ink-2)', textDecoration:'none', cursor:'pointer',
              borderBottom: i===0 ? '1px solid var(--accent)' : '1px solid transparent',
              marginBottom: -1, fontFamily:'var(--font-display)',
            }}>{n}</a>
          ))}
        </nav>
      )}
    </header>
  );
}

// Breadcrumb
function Breadcrumb({ items }) {
  return (
    <div style={{
      display:'flex',alignItems:'center',gap:8, fontSize:11, color:'var(--ink-3)',
      padding:'14px 0',
    }}>
      {items.map((it,i)=>(
        <React.Fragment key={i}>
          {i>0 && <span>›</span>}
          <span style={{color: i===items.length-1?'var(--ink-2)':'var(--ink-3)'}}>{it}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

// Section header
function SectionHead({ kicker, title, action }) {
  return (
    <div style={{
      position:'relative',
      display:'flex', alignItems:'flex-end', justifyContent:'space-between',
      borderBottom:'1px solid var(--rule-strong)', paddingBottom: 16, marginBottom: 28,
      gap: 16,
    }}>
      <div style={{textAlign: 'center', flex:1, minWidth:0}}>
        {kicker && <div style={{
          fontFamily:'var(--font-num)', fontSize:10, letterSpacing:'.42em',
          color:'var(--accent)', fontWeight:600, marginBottom: 10, textTransform:'uppercase',
          display:'inline-flex', alignItems:'center', gap:14,
        }}>
          <span style={{width:24,height:1,background:'var(--accent)'}}/>
          {kicker}
          <span style={{width:24,height:1,background:'var(--accent)'}}/>
        </div>}
        <h2 style={{
          margin: 0, fontFamily:'var(--font-display)', fontWeight: 600,
          fontSize: 26, color:'var(--ink)', letterSpacing:'.04em',
        }}>{title}</h2>
      </div>
      {action && <a style={{
        position:'absolute', right: 0, top: '100%',
        marginTop: 14,
        fontSize: 11, color:'var(--ink-2)', cursor:'pointer', display:'inline-flex',alignItems:'center',gap:8,
        letterSpacing:'.15em',
      }}>{action} {Icon.arrow}</a>}
    </div>
  );
}

Object.assign(window, {
  THEMES, FONT_SETS, getThemeVars,
  Icon, Placeholder, Avatar,
  SiteHeader, Breadcrumb, SectionHead,
});