// edu-sections.jsx — 교육 & 가맹안내 · 소개 page. Uses EDU (edu-data).
// Mirrors tintlife.co.kr/information.

function nl(s) {
  return s.split("\n").map((l, i, a) => (
    <React.Fragment key={i}>{l}{i < a.length - 1 && <br />}</React.Fragment>
  ));
}

/* sub-nav tabs under the global header */
function EdTabs() {
  return (
    <nav className="ed-tabs">
      <div className="tl-wrap ed-tabs-in">
        {EDU.tabs.map((t) => (
          <a key={t.label} href={t.href} className={"ed-tab" + (t.active ? " is-active" : "")}>{t.label}</a>
        ))}
      </div>
    </nav>
  );
}

/* title block + three lifestyle icons */
function EdTitle() {
  const t = EDU.title;
  return (
    <section className="ed-titleblock" data-screen-label="edu-intro-top">
      <div className="tl-wrap tl-center">
        <p className="ed-tb-note">{t.note}</p>
        <h1 className="ed-tb-head">{t.head}</h1>
        <p className="ed-tb-sub">{t.sub}</p>
        <span className="ed-tb-rule"></span>
        <div className="ed-icons">
          <span className="ed-icon" aria-hidden="true">
            <svg viewBox="0 0 64 64" width="56" height="56"><circle cx="32" cy="32" r="32" fill="#5b3da6"/><path d="M40 18c-3 1-7 4-9 9-1.6 3.8-1.2 7 0 10 1.4 3.4 4 6 4 6s-6 .5-10-2c-2.4-1.5-4-4-4-4 0 6 4 12 11 13.5C45 58 50 50 50 40c0-9-4-18-10-22z" fill="#fff"/><circle cx="36" cy="34" r="6" fill="#5b3da6"/></svg>
          </span>
          <span className="ed-icon" aria-hidden="true">
            <svg viewBox="0 0 64 64" width="52" height="52" fill="none" stroke="#5b3da6" strokeWidth="3.4" strokeLinecap="round"><circle cx="32" cy="32" r="11"/><path d="M32 8v7M32 49v7M8 32h7M49 32h7M15 15l5 5M44 44l5 5M49 15l-5 5M20 44l-5 5"/></svg>
          </span>
          <span className="ed-icon" aria-hidden="true">
            <svg viewBox="0 0 64 64" width="54" height="54" fill="none" stroke="#5b3da6" strokeWidth="3.6" strokeLinejoin="round" strokeLinecap="round"><path d="M32 52S12 39 12 25.5C12 18.6 17.6 13 24.5 13c4.4 0 8.3 2.3 10.5 5.8C37.2 15.3 41 13 45.5 13 52.4 13 58 18.6 58 25.5 58 39 38 52 38 52" transform="translate(-3 0)"/></svg>
          </span>
        </div>
      </div>
    </section>
  );
}

/* 비즈니스 모델 소개 — text left, photo right */
function EdBiz() {
  const b = EDU.biz;
  return (
    <section className="tl-section ed-biz">
      <div className="tl-wrap ed-split">
        <div className="ed-split-copy">
          <span className="ed-kicker">{b.kicker}</span>
          <h2 className="ed-h2">{nl(b.title)}</h2>
          <p className="ed-bold">{b.lead}</p>
          {b.paras.map((p, i) => <p key={i} className="ed-p">{p}</p>)}
        </div>
        <div className="ed-split-media"><img src={b.img} alt="틴트라이프 헤어 염색 시술" /></div>
      </div>
    </section>
  );
}

/* 시장환경 — title left, work-life-cycle right, then two-column body */
function EdMarket() {
  const m = EDU.market;
  return (
    <section className="tl-section ed-market">
      <div className="tl-wrap">
        <div className="ed-market-top">
          <div className="ed-market-title">
            <span className="ed-kicker">{m.kicker}</span>
            <h2 className="ed-h2">{nl(m.title)}</h2>
          </div>
          <figure className="ed-cycle">
            <div className="ed-cycle-row">
              {m.cycle.map((c, i) => (
                <React.Fragment key={i}>
                  <div className="ed-cycle-node">
                    <span className="ed-cycle-dot">{nl(c.label)}</span>
                    {c.sub && <span className="ed-cycle-sub">{c.sub}</span>}
                  </div>
                  {i < m.cycle.length - 1 && <span className="ed-cycle-arrow" aria-hidden="true">›</span>}
                </React.Fragment>
              ))}
            </div>
            <div className="ed-cycle-ages">
              {m.ages.map((a) => <span key={a} className="ed-cycle-age">{a}</span>)}
            </div>
            <figcaption className="ed-cycle-cap">{m.cycleCaption}</figcaption>
          </figure>
        </div>
        <div className="ed-market-cols">
          {m.cols.map((c, i) => (
            <div key={i} className="ed-col">
              <h3 className="ed-bold">{c.head}</h3>
              <p className="ed-p">{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 핵심전략 — Simple & Easy : tools photo left, text right */
function EdSimple() {
  const s = EDU.simple;
  return (
    <section className="tl-section ed-simple">
      <div className="tl-wrap ed-split ed-split--rev">
        <div className="ed-split-media ed-tools"><img src={s.img} alt="염색 도구" /></div>
        <div className="ed-split-copy">
          <span className="ed-kicker">{s.kicker}</span>
          <h2 className="ed-brand">{s.brand}</h2>
          <p className="ed-brand-head">{s.head}</p>
          <p className="ed-bold ed-bold--mt">{s.lead}</p>
          {s.paras.map((p, i) => <p key={i} className="ed-p">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

/* 회사소개 — 스타트업 : text left, B&W photo right */
function EdStartup() {
  const s = EDU.startup;
  return (
    <section className="tl-section ed-startup">
      <div className="tl-wrap ed-split">
        <div className="ed-split-copy">
          <span className="ed-kicker">{s.kicker}</span>
          <h2 className="ed-h2 ed-h2--lg">{s.title}</h2>
          <p className="ed-bold ed-bold--mt">{s.lead}</p>
          {s.paras.map((p, i) => <p key={i} className="ed-p">{p}</p>)}
        </div>
        <div className="ed-split-media ed-startup-media"><img src={s.img} alt="틴트라이프 팀" /></div>
      </div>
    </section>
  );
}

/* 비전과 가치 : photo left (+heart deco), text right */
function EdVision() {
  const v = EDU.vision;
  return (
    <section className="tl-section ed-vision">
      <div className="tl-wrap ed-split ed-split--rev ed-vision-in">
        <div className="ed-split-media ed-vision-media">
          <img src={v.img} alt="건강한 삶" />
          <span className="ed-vision-heart" aria-hidden="true">
            <svg viewBox="0 0 48 44" width="92" height="84"><path d="M24 42S2 28 2 13.5C2 6.6 7.6 1 14.5 1 19 1 23 3.4 24 7c1-3.6 5-6 9.5-6C40.4 1 46 6.6 46 13.5 46 28 24 42 24 42z" fill="#5b3da6"/></svg>
          </span>
        </div>
        <div className="ed-split-copy">
          <span className="ed-kicker">{v.kicker}</span>
          <h2 className="ed-h2">{nl(v.title)}</h2>
          <p className="ed-bold ed-bold--mt">{v.lead}</p>
          {v.paras.map((p, i) => <p key={i} className="ed-p">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

/* 가맹문의 CTA — slate band with white card */
function EdCta() {
  const c = EDU.cta;
  return (
    <section className="ed-cta-band" data-screen-label="edu-cta">
      <div className="ed-cta-card">
        <p className="ed-cta-lines">{c.lines.map((l, i) => <React.Fragment key={i}>{l}{i < c.lines.length - 1 && <br />}</React.Fragment>)}</p>
        <a className="ed-cta-tel" href={"tel:" + c.tel}>{c.tel}</a>
        <p className="ed-cta-note">{c.note}</p>
        <a className="ed-cta-btn" href={c.href}>{c.cta}</a>
      </div>
    </section>
  );
}

function Edu() {
  return (
    <React.Fragment>
      <EdTabs />
      <EdTitle />
      <EdBiz />
      <EdMarket />
      <EdSimple />
      <EdStartup />
      <EdVision />
    </React.Fragment>
  );
}

window.Edu = Edu;