// ===== RIVAMAR Group — Sobre Nosotros (v1.1) =====

function Nosotros({ go, data, edit, onEdit }) {
  const d = data || {};
  const valores = d.valores || [];
  const equipo = d.equipo || [];
  const hitos = d.hitos || [];

  return (
    <main>
      <section className="relative border-b border-white/10 overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute inset-0 anim-kenburns img-soft-nos">
            <ImgSlot label="Cocina en acción — equipo Rivamar en faena" src={d.img} tone="#C9A24B" className="w-full h-full" />
          </div>
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgb(var(--c-carbon) / calc(var(--nos-overlay,0.7) * 1.3)), rgb(var(--c-carbon) / calc(var(--nos-overlay,0.7) * 0.9)) 42%, rgb(var(--c-carbon) / calc(var(--nos-overlay,0.7) * 0.4)))' }}></div>
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to top, rgb(var(--c-carbon) / calc(var(--nos-overlay,0.7) * 1.0)), transparent 55%)' }}></div>
        </div>
        <div className="relative max-w-7xl mx-auto px-5 lg:px-8 py-24">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-copper mb-3 reveal">Sobre nosotros</p>
          <h1 className="font-display text-4xl md:text-6xl font-bold text-gray-50 tracking-tight max-w-3xl leading-[1.05] reveal reveal-d1">
            +19 años alimentando al <span className="text-shimmer">corazón minero</span> del país
          </h1>
          <Editable as="p" value={d.intro} path="nosotros.intro" edit={edit} onEdit={onEdit}
            className="mt-5 text-lg text-gray-300 max-w-2xl leading-relaxed reveal reveal-d2" />
        </div>
      </section>

      {/* Valores */}
      <section className="max-w-7xl mx-auto px-5 lg:px-8 py-20">
        <SectionHead eyebrow="Lo que nos define" title="Nuestros valores" />
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {valores.map(([t, d], i) => (
            <div key={t} className="bg-iron border border-white/10 rounded-xl p-6">
              <span className="font-display text-3xl font-bold text-gold/30">0{i + 1}</span>
              <h3 className="font-display font-bold text-gray-50 mt-3">{t}</h3>
              <p className="text-sm text-gray-400 mt-2 leading-relaxed">{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Historia / timeline */}
      <section className="border-y border-white/10 bg-steel/30">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-20 grid lg:grid-cols-[360px_1fr] gap-12">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-copper mb-3">Nuestra historia</p>
            <h2 className="font-display text-3xl font-bold text-gray-50 leading-tight">De un local marino a un grupo gastronómico minero</h2>
            <p className="mt-4 text-gray-400 leading-relaxed">Cada apertura respondió a una necesidad real del sector industrial de Antofagasta.</p>
          </div>
          <div className="space-y-0">
            {hitos.map(([año, txt], i) => (
              <div key={año} className="flex gap-5 pb-8 last:pb-0 relative">
                <div className="flex flex-col items-center">
                  <span className="grid place-items-center w-14 h-14 rounded-full bg-gold/15 border border-gold/40 text-gold font-display font-bold shrink-0">{año}</span>
                  {i < hitos.length - 1 && <span className="w-px flex-1 bg-white/10 mt-2"></span>}
                </div>
                <p className="text-gray-300 leading-relaxed pt-4">{txt}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Equipo */}
      <section className="max-w-7xl mx-auto px-5 lg:px-8 py-20">
        <SectionHead eyebrow="Quiénes lideran" title="Nuestro equipo" />
        <div className="grid md:grid-cols-3 gap-6">
          {equipo.map(([rol, area, desc, img], i) => (
            <div key={rol} className={`bg-iron border border-white/10 rounded-xl overflow-hidden reveal reveal-d${i + 1}`}>
              <ImgSlot label={`Retrato — ${rol}`} src={img || d.equipo_img} tone="#B08A4F" ratio="4/3" className="w-full" />
              <div className="p-5">
                <h3 className="font-display font-bold text-gray-50">{rol}</h3>
                <p className="text-xs font-mono uppercase tracking-wider text-gold mt-1">{area}</p>
                <p className="text-sm text-gray-400 mt-2 leading-relaxed">{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA locales */}
      <section className="border-t border-white/10 bg-steel/40">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-16 text-center">
          <h2 className="font-display text-3xl font-bold text-gray-50">Conoce nuestros tres locales</h2>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            {LOCALES.map((l) => (
              <Btn key={l.id} variant="ghost" onClick={() => go('local', { slug: l.slug })}>{l.nombre} →</Btn>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Nosotros });