const Hero = () => {
  return (
    <section id="top" className="relative bg-wedar-bone pt-36 pb-16 lg:pt-28 lg:pb-24 overflow-hidden">
      {/* Background oversized mark */}
      <div className="absolute -right-24 top-4 font-black-display text-[22vw] leading-none text-wedar-primary/[0.04] tracking-hyper pointer-events-none select-none hidden md:block">
        WEDAR
      </div>

      <div className="relative max-w-[1600px] mx-auto px-6 lg:px-10">
        {/* Two-column hero on desktop */}
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">

          {/* LEFT: copy */}
          <div className="reveal order-2 lg:order-1">
            <h1 className="font-black text-wedar-primary leading-[1.15]" style={{ fontFamily: '"Noto Sans TC", sans-serif' }}>
              <span className="block text-[clamp(32px,4.2vw,56px)]">小禎唯一指定</span>
              <span className="block text-[clamp(32px,4.2vw,56px)]">運動營養補給</span>
              <span className="block mt-3 text-[clamp(32px,4.2vw,56px)] text-wedar-green">
                <span className="relative inline-block">
                  <span className="relative z-10">創造場館額外營收</span>
                  <span className="absolute inset-x-0 bottom-1 h-3 bg-wedar-lime/60 -z-0" />
                </span>
              </span>
            </h1>

            <p className="mt-8 text-[17px] leading-[1.9] text-wedar-primary/80 max-w-xl">
              除了專業課程，您需要多元化的經營模式。
              <br />
              WEDAR 協助您在不增加營運成本的前提下，提升會員滿意度。
            </p>

            <div className="mt-10">
              <a href="#apply" className="group inline-flex items-center gap-4 rounded-full bg-wedar-primary pl-7 pr-3 py-3 text-wedar-bone font-bold text-[16px] tracking-wide hover:bg-wedar-deep transition-colors">
                <span>領取 18 入試飲組 📦</span>
                <span className="flex h-10 w-10 items-center justify-center rounded-full bg-wedar-lime text-wedar-primary">
                  <svg className="btn-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
              </a>
            </div>
          </div>

          {/* RIGHT: image 1:1 square */}
          <div className="reveal order-1 lg:order-2">
            <div className="relative rounded-[32px] lg:rounded-[40px] overflow-hidden bg-wedar-bone shadow-2xl shadow-wedar-primary/20 aspect-square max-w-[640px] mx-auto w-full">
              <img
                src="assets/hero-main.png"
                alt="WEDAR 全方位豌豆蛋白飲 · 小禎代言"
                className="absolute inset-0 w-full h-full object-cover"
              />
            </div>
          </div>
        </div>

        {/* Scroll marquee */}
        <div className="mt-20 -mx-6 lg:-mx-10 overflow-hidden border-y border-wedar-primary/15 py-5">
          <div className="flex gap-12 marquee-track whitespace-nowrap">
            {Array.from({ length: 2 }).map((_, i) => <div key={i} className="flex items-center gap-12 shrink-0">
              {['WE DO CARE.', 'YOU ARE STRONGER THAN YOU THINK.', 'PROTEIN · CREATINE · TART CHERRY', '小禎唯一指定', '低合作門檻', '免費申請體驗組'].map((t, j) => <React.Fragment key={j}>
                <span className="font-black-display text-2xl text-wedar-primary tracking-ultra" style={{ fontFamily: "\"Noto Sans TC\"", fontWeight: "700" }}>{t}</span>
                <span className="inline-block h-2 w-2 rounded-full bg-wedar-green" />
              </React.Fragment>)}
            </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Hero });