// WORKS — Service section (4 integrated pillars + 7 services grid)

const WService = () => {
  const D = window.WORKS_DATA;
  const [tab, setTab] = React.useState('pillars'); // pillars | seven

  const strengthByPillar = [
    D.highlights?.[2],
    D.highlights?.[1],
    D.highlights?.[0],
    D.highlights?.[3],
  ];

  return (
    <section id="w-service" className="w-section">
      <style>{`
        .w-svc-tabs {
          display: flex; gap: 0;
          margin-bottom: 56px;
          border-top: 1px solid var(--w-line);
          border-bottom: 1px solid var(--w-line);
        }
        .w-svc-tab {
          flex: 1;
          padding: 24px 28px;
          background: transparent;
          border: none;
          border-right: 1px solid var(--w-line);
          font-family: "Inter", sans-serif;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.22em;
          color: var(--w-text-mute);
          cursor: pointer;
          text-align: left;
          text-transform: uppercase;
          position: relative;
          transition: color .25s, background .25s;
        }
        .w-svc-tab:last-child { border-right: none; }
        .w-svc-tab:hover { color: var(--w-text); }
        .w-svc-tab.active { color: var(--w-text); background: rgba(232,255,58,0.04); }
        .w-svc-tab.active::before {
          content: '';
          position: absolute; top: -1px; left: 0; right: 0; height: 2px;
          background: var(--w-accent);
        }
        .w-svc-tab strong {
          display: block;
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: 28px;
          color: inherit;
          letter-spacing: 0;
          margin-top: 6px;
          text-transform: none;
        }

        /* Pillars */
        .w-pillars {
          display: grid;
          grid-template-columns: 1fr;
          min-width: 0;
        }
        .w-pillar {
          display: grid;
          grid-template-columns: 84px minmax(270px, 1.05fr) minmax(420px, 1.7fr);
          gap: 34px;
          padding: 42px 0;
          border-bottom: 1px solid var(--w-line);
          align-items: start;
          transition: padding .35s, background .35s;
          min-width: 0;
        }
        .w-pillar > * { min-width: 0; }
        .w-pillar:hover {
          padding-left: 16px;
          background: rgba(232,255,58,0.04);
        }
        .w-pillar:hover .w-pillar-zh { color: var(--w-accent); }
        .w-pillar-num {
          font-family: "JetBrains Mono", monospace;
          font-size: 15px;
          letter-spacing: 0.12em;
          color: var(--w-text-mute);
          padding-top: 12px;
        }
        .w-pillar-zh {
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: 44px;
          line-height: 1.08;
          margin: 0 0 7px;
          letter-spacing: 0.02em;
          transition: color .3s;
        }
        .w-pillar-en {
          font-family: "Inter", sans-serif;
          font-size: 13px;
          font-weight: 300;
          letter-spacing: 0.22em;
          color: var(--w-text-mute);
          text-transform: uppercase;
        }
        .w-pillar-detail {
          padding-top: 3px;
          width: 100%;
          min-width: 0;
        }
        .w-pillar-feature {
          font-family: "Noto Serif TC", serif;
          font-size: 21px;
          font-weight: 600;
          line-height: 1.45;
          color: var(--w-text);
          margin-bottom: 12px;
          word-break: keep-all;
        }
        .w-pillar-feature::before {
          content: 'KEY · ';
          font-family: "JetBrains Mono", monospace;
          font-size: 11px;
          font-weight: 400;
          letter-spacing: .16em;
          color: var(--w-accent);
          vertical-align: middle;
        }
        .w-pillar-desc {
          font-family: "Noto Serif TC", serif;
          font-size: 16px;
          line-height: 1.85;
          color: var(--w-text-soft);
          margin: 0 0 19px;
          max-width: 760px;
          width: 100%;
          white-space: normal;
          word-break: normal;
          overflow-wrap: normal;
        }
        .w-pillar-sub {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
          width: 100%;
        }
        .w-pillar-sub span {
          font-family: "Inter", sans-serif;
          font-size: 12px;
          padding: 6px 11px;
          border: 1px solid var(--w-line);
          color: var(--w-text-soft);
          letter-spacing: 0.03em;
        }
        .w-pillar-sub span.strength-tag {
          border-color: color-mix(in srgb, var(--w-accent) 38%, transparent);
          color: var(--w-text);
        }

        /* Seven */
        .w-seven {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        .w-svc7 {
          padding: 32px 24px;
          border-right: 1px solid var(--w-line);
          border-bottom: 1px solid var(--w-line);
          min-height: 240px;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          transition: background .3s;
          position: relative;
        }
        .w-svc7:hover { background: rgba(232,255,58,0.06); }
        .w-svc7:hover .w-svc7-zh::after { width: 100%; }
        .w-svc7:nth-child(4n) { border-right: none; }
        .w-svc7-num {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: var(--w-text-mute);
          margin-bottom: 24px;
        }
        .w-svc7-zh {
          font-family: "Noto Serif TC", serif;
          font-weight: 600;
          font-size: 26px;
          letter-spacing: 0.02em;
          margin: 0 0 4px;
          position: relative;
          display: inline-block;
        }
        .w-svc7-zh::after {
          content: '';
          position: absolute;
          bottom: -3px; left: 0;
          width: 20px; height: 2px;
          background: var(--w-accent);
          transition: width .4s cubic-bezier(.2,.7,.2,1);
        }
        .w-svc7-en {
          font-family: "Inter", sans-serif;
          font-size: 10px;
          letter-spacing: 0.2em;
          color: var(--w-text-mute);
          text-transform: uppercase;
          margin-top: 12px;
        }
        .w-svc7-kw {
          margin-top: auto;
          padding-top: 20px;
          display: flex; flex-wrap: wrap; gap: 5px;
        }
        .w-svc7-kw span {
          font-family: "Inter", sans-serif;
          font-size: 10px;
          padding: 3px 8px;
          border: 1px solid var(--w-line);
          color: var(--w-text-soft);
        }

        /* Tablet + mobile: do not retain the desktop 3-column pillar grid. */
        @media (max-width: 900px) {
          .w-pillar {
            display: block;
            width: 100%;
            padding: 34px 0;
          }
          .w-pillar:hover {
            padding-left: 0;
          }
          .w-pillar-num {
            display: block;
            padding-top: 0;
            margin-bottom: 14px;
          }
          .w-pillar > div:nth-of-type(1) {
            width: 100%;
            margin-bottom: 28px;
          }
          .w-pillar-detail {
            display: block;
            width: 100%;
            max-width: none;
            padding-top: 0;
          }
          .w-pillar-feature,
          .w-pillar-desc,
          .w-pillar-sub {
            width: 100%;
            max-width: none;
          }
        }

        @media (max-width: 768px) {
          .w-svc-tabs {
            flex-direction: column;
            margin-bottom: 32px;
          }
          .w-svc-tab {
            border-right: none;
            border-bottom: 1px solid var(--w-line);
            padding: 18px 20px;
          }
          .w-svc-tab strong { font-size: 22px; margin-top: 4px; }

          .w-pillar { padding: 30px 0; }
          .w-pillar-num { font-size: 13px; }
          .w-pillar-zh { font-size: 34px; }
          .w-pillar-en { font-size: 12px; line-height: 1.55; letter-spacing: .18em; }
          .w-pillar-feature { font-size: 20px; line-height: 1.45; margin-bottom: 14px; }
          .w-pillar-feature::before { font-size: 10px; }
          .w-pillar-desc { font-size: 16px; line-height: 1.9; }
          .w-pillar-sub { gap: 8px; }
          .w-pillar-sub span { font-size: 13px; padding: 7px 10px; }

          .w-seven {
            grid-template-columns: repeat(2, 1fr);
          }
          .w-svc7 { padding: 24px 18px; min-height: 200px; }
          .w-svc7:nth-child(4n) { border-right: 1px solid var(--w-line); }
          .w-svc7:nth-child(2n) { border-right: none; }
          .w-svc7-zh { font-size: 20px; }
        }
        @media (max-width: 480px) {
          .w-svc-tab strong { font-size: 20px; }
          .w-pillar { padding: 28px 0; }
          .w-pillar > div:nth-of-type(1) { margin-bottom: 24px; }
          .w-pillar-zh { font-size: 30px; }
          .w-pillar-feature { font-size: 20px; word-break: normal; }
          .w-pillar-desc { font-size: 16px; line-height: 1.9; }
          .w-pillar-sub span { font-size: 12px; }
          .w-seven { grid-template-columns: 1fr; }
          .w-svc7 { min-height: 160px; padding: 20px 16px; }
          .w-svc7:nth-child(n) { border-right: none; }
        }
      `}</style>

      <div className="w-section-head">
        <div>
          <div className="w-eyebrow" style={{marginBottom: 24}}>SERVICE · 服務介紹</div>
          <h2>
            四大領域，<br/>
            <em>七大服務。</em>
          </h2>
        </div>
        <div className="right">
          從策略、視覺與現場統籌，到人力、硬體、舞台與燈光執行。四大核心領域整合沃克思的關鍵能力，七大專業服務則負責把每個細節真正落地。
        </div>
      </div>

      <div className="w-svc-tabs">
        <button className={'w-svc-tab' + (tab === 'pillars' ? ' active' : '')} onClick={() => setTab('pillars')}>
          A · CORE PILLARS
          <strong>四大領域</strong>
        </button>
        <button className={'w-svc-tab' + (tab === 'seven' ? ' active' : '')} onClick={() => setTab('seven')}>
          B · SEVEN DISCIPLINES
          <strong>七大專業服務</strong>
        </button>
      </div>

      {tab === 'pillars' && (
        <div className="w-pillars">
          {D.servicePillars.map((p, i) => {
            const h = strengthByPillar[i];
            return (
              <div key={p.num} className="w-pillar">
                <span className="w-pillar-num">— {p.num} —</span>
                <div>
                  <h3 className="w-pillar-zh">{p.zh}</h3>
                  <div className="w-pillar-en">{p.en}</div>
                </div>
                <div className="w-pillar-detail">
                  {h && <div className="w-pillar-feature">{h.zh}</div>}
                  {h && <p className="w-pillar-desc">{h.desc}</p>}
                  <div className="w-pillar-sub">
                    {p.sub.map(s => <span key={s}>{s}</span>)}
                    {h?.tags?.map(t => <span className="strength-tag" key={t}>{t}</span>)}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {tab === 'seven' && (
        <div className="w-seven">
          {D.serviceSeven.map(s => (
            <div key={s.num} className="w-svc7">
              <div className="w-svc7-num">SERVICE / {s.num}</div>
              <h3 className="w-svc7-zh">{s.zh}</h3>
              <div className="w-svc7-en">{s.en}</div>
              <div className="w-svc7-kw">
                {s.kw.map(k => <span key={k}>{k}</span>)}
              </div>
            </div>
          ))}
          <div className="w-svc7" style={{cursor: 'default', background: 'rgba(232,255,58,0.04)', display: 'flex', alignItems: 'flex-end'}}>
            <div>
              <div style={{fontFamily: 'Noto Serif TC, serif', fontStyle: 'italic', fontSize: 20, lineHeight: 1.4, color: 'var(--w-accent)'}}>
                「細節，是<br/>沃克思唯一<br/>不打折的東西。」
              </div>
              <div className="w-meta" style={{marginTop: 24}}>— FOUNDER'S NOTE</div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

window.WService = WService;