// 술깨산 제품 소개 페이지 — 전용 컴포넌트
// window.Header, Hero, Button, Chip, Badge, SectionHead, PrincipleTriad,
// IngredientCard, PharmacistCard, Footer 는 Components.jsx 에서 로드됨

// ─────────────────────────────────────────────────────────────────
// 제품 팩샷 (SVG 일러스트 — 술깨산 스틱 파우치)
// ─────────────────────────────────────────────────────────────────
function ProductPack({ scale = 1 }) {
  return (
    <svg viewBox="0 0 320 420" width={320 * scale} height={420 * scale} xmlns="http://www.w3.org/2000/svg" style={{display:'block'}}>
      <defs>
        <linearGradient id="pack-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#0E3B6E" />
          <stop offset="0.55" stopColor="#124E92" />
          <stop offset="1" stopColor="#1D6FC4" />
        </linearGradient>
        <linearGradient id="pack-highlight" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="rgba(255,255,255,0)" />
          <stop offset="0.5" stopColor="rgba(255,255,255,0.14)" />
          <stop offset="1" stopColor="rgba(255,255,255,0)" />
        </linearGradient>
        <radialGradient id="amber-glow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#EAB84A" stopOpacity="0.85" />
          <stop offset="1" stopColor="#EAB84A" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* Shadow */}
      <ellipse cx="160" cy="400" rx="110" ry="10" fill="rgba(14,59,110,0.22)" />
      {/* Pouch body */}
      <g>
        <path d="M60 40 L260 40 L260 380 L60 380 Z" fill="url(#pack-bg)" />
        {/* Serrated top edge */}
        <path d="M60 40 L70 32 L80 40 L90 32 L100 40 L110 32 L120 40 L130 32 L140 40 L150 32 L160 40 L170 32 L180 40 L190 32 L200 40 L210 32 L220 40 L230 32 L240 40 L250 32 L260 40 Z" fill="url(#pack-bg)" />
        {/* Highlight */}
        <rect x="60" y="40" width="200" height="340" fill="url(#pack-highlight)" />
        {/* Amber glow */}
        <circle cx="160" cy="240" r="90" fill="url(#amber-glow)" />
      </g>
      {/* Brand text */}
      <g fontFamily="'Noto Sans KR', sans-serif" fill="#fff" textAnchor="middle">
        <text x="160" y="90" fontSize="11" fontWeight="700" letterSpacing="4" fill="#EAB84A">SULGAESAN</text>
        <text x="160" y="140" fontSize="52" fontWeight="900" letterSpacing="-2">술깨산</text>
        <text x="160" y="170" fontSize="14" fontWeight="500" fill="rgba(255,255,255,0.75)">숙취해소 · 간 · 위 케어</text>
      </g>
      {/* Center hanja emblem */}
      <g transform="translate(160 240)">
        <circle r="52" fill="rgba(255,255,255,0.08)" stroke="rgba(234,184,74,0.5)" strokeWidth="1" />
        <text textAnchor="middle" dominantBaseline="central" fontFamily="'Nanum Myeongjo', serif" fontSize="38" fontWeight="800" fill="#EAB84A">解</text>
      </g>
      {/* Principle icons row */}
      <g transform="translate(160 320)" textAnchor="middle" fontFamily="'Nanum Myeongjo', serif" fill="#EAB84A" fontSize="13" fontWeight="700" letterSpacing="2">
        <text x="-56" y="0">淸熱</text>
        <text x="0" y="0">利水</text>
        <text x="56" y="0">安胃</text>
      </g>
      <g transform="translate(160 348)" textAnchor="middle" fill="rgba(255,255,255,0.7)" fontFamily="'Noto Sans KR', sans-serif" fontSize="10" fontWeight="500">
        <text x="-56" y="0">청열</text>
        <text x="0" y="0">이수</text>
        <text x="56" y="0">안위</text>
      </g>
      {/* Volume */}
      <text x="160" y="372" textAnchor="middle" fontFamily="'Noto Sans KR', sans-serif" fontSize="10" fill="rgba(255,255,255,0.55)" letterSpacing="1">3g × 10포 · 과립</text>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────
// StepCard — 사용법 3단계
// ─────────────────────────────────────────────────────────────────
function StepCard({ step, title, desc, timing }) {
  return (
    <article style={{
      background: '#fff', border: '1px solid var(--line-neutral)', borderRadius: 20,
      padding: 24, position: 'relative', overflow: 'hidden',
      boxShadow: '0 10px 24px rgba(14,59,110,.06)',
    }}>
      <div style={{
        position: 'absolute', top: 16, right: 16,
        fontFamily: 'var(--font-serif)', fontSize: 68, fontWeight: 800,
        color: 'var(--sulgaesan-cyan-soft)', lineHeight: 1,
      }}>{step}</div>
      <div style={{
        display: 'inline-block', padding: '4px 10px', borderRadius: 999,
        background: 'var(--sulgaesan-amber)', color: 'var(--sulgaesan-navy)',
        fontSize: 11, fontWeight: 900, letterSpacing: '.06em',
        marginBottom: 14,
      }}>{timing}</div>
      <h4 style={{margin:'0 0 8px', fontSize: 18, fontWeight: 900, color:'var(--sulgaesan-navy)', letterSpacing:'-0.03em'}}>{title}</h4>
      <p style={{margin:0, fontSize: 14, lineHeight: 1.65, color:'var(--muted-2)'}}>{desc}</p>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────
// ComparisonRow — 기존 숙취해소제 vs 술깨산
// ─────────────────────────────────────────────────────────────────
function ComparisonTable({ rows }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--line-neutral)', borderRadius: 22,
      overflow: 'hidden', boxShadow: '0 12px 32px rgba(14,59,110,.08)',
    }}>
      {/* Head */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
        background: 'var(--sulgaesan-cream)', borderBottom: '1px solid var(--line-neutral)',
        padding: '18px 24px', fontSize: 13, fontWeight: 900, letterSpacing:'-0.02em',
      }}>
        <div style={{color:'var(--muted)'}}>비교 항목</div>
        <div style={{color:'var(--muted)', textAlign:'center'}}>일반 숙취해소제</div>
        <div style={{
          textAlign:'center', color:'var(--sulgaesan-navy)',
          display:'flex', alignItems:'center', justifyContent:'center', gap:6,
        }}>
          <img src="assets/sulgaesan-mark.svg" width="20" height="20" alt="" /> 술깨산
        </div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
          borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line-neutral)',
          padding: '18px 24px', fontSize: 14, alignItems: 'center',
        }}>
          <div style={{fontWeight:800, color:'var(--sulgaesan-navy)', letterSpacing:'-0.02em'}}>{r.label}</div>
          <div style={{textAlign:'center', color:'var(--muted-2)'}}>{r.plain}</div>
          <div style={{
            textAlign:'center', color:'var(--sulgaesan-navy)', fontWeight:800,
            display:'flex', alignItems:'center', justifyContent:'center', gap:6,
          }}>
            <span style={{
              width:20, height:20, borderRadius:999, background:'var(--sulgaesan-amber)',
              color:'var(--sulgaesan-navy)', display:'grid', placeItems:'center',
              fontSize:11, fontWeight:900,
            }}>✓</span>
            {r.sulgaesan}
          </div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// TimelineOfDay — 어제 밤 / 오늘 아침 시나리오
// ─────────────────────────────────────────────────────────────────
function DayTimeline() {
  const points = [
    { time: '22:00', label: '술자리 시작', desc: '오늘도 피할 수 없는 회식', side: 'left' },
    { time: '01:00', label: '취침 직전', desc: '술깨산 1포 물과 함께', side: 'right', highlight: true },
    { time: '07:00', label: '기상 후 컨디션', desc: '두통·구토감·갈증 최소화', side: 'left' },
    { time: '08:30', label: '해장 대신 술깨산 1포', desc: '위장 안정 · 상쾌한 오전', side: 'right', highlight: true },
  ];
  return (
    <div style={{position:'relative', padding:'20px 0'}}>
      <div style={{
        position:'absolute', left:'50%', top:0, bottom:0, width:2,
        background:'linear-gradient(180deg, var(--sulgaesan-cyan-soft), var(--sulgaesan-amber), var(--sulgaesan-cyan-soft))',
        transform:'translateX(-50%)',
      }} className="tl-line" />
      {points.map((p, i) => (
        <div key={i} style={{
          display:'grid', gridTemplateColumns:'1fr 60px 1fr',
          alignItems:'center', marginBottom: i === points.length - 1 ? 0 : 28,
          gap: 12,
        }} className="tl-row">
          <div style={{
            textAlign: p.side === 'left' ? 'right' : 'left',
            gridColumn: p.side === 'left' ? '1 / 2' : '3 / 4',
          }}>
            <div style={{
              display:'inline-block', textAlign:'left',
              background: p.highlight ? 'var(--sulgaesan-navy)' : '#fff',
              color: p.highlight ? '#fff' : 'var(--sulgaesan-navy)',
              border: p.highlight ? 'none' : '1px solid var(--line-neutral)',
              padding:'14px 18px', borderRadius: 16,
              boxShadow: p.highlight ? '0 12px 24px rgba(14,59,110,.22)' : '0 6px 16px rgba(14,59,110,.06)',
              maxWidth: 260,
            }}>
              <div style={{
                fontSize:11, fontWeight:900, letterSpacing:'.1em',
                color: p.highlight ? 'var(--sulgaesan-amber)' : 'var(--sulgaesan-blue)',
                marginBottom: 4,
              }}>{p.time}</div>
              <div style={{fontSize:15, fontWeight:800, letterSpacing:'-0.02em', marginBottom:2}}>{p.label}</div>
              <div style={{fontSize:13, opacity: p.highlight ? .82 : 1, color: p.highlight ? 'rgba(255,255,255,.85)' : 'var(--muted-2)'}}>{p.desc}</div>
            </div>
          </div>
          <div style={{gridColumn:'2 / 3', display:'grid', placeItems:'center'}}>
            <div style={{
              width: p.highlight ? 20 : 14, height: p.highlight ? 20 : 14,
              borderRadius:999,
              background: p.highlight ? 'var(--sulgaesan-amber)' : '#fff',
              border: p.highlight ? '4px solid var(--sulgaesan-navy)' : '3px solid var(--sulgaesan-cyan)',
              boxShadow: p.highlight ? '0 0 0 6px rgba(234,184,74,.25)' : 'none',
            }} />
          </div>
        </div>
      ))}
      <style>{`
        @media (max-width:820px){
          .tl-line{left:20px !important; transform:none !important}
          .tl-row{grid-template-columns:40px 1fr !important}
          .tl-row > div:first-child, .tl-row > div:last-child{
            grid-column:2 / 3 !important; text-align:left !important;
          }
          .tl-row > div:nth-child(2){grid-column:1 / 2 !important}
        }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// FaqItem — 아코디언
// ─────────────────────────────────────────────────────────────────
function FaqItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{
      background:'#fff', border:'1px solid var(--line-neutral)',
      borderRadius: 16, overflow:'hidden',
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width:'100%', textAlign:'left', padding:'18px 22px', background:'transparent',
        border:'none', cursor:'pointer', display:'flex', alignItems:'center', gap:14,
        fontFamily:'inherit',
      }}>
        <span style={{
          width:28, height:28, borderRadius:999, background:'var(--sulgaesan-cyan-soft)',
          color:'var(--sulgaesan-navy)', display:'grid', placeItems:'center',
          fontFamily:'var(--font-serif)', fontSize:14, fontWeight:800, flexShrink:0,
        }}>Q</span>
        <span style={{flex:1, fontSize:15, fontWeight:800, letterSpacing:'-0.02em', color:'var(--sulgaesan-navy)'}}>{q}</span>
        <span style={{
          width:24, height:24, borderRadius:999, background:'#F1F5F9',
          display:'grid', placeItems:'center', color:'var(--sulgaesan-navy)',
          transform: open ? 'rotate(180deg)' : 'none', transition:'transform .2s',
          flexShrink:0,
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </span>
      </button>
      {open && (
        <div style={{
          padding:'0 22px 20px 64px', fontSize:14, lineHeight:1.7, color:'var(--muted-2)',
        }}>{a}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  ProductPack, StepCard, ComparisonTable, DayTimeline, FaqItem,
});
