/* global React */

const _WLA = window.BOLDER_LOCAL_ASSETS || 'assets/';
const WHO_IMGS = [
  _WLA + "who/01-ecommerce.png",
  _WLA + "who/02-beleza.png",
  _WLA + "who/03-hotelaria.png",
  _WLA + "who/04-agencias.png",
];

function Who() {
  const profiles = [
    { k: "01", t: "E-commerce de moda",   d: "Catálogos novos a cada drop, sem produção fotográfica de raiz.", pos: "50% 10%" },
    { k: "02", t: "Marcas de beleza",     d: "Lookbooks editoriais e ads com modelos consistentes.",          pos: "50% 20%" },
    { k: "03", t: "Hotelaria & F&B",      d: "Comunicação visual sazonal, multi-formato, multi-idioma.",      pos: "50% 50%" },
    { k: "04", t: "Agências parceiras",   d: "Capacidade extra de produção em white-label, sob NDA.",         pos: "50% 50%" }
  ];

  return (
    <Section id="who" tone="paper">
      <SectionHead
        num="12 / Para quem"
        title="Marcas que <em>se levam a sério</em>."
        sub="Quatro perfis onde o sistema Bolder gera ROI imediato."
      />
      <div className="grid-4">
        {profiles.map((p, i) => (
          <Reveal key={i} delay={i + 1} className="card" style={{ minHeight: 240, padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <img
              src={WHO_IMGS[i]}
              alt={p.t}
              style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", objectPosition: p.pos, display: "block" }}
            />
            <div style={{ padding: "16px 20px 20px", flex: 1 }}>
              <span className="mono mono-coral">{p.k}_</span>
              <h3 className="display" style={{ fontSize: 22, margin: "10px 0 8px", letterSpacing: "-0.02em" }}>{p.t}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--muted)" }}>{p.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

window.Who = Who;