/* global React, ReactDOM */
function PortsApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  const ports = [
    { code: "LPA", name: "Las Palmas de G.C.", lat: "28.1", lon: "-15.4", note: lang==="en" ? "HQ · Cruise & offshore" : "Sede · Cruise & offshore", live: true },
    { code: "TFE", name: "Santa Cruz de Tenerife", lat: "28.4", lon: "-16.2", note: "Cruise" },
    { code: "BCN", name: "Barcelona", lat: "41.3", lon: "2.2", note: "Container · cruise · ferry", live: true },
    { code: "VLC", name: "Valencia", lat: "39.4", lon: "-0.3", note: "Container · RoRo", live: true },
    { code: "ALG", name: "Algeciras", lat: "36.1", lon: "-5.4", note: "Bunkering · transhipment", live: true },
    { code: "BIO", name: "Bilbao", lat: "43.3", lon: "-3.0", note: "RoRo · breakbulk" },
    { code: "TRG", name: "Tarragona", lat: "41.1", lon: "1.2", note: "Bulk · chemical" },
    { code: "CTG", name: "Cartagena", lat: "37.6", lon: "-1.0", note: "Bulk · cruise" },
    { code: "VGO", name: "Vigo", lat: "42.2", lon: "-8.7", note: lang==="en" ? "Reefer · fishing" : "Refrigerados · pesca" },
    { code: "MLG", name: "Málaga", lat: "36.7", lon: "-4.4", note: "Cruise" },
    { code: "CAD", name: "Cádiz", lat: "36.5", lon: "-6.3", note: "Cruise · ferry" },
    { code: "HUV", name: "Huelva", lat: "37.3", lon: "-6.9", note: "Bulk · chemical" },
    { code: "FER", name: "Ferrol", lat: "43.5", lon: "-8.2", note: lang==="en" ? "Naval" : "Naval" },
    { code: "GIJ", name: "Gijón", lat: "43.5", lon: "-5.7", note: "Bulk" },
    { code: "CST", name: "Castellón", lat: "39.9", lon: "0.0", note: "Container · bulk" },
  ];

  return (
    <>
      <Header active="ports" t={t} lang={lang} setLang={setLang} />
      <section className="page-head">
        <div className="container">
          <div className="crumbs"><a href="home.html">{t.common.home}</a><span className="sep">/</span><span>{t.nav.ports}</span></div>
          <h1>{lang==="en" ? <>All of Spain.<br/><em>The world, through partners.</em></> : <>Toda España.<br/><em>El mundo, a través de socios.</em></>}</h1>
          <p className="lede">{t.ports_section.lede}</p>
        </div>
      </section>

      <section className="s ports">
        <div className="container">
          <div className="ports-layout reveal" style={{gridTemplateColumns: "1.4fr 1fr"}}>
            <div className="map-wrap" style={{aspectRatio:"4/3"}}>
              <SpainMap />
            </div>
            <div>
              <h3 className="display" style={{fontSize: 32, marginBottom: 24}}>{lang==="en" ? "Direct coverage" : "Cobertura directa"}</h3>
              <div className="port-list">
                {ports.map(p => (
                  <div key={p.code} className="port" style={{gridTemplateColumns:"36px 1fr 1fr auto"}}>
                    <span className="code">{p.code}</span>
                    <span className="name">{p.name}</span>
                    <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:"0.1em", textTransform:"uppercase"}}>{p.note}</span>
                    <span className="badges">
                      {p.live && <span className="badge live">24/7</span>}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="s" style={{background:"var(--navy-900)", color:"white"}}>
        <div className="container">
          <div className="s-head reveal" style={{borderBottomColor:"rgba(255,255,255,0.15)"}}>
            <div>
              <span className="num" style={{color:"var(--copper-500)"}}>{lang==="en" ? "02 — Correspondent network" : "02 — Red corresponsal"}</span>
              <h2 className="display" style={{color:"white"}}>240+ {lang==="en"?"ports":"puertos"}.<br/><em style={{fontStyle:"italic", color:"var(--copper-500)"}}>{lang==="en"?"One single point of contact.":"Un solo punto de contacto."}</em></h2>
            </div>
            <p className="lede" style={{color:"rgba(255,255,255,0.7)"}}>{lang==="en" ? "When your vessel docks outside our direct network, our team coordinates the operation with annually-audited correspondents — you keep talking to us." : "Cuando su buque atraca fuera de nuestra red directa, nuestro equipo coordina la operación con corresponsales auditados anualmente — usted sigue hablando con nosotros."}</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:40, marginTop: 60}} className="reveal">
            {[
              { region: lang==="en" ? "Mediterranean" : "Mediterráneo", count: 68, ports: lang==="en" ? "Marseille · Genoa · Piraeus · Istanbul · Alexandria · Haifa" : "Marsella · Génova · Pireo · Estambul · Alejandría · Hayfa" },
              { region: lang==="en" ? "North Atlantic" : "Atlántico Norte", count: 54, ports: lang==="en" ? "Hamburg · Rotterdam · Antwerp · Felixstowe · Le Havre" : "Hamburgo · Rotterdam · Amberes · Felixstowe · Le Havre" },
              { region: lang==="en" ? "Latam & Caribbean" : "Latam & Caribe", count: 41, ports: lang==="en" ? "Veracruz · Cartagena · Buenos Aires · Santos · Guayaquil" : "Veracruz · Cartagena · Buenos Aires · Santos · Guayaquil" },
              { region: lang==="en" ? "Asia & ME" : "Asia & ME", count: 78, ports: lang==="en" ? "Singapore · Shanghai · Jebel Ali · Yokohama · Tanjung" : "Singapur · Shanghai · Jebel Ali · Yokohama · Tanjung" }
            ].map(r => (
              <div key={r.region} style={{borderTop:"1px solid rgba(255,255,255,0.2)", paddingTop: 24}}>
                <div style={{fontFamily:"var(--display)", fontSize: 56, fontStyle:"italic", lineHeight: 1, color:"var(--copper-500)"}}>{r.count}</div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"rgba(255,255,255,0.6)", marginTop: 10}}>{r.region}</div>
                <p style={{fontSize:13, color:"rgba(255,255,255,0.6)", marginTop: 16, lineHeight:1.5}}>{r.ports}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer t={t} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<PortsApp />);