function Trust() {
  const D = (window.SITE && window.SITE.trust) || {};
  const cards = D.cards || [];
  const awards = D.awards || [];

  return (
    <section id="confianca" style={{ background: 'var(--warm)', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title}<br/><span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            {D.subtitle}
          </p>
        </div>

        <div className="trust-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 40,
        }}>
          {cards.map((c, i) => (
            <TrustCard
              key={i}
              icon={c.icon}
              tag={c.tag}
              title={c.title}
              metric={c.metric}
              metricLabel={c.metricLabel}
              desc={c.desc}
              link={c.linkUrl ? { url: c.linkUrl, label: c.linkLabel } : null}
              stars={c.stars}
              color={c.color}
            />
          ))}
        </div>

        <div className="awards-band" style={{
          background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--radius-lg)', padding: '28px 32px',
          display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <div style={{ flex: '0 0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 6 }}>{D.awardsEyebrow}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)', maxWidth: 280, lineHeight: 1.25 }}>
              {D.awardsTitle}
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 280, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {awards.map(a => (
              <div key={a.name} style={{
                padding: '10px 14px', background: 'var(--bg)',
                border: '1px solid var(--line)', borderRadius: 12,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: 'var(--primary-50)', color: 'var(--primary-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--serif)', fontSize: 13, fontWeight: 600,
                }}>{a.count}</span>
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{a.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>último: {a.year}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 20, textAlign: 'center' }}>
          {D.footnote}
        </p>
      </div>

      <style>{`
        @media (max-width: 980px) { .trust-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) {
          .trust-grid { grid-template-columns: 1fr !important; }
          .awards-band { padding: 22px 20px !important; }
        }
      `}</style>
    </section>
  );
}

function TrustCard({ icon, tag, title, metric, metricLabel, desc, link, stars, color }) {
  const colorMap = {
    primary: { bg: 'var(--primary-50)', fg: 'var(--primary-700)' },
    amber:   { bg: 'color-mix(in oklab, #F59E0B 15%, var(--surface))', fg: '#92400E' },
    green:   { bg: 'var(--tag-blog-bg)', fg: 'var(--tag-blog-fg)' },
    navy:    { bg: 'color-mix(in oklab, var(--ink) 8%, var(--surface))', fg: 'var(--ink)' },
  };
  const c = colorMap[color] || colorMap.primary;
  const Ico = Icon[icon] || Icon.Shield;
  return (
    <div style={{
      background: 'var(--surface)', border: '1px solid var(--line)',
      borderRadius: 'var(--radius-lg)', padding: 24,
      display: 'flex', flexDirection: 'column', gap: 14,
      boxShadow: 'var(--shadow-sm)', transition: 'all .25s ease',
    }} className="lift">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12, background: c.bg, color: c.fg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Ico width="22" height="22" />
        </div>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 10, textTransform: 'uppercase',
          letterSpacing: '.14em', color: 'var(--muted)', fontWeight: 600,
        }}>{tag}</span>
      </div>

      <div>
        <div style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 4 }}>{title}</div>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 600,
          color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.02em',
        }}>{metric}</div>
        {stars != null && <Stars rating={stars} />}
        <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 6, fontFamily: 'var(--mono)' }}>{metricLabel}</div>
      </div>

      <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55, flex: 1 }}>{desc}</p>

      {link && (
        <a href={link.url} target="_blank" rel="noopener" style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13, fontWeight: 600, color: 'var(--ink)',
          paddingTop: 10, borderTop: '1px solid var(--line)',
        }}>
          {link.label}
          <Icon.Arrow width="14" height="14" />
        </a>
      )}
    </div>
  );
}

function Stars({ rating }) {
  return (
    <div style={{ display: 'flex', gap: 2, marginTop: 6 }} aria-label={`${rating} de 5 estrelas`}>
      {[1,2,3,4,5].map(i => {
        const fill = Math.max(0, Math.min(1, rating - (i - 1)));
        return (
          <svg key={i} width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
            <defs>
              <linearGradient id={`star-${i}`}>
                <stop offset={`${fill * 100}%`} stopColor="#F59E0B" />
                <stop offset={`${fill * 100}%`} stopColor="#E6E2D9" />
              </linearGradient>
            </defs>
            <path d="M12 2l2.9 6.5 7.1.7-5.4 4.9 1.6 7L12 17.8 5.8 21.1l1.6-7L2 9.2l7.1-.7L12 2z"
              fill={`url(#star-${i})`} stroke="#F59E0B" strokeWidth="0.5" strokeLinejoin="round" />
          </svg>
        );
      })}
    </div>
  );
}

window.Trust = Trust;