// Veloen Jewelry — 8 Sections (Hero + Intro + 5 Steps + Signature Mood)

function Hero({ onJump }) {
  return (
    <section className="hero veloen-hero" id="hero">
      <div className="container inner" style={{ textAlign: "center" }}>
        <div className="meta" style={{ justifyContent: "center" }}>
          <span className="rule"></span>
          <span className="lbl">PREMIUM JEWELRY MANUFACTURING</span>
          <span className="rule"></span>
        </div>
        <h1 className="serif" style={{ fontFamily: "var(--font-serif)", fontWeight: 500, letterSpacing: "0.04em" }}>Veloen Jewelry</h1>
        <p className="serif" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--gold)", fontSize: "clamp(18px, 2vw, 24px)", marginTop: 8 }}>
          섬세한 디테일과 높은 완성도를 추구하는<br/>주얼리 제작 전문 브랜드
        </p>
        <div className="veloen-hero-copy" style={{ maxWidth: 720, margin: "48px auto 0", color: "var(--fg-2)", lineHeight: 1.9, fontSize: 16 }}>
          <p>벨로엔은 다양한 주얼리 제품을<br/>정교한 공정과 세밀한 디테일을 바탕으로 제작합니다.</p>
          <p style={{ marginTop: 24 }}>디자인의 분위기와 실루엣,<br/>착용 시의 밸런스와 디테일까지 고려하여<br/>높은 완성도의 결과물을 완성합니다.</p>
          <p style={{ marginTop: 24 }}>단순히 형태만 구현하는 제작이 아닌,<br/>제품이 가진 분위기와 감성까지<br/>섬세하게 표현하는 것을 중요하게 생각합니다.</p>
        </div>
        <div className="actions" style={{ justifyContent: "center", marginTop: 48 }}>
          <button className="cta-btn" onClick={() => window.dispatchEvent(new CustomEvent("open-inquiry"))}>제작 문의하기</button>
          <button className="cta-btn" onClick={() => onJump("crafted")} style={{ background: "transparent", color: "var(--gold)" }}>제작 공정 보기</button>
        </div>
      </div>
      <div className="scroll">SCROLL</div>
    </section>
  );
}

function Crafted() {
  return (
    <section className="section veloen-section" id="crafted">
      <div className="container">
        <div className="eyebrow-row">
          <span className="lbl">02 — PRECISION</span>
          <span className="rule"></span>
          <span className="lbl" style={{ color: "var(--fg-3)" }}>VELOEN PROCESS</span>
        </div>
        <div className="veloen-row">
          <div className="veloen-row-text">
            <h2 className="serif" style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(36px, 4.4vw, 64px)", letterSpacing: "0.02em", margin: "0 0 32px", lineHeight: 1.1 }}>
              Crafted with <em style={{ fontStyle: "italic", color: "var(--gold)" }}>Precision.</em>
            </h2>
            <div style={{ color: "var(--fg-2)", lineHeight: 1.9, fontSize: 16 }}>
              <p>벨로엔의 모든 제작 과정은<br/>높은 퀄리티와 자연스러운 완성도를 위해<br/>체계적인 공정을 기반으로 진행됩니다.</p>
              <p style={{ marginTop: 22 }}>디자인 분석부터 3D 모델링,<br/>디테일 보정, 세공 및 마감 작업까지.</p>
              <p style={{ marginTop: 22 }}>각 공정마다 세밀한 검수 과정을 거쳐<br/>완성도 높은 결과물을 제작합니다.</p>
              <p style={{ marginTop: 22, color: "var(--gold)", fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 19 }}>
                벨로엔은 단순히 ‘비슷하게 만드는 것’이 아닌<br/>착용했을 때 가장 아름다운 밸런스를 고민합니다.
              </p>
            </div>
          </div>
          <div className="veloen-row-img">
            <img src="photos/veloen-2.png" alt="Crafted with Precision"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function VeloenStep({ id, num, eyebrow, title, body, img, reverse }) {
  return (
    <section className="section-tight veloen-section" id={id}>
      <div className="container">
        <div className="eyebrow-row">
          <span className="lbl">{eyebrow}</span>
          <span className="rule"></span>
          <span className="lbl" style={{ color: "var(--fg-3)" }}>VELOEN ATELIER</span>
        </div>
        <div className={"veloen-row " + (reverse ? "reverse" : "")}>
          <div className="veloen-row-text">
            <div className="veloen-stepnum" style={{ fontFamily: "var(--font-mono)", color: "var(--gold)", letterSpacing: "0.24em", fontSize: 13, marginBottom: 14 }}>
              STEP {num}
            </div>
            <h2 className="serif" style={{ fontFamily: "var(--font-kr)", fontWeight: 800, fontSize: "clamp(30px, 3.6vw, 48px)", letterSpacing: "-0.02em", margin: "0 0 32px", lineHeight: 1.15 }}>
              {title}
            </h2>
            <div style={{ color: "var(--fg-2)", lineHeight: 1.9, fontSize: 16 }}>
              {body.map((para, i) => (
                <p key={i} style={i === 0 ? {} : { marginTop: 22 }}>
                  {para.split("\n").map((line, j) => (
                    <React.Fragment key={j}>
                      {line}
                      {j < para.split("\n").length - 1 && <br/>}
                    </React.Fragment>
                  ))}
                </p>
              ))}
            </div>
          </div>
          <div className="veloen-row-img">
            <img src={img} alt={title}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function Step01() {
  return <VeloenStep
    id="step01"
    num="01"
    eyebrow="03 — STEP 01"
    title="디자인 및 디테일 스케치"
    body={[
      "제품의 전체적인 실루엣과 디테일을 분석하여\n벨로엔만의 감성으로 재해석합니다.",
      "곡선의 흐름, 비율, 착용감까지 고려하여\n가장 아름다운 밸런스를 완성합니다."
    ]}
    img="photos/veloen-3.png"
  />;
}

function Step02() {
  return <VeloenStep
    id="step02"
    num="02"
    eyebrow="04 — STEP 02"
    title="3D 모델링 작업"
    body={[
      "정교한 3D 모델링을 통해\n제품의 구조와 디테일을 세밀하게 구현합니다.",
      "작은 디테일까지 정밀하게 보정하며\n완성도를 높이는 과정을 진행합니다."
    ]}
    img="photos/veloen-4.jpg"
    reverse
  />;
}

function Step03() {
  return <VeloenStep
    id="step03"
    num="03"
    eyebrow="05 — STEP 03"
    title="디테일 검수 및 수정"
    body={[
      "모델링 결과물을 여러 차례 검토하며\n착용 시의 분위기와 실루엣을 체크합니다.",
      "미세한 차이까지 세심하게 보완하여\n벨로엔만의 감성을 완성합니다."
    ]}
    img="photos/veloen-5.png"
  />;
}

function Step04() {
  return <VeloenStep
    id="step04"
    num="04"
    eyebrow="06 — STEP 04"
    title="제작 및 세공 공정"
    body={[
      "숙련된 세공 과정을 통해\n정교한 디테일과 완성도를 높입니다.",
      "벨로엔은 높은 퀄리티와 자연스러운 착용감을 위해\n마감 디테일까지 꼼꼼하게 작업합니다."
    ]}
    img="photos/veloen-6.png"
    reverse
  />;
}

function Step05() {
  return <VeloenStep
    id="step05"
    num="05"
    eyebrow="07 — STEP 05"
    title="최종 완성 및 촬영"
    body={[
      "완성된 제품은 최종 검수를 거친 후\n실사 촬영을 진행합니다.",
      "제품 본연의 분위기와 디테일이 가장 아름답게 표현될 수 있도록\n벨로엔만의 무드로 담아냅니다."
    ]}
    img="photos/veloen-7.png"
  />;
}

function SignatureMood() {
  return (
    <section className="section veloen-mood" id="mood">
      <div className="container" style={{ textAlign: "center" }}>
        <div className="eyebrow-row" style={{ justifyContent: "center" }}>
          <span className="rule"></span>
          <span className="lbl">08 — SIGNATURE MOOD</span>
          <span className="rule"></span>
        </div>
        <h2 className="serif" style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(40px, 5vw, 72px)", letterSpacing: "0.06em", margin: "16px 0 48px", lineHeight: 1.1 }}>
          VELOEN <em style={{ fontStyle: "italic", color: "var(--gold)" }}>Signature Mood.</em>
        </h2>
        <div style={{ maxWidth: 680, margin: "0 auto", color: "var(--fg-2)", lineHeight: 2, fontSize: 17 }}>
          <p>벨로엔은 단순한 ‘주얼리’가 아닌<br/>당신만의 분위기를 완성하는 디테일이 됩니다.</p>
          <p style={{ marginTop: 28 }}>매일의 순간 속에서도<br/>자연스럽게 빛날 수 있도록.</p>
          <p style={{ marginTop: 28 }}>당신의 가장 아름다운 무드를 위해<br/>벨로엔이 함께하겠습니다.</p>
          <p style={{ marginTop: 48, fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--gold)", fontSize: "clamp(22px, 2.4vw, 30px)" }}>
            Everyday Mood, Veloen Jewelry.
          </p>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.Crafted = Crafted;
window.Step01 = Step01;
window.Step02 = Step02;
window.Step03 = Step03;
window.Step04 = Step04;
window.Step05 = Step05;
window.SignatureMood = SignatureMood;