/* global React, Icon, TRIP_DATA */

// ─── Header ───────────────────────────────────
function Header({ tab, onTab }) {
  const tabs = [
    { id: 'trip', label: '行程' },
    { id: 'guide', label: '指南' },
    { id: 'weather', label: '天氣' },
  ];
  const idx = tabs.findIndex(t => t.id === tab);
  return (
    <>
      <div className="hdr">
        <div className="hdr-top">
          <div className="hdr-brand">
            <div className="brand-stamp">濟</div>
            <div>
              <div className="brand-text-sub">JEJU · 제주도</div>
              <div className="brand-text-main">5박 4일</div>
            </div>
          </div>
          <div className="hdr-profile">Y</div>
        </div>
        <div className="hdr-title">
          <span className="accent">濟州島</span> 自由行
        </div>
        <div className="hdr-meta">
          <span className="hdr-date">{TRIP_DATA.dateRange}</span>
          <span className="dot"/>
          <span>5 天 4 夜</span>
          <span className="dot"/>
          <span>2 人</span>
        </div>
      </div>
    </>
  );
}

// ─── Background decorations ─────────────────
function BgDeco() {
  return (
    <div className="bg-deco">
      <svg className="cloud" style={{ top: 20, right: -20, width: 140 }} viewBox="0 0 120 60">
        <path d="M20 45 Q0 45 5 28 Q5 15 20 18 Q25 5 45 10 Q60 0 72 12 Q90 8 95 25 Q115 25 110 45 Z" fill="#4A7FB5"/>
      </svg>
      <svg className="cloud" style={{ top: 130, left: -30, width: 110 }} viewBox="0 0 120 60">
        <path d="M20 45 Q0 45 5 28 Q5 15 20 18 Q25 5 45 10 Q60 0 72 12 Q90 8 95 25 Q115 25 110 45 Z" fill="#F08B3C"/>
      </svg>
    </div>
  );
}

window.Header = Header;
window.BgDeco = BgDeco;