DimSpectrum.jsx

import { useState, useEffect } from "react";

const COLORS = {
  bg: "#0a0e1a",
  bgCard: "#111827",
  bgCardHover: "#1a2236",
  accent1: "#6366f1",
  accent1Light: "#818cf8",
  accent2: "#f59e0b",
  accent2Light: "#fbbf24",
  text: "#e2e8f0",
  textMuted: "#94a3b8",
  textDim: "#64748b",
  border: "#1e293b",
  green: "#10b981",
};

function AscensionIllustration({ active }) {
  return (
    <svg viewBox="0 0 220 190" width="100%" height="100%">
      {!active && (
        <g>
          {[
            { x: 15, y: 135, r: 18, c: "#818cf8" },
            { x: 70, y: 150, r: -12, c: "#a78bfa" },
            { x: 130, y: 128, r: 22, c: "#6366f1" },
            { x: 175, y: 145, r: -8, c: "#c4b5fd" },
            { x: 45, y: 90, r: 10, c: "#818cf8" },
            { x: 105, y: 85, r: -18, c: "#a78bfa" },
            { x: 160, y: 95, r: 15, c: "#6366f1" },
            { x: 25, y: 55, r: -25, c: "#c4b5fd" },
            { x: 85, y: 45, r: 8, c: "#818cf8" },
            { x: 145, y: 50, r: -14, c: "#a78bfa" },
          ].map((p, i) => (
            <g key={i} transform={`translate(${p.x},${p.y}) rotate(${p.r})`} opacity={0.45 + Math.random() * 0.2}>
              <rect width="28" height="28" rx="4" fill={p.c} fillOpacity={0.6} stroke={p.c} strokeWidth={1} />
              <circle cx="14" cy="-2" r="5" fill={p.c} fillOpacity={0.3} />
              <circle cx="30" cy="14" r="5" fill={p.c} fillOpacity={0.3} />
            </g>
          ))}
          <text x="110" y="185" textAnchor="middle" fill="#64748b" fontSize="10" fontWeight="500">
            1D 散落碎片 — 片面詞彙、Email、口語交談
          </text>
        </g>
      )}
      {active && (
        <g>
          <defs>
            <linearGradient id="wallL" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#a78bfa" stopOpacity="0.6"/>
              <stop offset="100%" stopColor="#6366f1" stopOpacity="0.4"/>
            </linearGradient>
            <linearGradient id="wallR" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#818cf8" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#6366f1" stopOpacity="0.3"/>
            </linearGradient>
          </defs>
          <polygon points="110,145 45,118 110,92 175,118" fill="#6366f1" fillOpacity={0.55} stroke="#818cf8" strokeWidth={1.5}/>
          <polygon points="45,118 45,58 110,32 110,92" fill="url(#wallL)" stroke="#a78bfa" strokeWidth={1}/>
          <polygon points="175,118 175,58 110,32 110,92" fill="url(#wallR)" stroke="#818cf8" strokeWidth={1}/>
          <polygon points="110,8 45,58 110,32 175,58" fill="#a78bfa" fillOpacity={0.55} stroke="#c4b5fd" strokeWidth={1.5}/>
          {/* Windows */}
          <rect x="62" y="72" width="14" height="16" rx="2" fill="#0a0e1a" fillOpacity={0.5}/>
          <rect x="84" y="58" width="14" height="16" rx="2" fill="#0a0e1a" fillOpacity={0.5}/>
          <rect x="118" y="58" width="14" height="16" rx="2" fill="#0a0e1a" fillOpacity={0.4}/>
          <rect x="140" y="72" width="14" height="16" rx="2" fill="#0a0e1a" fillOpacity={0.4}/>
          {/* Door */}
          <rect x="102" y="102" width="16" height="26" rx="2" fill="#0a0e1a" fillOpacity={0.6}/>
          <circle cx="115" cy="116" r="1.5" fill="#a78bfa" fillOpacity={0.8}/>
          {/* Glow */}
          <ellipse cx="110" cy="150" rx="75" ry="12" fill="#6366f1" fillOpacity={0.12}/>
          {/* Annotation lines */}
          <line x1="180" y1="30" x2="195" y2="20" stroke="#818cf8" strokeWidth={0.8} strokeDasharray="2,2"/>
          <text x="197" y="22" fill="#a78bfa" fontSize="8" fontWeight="500">3D Architecture</text>
          <line x1="180" y1="90" x2="195" y2="85" stroke="#818cf8" strokeWidth={0.8} strokeDasharray="2,2"/>
          <text x="197" y="88" fill="#a78bfa" fontSize="8" fontWeight="500">2D UI Flow</text>
          <text x="110" y="178" textAnchor="middle" fill="#a78bfa" fontSize="11" fontWeight="600">
            ✦ 升維完成 — 3D 系統藍圖
          </text>
        </g>
      )}
    </svg>
  );
}

function DescentIllustration({ active }) {
  return (
    <svg viewBox="0 0 220 190" width="100%" height="100%">
      {!active && (
        <g>
          <defs>
            <linearGradient id="bpL" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#fbbf24" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#f59e0b" stopOpacity="0.3"/>
            </linearGradient>
          </defs>
          <polygon points="110,110 50,85 110,60 170,85" fill="#f59e0b" fillOpacity={0.45} stroke="#fbbf24" strokeWidth={1}/>
          <polygon points="50,85 50,35 110,10 110,60" fill="url(#bpL)" stroke="#f59e0b" strokeWidth={1}/>
          <polygon points="170,85 170,35 110,10 110,60" fill="#f59e0b" fillOpacity={0.3} stroke="#fbbf24" strokeWidth={1}/>
          <polygon points="110,110 50,85 50,35 110,60" fill="transparent"/>
          {/* NFR floating labels */}
          {[
            { x: 25, y: 130, t: "💰 Cost" },
            { x: 80, y: 142, t: "⚡ Perf" },
            { x: 130, y: 130, t: "🔄 Scale" },
            { x: 175, y: 142, t: "🔧 Flex" },
          ].map((l, i) => (
            <text key={i} x={l.x} y={l.y} fill="#fbbf24" fontSize="8" opacity={0.65} fontWeight="500">{l.t}</text>
          ))}
          <text x="110" y="175" textAnchor="middle" fill="#64748b" fontSize="10" fontWeight="500">
            3D 系統藍圖 + NFR 約束條件
          </text>
        </g>
      )}
      {active && (
        <g>
          {/* Engineer silhouette */}
          <circle cx="28" cy="22" r="8" fill="#fbbf24" fillOpacity={0.3} stroke="#f59e0b" strokeWidth={1}/>
          <line x1="28" y1="30" x2="28" y2="52" stroke="#f59e0b" strokeWidth={1.5} strokeOpacity={0.4}/>
          <line x1="28" y1="36" x2="18" y2="44" stroke="#f59e0b" strokeWidth={1.2} strokeOpacity={0.4}/>
          <line x1="28" y1="36" x2="42" y2="32" stroke="#f59e0b" strokeWidth={1.2} strokeOpacity={0.4}/>
          {/* Code lines */}
          {[
            { w: 130, o: 0.85, c: "#f59e0b" },
            { w: 95, o: 0.7, c: "#fbbf24" },
            { w: 115, o: 0.8, c: "#f59e0b" },
            { w: 80, o: 0.6, c: "#ef4444" },
            { w: 140, o: 0.9, c: "#fbbf24" },
            { w: 65, o: 0.5, c: "#f59e0b" },
            { w: 120, o: 0.75, c: "#fbbf24" },
            { w: 100, o: 0.65, c: "#ef4444" },
            { w: 88, o: 0.7, c: "#f59e0b" },
            { w: 145, o: 0.85, c: "#fbbf24" },
            { w: 72, o: 0.55, c: "#f59e0b" },
            { w: 110, o: 0.8, c: "#ef4444" },
          ].map((line, i) => (
            <g key={i}>
              <text x="42" y={18 + i * 13} fill="#64748b" fontSize="7" fontFamily="monospace" opacity={0.5}>{String(i + 1).padStart(2, "0")}</text>
              <rect x="56" y={11 + i * 13} width={line.w} height={8} rx={2} fill={line.c} fillOpacity={line.o * 0.4}/>
              {i % 4 === 0 && <rect x={56 + line.w - 20} y={11 + i * 13} width={18} height={8} rx={2} fill="#10b981" fillOpacity={0.3}/>}
            </g>
          ))}
          {/* Binary at bottom */}
          <text x="110" y="175" textAnchor="middle" fill="#f59e0b" fontSize="8" fontFamily="monospace" opacity={0.4}>
            0110 1001 0110 0100 0110 0101 → CPU
          </text>
          <text x="110" y="188" textAnchor="middle" fill="#fbbf24" fontSize="10" fontWeight="600">
            ✦ 降維完成 — 1D 程式碼序列
          </text>
        </g>
      )}
    </svg>
  );
}

function NFRBadge({ label, icon }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "4px 11px", borderRadius: 20, fontSize: 11.5, fontWeight: 500,
      background: "rgba(245,158,11,0.08)", color: "#fbbf24",
      border: "1px solid rgba(245,158,11,0.18)", whiteSpace: "nowrap",
    }}>
      <span style={{ fontSize: 13 }}>{icon}</span>{label}
    </span>
  );
}

export default function DimensionalSpectrum() {
  const [activePhase, setActivePhase] = useState(null);
  const [showConclusion, setShowConclusion] = useState(false);
  const [ready, setReady] = useState(false);

  useEffect(() => { setTimeout(() => setReady(true), 200); }, []);

  const cardBase = {
    flex: 1, minWidth: 330, maxWidth: 540,
    borderRadius: 16, padding: "28px 24px",
    cursor: "pointer", transition: "all 0.4s cubic-bezier(.4,0,.2,1)",
  };

  return (
    <div style={{
      minHeight: "100vh", background: COLORS.bg, color: COLORS.text,
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans TC', sans-serif",
      padding: "36px 20px", overflowX: "hidden",
    }}>
      <style>{`
        @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
        @keyframes gradFlow { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
        .formula-box { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:14px 18px; margin-top:16px; }
        .step-row { display:flex; align-items:flex-start; gap:10px; margin:10px 0; font-size:13.5px; line-height:1.65; }
        .step-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:2px; }
      `}</style>

      {/* Header */}
      <div style={{
        maxWidth: 1140, margin: "0 auto 36px", textAlign: "center",
        opacity: ready ? 1 : 0, transform: ready ? "translateY(0)" : "translateY(20px)",
        transition: "all 0.8s ease",
      }}>
        <div style={{ fontSize: 11, color: COLORS.textDim, letterSpacing: 3, textTransform: "uppercase", marginBottom: 10 }}>
          Software Development Spectrum
        </div>
        <h1 style={{
          fontSize: "clamp(24px, 4.5vw, 38px)", fontWeight: 800, lineHeight: 1.3, margin: "0 0 10px",
          background: `linear-gradient(135deg, ${COLORS.accent1Light}, ${COLORS.accent2Light})`,
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          backgroundSize: "200% 200%", animation: "gradFlow 4s ease infinite",
        }}>
          軟體開發的維度光譜
        </h1>
        <p style={{ fontSize: 14.5, color: COLORS.textMuted, maxWidth: 580, margin: "0 auto", lineHeight: 1.75 }}>
          從散落的需求碎片<strong style={{ color: COLORS.accent1Light }}>升維建構</strong>系統藍圖，再從藍圖<strong style={{ color: COLORS.accent2Light }}>降維打擊</strong>，精煉為可執行的程式碼。
        </p>
      </div>

      {/* Spectrum Bar */}
      <div style={{ maxWidth: 1140, margin: "0 auto 32px", opacity: ready ? 1 : 0, transition: "opacity 0.6s ease 0.3s" }}>
        <div style={{ display: "flex", height: 5, borderRadius: 3, overflow: "hidden", gap: 3 }}>
          <div style={{ flex: 1, background: `linear-gradient(90deg, ${COLORS.accent1}, ${COLORS.accent1Light})` }}/>
          <div style={{ flex: 1, background: `linear-gradient(90deg, ${COLORS.accent2Light}, ${COLORS.accent2})` }}/>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 7 }}>
          <span style={{ fontSize: 10.5, color: COLORS.accent1Light, fontWeight: 600 }}>↑ 升維建構 Dimensional Ascension</span>
          <span style={{ fontSize: 10.5, color: COLORS.accent2Light, fontWeight: 600 }}>Dimensional Descent 降維打擊 ↓</span>
        </div>
      </div>

      {/* Two Phase Cards */}
      <div style={{
        maxWidth: 1140, margin: "0 auto", display: "flex", gap: 22, flexWrap: "wrap", justifyContent: "center",
        opacity: ready ? 1 : 0, transition: "all 0.8s ease 0.5s",
      }}>

        {/* === PHASE 1: ASCENSION === */}
        <div
          style={{
            ...cardBase,
            background: activePhase === "asc" ? COLORS.bgCardHover : COLORS.bgCard,
            border: `1.5px solid ${activePhase === "asc" ? COLORS.accent1 : COLORS.border}`,
            transform: activePhase === "asc" ? "scale(1.01)" : "scale(1)",
            boxShadow: activePhase === "asc" ? "0 0 48px rgba(99,102,241,0.12)" : "none",
          }}
          onClick={() => setActivePhase(activePhase === "asc" ? null : "asc")}
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <span style={{
              display: "inline-block", padding: "3px 12px", borderRadius: 20,
              fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
              background: "rgba(99,102,241,0.15)", color: COLORS.accent1Light,
            }}>PHASE 1</span>
            <span style={{ fontSize: 10.5, color: COLORS.textDim }}>
              {activePhase === "asc" ? "▼ 收合" : "▶ 點擊互動"}
            </span>
          </div>

          <h2 style={{ fontSize: 21, fontWeight: 700, margin: "0 0 3px", color: COLORS.accent1Light }}>需求定義 / 探索</h2>
          <p style={{ fontSize: 12.5, color: COLORS.accent1Light, opacity: 0.65, margin: "0 0 16px", fontStyle: "italic" }}>
            升維建構 — Dimensional Ascension
          </p>

          <div style={{
            height: 195, marginBottom: 14, borderRadius: 10,
            background: "rgba(99,102,241,0.04)", border: "1px solid rgba(99,102,241,0.1)",
          }}>
            <AscensionIllustration active={activePhase === "asc"} />
          </div>

          <p style={{ fontSize: 13, color: COLORS.textMuted, lineHeight: 1.7, margin: "0 0 14px" }}>
            核心挑戰：<strong style={{ color: COLORS.accent1Light }}>「對焦與視覺化」</strong>—— 團隊如偵探般，從有限線索中還原真相。
          </p>

          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(99,102,241,0.2)", color: COLORS.accent1Light }}>1</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>起點（低維度資訊）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>片面詞彙、Email 片段、矛盾的口語交談 — 如同 1D 的點與線。</div>
            </div>
          </div>
          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(99,102,241,0.2)", color: COLORS.accent1Light }}>2</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>機制（探索與收斂）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>訪談、Prototyping、敏捷式階段確認，同步「想像畫面」。</div>
            </div>
          </div>
          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(99,102,241,0.2)", color: COLORS.accent1Light }}>3</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>終點（高維度重構）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>1D 散落需求 → 2D UI Flow → 3D 系統架構圖 & Domain Model</div>
            </div>
          </div>

          {/* Arrow up */}
          <div style={{ textAlign: "center", margin: "12px 0 8px" }}>
            <svg viewBox="0 0 40 56" width="28" height="44">
              <line x1="20" y1="50" x2="20" y2="14" stroke={COLORS.accent1} strokeWidth="2.5" strokeDasharray="4,3"/>
              <polygon points="12,18 20,4 28,18" fill={COLORS.accent1}/>
            </svg>
          </div>

          <div style={{ textAlign: "center", marginBottom: 10 }}>
            <div style={{ fontSize: 12, color: COLORS.accent1Light, fontWeight: 600 }}>🔑 關鍵能力：設計圖像力</div>
            <p style={{ fontSize: 11.5, color: COLORS.textDim, margin: "4px auto 0", maxWidth: 380, lineHeight: 1.5 }}>
              Artifact（規格書、架構圖）是升維結晶 — 將未知化為已知、無形化為有形。
            </p>
          </div>

          <div className="formula-box">
            <div style={{ fontSize: 9.5, color: COLORS.textDim, marginBottom: 6, letterSpacing: 0.5 }}>學術註解 — 熵減與維度躍遷</div>
            <div style={{ textAlign: "center", fontSize: 17, color: COLORS.accent1Light, letterSpacing: 1, fontFamily: "Georgia, serif" }}>
              <em>f</em><sub style={{ fontSize: 10 }}>ascend</sub>(<em>R</em><sub style={{ fontSize: 10 }}>raw</sub>) → <em>A</em><sub style={{ fontSize: 10 }}>blueprint</sub>
            </div>
            <div style={{ fontSize: 10, color: COLORS.textDim, textAlign: "center", marginTop: 5 }}>低維原始需求 → 高維系統藍圖</div>
          </div>
        </div>

        {/* === PHASE 2: DESCENT === */}
        <div
          style={{
            ...cardBase,
            background: activePhase === "desc" ? COLORS.bgCardHover : COLORS.bgCard,
            border: `1.5px solid ${activePhase === "desc" ? COLORS.accent2 : COLORS.border}`,
            transform: activePhase === "desc" ? "scale(1.01)" : "scale(1)",
            boxShadow: activePhase === "desc" ? "0 0 48px rgba(245,158,11,0.12)" : "none",
          }}
          onClick={() => setActivePhase(activePhase === "desc" ? null : "desc")}
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <span style={{
              display: "inline-block", padding: "3px 12px", borderRadius: 20,
              fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
              background: "rgba(245,158,11,0.15)", color: COLORS.accent2Light,
            }}>PHASE 2</span>
            <span style={{ fontSize: 10.5, color: COLORS.textDim }}>
              {activePhase === "desc" ? "▼ 收合" : "▶ 點擊互動"}
            </span>
          </div>

          <h2 style={{ fontSize: 21, fontWeight: 700, margin: "0 0 3px", color: COLORS.accent2Light }}>工程實作</h2>
          <p style={{ fontSize: 12.5, color: COLORS.accent2Light, opacity: 0.65, margin: "0 0 16px", fontStyle: "italic" }}>
            降維打擊 — Dimensional Descent
          </p>

          <div style={{
            height: 195, marginBottom: 14, borderRadius: 10,
            background: "rgba(245,158,11,0.04)", border: "1px solid rgba(245,158,11,0.1)",
          }}>
            <DescentIllustration active={activePhase === "desc"} />
          </div>

          <p style={{ fontSize: 13, color: COLORS.textMuted, lineHeight: 1.7, margin: "0 0 14px" }}>
            核心挑戰：<strong style={{ color: COLORS.accent2Light }}>「技術掌控力與收斂」</strong>—— 不需天馬行空，而是極致的精準落刀。
          </p>

          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(245,158,11,0.2)", color: COLORS.accent2Light }}>1</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>起點（高維度藍圖）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>涵蓋商業邏輯、UX 與系統架構的複雜設計藍圖。</div>
            </div>
          </div>
          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(245,158,11,0.2)", color: COLORS.accent2Light }}>2</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>機制（解構與優化）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>以技術底蘊一眼看穿 Tech Stack，評估非功能性需求 (NFR)：</div>
            </div>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, margin: "10px 0 14px 32px" }}>
            <NFRBadge label="成本控制" icon="💰"/>
            <NFRBadge label="效能穩定" icon="⚡"/>
            <NFRBadge label="吞吐併發" icon="🔄"/>
            <NFRBadge label="可維護性" icon="🔧"/>
            <NFRBadge label="彈性" icon="🌊"/>
            <NFRBadge label="介面體驗" icon="🎨"/>
          </div>

          <div className="step-row">
            <span className="step-num" style={{ background: "rgba(245,158,11,0.2)", color: COLORS.accent2Light }}>3</span>
            <div>
              <strong style={{ color: COLORS.text, fontSize: 13 }}>終點（低維度實現）</strong>
              <div style={{ color: COLORS.textMuted, fontSize: 12.5 }}>3D 複雜系統 → 扁平化為 1D 程式碼 Snippet → 0/1 CPU 完美執行。</div>
            </div>
          </div>

          {/* Arrow down */}
          <div style={{ textAlign: "center", margin: "12px 0 8px" }}>
            <svg viewBox="0 0 40 56" width="28" height="44">
              <line x1="20" y1="6" x2="20" y2="42" stroke={COLORS.accent2} strokeWidth="2.5" strokeDasharray="4,3"/>
              <polygon points="12,38 20,52 28,38" fill={COLORS.accent2}/>
            </svg>
          </div>

          <div style={{ textAlign: "center", marginBottom: 10 }}>
            <div style={{ fontSize: 12, color: COLORS.accent2Light, fontWeight: 600 }}>🔑 關鍵能力：技術拿捏度</div>
            <p style={{ fontSize: 11.5, color: COLORS.textDim, margin: "4px auto 0", maxWidth: 380, lineHeight: 1.5 }}>
              以上帝視角俯瞰問題，用最優雅、最低成本的技術手段，將藍圖變為現實。
            </p>
          </div>

          <div className="formula-box">
            <div style={{ fontSize: 9.5, color: COLORS.textDim, marginBottom: 6, letterSpacing: 0.5 }}>學術註解 — 約束映射與降維</div>
            <div style={{ textAlign: "center", fontSize: 17, color: COLORS.accent2Light, letterSpacing: 1, fontFamily: "Georgia, serif" }}>
              <em>g</em><sub style={{ fontSize: 10 }}>descend</sub>(<em>A</em><sub style={{ fontSize: 10 }}>blueprint</sub>, <em>C</em><sub style={{ fontSize: 10 }}>constraints</sub>) → <em>Code</em><sub style={{ fontSize: 10 }}>exec</sub>
            </div>
            <div style={{ fontSize: 10, color: COLORS.textDim, textAlign: "center", marginTop: 5 }}>高維藍圖 + 約束條件 → 一維執行序列</div>
          </div>
        </div>
      </div>

      {/* Conclusion */}
      <div style={{ maxWidth: 1140, margin: "40px auto 0", textAlign: "center" }}>
        <button
          onClick={() => setShowConclusion(!showConclusion)}
          style={{
            background: showConclusion
              ? `linear-gradient(135deg, ${COLORS.accent1}, ${COLORS.accent2})`
              : "rgba(255,255,255,0.04)",
            border: `1.5px solid ${showConclusion ? "transparent" : COLORS.border}`,
            borderRadius: 12, padding: "14px 36px",
            color: COLORS.text, fontSize: 14, fontWeight: 600,
            cursor: "pointer", transition: "all 0.4s ease", letterSpacing: 0.5,
          }}
        >
          {showConclusion ? "✦ 結論 ✦" : "▶ 揭示結論"}
        </button>

        {showConclusion && (
          <div style={{
            marginTop: 28, padding: "32px 24px", borderRadius: 16,
            background: "linear-gradient(135deg, rgba(99,102,241,0.07), rgba(245,158,11,0.07))",
            border: "1.5px solid rgba(255,255,255,0.07)", animation: "fadeUp 0.6s ease",
          }}>
            {/* Visual equation */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, marginBottom: 22, flexWrap: "wrap" }}>
              <div style={{ textAlign: "center" }}>
                <svg viewBox="0 0 56 56" width="44" height="44">
                  <polygon points="28,6 8,46 48,46" fill="none" stroke={COLORS.accent1Light} strokeWidth="2"/>
                  <text x="28" y="36" textAnchor="middle" fill={COLORS.accent1Light} fontSize="14" fontWeight="700">↑</text>
                </svg>
                <div style={{ fontSize: 10, color: COLORS.accent1Light, marginTop: 2 }}>升維想像力</div>
              </div>
              <span style={{ fontSize: 26, color: COLORS.textDim, fontWeight: 300 }}>+</span>
              <div style={{ textAlign: "center" }}>
                <svg viewBox="0 0 56 56" width="44" height="44">
                  <polygon points="28,50 8,10 48,10" fill="none" stroke={COLORS.accent2Light} strokeWidth="2"/>
                  <text x="28" y="36" textAnchor="middle" fill={COLORS.accent2Light} fontSize="14" fontWeight="700">↓</text>
                </svg>
                <div style={{ fontSize: 10, color: COLORS.accent2Light, marginTop: 2 }}>降維執行力</div>
              </div>
              <span style={{ fontSize: 26, color: COLORS.textDim, fontWeight: 300 }}>=</span>
              <div style={{ textAlign: "center" }}>
                <svg viewBox="0 0 56 56" width="44" height="44">
                  <polygon points="28,4 4,28 28,52 52,28" fill="none" stroke={COLORS.green} strokeWidth="2.5"/>
                  <text x="28" y="33" textAnchor="middle" fill={COLORS.green} fontSize="13" fontWeight="700">✦</text>
                </svg>
                <div style={{ fontSize: 10, color: COLORS.green, marginTop: 2 }}>頂尖人才</div>
              </div>
            </div>

            <h3 style={{
              fontSize: "clamp(16px, 3vw, 22px)", fontWeight: 800, lineHeight: 1.55, margin: "0 0 14px",
              background: `linear-gradient(135deg, ${COLORS.accent1Light}, ${COLORS.green}, ${COLORS.accent2Light})`,
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            }}>
              「一個頂尖的軟體人才，必須同時具備<br/>『升維的想像力』與『降維的執行力』。」
            </h3>

            <p style={{ fontSize: 13, color: COLORS.textMuted, maxWidth: 500, margin: "0 auto", lineHeight: 1.75 }}>
              需求探索鍛鍊從碎片中建構全貌的能力；工程實作鍛鍊將複雜化為簡潔的功力。兩者缺一不可，構成軟體工程師的完整維度光譜。
            </p>
          </div>
        )}
      </div>

      <div style={{ textAlign: "center", marginTop: 48, fontSize: 10.5, color: COLORS.textDim, letterSpacing: 0.5 }}>
        AIASE 2026 · Generative AI Application Systems & Engineering · NCKU CS
      </div>
    </div>
  );
}