// WORKS — Hero (brand message + featured case)

const WHero = () => {
  const D = window.WORKS_DATA;
  const [idx, setIdx] = React.useState(0);
  const featured = D.cases.slice(0, 4);

  React.useEffect(() => {
    if (!featured.length) return;
    const t = setInterval(() => setIdx(i => (i + 1) % featured.length), 5200);
    return () => clearInterval(t);
  }, [featured.length]);

  const s = featured[idx] || featured[0];

  const go = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section id="w-home" className="w-hero-v2">
      <style>{`
        .w-hero-v2 {
          position: relative;
          min-height: calc(100vh - 76px);
          padding: 48px 64px 64px;
          overflow: hidden;
          display: grid;
          grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
          gap: 72px;
          align-items: center;
          background: #050505;
          border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .w-hero-v2::before {
          content: '';
          position: absolute;
          inset: 0;
          background:
            radial-gradient(700px 520px at 77% 50%, rgba(224,87,32,.14), transparent 67%),
            radial-gradient(420px 320px at 8% 8%, rgba(224,87,32,.05), transparent 72%);
          pointer-events: none;
        }
        .w-hero-v2::after {
          content: '';
          position: absolute;
          inset: 0;
          opacity: .18;
          background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 15px);
          pointer-events: none;
        }

        .w-hero-copy,
        .w-hero-feature { position: relative; z-index: 2; }

        .w-hero-copy {
          padding: 28px 0 20px;
          max-width: 690px;
        }
        .w-hero-kicker {
          display: flex;
          align-items: center;
          gap: 14px;
          margin-bottom: 30px;
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: .22em;
          text-transform: uppercase;
          color: rgba(244,241,234,.48);
        }
        .w-hero-kicker::before {
          content: '';
          width: 34px;
          height: 1px;
          background: var(--w-accent);
        }
        .w-hero-title {
          margin: 0;
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: clamp(52px, 5.15vw, 92px);
          line-height: 1.05;
          letter-spacing: -.03em;
          color: #F4F1EA;
          white-space: nowrap;
        }
        .w-hero-title em {
          display: block;
          color: var(--w-accent);
          font-style: normal;
          font-weight: 600;
          margin-top: 6px;
        }
        .w-hero-desc {
          margin: 30px 0 0;
          max-width: 570px;
          font-family: "Inter", "Noto Serif TC", sans-serif;
          font-size: 14px;
          line-height: 1.8;
          letter-spacing: .06em;
          color: rgba(244,241,234,.62);
        }
        .w-hero-actions {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          align-items: stretch;
          margin-top: 38px;
        }
        .w-hero-primary {
          min-width: 260px;
          min-height: 56px;
          padding: 0 28px;
          border: 1px solid var(--w-accent);
          background: var(--w-accent);
          color: #080808;
          font-family: "Inter", "Noto Serif TC", sans-serif;
          font-size: 12px;
          font-weight: 800;
          letter-spacing: .13em;
          text-transform: uppercase;
          cursor: pointer;
          transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
        }
        .w-hero-primary:hover {
          transform: translateY(-2px);
          background: #F0662C;
          box-shadow: 0 10px 28px rgba(224,87,32,.22);
        }
        .w-hero-secondary {
          min-width: 205px;
          min-height: 56px;
          padding: 0 24px;
          border: 1px solid rgba(244,241,234,.55);
          background: transparent;
          color: #F4F1EA;
          font-family: "Inter", "Noto Serif TC", sans-serif;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .13em;
          text-transform: uppercase;
          cursor: pointer;
          transition: border-color .22s ease, background .22s ease, transform .22s ease;
        }
        .w-hero-secondary:hover {
          transform: translateY(-2px);
          border-color: var(--w-accent);
          background: rgba(224,87,32,.07);
        }
        .w-hero-micro {
          display: flex;
          gap: 24px;
          margin-top: 34px;
          padding-top: 20px;
          border-top: 1px solid rgba(255,255,255,.08);
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: .18em;
          color: rgba(244,241,234,.34);
          text-transform: uppercase;
        }

        .w-hero-feature { min-width: 0; }
        .w-feature-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 14px;
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: rgba(244,241,234,.46);
        }
        .w-feature-head .count { color: var(--w-accent); }
        .w-feature-frame {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 10;
          min-height: 430px;
          overflow: hidden;
          border: 1px solid rgba(255,255,255,.09);
          background: #0C0C0C;
        }
        .w-feature-photo {
          position: absolute;
          inset: 0;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          transition: opacity .35s ease, transform 5.2s ease;
          transform: scale(1.015);
        }
        .w-feature-photo.is-contain {
          background-size: contain;
          background-color: #0A0A0A;
          transform: none;
        }
        .w-feature-empty {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: .22em;
          color: rgba(244,241,234,.25);
          background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px);
        }
        .w-feature-shade {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.78) 100%),
            linear-gradient(90deg, rgba(0,0,0,.12), transparent 45%);
          pointer-events: none;
        }
        .w-feature-top {
          position: absolute;
          top: 20px;
          left: 20px;
          right: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          z-index: 2;
        }
        .w-feature-num,
        .w-feature-cat {
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: .2em;
          text-transform: uppercase;
          padding: 6px 10px;
        }
        .w-feature-num {
          color: var(--w-accent);
          background: rgba(0,0,0,.62);
          border: 1px solid rgba(224,87,32,.35);
        }
        .w-feature-cat {
          color: #0A0A0A;
          background: var(--w-accent);
          font-weight: 700;
        }
        .w-feature-copy {
          position: absolute;
          left: 28px;
          right: 28px;
          bottom: 26px;
          z-index: 2;
        }
        .w-feature-copy h2 {
          margin: 0 0 8px;
          max-width: 90%;
          font-family: "Noto Serif TC", serif;
          font-size: clamp(28px, 2.2vw, 42px);
          line-height: 1.2;
          letter-spacing: -.015em;
          color: #F4F1EA;
        }
        .w-feature-copy p {
          margin: 0;
          font-family: "Inter", sans-serif;
          font-size: 9px;
          line-height: 1.5;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: rgba(244,241,234,.5);
        }
        .w-feature-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 15px;
        }
        .w-feature-dots { display: flex; gap: 7px; }
        .w-feature-dot {
          width: 38px;
          height: 2px;
          border: 0;
          padding: 0;
          background: rgba(255,255,255,.14);
          cursor: pointer;
          transition: background .25s, width .25s;
        }
        .w-feature-dot.active {
          background: var(--w-accent);
          width: 54px;
        }
        .w-feature-hint {
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: rgba(244,241,234,.28);
        }

        @media (max-width: 1250px) {
          .w-hero-title { white-space: normal; }
        }
        @media (max-width: 1100px) {
          .w-hero-v2 {
            grid-template-columns: 1fr;
            gap: 44px;
            padding: 48px 36px 52px;
          }
          .w-hero-copy { max-width: 760px; }
          .w-feature-frame { min-height: 0; }
          .w-hero-title { white-space: nowrap; }
        }
        @media (max-width: 760px) {
          .w-hero-title { white-space: normal; }
        }
        @media (max-width: 680px) {
          .w-hero-v2 { padding: 34px 20px 42px; }
          .w-hero-title { font-size: clamp(44px, 13vw, 66px); }
          .w-hero-desc { font-size: 13px; }
          .w-hero-actions { flex-direction: column; }
          .w-hero-primary,
          .w-hero-secondary { width: 100%; min-width: 0; }
          .w-hero-micro { gap: 12px; flex-wrap: wrap; }
          .w-feature-frame { aspect-ratio: 4 / 5; }
          .w-feature-copy { left: 18px; right: 18px; bottom: 18px; }
          .w-feature-top { top: 14px; left: 14px; right: 14px; }
          .w-feature-hint { display: none; }
        }
      `}</style>

      <div className="w-hero-copy">
        <div className="w-hero-kicker">WORKS · EVENT & BRAND EXPERIENCE</div>
        <h1 className="w-hero-title">
          把想法，
          <em>做成現場。</em>
        </h1>
        <p className="w-hero-desc">
          EVENT PLANNING · BRAND ACTIVATION · ON-SITE EXECUTION<br/>
          從企劃、視覺、空間到現場執行，讓每一次品牌接觸真正落地。
        </p>

        <div className="w-hero-actions">
          <button className="w-hero-primary" onClick={() => go('w-contact')}>開始合作 / START A PROJECT →</button>
          <button className="w-hero-secondary" onClick={() => go('w-case')}>查看案例 / PORTFOLIO</button>
        </div>

        <div className="w-hero-micro">
          <span>TAIPEI</span>
          <span>EST. 2024</span>
          <span>WORKS INTERNATIONAL</span>
        </div>
      </div>

      <div className="w-hero-feature">
        <div className="w-feature-head">
          <span>FEATURED PROJECT</span>
          <span className="count">{String(idx + 1).padStart(2, '0')} / {String(featured.length).padStart(2, '0')}</span>
        </div>

        <div className="w-feature-frame" key={s?.num || idx}>
          {s?.img ? (
            <div
              className={'w-feature-photo' + (s.fit === 'contain' ? ' is-contain' : '')}
              style={{backgroundImage: `url('${s.img}')`}}
            />
          ) : (
            <div className="w-feature-empty">PROJECT IMAGE COMING SOON</div>
          )}
          <div className="w-feature-shade" />

          {s && (
            <>
              <div className="w-feature-top">
                <span className="w-feature-num">CASE #{s.num} · {s.year}</span>
                <span className="w-feature-cat">{s.cat}</span>
              </div>
              <div className="w-feature-copy">
                <h2>{s.zh}</h2>
                <p>{s.en}</p>
              </div>
            </>
          )}
        </div>

        <div className="w-feature-nav">
          <div className="w-feature-dots">
            {featured.map((item, i) => (
              <button
                key={item.num || i}
                className={'w-feature-dot' + (i === idx ? ' active' : '')}
                aria-label={`Show project ${i + 1}`}
                onClick={() => setIdx(i)}
              />
            ))}
          </div>
          <div className="w-feature-hint">AUTO ROTATE · 5.2 SEC</div>
        </div>
      </div>
    </section>
  );
};

window.WHero = WHero;