// 미소산 약국 UI Kit — 공용 컴포넌트
// 사용 전 colors_and_type.css 를 <link> 로 로드
// React + Babel inline JSX 전제

const { useState } = React;

// ─────────────────────────────────────────────────────────────────
// Header — sticky · backdrop-blur · 로고 + 앵커 네비 + CTA + 모바일 토글
// goun_skin.html site-header 동작과 동일:
//   · 브랜드 → 홈(index.html)
//   · 섹션 앵커 스크롤
//   · 모바일 햄버거 / is-open 패널
//   · CTA 버튼 (nav 안)
// ─────────────────────────────────────────────────────────────────
function Header({
  nav = [
    { label: '소개', href: '#top' },
    { label: '제품', href: '#products' },
    { label: '성분', href: '#ingredients' },
    { label: '상담', href: '#consult' },
  ],
  ctaLabel = '상담 신청',
  ctaHref = '#buy',
  homeHref = 'index.html',
  brandSub = '열(熱) 밸런스 솔루션',
}) {
  const [open, setOpen] = useState(false);

  const items = (nav || []).map((n) => (
    typeof n === 'string' ? { label: n, href: '#' + n } : n
  ));

  const close = () => setOpen(false);

  return (
    <header className="site-header" role="banner" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,.92)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--line-neutral)',
    }}>
      <div className="header-inner" style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: '14px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
      }}>
        <a
          className="brand"
          href={homeHref}
          aria-label="미소산 약국 홈"
          style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0 }}
        >
          <img src="assets/misosan-logo.svg" width="36" height="36" alt="" aria-hidden="true" />
          <span className="brand-text" style={{ lineHeight: 1.2, whiteSpace: 'nowrap' }}>
            <strong style={{ display: 'block', fontSize: 16, letterSpacing: '-0.02em', color: 'var(--accent-ink, var(--misosan-blue-navy))', fontWeight: 800 }}>미소산 약국</strong>
            <small style={{ display: 'block', fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{brandSub}</small>
          </span>
        </a>

        <button
          type="button"
          className="nav-toggle"
          aria-label={open ? '모바일 메뉴 닫기' : '모바일 메뉴 열기'}
          aria-expanded={open}
          aria-controls="primaryNav"
          onClick={() => setOpen((v) => !v)}
          style={{
            display: 'none',
            border: '1px solid var(--line-neutral)',
            background: '#fff',
            borderRadius: 14,
            padding: 10,
            boxShadow: '0 6px 16px rgba(0,0,0,.06)',
            cursor: 'pointer',
          }}
        >
          <span style={{ display: 'block', width: 20, height: 2, background: 'var(--accent-ink, var(--sulgaesan-navy))', margin: '4px 0', borderRadius: 2 }} />
          <span style={{ display: 'block', width: 20, height: 2, background: 'var(--accent-ink, var(--sulgaesan-navy))', margin: '4px 0', borderRadius: 2 }} />
          <span style={{ display: 'block', width: 20, height: 2, background: 'var(--accent-ink, var(--sulgaesan-navy))', margin: '4px 0', borderRadius: 2 }} />
        </button>

        <nav
          id="primaryNav"
          className={'site-nav' + (open ? ' is-open' : '')}
          aria-label="주요 메뉴"
          style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}
        >
          {items.map((item) => (
            <a
              key={item.href + item.label}
              href={item.href}
              onClick={close}
              style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 500, textDecoration: 'none', whiteSpace: 'nowrap' }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--accent-ink, var(--sulgaesan-navy))'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted)'; }}
            >
              {item.label}
            </a>
          ))}
          <a
            href={ctaHref}
            className="btn btn-primary"
            onClick={close}
            style={{ minHeight: 38, padding: '8px 16px', fontSize: 13, whiteSpace: 'nowrap' }}
          >
            {ctaLabel}
          </a>
        </nav>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .site-header .nav-toggle { display: inline-block !important; }
          .site-header .site-nav {
            position: fixed;
            left: 16px; right: 16px; top: 68px;
            background: rgba(255,255,255,.96);
            border: 1px solid var(--line-neutral);
            border-radius: 18px;
            padding: 12px;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 4px !important;
            box-shadow: 0 18px 40px rgba(14,59,110,.14);
            display: none !important;
            z-index: 60;
          }
          .site-header .site-nav.is-open { display: flex !important; }
          .site-header .site-nav a {
            padding: 10px 12px;
            border-radius: 14px;
            white-space: normal !important;
          }
          .site-header .site-nav a:hover { background: var(--accent-soft, #EFF6FB); }
          .site-header .site-nav .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
        }
      `}</style>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────
// Button — pill · 44px min-height · theme-aware
// ─────────────────────────────────────────────────────────────────
function Button({ children, variant = 'primary', size = 'md', href, onClick, style }) {
  const cls = `btn btn-${variant}`;
  const sizeStyle = size === 'sm'
    ? { minHeight: 38, padding: '8px 16px', fontSize: 13 }
    : {};
  const combined = { ...sizeStyle, ...(style || {}) };
  if (href) return <a href={href} className={cls} style={combined}>{children}</a>;
  return <button className={cls} onClick={onClick} style={combined}>{children}</button>;
}

// ─────────────────────────────────────────────────────────────────
// Chip · Badge
// ─────────────────────────────────────────────────────────────────
function Chip({ children }) {
  return <span className="chip">{children}</span>;
}
function Badge({ children, variant = 'solid' }) {
  const style = variant === 'outline'
    ? { background: 'transparent', border: '1px solid var(--accent-ink, var(--misosan-blue-navy))', color: 'var(--accent-ink, var(--misosan-blue-navy))' }
    : {};
  return <span className="badge" style={style}>{children}</span>;
}

// ─────────────────────────────────────────────────────────────────
// SectionHead — eyebrow + h2 + lead
// ─────────────────────────────────────────────────────────────────
function SectionHead({ eyebrow, title, lead, align = 'left' }) {
  return (
    <header style={{ marginBottom: 24, textAlign: align }}>
      {eyebrow && <p className="eyebrow" style={{ marginBottom: 10, color: 'var(--accent-ink, var(--misosan-blue))' }}>{eyebrow}</p>}
      <h2 className="h2" style={{ color: 'var(--accent-ink, var(--misosan-blue-navy))' }}>{title}</h2>
      {lead && <p className="lead" style={{ maxWidth: 640, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>{lead}</p>}
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────
// Hero — 좌 카피 + 우 미디어
// ─────────────────────────────────────────────────────────────────
function Hero({ eyebrow, title, subtitle, description, chips = [], cta, media, trust = [], accentColor = 'var(--accent-ink)' }) {
  return (
    <section id="top" style={{
      padding: '68px 20px 56px',
      background: 'linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%)',
    }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,.95fr)',
        gap: 34, alignItems: 'center',
      }} className="hero-grid">
        <div>
          {eyebrow && <p className="eyebrow" style={{ marginBottom: 10, color: accentColor }}>{eyebrow}</p>}
          <h1 className="h1" style={{ color: accentColor, marginBottom: 12 }}>
            {title}
            {subtitle && <span style={{ display: 'block', fontSize: 16, fontWeight: 500, color: 'var(--muted)', marginTop: 10, letterSpacing: '-0.02em' }}>{subtitle}</span>}
          </h1>
          {description && <p className="lead" dangerouslySetInnerHTML={{ __html: description }} />}
          {chips.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, margin: '14px 0' }}>
              {chips.map((c, i) => <Chip key={i}>{c}</Chip>)}
            </div>
          )}
          {cta && (
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 14 }}>
              {cta}
            </div>
          )}
          {trust.length > 0 && (
            <div style={{ display: 'flex', gap: 14, marginTop: 20, flexWrap: 'wrap' }}>
              {trust.map((t, i) => (
                <div key={i} style={{ background: 'rgba(255,255,255,.7)', border: '1px solid var(--line-neutral)', borderRadius: 16, padding: '10px 14px', minWidth: 130 }}>
                  <strong style={{ display: 'block', fontSize: 18, color: accentColor }}>{t.value}</strong>
                  <span style={{ fontSize: 12, color: 'var(--muted)' }}>{t.label}</span>
                </div>
              ))}
            </div>
          )}
        </div>
        <div>{media}</div>
      </div>
      <style>{`@media (max-width:820px){.hero-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// ProductCard — 3개 라인 소개
// ─────────────────────────────────────────────────────────────────
function ProductCard({ mark, name, category, description, features = [], accent, accentSoft, ink, href = '#' }) {
  return (
    <article style={{
      background: '#fff',
      border: '1px solid var(--line-neutral)',
      borderRadius: 22,
      padding: 24,
      boxShadow: '0 10px 26px rgba(24,50,34,.06)',
      display: 'flex', flexDirection: 'column', gap: 14,
      transition: 'transform .18s ease',
    }}
      onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {mark && <img src={mark} width="52" height="52" alt="" />}
        <div>
          <div style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase' }}>{category}</div>
          <div style={{ fontSize: 22, fontWeight: 900, color: ink, letterSpacing: '-0.03em' }}>{name}</div>
        </div>
      </div>
      <p style={{ margin: 0, color: 'var(--text-2)', fontSize: 15, lineHeight: 1.6 }}>{description}</p>
      {features.length > 0 && (
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
          {features.map((f, i) => (
            <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--text-2)' }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', background: accentSoft, color: accent, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 12, fontWeight: 900, marginTop: 1 }}>✓</span>
              <span>{f}</span>
            </li>
          ))}
        </ul>
      )}
      <a href={href} style={{
        marginTop: 'auto',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        background: accent, color: '#fff',
        padding: '12px 18px', borderRadius: 999,
        fontWeight: 800, fontSize: 14, letterSpacing: '-0.02em',
        boxShadow: `0 12px 24px ${accent}33`,
      }}>
        자세히 보기 →
      </a>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────
// PrincipleTriad — 술깨산 청열·이수·안위
// ─────────────────────────────────────────────────────────────────
function PrincipleTriad({ items }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="triad-grid">
      {items.map((it, i) => (
        <article key={i} style={{
          background: '#fff', border: '1px solid var(--line-neutral)', borderRadius: 20,
          padding: 24, textAlign: 'center',
          boxShadow: '0 8px 22px rgba(14,59,110,.08)',
        }}>
          <div style={{
            width: 72, height: 72, borderRadius: 20,
            background: 'var(--sulgaesan-cyan-soft)',
            color: 'var(--sulgaesan-navy)',
            display: 'grid', placeItems: 'center',
            margin: '0 auto 12px',
            fontSize: 36,
          }}>
            {it.emoji}
          </div>
          <h3 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 900, letterSpacing: '-0.03em', color: 'var(--sulgaesan-navy)' }}>
            {it.title}
            {it.hanja && <span className="hanja" style={{ color: 'var(--sulgaesan-amber-dk)', marginLeft: 6, fontSize: 18 }}>({it.hanja})</span>}
          </h3>
          <div style={{ fontSize: 13, color: 'var(--sulgaesan-navy-2)', fontWeight: 700, marginBottom: 8, letterSpacing: '-0.02em' }}>{it.tagline}</div>
          <p style={{ margin: 0, color: 'var(--muted-2)', fontSize: 14, lineHeight: 1.6 }}>{it.description}</p>
        </article>
      ))}
      <style>{`@media (max-width:820px){.triad-grid{grid-template-columns:1fr!important}}`}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// IngredientCard — 한약재 성분
// ─────────────────────────────────────────────────────────────────
function IngredientCard({ name, hanja, tagline, points = [], accent = 'var(--sulgaesan-navy)', accentSoft = 'var(--sulgaesan-cyan-soft)' }) {
  return (
    <article style={{
      background: '#fff', border: '1px solid var(--line-neutral)', borderRadius: 18,
      padding: 20, boxShadow: '0 8px 20px rgba(14,59,110,.06)',
      display: 'flex', gap: 16, alignItems: 'flex-start',
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 16, background: accentSoft, color: accent,
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <img src="assets/icon-herb-leaf.svg" width="32" height="32" alt="" style={{ opacity: .85 }} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <h4 style={{ margin: '0 0 4px', fontSize: 18, fontWeight: 900, letterSpacing: '-0.03em', color: accent }}>
          {name}
          {hanja && <span className="hanja" style={{ color: 'var(--sulgaesan-amber-dk)', marginLeft: 8, fontSize: 15, fontWeight: 700 }}>({hanja})</span>}
        </h4>
        {tagline && <div style={{ fontSize: 13, color: 'var(--muted-2)', fontWeight: 600, marginBottom: 8 }}>{tagline}</div>}
        <ul style={{ margin: 0, padding: '0 0 0 16px', color: 'var(--text-2)' }}>
          {points.map((p, i) => (
            <li key={i} style={{ fontSize: 13.5, lineHeight: 1.6, marginBottom: 2 }}>{p}</li>
          ))}
        </ul>
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────
// PharmacistCard — 대표자 소개
// ─────────────────────────────────────────────────────────────────
function PharmacistCard({ name, role, quote, description, accent = 'var(--sulgaesan-navy)' }) {
  return (
    <article style={{
      background: '#fff', border: '1px solid var(--line-neutral)', borderRadius: 22,
      padding: 28, boxShadow: '0 12px 30px rgba(14,59,110,.08)',
      maxWidth: 520,
    }}>
      <div style={{ textAlign: 'center', marginBottom: 18 }}>
        <div style={{ width: 84, height: 84, borderRadius: '50%', background: 'var(--sulgaesan-cyan-soft)', color: accent, display: 'grid', placeItems: 'center', margin: '0 auto 12px', fontSize: 36 }}>
          👨‍⚕️
        </div>
        <h4 style={{ margin: 0, fontSize: 20, fontWeight: 900, color: accent, letterSpacing: '-0.02em' }}>{name}</h4>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>{role}</div>
      </div>
      {quote && (
        <div style={{
          fontStyle: 'italic', color: 'var(--text-2)',
          borderLeft: `3px solid ${accent}`, paddingLeft: 14,
          margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.65,
        }}>
          "{quote}"
        </div>
      )}
      {description && <p style={{ margin: 0, color: 'var(--muted-2)', fontSize: 14, lineHeight: 1.65 }}>{description}</p>}
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────
// Footer — 다크 그린 · 3-col
// ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: '#16331F', color: 'rgba(255,255,255,.86)', marginTop: 60 }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: '44px 20px 28px',
        display: 'grid', gap: 28,
        gridTemplateColumns: '1.5fr 1fr 1fr',
      }} className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <img src="assets/misosan-logo.svg" width="32" height="32" alt="" style={{ filter: 'brightness(0) invert(1)' }} />
            <strong style={{ fontSize: 18, letterSpacing: '-0.02em', color: '#fff', whiteSpace: 'nowrap' }}>미소산 약국</strong>
          </div>
          <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,.66)', lineHeight: 1.7 }}>
            서울 강남구 테헤란로 503 하이브로빌딩 2층 203호<br />
            02-508-0918 · www.misosan.co.kr<br />
            천연물 조합으로 열(熱) 다스리는 상담 전문 약국
          </p>
        </div>
        <div>
          <h4 style={{ margin: '0 0 12px', fontSize: 13, color: '#fff', letterSpacing: '.04em', fontWeight: 800 }}>제품 라인</h4>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>미소산 · 두피열 케어</a></li>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>고운산 · 피부 · 여드름</a></li>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>술깨산 · 숙취해소</a></li>
          </ul>
        </div>
        <div>
          <h4 style={{ margin: '0 0 12px', fontSize: 13, color: '#fff', letterSpacing: '.04em', fontWeight: 800 }}>상담 · 문의</h4>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>맞춤 상담 신청</a></li>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>설문지 작성 (94문항)</a></li>
            <li><a href="#" style={{ color: 'rgba(255,255,255,.72)', fontSize: 14 }}>네이버 예약</a></li>
          </ul>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,.12)', padding: '14px 20px', fontSize: 12, color: 'rgba(255,255,255,.55)', textAlign: 'center' }}>
        © 2025 미소산 약국 · Misosan Pharmacy. 대표 김준혁 약사.
      </div>
      <style>{`@media (max-width:820px){.footer-grid{grid-template-columns:1fr!important}}`}</style>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────
// Export to window (필수 — 다른 <script> 에서 접근 가능하게)
// ─────────────────────────────────────────────────────────────────
Object.assign(window, {
  Header, Footer, Hero, Chip, Badge, Button,
  SectionHead, ProductCard, PrincipleTriad, IngredientCard, PharmacistCard,
});