const Process = () => {
  const steps = [
  { n: '01', day: 'DAY 0', title: '送出申請', body: '填表、領取試飲組。\n不綁約、不收錢，單純讓你和會員先試試看。' },
  { n: '02', day: 'DAY 1–3', title: '專員聯繫', body: 'WEDAR 合作專員主動聯繫，了解你的場館屬性，推薦最適合的方案。' },
  { n: '03', day: 'DAY 4–7', title: '產品到位', body: '試飲組、QR Code、立牌海報陸續寄達。教練培訓資料同步發送。' },
  { n: '04', day: 'DAY 8+', title: '正式上線', body: '會員開始嚐鮮、銷售開始。WEDAR 持續提供行銷與資源。' }];


  return (
    <section id="process" className="relative bg-wedar-primary text-wedar-bone py-24 lg:py-32 grain">
      <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-6 reveal">
            <SectionLabel tone="light">合作流程</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,5.6vw,88px)] leading-[0.92] tracking-hyper" style={{ lineHeight: "1" }}>
              從申請到上線，<br />最快 <span className="text-wedar-lime">7 天</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">每一步我們都跟著你走，確保上線那天，你的櫃檯或 QR Code 已經準備好。

            </p>
          </div>
        </div>

        {/* timeline */}
        <div className="relative reveal">
          <div className="hidden lg:block absolute top-[60px] left-0 right-0 h-px bg-white/15" />
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-5">
            {steps.map((s, i) =>
            <div key={i} className="relative">
                <div className="hidden lg:flex absolute -top-1 left-0 h-3 w-3 rounded-full bg-wedar-lime ring-4 ring-wedar-primary" />
                <div className="pt-20 lg:pt-20">
                  <div className="text-[11px] font-bold tracking-[0.3em] uppercase text-wedar-lime">{s.day}</div>
                  <div className="font-black-display text-6xl mt-3 tracking-ultra">{s.n}</div>
                  <h3 className="mt-4 font-black text-xl">{s.title}</h3>
                  <p className="mt-3 text-[14px] leading-[1.8] text-wedar-bone/65 whitespace-pre-line">{s.body}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Process });