/* global React, ReactDOM */
const SUS_COPY = {
  es: {
    crumb: "Inicio",
    hero_eyebrow: "Reporte 2025 · Auditado",
    hero_caption: "Solar rooftop · Las Palmas",
    docs_num: "— Documentos públicos",
    docs_title: "Lo que firmamos.",
    docs_lede: "Todos los documentos están disponibles para clientes, autoridades y prensa. Sin pretextos.",
    stats: [
      { v:"100", u:"%", l:"Energía renovable certificada en oficinas" },
      { v:"-42", u:"%", l:"Emisiones scope 1 vs línea base 2022" },
      { v:"6", u:"", l:"Vehículos eléctricos en flota propia de muelle" },
      { v:"0", u:"", l:"Incidentes de derrames notificables" }
    ],
    docs: [
      { name: "Código de ética y conducta", year:"2025", size:"PDF · 1.4 MB" },
      { name: "Política antisoborno y compliance", year:"2025", size:"PDF · 0.8 MB" },
      { name: "Plan de igualdad certificado", year:"2025", size:"PDF · 1.1 MB" },
      { name: "Reporte de sostenibilidad", year:"2025", size:"PDF · 3.2 MB" },
      { name: "Auditoría externa de emisiones", year:"2025", size:"PDF · 2.6 MB" },
      { name: "Canal de denuncias — guía de uso", year:"2025", size:"PDF · 0.4 MB" }
    ]
  },
  en: {
    crumb: "Home",
    hero_eyebrow: "2025 report · Audited",
    hero_caption: "Solar rooftop · Las Palmas",
    docs_num: "— Public documents",
    docs_title: "What we sign.",
    docs_lede: "All documents are available to clients, authorities and press. No excuses.",
    stats: [
      { v:"100", u:"%", l:"Certified renewable energy in offices" },
      { v:"-42", u:"%", l:"Scope 1 emissions vs 2022 baseline" },
      { v:"6", u:"", l:"Electric vehicles in our own quay fleet" },
      { v:"0", u:"", l:"Reportable spill incidents" }
    ],
    docs: [
      { name: "Code of ethics and conduct", year:"2025", size:"PDF · 1.4 MB" },
      { name: "Anti-bribery and compliance policy", year:"2025", size:"PDF · 0.8 MB" },
      { name: "Certified equality plan", year:"2025", size:"PDF · 1.1 MB" },
      { name: "Sustainability report", year:"2025", size:"PDF · 3.2 MB" },
      { name: "External emissions audit", year:"2025", size:"PDF · 2.6 MB" },
      { name: "Whistleblowing channel — user guide", year:"2025", size:"PDF · 0.4 MB" }
    ]
  }
};

function SustainApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  const c = SUS_COPY[lang];
  return (
    <>
      <Header active="sustain" t={t} lang={lang} setLang={setLang} />
      <section className="page-head">
        <div className="container">
          <div className="crumbs"><a href="home.html">{c.crumb}</a><span className="sep">/</span><span>{t.nav.sustain}</span></div>
          <h1>{t.sustain_section.title_a}<br/><em>{t.sustain_section.title_b}</em></h1>
          <p className="lede">{t.sustain_section.lede}</p>
        </div>
      </section>

      <section style={{padding: "0", marginTop: -40}}>
        <div className="container">
          <div className="figure wide reveal" style={{padding: 0, aspectRatio:"21/9"}}>
            <img src="assets/photos/22-sustain-hero.jpg" alt="Sustainability" style={{width:"100%", height:"100%", objectFit:"cover"}} />
            <div className="figure-caption">{c.hero_caption}</div>
          </div>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid var(--line)"}} className="reveal">
            {t.sustain_pillars.map((p, i) => (
              <div key={p.num} style={{
                padding: 48,
                borderRight: i < 2 ? "1px solid var(--line)" : "none",
                borderBottom:"1px solid var(--line)",
                minHeight: 360
              }}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--accent)", letterSpacing:"0.18em"}}>{p.num}</span>
                <h3 className="display" style={{fontSize: 36, marginTop: 24, marginBottom: 20}}>{p.title}</h3>
                <p style={{color:"var(--ink-2)", fontSize: 16, lineHeight: 1.6}}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="s stats" style={{padding:"110px 0"}}>
        <div className="container stats-inner">
          <span className="eyebrow" style={{color:"rgba(255,255,255,0.6)"}}>{c.hero_eyebrow}</span>
          <div className="stats-grid">
            {c.stats.map((s, i) => (
              <div key={i} className="stat">
                <div className="v">{s.v}{s.u && <span className="unit">{s.u}</span>}</div>
                <div className="l">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div className="s-head reveal">
            <div>
              <span className="num">{c.docs_num}</span>
              <h2 className="display">{c.docs_title}</h2>
            </div>
            <p className="lede">{c.docs_lede}</p>
          </div>
          <div className="reveal">
            {c.docs.map(d => (
              <a key={d.name} href="#" style={{
                display:"grid", gridTemplateColumns:"60px 1fr 1fr 60px", alignItems:"center",
                padding: "28px 0", borderBottom:"1px solid var(--line)",
                gap: 24
              }}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--ink-3)"}}>{d.year}</span>
                <span className="display" style={{fontSize: 22}}>{d.name}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:"0.14em", textTransform:"uppercase"}}>{d.size}</span>
                <span style={{justifySelf:"end", color:"var(--accent)", fontFamily:"var(--mono)", fontSize:12, letterSpacing:"0.12em"}}>↓</span>
              </a>
            ))}
          </div>
        </div>
      </section>

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