/* global React, ReactDOM */
const SVC_PHOTOS = {
  agency: "assets/photos/08-svc-agency.jpg",
  port: "assets/photos/05-news-feature-marpol.jpg",
  crew: "assets/photos/10-svc-crew.jpg",
  bunker: "assets/photos/11-svc-bunkering.jpg",
  supply: "assets/photos/12-svc-supply.jpg",
  cruise: "assets/photos/13-svc-cruise.jpg",
  logistics: "assets/photos/04-case-bulk-trg.jpg",
  customs: "assets/photos/15-svc-customs.jpg",
  husbandry: "assets/photos/16-svc-husbandry.jpg"
};

function ServicesApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  return (
    <>
      <Header active="services" t={t} lang={lang} setLang={setLang} />
      <section className="page-head" data-screen-label="01 Services Header">
        <div className="container">
          <div className="crumbs"><a href="home.html">{t.common.home}</a><span className="sep">/</span><span>{t.nav.services}</span></div>
          <h1>{lang === "en" ? <>Integrated <em>maritime services.</em></> : <>Servicios <em>marítimos integrales.</em></>}</h1>
          <p className="lede">{t.services_section.lede}</p>
        </div>
      </section>

      <section className="s">
        <div className="container">
          {t.services.map((s, i) => (
            <div key={s.id} id={s.id} style={{
              display:"grid", gridTemplateColumns:"1fr 1.2fr", gap:80, alignItems:"start",
              padding: "80px 0", borderBottom:"1px solid var(--line)"
            }} className="reveal">
              <div>
                <span style={{fontFamily:"var(--mono)", fontSize:12, color:"var(--accent)", letterSpacing:"0.18em"}}>0{i+1} / 0{t.services.length}</span>
                <h2 className="display" style={{fontSize:"clamp(40px, 4vw, 64px)", marginTop: 20, marginBottom: 32}}>{s.name}</h2>
                <div className="figure wide" style={{padding: 0}}>
                  <img src={SVC_PHOTOS[s.id]} alt={s.name} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                </div>
              </div>
              <div style={{position:"sticky", top:120}}>
                <p className="lede" style={{marginBottom: 32}}>{s.desc}</p>
                <div style={{borderTop:"1px solid var(--line)", paddingTop: 24}}>
                  <h4 style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--ink-3)", marginBottom: 16}}>{t.common.includes}</h4>
                  <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:12}}>
                    {(s.bullets || []).map((b, n) => (
                      <li key={n} style={{display:"flex", gap:14, alignItems:"baseline"}}>
                        <span style={{color:"var(--accent)", fontFamily:"var(--mono)", fontSize:11}}>0{n+1}</span>
                        <span style={{fontSize:15, color:"var(--ink-2)", lineHeight: 1.55}}>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <a href="contact.html" className="btn" style={{marginTop: 32}}>{t.common.request_service} <span className="arrow">→</span></a>
              </div>
            </div>
          ))}
        </div>
      </section>
      <Footer t={t} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<ServicesApp />);