// components.jsx — shared UI components for 康大商会

function ImgPlaceholder({ label, width = '100%', height = 200, theme }) {
  const t = theme || { bg2: '#ede6d5', border: '#c9b898', fg2: '#6b4d2a' };
  const id = 'stripe_' + Math.random().toString(36).slice(2,8);
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', borderRadius: 2, border: `1px solid ${t.border}` }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', top: 0, left: 0 }}>
        <defs>
          <pattern id={id} width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="12" height="12" fill={t.bg2} />
            <rect width="6" height="12" fill={t.border} opacity="0.35" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`} />
        <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle"
          fill={t.fg2} fontSize="12" fontFamily="'Noto Sans JP', sans-serif"
          style={{ pointerEvents: 'none' }}>{label}</text>
      </svg>
    </div>
  );
}

function SectionTitle({ children, sub, theme, center }) {
  const t = theme || { accent: '#8b4a1e', fg: '#2d1f0e', fg2: '#6b4d2a' };
  return (
    <div style={{ marginBottom: 40, textAlign: center ? 'center' : 'left' }}>
      {sub && <p style={{ color: t.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 8, fontFamily: "'Noto Sans JP', sans-serif", textTransform: 'uppercase' }}>{sub}</p>}
      <h2 style={{ color: t.fg, fontSize: 28, fontWeight: 700, fontFamily: "'Noto Serif JP', serif", margin: 0, lineHeight: 1.4 }}>{children}</h2>
      <div style={{ width: 40, height: 2, background: t.accent, marginTop: 12, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }} />
    </div>
  );
}

function KHeader({ page, setPage, theme, menuOpen, setMenuOpen }) {
  const t = theme || { navBg: '#2d1f0e', navFg: '#f5f0e6', accent2: '#c4956a' };
  const navItems = [
    { id: 'home', label: 'トップ' },
    { id: 'products', label: '商品紹介' },
    { id: 'company', label: '会社案内' },
    { id: 'contact', label: 'お問い合わせ' },
  ];
  return (
    <header style={{ background: t.navBg, position: 'sticky', top: 0, zIndex: 100, boxShadow: '0 2px 12px rgba(0,0,0,0.3)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <button onClick={() => setPage('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ color: t.accent2, fontFamily: "'Noto Serif JP', serif", fontSize: 18, fontWeight: 700, letterSpacing: '0.1em' }}>康大商会</span>
          <span style={{ color: t.navFg, opacity: 0.6, fontSize: 10, letterSpacing: '0.15em', fontFamily: "'Noto Sans JP', sans-serif" }}>薪・炭・七輪</span>
        </button>
        {/* Desktop nav */}
        <nav style={{ display: 'flex', gap: 32 }} className="desktop-nav">
          {navItems.map(item => (
            <button key={item.id} onClick={() => setPage(item.id)}
              style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
                color: page === item.id ? t.accent2 : t.navFg,
                fontFamily: "'Noto Sans JP', sans-serif", fontSize: 13, letterSpacing: '0.08em',
                borderBottom: page === item.id ? `2px solid ${t.accent2}` : '2px solid transparent',
                transition: 'all 0.2s',
              }}>{item.label}</button>
          ))}
        </nav>
        {/* Hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)}
          style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'none', flexDirection: 'column', gap: 5, padding: 4 }}
          className="hamburger">
          {[0,1,2].map(i => <div key={i} style={{ width: 22, height: 2, background: t.navFg }} />)}
        </button>
      </div>
      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ background: t.navBg, borderTop: `1px solid rgba(255,255,255,0.1)`, padding: '8px 0' }}>
          {navItems.map(item => (
            <button key={item.id} onClick={() => { setPage(item.id); setMenuOpen(false); }}
              style={{
                display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none',
                cursor: 'pointer', padding: '12px 24px', color: page === item.id ? t.accent2 : t.navFg,
                fontFamily: "'Noto Sans JP', sans-serif", fontSize: 14,
              }}>{item.label}</button>
          ))}
        </div>
      )}
    </header>
  );
}

function KFooter({ setPage, theme }) {
  const t = theme || { navBg: '#2d1f0e', navFg: '#f5f0e6', accent2: '#c4956a', fg2: '#6b4d2a' };
  return (
    <footer style={{ background: t.navBg, color: t.navFg, padding: '48px 24px 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 40, marginBottom: 40 }}>
          <div>
            <p style={{ color: t.accent2, fontFamily: "'Noto Serif JP', serif", fontSize: 20, fontWeight: 700, marginBottom: 8 }}>康大商会</p>
            <p style={{ opacity: 0.6, fontSize: 12, lineHeight: 2, fontFamily: "'Noto Sans JP', sans-serif" }}>
              薪・炭・七輪のことなら<br />株式会社 康大商会にお任せください。
            </p>
          </div>
          <div>
            <p style={{ color: t.accent2, fontSize: 12, letterSpacing: '0.1em', marginBottom: 12, fontFamily: "'Noto Sans JP', sans-serif" }}>アクセス</p>
            <p style={{ opacity: 0.7, fontSize: 13, lineHeight: 2, fontFamily: "'Noto Sans JP', sans-serif" }}>
              〒577-0001<br />東大阪市徳庵本町7-2-508<br />
              TEL/FAX: 06-6746-2436<br />
              携帯: 090-8168-8057
            </p>
          </div>
          <div>
            <p style={{ color: t.accent2, fontSize: 12, letterSpacing: '0.1em', marginBottom: 12, fontFamily: "'Noto Sans JP', sans-serif" }}>サイトマップ</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[['home','トップ'],['products','商品紹介'],['company','会社案内'],['contact','お問い合わせ']].map(([id,label]) => (
                <button key={id} onClick={() => setPage(id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', opacity: 0.7, textAlign: 'left', fontSize: 13, padding: 0, fontFamily: "'Noto Sans JP', sans-serif" }}>{label}</button>
              ))}
            </div>
          </div>
        </div>
        <div style={{ borderTop: `1px solid rgba(255,255,255,0.1)`, paddingTop: 20, textAlign: 'center', opacity: 0.4, fontSize: 11, fontFamily: "'Noto Sans JP', sans-serif" }}>
          Copyright © 2025 株式会社 康大商会 All rights reserved.
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ImgPlaceholder, SectionTitle, KHeader, KFooter });