MoveBuildDemo.jsx

import React, { useState, useRef } from "react";
import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion";

/**
 * MoveBuild — 인터랙션 미리보기 데모
 *
 * 컨셉: "디자이너가 안 건드린(unstyled)" 흑백 표면 +
 *        정밀한 모션. 색의 부재가 포인트, 움직임이 기술력을 증명.
 *
 * 비교 항목:
 *   1) layoutId 확대  — 카드가 그 자리에서 부드럽게 커지며 펼쳐짐
 *   2) 전체화면 모달   — 카드 클릭 시 중앙 오버레이로 펼쳐짐
 * 추가: 스크롤 리빌(whileInView), 반응형 그리드(CSS Grid auto-fit)
 */

const PROJECTS = [
  {
    id: "robot",
    title: "Mecanum LiDAR Robot",
    owner: "Robotics & Hardware",
    tags: ["ROS2", "LiDAR", "Dual Camera"],
    blurb: "메카넘 휠 + 360° 라이다 + 듀얼 카메라 실물 로봇.",
    detail:
      "ROS2 기반으로 맵핑·내비게이션·장애물 회피를 구현. 메카넘 휠로 전방향 주행이 가능하며, 라이다와 듀얼 카메라로 환경을 인식한다. 실물 하드웨어를 직접 설계·조립·제어.",
  },
  {
    id: "platformer",
    title: "2D Puzzle Platformer",
    owner: "Game Development",
    tags: ["Unity", "Game Design"],
    blurb: "기획·개발 진행 중인 2D 퍼즐 플랫포머.",
    detail:
      "Unity로 개발 중인 퍼즐 플랫포머. 레벨 디자인과 물리 기반 퍼즐 메커니즘을 직접 설계. 캐릭터 컨트롤과 스테이지 진행 로직을 구현 중.",
  },
  {
    id: "liver",
    title: "How Is Your Liver",
    owner: "Web",
    tags: ["Web", "JavaScript"],
    blurb: "간단한 웹 서비스.",
    detail:
      "사용자 입력을 받아 결과를 보여주는 가벼운 웹 서비스. 프론트엔드부터 배포까지 직접 진행. JavaScript 기반.",
  },
  {
    id: "game3d",
    title: "3D Game Prototype",
    owner: "Game Development",
    tags: ["Unity", "C#"],
    blurb: "간단한 3D 게임 프로토타입.",
    detail:
      "Unity + C#로 만든 3D 게임 프로토타입. 3D 씬 구성, 카메라 제어, 기본 게임플레이 루프를 구현.",
  },
  {
    id: "arduino",
    title: "Arduino Motion Device",
    owner: "Robotics & Hardware",
    tags: ["Arduino", "Hardware"],
    blurb: "마이크로컨트롤러로 움직이는 제품.",
    detail:
      "아두이노로 모터·센서를 제어하는 실물 장치. 회로 구성부터 펌웨어까지 직접 작성. 물리적으로 동작하는 결과물.",
  },
  {
    id: "adafruit",
    title: "Web-to-Real Interaction",
    owner: "Robotics & Hardware",
    tags: ["IoT", "Adafruit", "Physical Computing"],
    blurb: "에이다프루트 보드로 현실-웹 상호작용.",
    detail:
      "에이다프루트 보드를 사용해 웹과 물리 세계를 연결. 웹에서의 입력이 실제 하드웨어 반응으로 이어지고, 센서 데이터가 화면에 표시된다.",
  },
];

const SKILLS = ["ROS2", "Arduino", "JavaScript", "Unity", "C#", "Robotics", "Adafruit", "Python"];

// 스크롤 진입 시 아래에서 떠오르는 래퍼
function Reveal({ children, delay = 0 }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 28 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  );
}

// 카드 썸네일(이미지 대신 흑백 플레이스홀더 — 의도적 unstyled)
function Thumb({ label }) {
  return (
    <div
      style={{
        height: 150,
        background:
          "repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #eaeaea 10px, #eaeaea 20px)",
        border: "1px solid #ccc",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "#999",
        fontSize: 12,
        letterSpacing: 1,
      }}
    >
      [ {label} ]
    </div>
  );
}

export default function MoveBuildDemo() {
  const [mode, setMode] = useState("expand"); // 'expand' | 'modal'
  const [selected, setSelected] = useState(null);
  const heroRef = useRef(null);

  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end start"],
  });
  // 히어로 그라데이션이 스크롤에 따라 옅어짐
  const heroOpacity = useTransform(scrollYProgress, [0, 1], [1, 0.15]);

  const open = (p) => setSelected(p);
  const close = () => setSelected(null);

  return (
    <div
      style={{
        fontFamily: "Georgia, 'Times New Roman', serif",
        color: "#111",
        background: "#fff",
        minHeight: "100vh",
      }}
    >
      {/* ===== 모드 토글 바 (데모용 컨트롤, 실제 사이트엔 없음) ===== */}
      <div
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          background: "#111",
          color: "#fff",
          padding: "10px 16px",
          display: "flex",
          alignItems: "center",
          gap: 12,
          fontFamily: "system-ui, sans-serif",
          fontSize: 13,
          flexWrap: "wrap",
        }}
      >
        <strong style={{ letterSpacing: 0.5 }}>DEMO 컨트롤</strong>
        <span style={{ opacity: 0.6 }}>카드 펼침 방식:</span>
        {[
          ["expand", "같은 자리 확대 (layoutId)"],
          ["modal", "전체화면 모달"],
        ].map(([val, lbl]) => (
          <button
            key={val}
            onClick={() => {
              setSelected(null);
              setMode(val);
            }}
            style={{
              background: mode === val ? "#fff" : "transparent",
              color: mode === val ? "#111" : "#fff",
              border: "1px solid #fff",
              padding: "5px 11px",
              borderRadius: 4,
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {lbl}
          </button>
        ))}
        <span style={{ opacity: 0.45, marginLeft: "auto" }}>
          ↓ 스크롤하면 카드가 떠오름 · 창 크기 줄이면 재배열
        </span>
      </div>

      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "0 24px" }}>
        {/* ===== 헤더 (unstyled: 기본 파란 링크) ===== */}
        <header
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            padding: "28px 0 20px",
          }}
        >
          <span style={{ fontSize: 26, fontWeight: "bold" }}>MoveBuild</span>
          <nav style={{ display: "flex", gap: 18, fontSize: 15 }}>
            {["Home", "Projects", "Skills", "Contact"].map((l) => (
              <a
                key={l}
                href="#"
                onClick={(e) => e.preventDefault()}
                style={{ color: "#0000ee", textDecoration: "underline" }}
              >
                {l}
              </a>
            ))}
          </nav>
        </header>

        {/* ===== 히어로 (검정→흰 그라데이션, 스크롤 시 옅어짐) ===== */}
        <section ref={heroRef} style={{ position: "relative", padding: "30px 0 50px" }}>
          <motion.div
            style={{
              position: "absolute",
              inset: 0,
              background: "linear-gradient(180deg, #111 0%, #555 35%, #fff 100%)",
              opacity: heroOpacity,
              zIndex: 0,
            }}
          />
          <div style={{ position: "relative", zIndex: 1 }}>
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              style={{ fontSize: 46, margin: 0, color: "#fff", mixBlendMode: "difference" }}
            >
              We build things that move.
            </motion.h1>
            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.25, duration: 0.6 }}
              style={{ fontSize: 18, color: "#fff", mixBlendMode: "difference", maxWidth: 460 }}
            >
              Two first-year engineering students. Strong on tech, honest about design.
            </motion.p>
            <div style={{ display: "flex", gap: 12, marginTop: 22 }}>
              {["See our work", "Find a designer (this could be you)"].map((t, i) => (
                <motion.button
                  key={t}
                  whileHover={{ scale: 1.04 }}
                  whileTap={{ scale: 0.97 }}
                  style={{
                    background: "#fff",
                    border: "1px solid #111",
                    padding: "10px 16px",
                    fontFamily: "inherit",
                    fontSize: 14,
                    cursor: "pointer",
                  }}
                >
                  {t}
                </motion.button>
              ))}
            </div>
          </div>
        </section>

        {/* ===== 프로젝트 그리드 (반응형 auto-fit + 스크롤 리빌) ===== */}
        <h2 style={{ fontSize: 30, borderBottom: "2px solid #111", paddingBottom: 6 }}>
          Projects
        </h2>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: 18,
            margin: "24px 0 60px",
          }}
        >
          {PROJECTS.map((p, i) => (
            <Reveal key={p.id} delay={(i % 3) * 0.08}>
              <motion.div
                layoutId={mode === "expand" ? `card-${p.id}` : undefined}
                onClick={() => open(p)}
                whileHover={{ y: -4 }}
                style={{
                  border: "1px solid #111",
                  background: "#fff",
                  cursor: "pointer",
                  padding: 0,
                  overflow: "hidden",
                }}
              >
                <motion.div layoutId={mode === "expand" ? `thumb-${p.id}` : undefined}>
                  <Thumb label={p.title} />
                </motion.div>
                <div style={{ padding: "12px 14px 16px" }}>
                  <motion.h3
                    layoutId={mode === "expand" ? `title-${p.id}` : undefined}
                    style={{ margin: "0 0 8px", fontSize: 18 }}
                  >
                    {p.title}
                  </motion.h3>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {p.tags.map((t) => (
                      <span
                        key={t}
                        style={{
                          fontSize: 11,
                          border: "1px solid #999",
                          padding: "2px 7px",
                          fontFamily: "system-ui, sans-serif",
                        }}
                      >
                        {t}
                      </span>
                    ))}
                  </div>
                </div>
              </motion.div>
            </Reveal>
          ))}
        </div>

        {/* ===== 스킬 ===== */}
        <h2 style={{ fontSize: 30, borderBottom: "2px solid #111", paddingBottom: 6 }}>Skills</h2>
        <Reveal>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, margin: "22px 0 60px" }}>
            {SKILLS.map((s) => (
              <motion.span
                key={s}
                whileHover={{ scale: 1.08 }}
                style={{
                  border: "1px solid #111",
                  padding: "7px 14px",
                  fontFamily: "system-ui, sans-serif",
                  fontSize: 14,
                }}
              >
                {s}
              </motion.span>
            ))}
          </div>
        </Reveal>

        {/* ===== 푸터 ===== */}
        <footer
          style={{
            borderTop: "1px solid #ccc",
            padding: "24px 0 60px",
            fontSize: 14,
            color: "#333",
          }}
        >
          <p>Built by developers, no designer involved (yet). The empty seat is yours.</p>
          <div style={{ display: "flex", gap: 16 }}>
            {["Email", "GitHub", "Contact"].map((l) => (
              <a
                key={l}
                href="#"
                onClick={(e) => e.preventDefault()}
                style={{ color: "#0000ee", textDecoration: "underline" }}
              >
                {l}
              </a>
            ))}
          </div>
        </footer>
      </div>

      {/* ===== 펼침 오버레이 ===== */}
      <AnimatePresence>
        {selected && (
          <>
            {/* 배경 딤 */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={close}
              style={{
                position: "fixed",
                inset: 0,
                background: "rgba(0,0,0,0.55)",
                zIndex: 60,
              }}
            />

            {mode === "expand" ? (
              /* --- 같은 자리 확대: layoutId 공유 --- */
              <motion.div
                layoutId={`card-${selected.id}`}
                style={{
                  position: "fixed",
                  top: "50%",
                  left: "50%",
                  x: "-50%",
                  y: "-50%",
                  width: "min(560px, 90vw)",
                  maxHeight: "85vh",
                  overflow: "auto",
                  background: "#fff",
                  border: "1px solid #111",
                  zIndex: 61,
                }}
              >
                <motion.div layoutId={`thumb-${selected.id}`}>
                  <Thumb label={selected.title} />
                </motion.div>
                <div style={{ padding: "18px 22px 24px" }}>
                  <motion.h3 layoutId={`title-${selected.id}`} style={{ margin: "0 0 4px", fontSize: 24 }}>
                    {selected.title}
                  </motion.h3>
                  <CardBody p={selected} onClose={close} />
                </div>
              </motion.div>
            ) : (
              /* --- 전체화면 모달: 중앙에서 스케일 인 --- */
              <motion.div
                initial={{ opacity: 0, scale: 0.92, x: "-50%", y: "-50%" }}
                animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
                exit={{ opacity: 0, scale: 0.92, x: "-50%", y: "-50%" }}
                transition={{ type: "spring", stiffness: 320, damping: 30 }}
                style={{
                  position: "fixed",
                  top: "50%",
                  left: "50%",
                  width: "min(560px, 90vw)",
                  maxHeight: "85vh",
                  overflow: "auto",
                  background: "#fff",
                  border: "1px solid #111",
                  zIndex: 61,
                }}
              >
                <Thumb label={selected.title} />
                <div style={{ padding: "18px 22px 24px" }}>
                  <h3 style={{ margin: "0 0 4px", fontSize: 24 }}>{selected.title}</h3>
                  <CardBody p={selected} onClose={close} />
                </div>
              </motion.div>
            )}
          </>
        )}
      </AnimatePresence>
    </div>
  );
}

function CardBody({ p, onClose }) {
  return (
    <>
      <p style={{ fontStyle: "italic", color: "#555", marginTop: 2 }}>{p.owner}</p>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", margin: "8px 0 14px" }}>
        {p.tags.map((t) => (
          <span
            key={t}
            style={{
              fontSize: 11,
              border: "1px solid #999",
              padding: "2px 7px",
              fontFamily: "system-ui, sans-serif",
            }}
          >
            {t}
          </span>
        ))}
      </div>
      <p style={{ lineHeight: 1.6, fontSize: 15 }}>{p.detail}</p>
      <button
        onClick={onClose}
        style={{
          marginTop: 10,
          background: "#111",
          color: "#fff",
          border: "none",
          padding: "8px 16px",
          cursor: "pointer",
          fontFamily: "system-ui, sans-serif",
          fontSize: 13,
        }}
      >
        닫기
      </button>
    </>
  );
}