// WORKS — About + Stats + Competencies + Marquee Clients

const WAbout = () => {
  const D = window.WORKS_DATA;
  return (
    <section id="w-about" className="w-section w-about-section">
      <style>{`
        .w-about-section {
          position: relative;
          overflow: hidden;
          background: #101010;
        }
        .w-about-section::before {
          content: '';
          position: absolute;
          width: 620px;
          height: 620px;
          left: -260px;
          top: 80px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(224,87,32,.14), rgba(224,87,32,0) 68%);
          pointer-events: none;
        }
        .w-about-section::after {
          content: 'WORKS';
          position: absolute;
          right: -18px;
          top: 90px;
          font-family: "Inter", sans-serif;
          font-size: clamp(120px, 18vw, 300px);
          font-weight: 800;
          line-height: .8;
          letter-spacing: -.06em;
          color: rgba(255,255,255,.018);
          pointer-events: none;
        }
        .w-about-section > * { position: relative; z-index: 1; }

        .w-about-intro {
          margin-bottom: 54px;
        }
        .w-about-intro h2 {
          margin: 0;
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: clamp(42px, 4vw, 60px);
          line-height: 1.08;
          letter-spacing: -.02em;
        }
        .w-about-intro h2 em {
          color: var(--w-accent);
          font-style: normal;
        }

        .w-about-grid {
          display: grid;
          grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
          gap: 72px;
          align-items: stretch;
        }
        .w-about-img {
          min-height: 620px;
          width: 100%;
          position: relative;
          overflow: hidden;
          background:
            linear-gradient(180deg, rgba(224,87,32,.08), rgba(0,0,0,.22)),
            repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
            #181818;
          border: 1px solid rgba(255,255,255,.07);
        }
        .w-about-img::before {
          content: 'ON SITE';
          position: absolute;
          left: 26px;
          bottom: 22px;
          font-family: "Inter", sans-serif;
          font-size: clamp(54px, 7vw, 110px);
          font-weight: 700;
          letter-spacing: -.04em;
          line-height: .85;
          color: rgba(255,255,255,.055);
        }
        .w-about-img::after {
          content: '';
          position: absolute;
          right: 28px;
          bottom: 30px;
          width: 110px;
          height: 6px;
          background: var(--w-accent);
        }
        .w-about-img-tag {
          position: absolute;
          top: 18px; left: 18px;
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          padding: 7px 11px;
          background: var(--w-accent);
          color: #0A0A0A;
          text-transform: uppercase;
        }
        .w-about-img .tag {
          position: absolute;
          top: 22px;
          right: 22px;
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: .18em;
          color: rgba(255,255,255,.34);
        }
        .w-about-text {
          align-self: center;
          padding: 30px 0;
        }
        .w-about-text h3 {
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: clamp(42px, 4vw, 64px);
          line-height: 1.08;
          letter-spacing: -0.02em;
          margin: 0 0 36px;
        }
        .w-about-text h3 em { font-style: normal; color: var(--w-accent); font-weight: 600; }
        .w-about-text p {
          font-family: "Noto Serif TC", serif;
          font-size: 16px;
          line-height: 1.9;
          color: rgba(244,241,234,.66);
          margin: 0 0 22px;
          max-width: 780px;
        }
        .w-about-text p.w-about-lead {
          font-size: 18px;
          line-height: 1.85;
          color: rgba(244,241,234,.88);
          padding-left: 18px;
          border-left: 3px solid var(--w-accent);
          margin-bottom: 28px;
        }
        .w-about-text p::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-weight: inherit; line-height: inherit; }

        .w-stats-row {
          margin-top: 78px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }
        .w-stat {
          padding: 30px 24px;
          background: #171717;
          border: 1px solid rgba(255,255,255,.055);
          transition: transform .25s, background .25s, border-color .25s;
        }
        .w-stat:hover {
          transform: translateY(-4px);
          background: #1B1B1B;
          border-color: rgba(224,87,32,.35);
        }
        .w-stat .n {
          font-family: "Inter", sans-serif;
          font-weight: 700;
          font-size: 58px;
          line-height: 0.95;
          color: var(--w-accent);
          letter-spacing: -0.04em;
        }
        .w-stat .l {
          font-family: "Noto Serif TC", serif;
          font-size: 15px;
          margin-top: 14px;
          color: rgba(244,241,234,.9);
        }
        .w-stat .l small {
          display: block;
          font-family: "Inter", sans-serif;
          font-size: 8px;
          letter-spacing: 0.24em;
          color: rgba(244,241,234,.32);
          margin-top: 5px;
          text-transform: uppercase;
        }

        @media (max-width: 1000px) {
          .w-about-grid { grid-template-columns: 1fr; gap: 42px; }
          .w-about-img { min-height: 440px; }
          .w-stats-row { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 620px) {
          .w-about-img { min-height: 360px; }
          .w-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
          .w-stat { padding: 24px 18px; }
          .w-stat .n { font-size: 44px; }
        }
      `}</style>

      <div className="w-about-intro">
        <div className="w-eyebrow" style={{marginBottom: 24}}>ABOUT · 關於我們</div>
        <h2>關於<em>沃克思</em>。</h2>
      </div>

      <div className="w-about-grid">
        <div className="w-about-img">
          <span className="w-about-img-tag">★ TEAM WORKS / 2025</span>
          <span className="tag">EVENT · FIELD · EXECUTION</span>
        </div>

        <div className="w-about-text">
          <h3>我們把想法，<br/>一路做到<em>現場。</em></h3>
          <p className="w-about-lead">
            沃克思國際 (WORKS) 是一支結合活動企劃、視覺設計與整合行銷的團隊。我們相信好的活動不只是被完成，而是每一個現場細節都能回應品牌最初的想法。
          </p>
          <p>
            從企劃、視覺、空間、人力到現場執行，我們把不同環節拉回同一個專案節奏裡。目標不是把工作拆出去，而是讓每一個執行決定都服務同一個品牌體驗。
          </p>
          <p>
            自 2024 年成立以來，沃克思持續參與校園、品牌、商業與通路活動，累積跨場域的執行經驗，也讓團隊更熟悉如何在現場快速反應、整合資源並解決問題。
          </p>
        </div>
      </div>

      <div className="w-stats-row">
        {D.stats.map(s => (
          <div key={s.l} className="w-stat">
            <div className="n">{s.n}</div>
            <div className="l">{s.l}<small>{s.en}</small></div>
          </div>
        ))}
      </div>
    </section>
  );
};

const WCompetencies = () => {
  const D = window.WORKS_DATA;
  return (
    <section className="w-section w-comp-section">
      <style>{`
        .w-comp-section {
          position: relative;
          overflow: hidden;
          padding-top: 92px;
          padding-bottom: 104px;
          background: #070707;
        }
        .w-comp-section::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(110deg, rgba(224,87,32,.05), transparent 36%);
          pointer-events: none;
        }
        .w-comp-section > * { position: relative; z-index: 1; }
        .w-comp-head {
          display: flex;
          justify-content: space-between;
          align-items: end;
          margin-bottom: 38px;
        }
        .w-comp-head h3 {
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: clamp(38px, 4vw, 56px);
          margin: 0;
          letter-spacing: -0.02em;
        }
        .w-comp-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .w-comp {
          min-height: 340px;
          padding: 30px 28px 34px;
          background: #141414;
          border: 1px solid rgba(255,255,255,.055);
          position: relative;
          overflow: hidden;
          transition: transform .3s, background .3s, border-color .3s;
        }
        .w-comp::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 4px;
          background: var(--w-accent);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform .3s ease;
        }
        .w-comp:hover {
          transform: translateY(-6px);
          background: #191919;
          border-color: rgba(224,87,32,.3);
        }
        .w-comp:hover::after { transform: scaleX(1); }
        .w-comp-num {
          font-family: "Inter", sans-serif;
          font-size: clamp(72px, 7vw, 120px);
          line-height: .8;
          font-weight: 800;
          letter-spacing: -.07em;
          color: rgba(224,87,32,.22);
          margin-bottom: 44px;
          transition: color .3s;
        }
        .w-comp:hover .w-comp-num { color: rgba(224,87,32,.42); }
        .w-comp-zh {
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: 28px;
          line-height: 1.25;
          margin: 0 0 8px;
          color: #F4F1EA;
        }
        .w-comp-en {
          font-family: "Inter", sans-serif;
          font-size: 9px;
          letter-spacing: 0.2em;
          color: rgba(244,241,234,.34);
          text-transform: uppercase;
          margin-bottom: 22px;
        }
        .w-comp-desc {
          font-family: "Noto Serif TC", serif;
          font-size: 14px;
          line-height: 1.8;
          color: rgba(244,241,234,.58);
          margin: 0;
        }
        @media (max-width: 900px) {
          .w-comp-grid { grid-template-columns: 1fr; }
          .w-comp { min-height: 0; }
          .w-comp-num { margin-bottom: 30px; }
        }
      `}</style>

      <div className="w-comp-head">
        <h3>為什麼選擇沃克思 / Why WORKS</h3>
        <div className="w-meta">[ 03 STRENGTHS ]</div>
      </div>

      <div className="w-comp-grid">
        {D.whyUs.map(c => (
          <div key={c.num} className="w-comp">
            <div className="w-comp-num">{c.num}</div>
            <h4 className="w-comp-zh">{c.zh}</h4>
            <div className="w-comp-en">{c.en}</div>
            <p className="w-comp-desc">{c.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const WClientsMarquee = () => {
  const D = window.WORKS_DATA;
  const list = [...D.clientLogos, ...D.clientLogos];
  if (!D.clientLogos.length) return null;
  return (
    <section style={{padding: '64px 0', borderTop: '1px solid var(--w-line)', borderBottom: '1px solid var(--w-line)', overflow: 'hidden', background: 'var(--w-ink)'}}>
      <style>{`
        .w-marq-lab {
          padding: 0 64px 24px;
          display: flex; justify-content: space-between;
          font-family: "JetBrains Mono", monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          color: var(--w-text-mute);
          text-transform: uppercase;
        }
        .w-marq-track {
          display: flex; gap: 80px;
          animation: w-marquee 50s linear infinite;
          white-space: nowrap;
          font-family: "Noto Serif TC", serif;
          font-weight: 700;
          font-size: 56px;
          letter-spacing: 0.04em;
          color: var(--w-text);
        }
        .w-marq-track .logo {
          display: inline-flex; align-items: center; gap: 12px;
          padding: 8px 24px;
          border: 1.5px solid var(--w-line);
          transition: border-color .3s, color .3s;
        }
        .w-marq-track .logo:hover { border-color: var(--w-accent); color: var(--w-accent); }
        .w-marq-track .dot { color: var(--w-accent); margin: 0 8px; font-size: 32px; }
      `}</style>
      <div className="w-marq-lab">
        <span>★ TRUSTED BY / 合作品牌</span>
        <span>{D.clientLogos.length}+ BRANDS</span>
      </div>
      <div className="w-marq-track">
        {list.map((c, i) => (
          <React.Fragment key={i}>
            <span className="logo">{c}</span>
            <span className="dot">★</span>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

window.WAbout = WAbout;
window.WCompetencies = WCompetencies;
window.WClientsMarquee = WClientsMarquee;
