// startup-sections.jsx — 교육 & 가맹안내 · 창업안내 page. Uses STARTUP (startup-data).

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

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

/* 1. 다크 히어로 밴드 */
function SuHero() {
  const h = STARTUP.hero;
  return (
    <section className="su-hero" data-screen-label="startup-hero">
      <div className="tl-wrap su-hero-in">
        <p className="su-hero-kicker">{h.kicker}</p>
        <h1 className="su-hero-title">{h.title}</h1>
        <div className="su-hero-body">
          {h.lines.map((l, i) => <p key={i}>{l}</p>)}
        </div>
      </div>
    </section>
  );
}

/* 2. Habit — serif brand left copy + photo right */
function SuHabit() {
  const d = STARTUP.habit;
  return (
    <section className="tl-section" data-screen-label="startup-habit">
      <div className="tl-wrap ed-split">
        <div className="ed-split-copy">
          <h2 className="ed-brand">{d.brand}</h2>
          <p className="su-h2">{sunl(d.title)}</p>
          <p className="ed-bold ed-bold--mt">{d.sub}</p>
          <p className="ed-p">{d.para}</p>
        </div>
        <div className="ed-split-media"><img src={d.img} alt="틴트라이프와 함께 성공의 습관" /></div>
      </div>
    </section>
  );
}

/* 3. Challenge — heading, then photo left + serif Challenge + bullets right */
function SuChallenge() {
  const d = STARTUP.challenge;
  return (
    <section className="tl-section su-challenge" data-screen-label="startup-challenge">
      <div className="tl-wrap">
        <h2 className="su-challenge-head">{d.heading}</h2>
        <div className="ed-split su-challenge-split">
          <div className="ed-split-media"><img src={d.img} alt="도전" /></div>
          <div className="ed-split-copy">
            <h3 className="ed-brand">{d.brand}</h3>
            <p className="ed-p">{d.para}</p>
            <ul className="su-bullets">
              {d.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* 4. 창업절차 — vertical timeline, alternating sides */
function SuProcess() {
  const p = STARTUP.process;
  return (
    <section className="tl-section tl-section--soft su-process" data-screen-label="startup-process">
      <div className="tl-wrap tl-center">
        <h2 className="su-sec-title">{p.title}</h2>
        <p className="su-sec-sub">{p.sub}</p>
        <p className="su-sec-desc">{p.desc}</p>
      </div>
      <div className="tl-wrap su-time">
        <span className="su-time-spine" aria-hidden="true"></span>
        {p.steps.map((s, i) => (
          <div key={i} className={"su-step" + (i % 2 === 0 ? " su-step--right" : " su-step--left")}>
            <div className="su-step-text">
              <h3 className="su-step-title">{s.title}</h3>
              <p className="su-step-body">{s.body}</p>
            </div>
            <span className="su-step-badge">{s.no}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* 5. 창업비용 알아보기 — photo left + two heading/para blocks right */
function SuCostIntro() {
  const c = STARTUP.costIntro;
  return (
    <section className="tl-section su-cost" data-screen-label="startup-cost-intro">
      <div className="tl-wrap tl-center">
        <h2 className="su-sec-title">{c.title}</h2>
        <p className="su-sec-sub">{c.sub}</p>
      </div>
      <div className="tl-wrap ed-split su-cost-split">
        <div className="ed-split-media su-cost-media"><img src={c.img} alt="Cost of brand value" /></div>
        <div className="ed-split-copy">
          {c.blocks.map((b, i) => (
            <div key={i} className="su-cost-block">
              <p className="ed-bold">{b.head}</p>
              <p className="ed-p">{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 6. 가맹비를 제안드립니다 — standard fee table */
function SuFee() {
  const f = STARTUP.fee;
  return (
    <section className="tl-section su-fee" data-screen-label="startup-fee">
      <div className="tl-wrap tl-center">
        <h2 className="su-sec-title">{f.title}</h2>
        <p className="su-sec-sub">{f.sub}</p>
      </div>
      <div className="tl-wrap">
        <p className="su-fee-note">{f.note}</p>
        <table className="su-table su-table--fee">
          <thead>
            <tr>{f.cols.map((c, i) => <th key={i} className={i === 0 ? "su-c1" : i === 2 ? "su-c3" : ""}>{c}</th>)}</tr>
          </thead>
          <tbody>
            {f.rows.map((r, i) => (
              <tr key={i}>
                <th scope="row">{r[0]}</th>
                <td>{r[1]}</td>
                <td className="su-num">{r[2]}</td>
              </tr>
            ))}
            <tr className="su-row-total">
              <th scope="row">{f.total[0]}</th>
              <td>{f.total[1]}</td>
              <td className="su-num">{f.total[2]}</td>
            </tr>
          </tbody>
        </table>
        <p className="su-fee-foot">{f.foot}</p>
      </div>
    </section>
  );
}

/* 7. Special Offer — promotional discount table */
function SuOffer() {
  const o = STARTUP.offer;
  return (
    <section id="special-offer" className="tl-section su-offer" data-screen-label="startup-offer" style={{ scrollMarginTop: "100px" }}>
      <div className="tl-wrap">
        <h2 className="su-offer-brand">{o.brand}</h2>
        <p className="su-offer-head"><span className="su-offer-accent">{o.headLead}</span>{o.headRest}</p>
        <p className="su-offer-hl">{o.highlight}</p>
        <p className="su-offer-sub">{o.sub}</p>

        <div className="su-table-scroll">
          <table className="su-table su-table--offer">
            <thead>
              <tr>
                <th className="su-c1">{o.cols[0]}</th>
                <th className="su-num">{o.cols[1]}</th>
                <th className="su-num su-col-hl">{o.cols[2]}</th>
                <th>{o.cols[3]}</th>
              </tr>
            </thead>
            <tbody>
              {o.rows.map((r, i) => (
                <tr key={i}>
                  <th scope="row">{r[0]}</th>
                  <td className="su-num su-strike">{r[1]}</td>
                  <td className="su-num su-col-hl su-hl-price">{r[2]}</td>
                  <td className="su-incl">{r[3]}</td>
                </tr>
              ))}
              <tr className="su-row-subtotal">
                <th scope="row">{o.subtotal[0]}</th>
                <td className="su-num su-strike">{o.subtotal[1]}</td>
                <td className="su-num su-col-hl su-hl-price">{o.subtotal[2]}</td>
                <td className="su-incl">{o.subtotal[3]}</td>
              </tr>
            </tbody>
            <tbody className="su-tbody-gap">
              <tr className="su-row-royalty">
                <th scope="row">{o.royalty[0]}</th>
                <td className="su-num">{o.royalty[1]}</td>
                <td className="su-num su-col-hl su-hl-price">{o.royalty[2]}</td>
                <td className="su-incl">{o.royalty[3]}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <ul className="su-offer-notes">
          {o.notes.map((n, i) => <li key={i}>{n}</li>)}
        </ul>
      </div>
    </section>
  );
}

function SuCta() {
  const c = STARTUP.cta;
  return (
    <section className="ed-cta-band" data-screen-label="startup-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 Startup() {
  return (
    <React.Fragment>
      <SuTabs />
      <SuHero />
      <SuChallenge />
      <SuProcess />
      <SuCostIntro />
      <SuOffer />
    </React.Fragment>
  );
}

window.Startup = Startup;