const Support = () => {
  const items = [
  { n: '01', title: '官方認證與導流', body: '頒發「WEDAR 健身營養聯盟」實體標牌，官網地圖標註，把線上流量導進你的場館。', icon: 'cert' },
  { n: '02', title: '視覺陳列支援', body: '產品立牌、海報全數免費。深度合作再贊助牆面品牌視覺輸出，提升場館專業感。', icon: 'visual' },
  { n: '03', title: '專業行銷拍攝', body: '合作規模達標，我們派攝影團隊為你的場館/教練拍專業形象片，並在官方平台曝光。', icon: 'camera' },
  { n: '04', title: '活動與賽事贊助', body: '舉辦「減脂挑戰賽」等活動時，免費試飲包 + 獎項贊助，幫你省成本、拉參與。', icon: 'trophy' },
  { n: '05', title: '專業營養支援', body: '產品專業手冊 + 教練培訓，讓教練給學員的建議有憑有據，課程附加價值直接升級。', icon: 'book' },
  { n: '06', title: '社群聯名曝光', body: '你提供「產品 × 訓練」情境照/短影音，WEDAR 官方平台配合轉貼，互利雙贏。', icon: 'social' }];


  const Icon = ({ name }) => {
    const icons = {
      cert: <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />,
      visual: <><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.8" /><path d="M3 15l5-5 4 4 3-3 6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></>,
      camera: <><rect x="2" y="7" width="20" height="13" rx="2" stroke="currentColor" strokeWidth="1.8" /><circle cx="12" cy="13.5" r="3.5" stroke="currentColor" strokeWidth="1.8" /><path d="M7 7l2-3h6l2 3" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" /></>,
      trophy: <><path d="M7 4h10v4a5 5 0 01-10 0V4z" stroke="currentColor" strokeWidth="1.8" /><path d="M4 5h3v3a3 3 0 01-3-3zM20 5h-3v3a3 3 0 003-3zM12 13v4M8 20h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></>,
      book: <><path d="M4 4h6a3 3 0 013 3v13a2 2 0 00-2-2H4V4zM20 4h-6a3 3 0 00-3 3v13a2 2 0 012-2h7V4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" /></>,
      social: <><circle cx="6" cy="12" r="3" stroke="currentColor" strokeWidth="1.8" /><circle cx="18" cy="6" r="3" stroke="currentColor" strokeWidth="1.8" /><circle cx="18" cy="18" r="3" stroke="currentColor" strokeWidth="1.8" /><path d="M8.5 10.5l7-3M8.5 13.5l7 3" stroke="currentColor" strokeWidth="1.8" /></>
    };
    return <svg width="28" height="28" viewBox="0 0 24 24" fill="none">{icons[name]}</svg>;
  };

  return (
    <section id="support" className="relative bg-ink text-wedar-bone py-24 lg:py-32 grain overflow-hidden">
      <div className="absolute right-4 top-10 font-black-display text-[22vw] leading-none text-white/[0.03] tracking-hyper pointer-events-none select-none">
        ALLY
      </div>
      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 mb-16">
          <div className="lg:col-span-7 reveal">
            <SectionLabel tone="light">優質服務</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,5.6vw,88px)] leading-[0.92] tracking-hyper">
              加入聯盟，<br />
              <span className="text-wedar-lime">我們就是你的隊友</span>。
            </h2>
          </div>
          <div className="lg:col-span-4 lg:col-start-9 flex items-end reveal">
            <p className="text-[15px] leading-[1.9] text-wedar-bone/70">
              我們不只是供應商——六大專屬支援，從導流、視覺、拍攝到培訓，WEDAR 全力當你的行銷與營運後盾。
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5 border border-white/5 rounded-[32px] overflow-hidden reveal">
          {items.map((it, i) =>
          <div key={i} className="group relative bg-ink p-10 hover:bg-wedar-deep transition-colors duration-500 min-h-[300px] flex flex-col">
              <div className="flex items-start justify-between mb-8">
                <div className="h-14 w-14 rounded-xl bg-white/5 group-hover:bg-wedar-lime text-wedar-bone group-hover:text-wedar-primary flex items-center justify-center transition-colors duration-500">
                  <Icon name={it.icon} />
                </div>
                <span className="font-black-display text-5xl text-white/10 group-hover:text-wedar-lime/40 tracking-ultra transition-colors">{it.n}</span>
              </div>
              <h3 className="text-xl font-black mb-3 group-hover:text-wedar-lime transition-colors">{it.title}</h3>
              <p className="text-[14px] leading-[1.8] text-wedar-bone/60">{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);};

Object.assign(window, { Support });