/* global React, ReactDOM */
const TEAM_PHOTOS = [
  "assets/photos/18-team-carlos.jpg",
  "assets/photos/19-team-marta.jpg",
  "assets/photos/20-team-ignacio.jpg",
  "assets/photos/21-team-lucia.jpg"
];

const ABOUT_COPY = {
  es: {
    crumb: "Inicio",
    title_a: "Pequeños por elección.",
    title_b: "Senior por convicción.",
    lede: "Un equipo de quince personas, todas con más de una década en agencias marítimas, que decidió montar la suya. Sin capas innecesarias, sin departamentos opacos, sin call-centers. Cuando llama, le contesta quien decide.",
    history_eyebrow: "Historia",
    history_title: "Una escisión, una promesa.",
    history_p1: "Nacimos en 2024 como escisión de una de las consignatarias históricas del Atlántico medio. Nos llevamos lo que funcionaba — los clientes, el conocimiento, la disciplina operativa — y dejamos atrás lo que no — la burocracia, la jerarquía, los procesos pensados para gestores y no para buques.",
    history_p2: "Hoy operamos como una agencia de tamaño medio con la agilidad de una pequeña. Un cliente, un agente. Una operación, una factura. Una llamada, una respuesta.",
    principles_num: "— Principios",
    principles_title: "Cómo operamos.",
    principles_lede: "No tenemos un manual de marca. Tenemos seis principios y los aplicamos a todo.",
    principles: [
      { n:"01", t:"Una sola voz", d:"Un agente lleva su escala de principio a fin. No tenemos transferencias de email." },
      { n:"02", t:"Discreción", d:"Lo que pasa en muelle se queda en muelle. Aplica a tarifas, calendarios y discusiones técnicas." },
      { n:"03", t:"Precio honesto", d:"Una factura, sin sobrecargos opacos. Si subimos el precio, le explicamos por qué." },
      { n:"04", t:"24/7 real", d:"El número que figura en la web es el número de la guardia. No un buzón corporativo." },
      { n:"05", t:"Escala humana", d:"No vamos a crecer si crecer significa empeorar el servicio. Lo hemos firmado por escrito." },
      { n:"06", t:"Cumplimiento", d:"Auditados anualmente. Política antisoborno explícita. Canal de denuncias externo." }
    ]
  },
  en: {
    crumb: "Home",
    title_a: "Small by choice.",
    title_b: "Senior by conviction.",
    lede: "A team of fifteen people, all with more than a decade in shipping agencies, who decided to build their own. No unnecessary layers, no opaque departments, no call centres. When you call, the person who decides answers.",
    history_eyebrow: "History",
    history_title: "A spin-off, a promise.",
    history_p1: "We were born in 2024 as a spin-off from one of the historical agencies of the mid-Atlantic. We took what worked — the clients, the knowledge, the operational discipline — and left behind what didn't: the bureaucracy, the hierarchy, processes designed for managers rather than vessels.",
    history_p2: "Today we operate as a mid-sized agency with the agility of a small one. One client, one agent. One operation, one invoice. One call, one answer.",
    principles_num: "— Principles",
    principles_title: "How we operate.",
    principles_lede: "We don't have a brand manual. We have six principles and we apply them to everything.",
    principles: [
      { n:"01", t:"One voice", d:"One agent runs your port call from start to finish. No email handovers." },
      { n:"02", t:"Discretion", d:"What happens at the quay stays at the quay. Applies to rates, schedules and technical discussions." },
      { n:"03", t:"Honest pricing", d:"One invoice, no opaque surcharges. If we raise the price, we explain why." },
      { n:"04", t:"Real 24/7", d:"The number on this site is the duty officer's. Not a corporate inbox." },
      { n:"05", t:"Human scale", d:"We won't grow if growing means worse service. It is written in our charter." },
      { n:"06", t:"Compliance", d:"Audited annually. Explicit anti-bribery policy. Independent whistleblowing channel." }
    ]
  }
};

function AboutApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  const c = ABOUT_COPY[lang];
  return (
    <>
      <Header active="about" 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.about}</span></div>
          <h1>{c.title_a}<br/><em>{c.title_b}</em></h1>
          <p className="lede">{c.lede}</p>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:80, alignItems:"start"}}>
            <div className="reveal">
              <div className="figure tall" style={{padding:0}}>
                <img src="assets/photos/17-founders-group.jpg" alt="Founders" style={{width:"100%", height:"100%", objectFit:"cover"}} />
                <div className="figure-caption">FOUNDERS · 2024</div>
              </div>
            </div>
            <div className="reveal" style={{position:"sticky", top:120}}>
              <span className="eyebrow">{c.history_eyebrow}</span>
              <h2 className="display" style={{marginTop: 20, marginBottom: 28}}>{c.history_title}</h2>
              <p style={{color:"var(--ink-2)", fontSize:17, lineHeight:1.65, marginBottom: 20}}>{c.history_p1}</p>
              <p style={{color:"var(--ink-2)", fontSize:17, lineHeight:1.65}}>{c.history_p2}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="s" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <div className="s-head reveal">
            <div>
              <span className="num">{t.team_section.num}</span>
              <h2 className="display">{t.team_section.title_a}<br/><em style={{fontStyle:"italic", color:"var(--accent)"}}>{t.team_section.title_b}</em></h2>
            </div>
            <p className="lede">{t.team_section.lede}</p>
          </div>
          <div className="team-grid reveal">
            {t.team.map((m, i) => (
              <div key={i} className="member">
                <div className="figure tall" style={{padding:0}}>
                  <img src={TEAM_PHOTOS[i]} alt={m.name} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                </div>
                <div className="name">{m.name}</div>
                <div className="role">{m.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div className="s-head reveal">
            <div>
              <span className="num">{c.principles_num}</span>
              <h2 className="display">{c.principles_title}</h2>
            </div>
            <p className="lede">{c.principles_lede}</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", borderTop:"1px solid var(--line)"}} className="reveal">
            {c.principles.map(p => (
              <div key={p.n} style={{
                borderBottom:"1px solid var(--line)",
                borderRight:"1px solid var(--line)",
                padding: 36, minHeight: 200
              }}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--accent)", letterSpacing:"0.18em"}}>{p.n}</span>
                <h3 className="display" style={{fontSize: 28, marginTop: 16, marginBottom: 14}}>{p.t}</h3>
                <p style={{color:"var(--ink-2)", fontSize: 15, lineHeight: 1.55}}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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