const Spokesperson = () => {
  const videoId = 'PYn8lEYx1qk';
  const [playing, setPlaying] = React.useState(false);

  return (
    <section id="spokesperson" className="relative bg-wedar-bone py-24 lg:py-32 overflow-hidden">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          {/* Left: video */}
          <div className="lg:col-span-7 reveal">
            <div className="relative block rounded-[32px] overflow-hidden bg-wedar-primary video-aspect">
              {playing ? (
                <iframe
                  className="absolute inset-0 w-full h-full"
                  src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
                  title="小禎代言短片"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                />
              ) : (
                <button
                  type="button"
                  onClick={() => setPlaying(true)}
                  aria-label="播放小禎代言短片"
                  className="absolute inset-0 w-full h-full group cursor-pointer"
                >
                  <img
                    src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
                    alt="小禎代言短片封面"
                    className="absolute inset-0 w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity"
                    onError={(e) => { e.target.src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`; }}
                  />
                  <div className="absolute inset-0 bg-wedar-primary/15"/>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="relative">
                      <div className="absolute inset-0 rounded-full bg-wedar-lime animate-ping opacity-40"/>
                      <div className="relative h-20 w-20 md:h-24 md:w-24 rounded-full bg-wedar-lime flex items-center justify-center shadow-2xl group-hover:scale-110 transition-transform duration-500">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" className="text-wedar-primary ml-1">
                          <path d="M8 5v14l11-7z"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                </button>
              )}
            </div>
          </div>

          {/* Right: pitch */}
          <div className="lg:col-span-5 reveal">
            <SectionLabel>為什麼與我們合作？</SectionLabel>
            <h2 className="mt-6 font-black text-[clamp(40px,5vw,72px)] leading-[1.1] text-wedar-primary">
              小禎挑的，<br/>
              <span className="text-wedar-green">不用你解釋</span>。
            </h2>
            <p className="mt-6 text-[16px] leading-[1.85] text-wedar-primary/75">
              會員看到熟悉的臉孔，信任就建立了一半。
              小禎是 WEDAR 唯一指定代言人，從蛋白飲、肌酸到酸櫻桃，都是她自己日常在補給的品項。
              <br/><br/>
              這份信任，可以直接變成你推薦時的說服力。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Spokesperson });