const Apply = () => {
  const [showNotice, setShowNotice] = React.useState(false);
  const FORM_URL = 'https://forms.monday.com/forms/fdb696ae81b23a85351b16e8bb417f40?r=use1';

  React.useEffect(() => {
    if (!showNotice) return;
    const onKey = (e) => {if (e.key === 'Escape') setShowNotice(false);};
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [showNotice]);

  return (
    <section id="apply" className="relative bg-ink text-wedar-bone py-24 lg:py-32 grain overflow-hidden">
      <div className="absolute -left-8 top-10 font-black-display text-[22vw] leading-none text-white/[0.03] tracking-hyper pointer-events-none select-none">
        JOIN
      </div>
      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-12">
          {/* Left pitch */}
          <div className="lg:col-span-5 reveal">
            <SectionLabel tone="light">申請合作</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,5vw,76px)] leading-[0.92] tracking-hyper" style={{ lineHeight: "1" }}>
              填完這張表，<br />
              <span className="text-wedar-lime">展開合作。</span>
            </h2>
            <p className="mt-8 text-[16px] leading-[1.9] text-wedar-bone/70 max-w-md">
              免費領取 18 入蛋白飲試飲組，專員 1–2 個工作天內主動聯繫。
              不滿意？不用理我們，試飲組是你的。
            </p>
            <ul className="mt-10 space-y-4">
              {['免費試飲組 · 18 包入', '低門檻 · 彈性合作', '專員 1–2 天內聯繫', '不綁約'].map((t) =>
              <li key={t} className="flex items-center gap-3 text-[15px] text-wedar-bone/85">
                  <span className="h-6 w-6 rounded-full bg-wedar-lime text-wedar-primary flex items-center justify-center shrink-0">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-11" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  {t}
                </li>
              )}
            </ul>

            <button
              type="button"
              onClick={() => setShowNotice(true)}
              className="mt-8 inline-flex items-center gap-2 text-[13px] font-bold text-wedar-lime hover:text-white transition-colors group">
              
              <span className="flex h-6 w-6 items-center justify-center rounded-full border border-wedar-lime/60 group-hover:bg-wedar-lime group-hover:text-wedar-primary transition-colors">!</span>
              申請前請詳閱注意事項
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="opacity-60"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
          </div>

          {/* Right: external form CTA card */}
          <div className="lg:col-span-7 reveal">
            <div className="relative bg-wedar-bone text-wedar-primary rounded-[32px] p-10 md:p-14 overflow-hidden">
              {/* background mark */}
              <div className="absolute -right-10 -bottom-16 font-black-display text-[18vw] lg:text-[160px] leading-none text-wedar-primary/[0.05] tracking-hyper pointer-events-none select-none">
                APPLY
              </div>

              <div className="relative">
                <div className="text-[11px] tracking-[0.3em] uppercase font-bold text-wedar-green">Online Application</div>
                <h3 className="mt-4 text-[30px] md:text-[40px] font-black leading-[1.15] tracking-tight">
                  立即填寫合作申請表
                </h3>
                <p className="mt-5 text-[15.5px] leading-[1.85] text-wedar-primary/70 max-w-lg">
                  請點擊下方按鈕開始申請。<br />送出後合作專員將於 <strong className="text-wedar-primary">1–2 個工作天</strong>主動聯繫您。
                </p>

                {/* steps */}
                <div className="mt-8 grid sm:grid-cols-3 gap-3">
                  {[
                  { n: '01', t: '閱讀注意事項', d: '確認合作對象資格' },
                  { n: '02', t: '線上填寫表單', d: '約 2 分鐘完成' },
                  { n: '03', t: '等專員聯繫', d: '1–2 個工作天內' }].
                  map((s) =>
                  <div key={s.n} className="rounded-2xl bg-white px-4 py-4 border border-wedar-primary/10">
                      <div className="font-black-display text-[20px] tracking-ultra text-wedar-green">{s.n}</div>
                      <div className="mt-1 font-bold text-[14px]">{s.t}</div>
                      <div className="text-[12px] text-wedar-primary/55 mt-0.5">{s.d}</div>
                    </div>
                  )}
                </div>

                {/* CTA */}
                <a
                  href={FORM_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group mt-10 inline-flex items-center justify-center gap-4 w-full rounded-full bg-wedar-primary px-6 py-5 text-wedar-bone font-bold text-[16px] tracking-wide hover:bg-wedar-deep transition-colors">
                  
                  <span>前往填寫合作申請表</span>
                  <span className="flex h-9 w-9 items-center justify-center rounded-full bg-wedar-lime text-wedar-primary">
                    <svg className="btn-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M7 17L17 7M17 7H9M17 7v8" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </a>

                <p className="text-[11.5px] text-wedar-primary/50 text-center mt-4">
                  送出即表示同意 WEDAR 依
                  <a href="https://www.wedar.shop/MyAccount/Privacy/1093" target="_blank" rel="noopener noreferrer" className="underline hover:text-wedar-primary transition-colors mx-1">隱私權政策</a>
                  聯繫你。我們不會把你的資料轉給第三方。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Notice modal */}
      {showNotice &&
      <div
        className="fixed inset-0 z-[100] flex items-center justify-center px-5 py-8"
        onClick={() => setShowNotice(false)}
        role="dialog"
        aria-modal="true">
        
          <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
          <div
          onClick={(e) => e.stopPropagation()}
          className="relative w-full max-w-xl bg-wedar-bone text-wedar-primary rounded-3xl shadow-2xl overflow-hidden max-h-[88vh] flex flex-col">
          
            <div className="px-7 pt-7 pb-4 flex items-start justify-between border-b border-wedar-primary/10">
              <div>
                <div className="text-[11px] tracking-[0.3em] uppercase font-bold text-wedar-green">IMPORTANT NOTICE</div>
                <h3 className="mt-2 text-2xl font-black tracking-tight">注意事項</h3>
              </div>
              <button
              type="button"
              onClick={() => setShowNotice(false)}
              aria-label="關閉"
              className="shrink-0 h-9 w-9 rounded-full bg-wedar-primary/5 hover:bg-wedar-primary hover:text-wedar-lime flex items-center justify-center transition-colors">
              
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg>
              </button>
            </div>

            <div className="px-7 py-6 overflow-y-auto">
              <ol className="space-y-5">
                {[
              '本合作計畫試飲包僅針對「獨立健身房」、「小型連鎖健身工作室」、「瑜珈／皮拉提斯教室」。',
              '中大型連鎖型（5 家以上）不在此次計畫內，若您為大型連鎖體系，可填寫資料後將由總公司行銷窗口與我們聯繫，或備註轉交總公司，我們將另行規劃大型企業方案。',
              '「教練專屬試飲包」每場館限領取一份。'].
              map((t, i) =>
              <li key={i} className="flex gap-4">
                    <span className="shrink-0 h-7 w-7 rounded-full bg-wedar-primary text-wedar-lime font-black text-[13px] flex items-center justify-center">
                      {i + 1}
                    </span>
                    <p className="text-[14.5px] leading-[1.85] text-wedar-primary/85">{t}</p>
                  </li>
              )}
              </ol>
            </div>

            <div className="px-7 py-5 bg-wedar-primary/5 border-t border-wedar-primary/10 flex flex-col sm:flex-row gap-3">
              <button
              type="button"
              onClick={() => setShowNotice(false)}
              className="flex-1 inline-flex items-center justify-center gap-2 rounded-full border border-wedar-primary/20 px-5 py-3.5 text-wedar-primary font-bold text-[14px] hover:bg-wedar-primary/5 transition-colors">
              
                關閉
              </button>
              <a
              href={FORM_URL}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => setShowNotice(false)}
              className="flex-1 inline-flex items-center justify-center gap-3 rounded-full bg-wedar-primary px-5 py-3.5 text-wedar-bone font-bold text-[14px] hover:bg-wedar-deep transition-colors">
              
                我已閱讀，前往填表
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M7 17L17 7M17 7H9M17 7v8" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </a>
            </div>
          </div>
        </div>
      }
    </section>);

};

Object.assign(window, { Apply });