const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showImpactBar": true
}/*EDITMODE-END*/;

const HERO_CARDS = [
  {
    tag: "PRODUCT 01",
    title: "EMS 스태퍼",
    desc: "노년층 하체 근력 관리와 생활 건강관리 보조",
    img: "assets/ems-stepper.jpg",
    href: "#product-ems",
  },
  {
    tag: "PRODUCT 02",
    title: "성분 흡수 보조 디바이스",
    desc: "EMS와 초음파 기반 두피/피부 성분 흡수 보조",
    img: "assets/ultrasonic.jpg",
    href: "#product-absorption",
  },
  {
    tag: "RESEARCH",
    title: "생활 패턴 기반 제품 설계",
    desc: "사용자 관찰과 사용성 연구를 바탕으로 한 홈 헬스케어",
    img: "assets/clinic-interior.jpg",
    href: "#research",
  },
];

const STATS = [
  { num: "01", u: "", lbl: "당봄 한의원 현장 인사이트", tag: "FOUNDATION" },
  { num: "02", u: "", lbl: "당뇨스쿨 생활관리 콘텐츠 경험", tag: "INSIGHT" },
  { num: "03", u: "", lbl: "노년층 생활 건강관리 과제", tag: "PROBLEM" },
  { num: "04", u: "", lbl: "홈 헬스케어 제품 설계", tag: "DIRECTION" },
];

const PRODUCTS = [
  {
    id: "product-ems",
    no: "PRODUCT 01",
    tag: "LOWER BODY CARE",
    name: "EMS 스태퍼",
    desc: "밤실의 첫 제품은 노년층 하체 근력 관리와 당뇨 환자 생활관리 보조를 위한 EMS 스태퍼입니다. 앉은 자세에서도 부담을 낮추고, 일상 속에서 꾸준히 근육 자극 보조 루틴을 이어갈 수 있도록 설계합니다.",
    tech: ["EMS 자극 보조", "좌식 사용성", "홈 헬스케어"],
    strengths: [
      ["대상", "노년층 생활 건강관리"],
      ["방향", "하체 근력 관리 보조"],
      ["설계", "생활 패턴 기반"],
    ],
    img: "assets/ems-stepper.jpg",
  },
  {
    id: "product-absorption",
    no: "PRODUCT 02",
    tag: "SCALP & SKIN CARE",
    name: "EMS + 초음파 기반 성분 흡수 보조 디바이스",
    desc: "두 번째 제품은 EMS와 초음파 기술을 활용한 두피/피부 성분 흡수 보조 디바이스입니다. 가정에서 쓰기 쉬운 웰니스 케어 도구를 목표로, 사용감과 루틴 지속성을 중심에 두고 준비하고 있습니다.",
    tech: ["EMS", "초음파", "두피/피부 케어"],
    strengths: [
      ["영역", "두피/피부 성분 흡수 보조"],
      ["방향", "웰니스 케어"],
      ["설계", "가정용 사용성"],
    ],
    img: "assets/ultrasonic.jpg",
  },
];

const FOUNDATION = [
  {
    badge: "01 / CLINIC",
    title: "당봄 한의원",
    role: "당뇨 환자 생활관리 현장에서 축적한 상담 경험과 사용 환경 이해",
  },
  {
    badge: "02 / CONTENT",
    title: "당뇨스쿨",
    role: "생활습관, 식후 활동, 가족 돌봄 관점의 커뮤니케이션 경험",
  },
  {
    badge: "03 / BRAND",
    title: "밤실",
    role: "현장 인사이트를 제품 사용성과 홈 헬스케어 경험으로 연결",
  },
];

const RESEARCH = [
  {
    stat: "OBS",
    u: "",
    head: "사용자 관찰",
    body: "노년층과 당뇨 환자의 일상 사용 환경, 움직임의 부담, 가족 돌봄 상황을 관찰해 제품 방향에 반영합니다.",
  },
  {
    stat: "LIFE",
    u: "",
    head: "생활 패턴",
    body: "식후 시간, 휴식 시간, 집 안 동선처럼 반복되는 생활 패턴 속에서 무리 없이 이어질 수 있는 루틴을 살핍니다.",
  },
  {
    stat: "UX",
    u: "",
    head: "제품 사용성 연구",
    body: "조작 난이도, 착석 자세, 보관 편의성, 피부 접촉감 등 실제 사용 과정에서 생기는 작은 불편을 줄이는 데 집중합니다.",
  },
  {
    stat: "CARE",
    u: "",
    head: "웰니스 케어",
    body: "질환 중심의 표현보다 생활 건강관리와 웰니스 케어 관점에서 안전하고 이해하기 쉬운 제품 경험을 설계합니다.",
  },
];

const FAQ = [
  {
    q: "밤실은 어떤 브랜드인가요?",
    a: "밤실은 당봄 한의원과 당뇨스쿨의 현장 인사이트를 바탕으로, 당뇨 환자와 노년층의 생활 건강관리를 돕는 홈 헬스케어 브랜드입니다.",
  },
  {
    q: "EMS 스태퍼는 어떤 목적의 제품인가요?",
    a: "노년층 하체 근력 관리와 생활 건강관리 보조를 위한 제품입니다. 집에서 부담을 낮추고 꾸준한 근육 자극 보조 루틴을 만들 수 있도록 준비하고 있습니다.",
  },
  {
    q: "두피/피부 디바이스는 어떤 제품인가요?",
    a: "EMS와 초음파 기술을 활용해 두피/피부 성분 흡수 보조를 목표로 하는 웰니스 케어 제품입니다. 사용성과 루틴 지속성을 중심으로 기획하고 있습니다.",
  },
  {
    q: "현재 문의할 수 있는 내용은 무엇인가요?",
    a: "제품 문의, 협업 제안, 파트너십 문의를 받고 있습니다. 아래 문의 영역을 통해 연락처와 문의 유형을 남겨 주세요.",
  },
];

const IconYouTube = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z"/>
  </svg>
);

const IconHome = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M3 10.5 12 3l9 7.5"/>
    <path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5"/>
  </svg>
);

const IconPlus = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
    <path d="M12 5v14M5 12h14"/>
  </svg>
);

const SnsLinks = ({ onDark = false, variant = "full" }) => {
  const links = [
    { href: "https://www.youtube.com/@diabetes.school", title: "당뇨스쿨 YouTube", icon: <IconYouTube/> },
    { href: "https://www.bamsil.com", title: "bamsil.com", icon: <IconHome/> },
  ];

  return (
    <div className={"sns" + (onDark ? " on-dark" : "")}>
      {links.slice(0, variant === "nav" ? 1 : links.length).map((link) => (
        <a key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" title={link.title} aria-label={link.title}>
          {link.icon}
        </a>
      ))}
    </div>
  );
};

const Wordmark = ({ size = 18, sub = true }) => (
  <a href="#" className="logo" style={{ gap: 12 }}>
    <span style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: size + 4, letterSpacing: "-0.02em", color: "var(--brand)" }}>BAMSIL</span>
    {sub && <span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 400, paddingLeft: 12, borderLeft: "1px solid var(--line)" }}>주식회사 밤실</span>}
  </a>
);

const BrandDivider = () => <div className="brand-divider" aria-hidden="true"></div>;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [submitted, setSubmitted] = useState(false);

  return (
    <>
      <nav className="top" data-screen-label="01 Nav">
        <div className="container row">
          <Wordmark />
          <ul>
            <li><a href="#problem">문제</a></li>
            <li><a href="#foundation">기반</a></li>
            <li><a href="#products">제품</a></li>
            <li><a href="#research">연구</a></li>
            <li><a href="#contact">문의</a></li>
          </ul>
          <div className="nav-right">
            <SnsLinks variant="nav" />
            <a href="#contact" className="cta">문의하기 <span className="arrow">→</span></a>
          </div>
        </div>
      </nav>

      <header className="hero-dark" data-screen-label="02 Hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <span className="eyebrow-d"><span className="dot"></span>HOME HEALTHCARE BRAND</span>
              <h1 className="wordmark">BAMSIL</h1>
              <div className="slogan">
                생활 건강관리를<br />
                집 안의 <em>꾸준한 루틴</em>으로.
              </div>
              <p className="sub">
                밤실은 당봄 한의원과 당뇨스쿨의 현장 인사이트를 바탕으로,
                당뇨 환자와 노년층의 생활 건강관리를 돕는 홈 헬스케어 브랜드입니다.
              </p>
              <div className="actions">
                <a href="#products" className="btn-light">제품 보기 <span className="arrow">→</span></a>
                <a href="#contact" className="btn-outline">파트너십 문의</a>
              </div>
            </div>

            <div className="hero-cards">
              {HERO_CARDS.map((card) => (
                <a key={card.title} href={card.href} className="hero-card">
                  <div className="img">
                    <img src={card.img} alt={card.title} />
                  </div>
                  <div>
                    <div className="meta-tag">{card.tag}</div>
                    <h4>{card.title}</h4>
                    <p className="desc">{card.desc}</p>
                  </div>
                  <div className="go" aria-hidden="true">→</div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </header>

      <BrandDivider />

      {tweaks.showImpactBar && (
        <>
          <section className="impact" data-screen-label="03 Direction">
            <div className="container">
              <div className="impact-grid">
                {STATS.map((stat) => (
                  <div className="impact-cell" key={stat.tag}>
                    <div className="num">{stat.num}<span className="u">{stat.u}</span></div>
                    <div className="lbl">{stat.lbl}</div>
                    <div className="tag">{stat.tag}</div>
                  </div>
                ))}
              </div>
            </div>
          </section>
          <BrandDivider />
        </>
      )}

      <section className="block" id="problem" data-screen-label="04 Problem" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">01 / Problem</div>
              <h2>생활 건강관리는 병원 밖의 시간에서 더 자주 흔들립니다.</h2>
            </div>
            <p className="desc">
              당뇨 환자와 노년층에게 중요한 것은 거창한 계획보다 매일 반복할 수 있는 생활 루틴입니다.
              하지만 식후 활동, 하체 근력 관리, 가족 돌봄, 사용하기 쉬운 도구의 부족은 꾸준한 관리를 어렵게 만듭니다.
            </p>
          </div>
          <div className="feat-grid">
            <div className="feat">
              <div className="num">01</div>
              <h3>식후 활동 루틴의 어려움</h3>
              <p>식사 후 몸을 움직여야 한다는 필요를 알아도, 날씨와 공간, 체력 부담 때문에 꾸준히 이어가기 어렵습니다.</p>
              <div className="meta">LIFE ROUTINE</div>
            </div>
            <div className="feat">
              <div className="num">02</div>
              <h3>노년층 하체 근력 관리</h3>
              <p>하체 근력 관리는 일상 자립성과 연결되지만, 무리한 운동기구는 시작 장벽이 높고 지속성이 낮습니다.</p>
              <div className="meta">LOWER BODY</div>
            </div>
            <div className="feat">
              <div className="num">03</div>
              <h3>집에서 쓰기 쉬운 케어 도구</h3>
              <p>홈 헬스케어 제품은 기능만큼이나 보관, 조작, 착용, 가족의 도움 여부까지 함께 고려되어야 합니다.</p>
              <div className="meta">HOME CARE</div>
            </div>
          </div>
        </div>
      </section>

      <BrandDivider />

      <section className="block" id="foundation" data-screen-label="05 Foundation">
        <div className="container">
          <div className="story">
            <div className="story-image">
              <img className="real" src="assets/clinic-interior.jpg" alt="당봄 한의원 공간" />
            </div>
            <div className="text">
              <div className="mono" style={{ color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase" }}>02 / Foundation</div>
              <h2 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: "clamp(34px,4.2vw,52px)", lineHeight: 1.1, letterSpacing: "-0.03em", margin: "16px 0 32px", color: "var(--ink)" }}>
                당봄 한의원과 당뇨스쿨에서 출발한 생활관리 인사이트.
              </h2>
              <p>
                밤실은 당봄 한의원과 당뇨스쿨이 현장에서 마주한 생활관리의 어려움에 주목합니다.
                상담과 콘텐츠 운영 과정에서 축적된 질문, 불편, 반복되는 생활 패턴을 제품 설계의 출발점으로 삼습니다.
              </p>
              <p>
                당봄 한의원과 당뇨스쿨은 밤실이 현장을 이해하는 기반입니다.
                이 기반을 바탕으로 당뇨 환자 생활관리 보조와 노년층 홈 헬스케어에 필요한 사용 경험을 차분히 설계합니다.
              </p>
            </div>
          </div>
        </div>
      </section>

      <BrandDivider />

      <section className="block" id="products" data-screen-label="06 Products" style={{ paddingBottom: 64, background: "var(--paper-2)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">03 / Products</div>
              <h2>생활 패턴을 기준으로 준비하는 두 가지 홈 헬스케어 제품.</h2>
            </div>
            <p className="desc">
              첫 제품은 노년층 하체 근력 관리와 생활 건강관리 보조를 위한 EMS 스태퍼입니다.
              이후 EMS와 초음파 기술을 활용한 두피/피부 성분 흡수 보조 디바이스로 확장할 예정입니다.
            </p>
          </div>
        </div>
      </section>

      {PRODUCTS.map((product, index) => (
        <React.Fragment key={product.no}>
          <section className="block" id={product.id} style={{ paddingTop: 0, paddingBottom: 96, background: "var(--paper-2)" }}>
            <div className="container">
              <div className="product" style={{ gridTemplateColumns: index % 2 ? "1fr 1.1fr" : "1.1fr 1fr" }}>
                <div className="product-image" style={{ order: index % 2 ? 2 : 1 }}>
                  <img className="real" src={product.img} alt={product.name} />
                </div>
                <div style={{ order: index % 2 ? 1 : 2 }}>
                  <div className="product-num">{product.no}</div>
                  <div className="mono" style={{ color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", margin: "12px 0" }}>
                    {product.tag}
                  </div>
                  <h3>{product.name}</h3>
                  <p className="copy">{product.desc}</p>
                  <div className="tech-chips">
                    {product.tech.map((item) => <span key={item} className="tech-chip">{item}</span>)}
                  </div>
                  <div className="strength-row">
                    {product.strengths.map(([key, value]) => (
                      <div key={key} className="strength">
                        <div className="k">{key}</div>
                        <div className="v">{value}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </section>
          <BrandDivider />
        </React.Fragment>
      ))}

      <section className="block" id="research" data-screen-label="07 Research">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">04 / Research & Data</div>
              <h2>사용자 관찰과 제품 사용성 연구 중심의 데이터.</h2>
            </div>
            <p className="desc">
              밤실의 연구 방향은 과장된 결과 약속이 아니라, 실제 사용자가 집에서 반복할 수 있는지 확인하는 데 있습니다.
              관찰, 생활 패턴, 사용성 연구를 통해 제품의 형태와 경험을 다듬습니다.
            </p>
          </div>
          <div className="market-grid">
            {RESEARCH.map((item) => (
              <div className="market-card" key={item.head}>
                <div className="stat">{item.stat}<span className="u">{item.u}</span></div>
                <div className="head">{item.head}</div>
                <p>{item.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <BrandDivider />

      <section className="block" data-screen-label="08 Brand Foundation" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">05 / Brand Structure</div>
              <h2>현장 인사이트를 제품 경험으로 연결합니다.</h2>
            </div>
            <p className="desc">
              밤실은 당봄 한의원과 당뇨스쿨의 생활관리 인사이트를 바탕으로 제품을 기획합니다.
              협업의 초점은 브랜드가 해결하려는 생활 건강관리 문제에 있습니다.
            </p>
          </div>
          <div className="eco-wrap">
            <div className="eco-grid">
              {FOUNDATION.map((item, index) => (
                <React.Fragment key={item.title}>
                  <div className="eco-node">
                    <div className="badge">{item.badge}</div>
                    <h5>{item.title}</h5>
                    <div className="role">{item.role}</div>
                  </div>
                  {index < FOUNDATION.length - 1 && <div className="eco-link">→</div>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      <BrandDivider />

      <section className="block qa-section" id="qa" data-screen-label="09 FAQ">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">06 / FAQ</div>
              <h2>자주 묻는 질문.</h2>
            </div>
            <p className="desc">
              밤실 브랜드와 제품 방향에 대해 임시 공개 페이지에서 안내할 수 있는 범위만 간단히 정리했습니다.
            </p>
          </div>
          <div className="qa-list">
            {FAQ.map((item, index) => (
              <details className="qa-item" key={item.q} open={index === 0}>
                <summary>
                  <span className="q-num">Q{String(index + 1).padStart(2, "0")}</span>
                  <span className="q-text">{item.q}</span>
                  <span className="q-icon" aria-hidden="true"><IconPlus/></span>
                </summary>
                <div className="answer">
                  <span className="marker">A.</span>{item.a}
                </div>
              </details>
            ))}
          </div>
          <div className="qa-footer">
            추가 문의는 <a href="mailto:contact@bamsil.com">contact@bamsil.com</a> 으로 보내 주세요.
          </div>
        </div>
      </section>

      <BrandDivider />

      <section className="block" id="contact" data-screen-label="10 Contact">
        <div className="container">
          <div className="cta-block">
            <div className="inner">
              <div>
                <div className="kicker">07 / Contact</div>
                <h2>제품 문의와 파트너십 문의를 받고 있습니다.</h2>
                <p>
                  EMS 스태퍼, 두피/피부 성분 흡수 보조 디바이스, 홈 헬스케어 협업과 관련한 문의를 남겨 주세요.
                  담당자가 확인 후 회신드리겠습니다.
                </p>
                <div style={{ display: "flex", gap: 32, marginTop: 40, flexWrap: "wrap" }}>
                  <div>
                    <div className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.08em" }}>EMAIL</div>
                    <div style={{ marginTop: 6, fontSize: 16 }}>contact@bamsil.com</div>
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.08em" }}>BRAND</div>
                    <div style={{ marginTop: 6, fontSize: 15, maxWidth: 280, lineHeight: 1.5 }}>BAMSIL<br />Home Healthcare</div>
                  </div>
                </div>
                <div style={{ marginTop: 32 }}>
                  <SnsLinks onDark />
                </div>
              </div>

              <form className="cta-form" onSubmit={(event) => { event.preventDefault(); setSubmitted(true); }}>
                <div className="field">
                  <label>이름 / 소속</label>
                  <input type="text" placeholder="성함 / 회사명" required />
                </div>
                <div className="field">
                  <label>이메일</label>
                  <input type="email" placeholder="you@company.com" required />
                </div>
                <div className="field">
                  <label>문의 유형</label>
                  <select defaultValue="">
                    <option value="" disabled>선택해 주세요</option>
                    <option>제품 문의</option>
                    <option>파트너십 문의</option>
                    <option>유통/협업 문의</option>
                    <option>미디어 문의</option>
                  </select>
                </div>
                <button type="submit">
                  {submitted ? "문의가 접수되었습니다" : <>문의 보내기 <span className="arrow">→</span></>}
                </button>
                <div className="ok">제출 시 문의 확인을 위한 연락에 동의한 것으로 간주합니다.</div>
              </form>
            </div>
          </div>
        </div>
      </section>

      <footer>
        <div className="container">
          <div className="grid">
            <div className="brand-col">
              <Wordmark sub={false} size={16} />
              <p>주식회사 밤실<br />당뇨 환자와 노년층의 생활 건강관리를 돕는 홈 헬스케어 브랜드<br />contact@bamsil.com · www.bamsil.com</p>
              <div style={{ marginTop: 20 }}><SnsLinks /></div>
            </div>
            <div>
              <h4>Product</h4>
              <ul>
                <li><a href="#product-ems">EMS 스태퍼</a></li>
                <li><a href="#product-absorption">성분 흡수 보조 디바이스</a></li>
              </ul>
            </div>
            <div>
              <h4>Brand</h4>
              <ul>
                <li><a href="#problem">문제 정의</a></li>
                <li><a href="#foundation">브랜드 기반</a></li>
                <li><a href="#research">사용성 연구</a></li>
              </ul>
            </div>
            <div>
              <h4>Contact</h4>
              <ul>
                <li><a href="#contact">제품 문의</a></li>
                <li><a href="#contact">파트너십 문의</a></li>
                <li><a href="#qa">FAQ</a></li>
              </ul>
            </div>
          </div>
          <div className="legal">
            <span>© 2026 BAMSIL INC. ALL RIGHTS RESERVED.</span>
            <span>HOME HEALTHCARE BRAND</span>
          </div>
        </div>
      </footer>

      <window.TweaksPanel title="Tweaks · BAMSIL">
        <window.TweakSection title="Layout">
          <window.TweakToggle label="상단 방향성 바 표시" value={tweaks.showImpactBar} onChange={(value) => setTweak("showImpactBar", value)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);