// Trust / marquee strip after hero — who we build for

function TrustStrip() {
  const names = [
    'Hjelmstad Hardware', 'Lake & Larch Bakery', 'Meier Family Dentistry',
    'Ridgeline Veterinary', 'Alpenglow Florist', 'North Fork Roasters',
    'Schneider & Sons Plumbing', 'Bjorn\'s Garage', 'Finch & Forge Metal',
    'Summit Orthodontics', 'Kettle & Crust Pizza', 'Granite Hill Dentistry',
  ];
  const row = [...names, ...names];
  return (
    <section className="relative py-14 md:py-20 overflow-hidden" style={{ background: 'var(--parchment)' }}>
      <div className="max-w-[1680px] mx-auto px-6 md:px-10 mb-10 flex items-baseline justify-between gap-10">
        <div className="flex items-center gap-4">
          <span className="h-px w-10" style={{ background: 'var(--summit)' }} />
          <span className="mono-label" style={{ color: 'rgba(26,36,54,0.55)' }}>Built for · the corner shop crowd</span>
        </div>
        <p className="font-display italic font-light hidden md:block" style={{ fontSize: '1.05rem', color: 'rgba(26,36,54,0.55)' }}>
          A short list of people we've worked with.
        </p>
      </div>
      <div className="relative">
        <div className="marquee items-center" style={{ padding: '4px 0' }}>
          {row.map((n, i) => (
            <div key={i} className="flex items-center gap-12 shrink-0">
              <span className="font-display font-semibold" style={{ fontSize: '1.6rem', color: 'var(--abyss)', whiteSpace: 'nowrap' }}>{n}</span>
              <svg width="16" height="14" viewBox="0 0 16 14" fill="none" className="shrink-0">
                <path d="M8 1L15 13H1L8 1Z" fill="#B8715A" opacity="0.6" />
              </svg>
            </div>
          ))}
        </div>
        <div className="absolute top-0 bottom-0 left-0 w-32 pointer-events-none" style={{ background: 'linear-gradient(90deg, #F5F0EB 0%, rgba(245,240,235,0) 100%)' }} />
        <div className="absolute top-0 bottom-0 right-0 w-32 pointer-events-none" style={{ background: 'linear-gradient(270deg, #F5F0EB 0%, rgba(245,240,235,0) 100%)' }} />
      </div>
    </section>
  );
}
window.TrustStrip = TrustStrip;