// service-sections.jsx — /service page sections. Uses SERVICE (service-data).

function SvHero() {
  const h = SERVICE.hero;
  return (
    <section className="sv-hero" data-screen-label="service-hero">
      <img className="sv-hero-img" src={h.bg} alt="틴트라이프 헤어 염색" />
      <span className="sv-hero-scrim"></span>
      <div className="tl-wrap sv-hero-in">
        <div className="sv-hero-copy">
          <h1 className="sv-hero-title">{h.title}</h1>
          <p className="sv-hero-sub">{h.sub}</p>
        </div>
      </div>
    </section>
  );
}

function SvDye() {
  const d = SERVICE.dye;
  return (
    <section className="sv-dye" data-screen-label="service-dyeing">
      <div className="tl-wrap sv-dye-in">
        <div className="sv-dye-media"><img src={d.img} alt="헤어 염색 시술" /></div>
        <div className="sv-dye-card">
          <span className="sv-kicker">{d.kicker}</span>
          <h2 className="sv-serif">{d.title}</h2>
          <p className="sv-lead">{d.lead}</p>
          <p className="sv-q">{d.q}</p>
          {d.paras.map((p, i) => <p key={i} className="sv-p">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

function SvComplex() {
  const c = SERVICE.complex;
  return (
    <section className="tl-section sv-complex">
      <div className="tl-wrap tl-center">
        <span className="sv-kicker sv-kicker--center">{c.kicker}</span>
        <h2 className="sv-complex-title">{c.title1}<br />{c.title2}</h2>
        <p className="sv-complex-intro">{c.intro}</p>
        <img className="sv-complex-diagram" src={c.diagram} alt="BLUE COMPLEX · 6종 허브 추출물 성분 다이어그램" />
        <div className="sv-complex-foot">
          {c.paras.map((p, i) => <p key={i} className="sv-p sv-p--muted">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

function SvCare() {
  const c = SERVICE.care;
  return (
    <section className="tl-section sv-care">
      <div className="tl-wrap sv-care-in">
        <div className="sv-care-copy">
          <span className="sv-kicker">{c.kicker}</span>
          <h2 className="sv-serif">{c.title}</h2>
          <h3 className="sv-care-head">{c.head.map((l, i) => <React.Fragment key={i}>{l}<br /></React.Fragment>)}</h3>
          <p className="sv-p">{c.para}</p>
          <p className="sv-note">{c.note}</p>
        </div>
        <div className="sv-care-media"><img src={c.img} alt="두피 케어 서비스" /></div>
      </div>
    </section>
  );
}

function SvGccs() {
  const g = SERVICE.gccs;
  return (
    <section className="tl-section sv-gccs">
      <div className="tl-wrap tl-center">
        <img className="sv-gccs-logo" src={g.logo} alt="GCCS · Gray Color Care System" />
      </div>
      <div className="tl-wrap sv-gccs-in">
        <div className="sv-gccs-media"><img src={g.chart} alt="GCCS 3종 컬러 차트" /></div>
        <div className="sv-gccs-copy">
          <h3 className="sv-gccs-head">{g.head}</h3>
          <p className="sv-p">{g.para}</p>
        </div>
      </div>
    </section>
  );
}

function SvIon() {
  const n = SERVICE.ion;
  return (
    <section className="tl-section sv-ion">
      <div className="tl-wrap sv-ion-in">
        <div className="sv-ion-media"><img src={n.img} alt="슈퍼이온 플랙스 시스템 제품" /></div>
        <div className="sv-ion-copy">
          <span className="sv-kicker">{n.kicker}</span>
          <h2 className="sv-serif sv-serif--lg">{n.title}</h2>
          <p className="sv-lead">{n.lead}</p>
          <p className="sv-p">{n.para}</p>
          <p className="sv-points-title">{n.pointsTitle}</p>
          <ul className="sv-points">
            {n.points.map((p, i) => <li key={i}>{p}</li>)}
          </ul>
          <a className="tl-btn tl-btn--line sv-ion-cta" href={n.href} target="_blank" rel="noreferrer">{n.cta}</a>
        </div>
      </div>
    </section>
  );
}

function SvJoin() {
  const j = SERVICE.join;
  return (
    <section className="tl-band tl-band--parallax sv-join" data-screen-label="service-join"
      style={{ backgroundImage: `url(${j.bg})` }}>
      <span className="tl-band-scrim sv-join-scrim"></span>
      <div className="tl-wrap sv-join-in">
        <div className="sv-join-card">
          <h2 className="sv-join-title">{j.title}</h2>
          <a className="sv-join-tel" href={"tel:" + j.tel}>{j.tel}</a>
          <p className="sv-join-addr">{j.addr}</p>
          <p className="sv-join-way">{j.way}</p>
          <p className="sv-join-note">{j.note}</p>
          <a className="tl-btn tl-btn--solid" href={j.href} style={{ marginTop: 18 }}>{j.cta}</a>
        </div>
        <p className="sv-join-aside">{j.aside}</p>
      </div>
    </section>
  );
}

function Service() {
  return (
    <React.Fragment>
      <SvHero />
      <SvDye />
      <SvComplex />
      <SvCare />
      <SvGccs />
      <SvIon />
      <SvJoin />
    </React.Fragment>
  );
}

window.Service = Service;