// eng-sections.jsx — 틴트라이프 · ENGLISH page. Uses ENG (eng-data).
const { useState } = React;

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

function EngHero() {
  return (
    <section className="en-hero" style={{ backgroundImage: `url(${ENG.hero.bg})` }} data-screen-label="eng-hero">
      <div className="en-hero-scrim"></div>
      <h1 className="en-hero-title">{ENG.hero.title}</h1>
    </section>
  );
}

function EngIntro() {
  return (
    <section className="en-intro" data-screen-label="eng-intro">
      <div className="tl-wrap en-intro-in">
        <h2 className="en-intro-head">{ENG.intro.head}</h2>
        <p className="en-intro-body">{ENG.intro.body}</p>
      </div>
    </section>
  );
}

/* generic image + copy split */
function EnSplit({ img, side, head, body }) {
  const media = <div className="en-split-media"><img src={img} alt="TintLife" loading="lazy" /></div>;
  const copy = (
    <div className="en-split-copy">
      <h3 className="en-h3">{ennl(head)}</h3>
      {body && <p className="en-p">{body}</p>}
    </div>
  );
  return (
    <div className={"en-split" + (side === "left" ? "" : " en-split--rev")}>
      {side === "left" ? <React.Fragment>{media}{copy}</React.Fragment> : <React.Fragment>{copy}{media}</React.Fragment>}
    </div>
  );
}

function EngFamous() {
  const f = ENG.famous;
  return (
    <section className="tl-section en-famous" data-screen-label="eng-famous">
      <div className="tl-wrap">
        <h2 className="en-sec-title">{f.title}</h2>
        <div className="en-stack">
          <EnSplit img={f.rows[0].img} side="left" head={f.rows[0].head} body={f.rows[0].body} />
          <figure className="en-logo">
            <img src={f.logo} alt="TINTLIFE" loading="lazy" />
            <figcaption className="en-h3 en-logo-cap">{f.logoHead}</figcaption>
          </figure>
          <EnSplit img={f.venus.img} side="left" head={f.venus.head} body={f.venus.body} />
          <div className="en-closing">
            <h3 className="en-h3">{f.closing.head}</h3>
            <p className="en-p en-p--center">{f.closing.body}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function EngBasic() {
  const b = ENG.basic;
  return (
    <section className="en-basic" data-screen-label="eng-basic">
      <div className="tl-wrap en-basic-in">
        <div className="en-basic-copy">
          <h3 className="en-h3">{b.head}</h3>
          <p className="en-p">{b.body}</p>
        </div>
        <div className="en-basic-media"><img src={b.img} alt="hair coloring" loading="lazy" /></div>
      </div>
    </section>
  );
}

function EngProducts() {
  const p = ENG.products;
  return (
    <section className="en-products" data-screen-label="eng-products">
      <img className="en-products-img" src={p.img} alt="TintLife product line" loading="lazy" />
      <div className="tl-wrap en-products-names">
        {p.names.map((n, i) => <span key={i} className="en-pname">{n}</span>)}
      </div>
    </section>
  );
}

function EngDamage() {
  const d = ENG.damage;
  return (
    <section className="en-damage" data-screen-label="eng-damage">
      <div className="tl-wrap en-damage-in">
        <h2 className="en-damage-head">{d.head}</h2>
        <p className="en-damage-sub">{d.sub}</p>
        <p className="en-damage-body">{d.body}</p>
      </div>
    </section>
  );
}

function EngTrust() {
  const t = ENG.trust;
  return (
    <React.Fragment>
      <section className="en-trust-band" data-screen-label="eng-trust">
        <div className="en-trust-copy">
          <h2 className="en-trust-title">{t.title}</h2>
          <p className="en-trust-sub">{t.sub}</p>
        </div>
        <div className="en-trust-media"><img src={t.img} alt="research lab" loading="lazy" /></div>
      </section>
      <section className="tl-section en-mole">
        <div className="tl-wrap tl-center">
          <img className="en-mole-img" src={t.molecule} alt="ionic bond" loading="lazy" />
          <h3 className="en-h3 en-mole-head">{ennl(t.head)}</h3>
          <p className="en-p en-p--center en-mole-body">{t.body}</p>
          <img className="en-mole-icons" src={t.icons} alt="hair care steps" loading="lazy" />
        </div>
      </section>
    </React.Fragment>
  );
}

function EngBuy() {
  const b = ENG.buy;
  return (
    <section className="en-buy" data-screen-label="eng-buy">
      <div className="tl-wrap tl-center">
        <h2 className="en-buy-title">{b.title}</h2>
        <img className="en-buy-img" src={b.img} alt="TintLife products" loading="lazy" />
        <a className="en-buy-btn" href={b.btnHref} target="_blank" rel="noreferrer">{b.btn}</a>
        <p className="en-buy-note">{b.note}</p>
      </div>
    </section>
  );
}

function EngHow() {
  const h = ENG.how;
  return (
    <section className="tl-section en-how" data-screen-label="eng-how">
      <div className="tl-wrap tl-center">
        <h2 className="en-sec-title">{h.title}</h2>
        <p className="en-p en-p--center en-how-body">{h.body}</p>
        <img className="en-how-img" src={h.img} alt="how to use" loading="lazy" />
      </div>
    </section>
  );
}

function EngGallery() {
  const g = ENG.gallery;
  return (
    <section className="en-gallery" data-screen-label="eng-gallery">
      <div className="tl-wrap">
        <h2 className="en-sec-title en-gallery-title">{g.title}</h2>
        <div className="en-grid">
          {g.imgs.map((src, i) => (
            <figure key={i} className="en-grid-cell"><img src={src} alt="TintLife" loading="lazy" /></figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function EngContact() {
  const c = ENG.contact;
  const [sent, setSent] = useState(false);
  return (
    <section className="en-contact" data-screen-label="eng-contact">
      <div className="tl-wrap en-contact-in">
        <h2 className="en-sec-title">{c.title}</h2>
        <p className="en-p en-p--center en-contact-sub">{c.sub}</p>
        <div className="en-flags">
          {c.flags.map((src, i) => <img key={i} src={src} alt="flag" loading="lazy" />)}
        </div>
        <form className="en-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div className="en-form-row">
            <label className="en-field"><span>Name</span><input type="text" name="name" /></label>
            <label className="en-field"><span>Email</span><input type="email" name="email" /></label>
          </div>
          <label className="en-field"><span>Message</span><textarea name="message" rows="4"></textarea></label>
          <button type="submit" className="en-form-btn">{sent ? "Thanks for submitting!" : "Send"}</button>
        </form>
      </div>
    </section>
  );
}

function Eng() {
  return (
    <React.Fragment>
      <EngHero />
      <EngIntro />
      <EngFamous />
      <EngBasic />
      <EngProducts />
      <EngDamage />
      <EngTrust />
      <EngBuy />
      <EngHow />
      <EngGallery />
      <EngContact />
    </React.Fragment>
  );
}

window.Eng = Eng;