/* global React */

function ProofStrip() {
  const items = [
    { eyebrow: "Especialização", title: "Estética", sub: "Clínicas e consultórios de procedimentos estéticos." },
    { eyebrow: "Atuação", title: "Jornada completa", sub: "Da primeira impressão à indicação." },
    { eyebrow: "Metodologia", title: "Método OPV™", sub: "Oportunidade · Processo · Venda." },
    { eyebrow: "Sede", title: "Barueri", sub: "Alphaville — São Paulo." },
  ];
  return (
    <section style={{ background: "var(--bg-canvas)", padding: "0", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="wrap" style={{ padding: "56px 32px" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            gap: 0,
          }}
        >
          {items.map((it, i) => (
            <div
              key={i}
              style={{
                padding: "8px 28px",
                borderLeft: i === 0 ? "none" : "1px solid var(--border-subtle)",
              }}
            >
              <div className="eyebrow-tag" style={{ marginBottom: 12 }}>
                <span className="dot" />
                {it.eyebrow}
              </div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: 28,
                lineHeight: 1.1,
                letterSpacing: "-0.015em",
                color: "var(--fg-primary)",
                marginBottom: 6,
              }}>
                {it.title}
              </div>
              <div style={{ color: "var(--fg-tertiary)", fontSize: 14, lineHeight: 1.5 }}>
                {it.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ProofStrip = ProofStrip;