// special-sections.jsx — 교육 & 가맹안내 · 특별한것 page. Uses SPECIAL (special-data).

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

function SpTabs() {
  return (
    <nav className="ed-tabs">
      <div className="tl-wrap ed-tabs-in">
        {SPECIAL.tabs.map((t) => (
          <a key={t.label} href={t.href} className={"ed-tab" + (t.active ? " is-active" : "")}>{t.label}</a>
        ))}
      </div>
    </nav>
  );
}

/* generic split: image + copy. side = "left" puts image left. */
function SpSplit({ data, side, mono, serif, lg, children }) {
  const copy = (
    <div className="ed-split-copy">
      {serif
        ? <h2 className="ed-brand">{data.brand}</h2>
        : <h2 className={"ed-h2" + (lg ? " ed-h2--lg" : "")}>{spnl(data.title)}</h2>}
      <p className="ed-bold ed-bold--mt">{data.sub}</p>
      {data.para && <p className="ed-p">{data.para}</p>}
      {data.paras && data.paras.map((p, i) => <p key={i} className="ed-p">{p}</p>)}
      {data.note && <p className="sp-note">{data.note}</p>}
      {children}
    </div>
  );
  const media = <div className="ed-split-media"><img src={data.img} alt="" /></div>;
  return (
    <section className="tl-section">
      <div className={"tl-wrap ed-split" + (side === "left" ? "" : " ed-split--rev")}>
        {side === "left" ? <React.Fragment>{media}{copy}</React.Fragment>
                         : <React.Fragment>{copy}{media}</React.Fragment>}
      </div>
    </section>
  );
}

/* full-width atmospheric B&W image bands */
function SpBands() {
  return (
    <section className="sp-bands">
      <div className="tl-wrap sp-bands-in">
        {SPECIAL.bands.map((b, i) => (
          <figure key={i} className="sp-band"><img src={b.img} alt={b.alt} /></figure>
        ))}
      </div>
    </section>
  );
}

function SpRevisit() {
  const r = SPECIAL.revisit;
  return (
    <section className="tl-section">
      <div className="tl-wrap ed-split">
        <div className="ed-split-copy">
          <h2 className="ed-h2">{spnl(r.title)}</h2>
          <p className="ed-bold ed-bold--mt">{r.sub}</p>
          <p className="ed-p">{r.para}</p>
          <div className="sp-quotes">
            {r.quotes.map((q, i) => <p key={i} className="sp-quote">{q}</p>)}
          </div>
          <p className="ed-bold sp-review-note">{r.reviewNote}</p>
          <a className="sp-review-btn" href={r.btnHref} target="_blank" rel="noreferrer">{r.btn}</a>
        </div>
        <div className="ed-split-media"><img src={r.img} alt="고객 후기" /></div>
      </div>
    </section>
  );
}

function SpCta() {
  const c = SPECIAL.cta;
  return (
    <section className="ed-cta-band" data-screen-label="special-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 Special() {
  return (
    <React.Fragment>
      <SpTabs />
      <div className="sp-top" data-screen-label="special-top">
        <SpSplit data={SPECIAL.design} side="left" />
      </div>
      <SpBands />
      <SpSplit data={SPECIAL.data} side="left" />
      <SpSplit data={SPECIAL.viewpoint} side="right" serif />
      <SpSplit data={SPECIAL.marketing} side="left" />
      <SpSplit data={SPECIAL.digilog} side="right" />
      <SpRevisit />
      <SpSplit data={SPECIAL.space} side="right" />
      <SpSplit data={SPECIAL.listen} side="left" />
    </React.Fragment>
  );
}

window.Special = Special;