// brand-sections.jsx — /brand page sections. Uses BRAND (brand-data), Button + Icon (home).

function BrHero() {
  const h = BRAND.hero;
  return (
    <section className="br-hero" data-screen-label="brand-hero">
      <img className="br-hero-img" src={h.bg} alt="틴트라이프 제품" />
      <span className="br-hero-scrim"></span>
      <div className="tl-wrap br-hero-in">
        <div className="br-hero-copy">
          <h1 className="br-hero-title">{h.title}</h1>
          <p className="br-hero-sub">{h.sub1}<br />{h.sub2}</p>
        </div>
      </div>
    </section>
  );
}

function BrIntro() {
  const d = BRAND.intro;
  return (
    <section className="tl-section br-intro">
      <div className="tl-wrap tl-center">
        <img className="br-intro-logo" src={d.logo} alt="TINTLIFE 로고" />
        <div className="br-intro-body">
          {d.paras.map((p, i) => <p key={i} className="br-intro-p">{p}</p>)}
        </div>
        <p className="br-intro-tm">{d.trademark}</p>
      </div>
    </section>
  );
}

function BrMosaic() {
  return (
    <section className="br-mosaic-sec">
      <div className="tl-wrap">
        <div className="br-mosaic">
          {BRAND.mosaic.map((m, i) => (
            <div key={i} className={"br-tile br-tile--" + m.span}>
              <img src={m.img} alt="" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BrStory() {
  const s = BRAND.story;
  return (
    <section className="br-story" data-screen-label="brand-story">
      <div className="tl-wrap br-story-in">
        <div className="br-story-media">
          <img src={s.img} alt="아프로디테의 탄생" />
        </div>
        <div className="br-story-copy">
          <span className="br-kicker">{s.kicker}</span>
          <h2 className="br-story-title">{s.title}</h2>
          {s.paras.map((p, i) => <p key={i} className="br-story-p">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

function BrBeauty() {
  const b = BRAND.beauty;
  return (
    <section className="tl-section br-beauty">
      <div className="tl-wrap tl-center">
        <h2 className="br-beauty-title">{b.title}</h2>
        <img className="br-beauty-strip" src={b.strip} alt="Beauty & Healthy life" />
      </div>
    </section>
  );
}

function BrNow() {
  const n = BRAND.nowHere;
  return (
    <section className="tl-section br-now">
      <div className="tl-wrap br-now-in">
        <div className="br-now-media"><img src={n.img} alt="틴트라이프 매장" /></div>
        <div className="br-now-copy">
          <h2 className="br-now-title">{n.title}</h2>
          {n.paras.map((p, i) => <p key={i} className="br-now-p">{p}</p>)}
        </div>
      </div>
    </section>
  );
}

function BrCards() {
  return (
    <section className="br-cards">
      <div className="tl-wrap">
        {BRAND.cards.map((c, i) => (
          <div key={i} className={"br-card br-card--" + c.side}>
            <div className="br-card-media"><img src={c.img} alt="" /></div>
            <div className="br-card-text">
              <h3 className="br-card-title">{c.title}</h3>
              <p className="br-card-body">{c.body}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

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

function Brand() {
  return (
    <React.Fragment>
      <BrHero />
      <BrIntro />
      <BrMosaic />
      <BrStory />
      <BrBeauty />
      <BrNow />
      <BrCards />
      <BrJoin />
    </React.Fragment>
  );
}

window.Brand = Brand;