// TitanTrustStrip.jsx — BBB + CPA credentials + Google rating bar

const TrustGooglePill = () => {
  const Pill = window.GoogleReviewPill;
  return Pill ? <Pill /> : null;
};

const TitanTrustStrip = () => {
  const divider = (
    <div className="trust-divider" style={{ width: 1, height: 36, background: '#e5edf5', flexShrink: 0 }} />
  );

  return (
    <div style={{
      background: '#fff',
      borderBottom: '1px solid #e5edf5',
      padding: '12px 24px',
      fontFamily: "'DM Sans', sans-serif",
    }}>
      <div className="trust-strip-inner" style={{
        maxWidth: 1080,
        margin: '0 auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-evenly',
        height: 64,
      }}>

        {/* BBB Accredited Business — seal image displayed at smaller CSS size for maximum sharpness */}
        <a href="https://www.bbb.org/us/tx/sugar-land/profile/bookkeeping-services/titan-ledgers-0915-90077018/#sealclick"
          target="_blank" rel="nofollow" style={{ textDecoration: 'none', flexShrink: 0 }}
        >
          <img
            src="https://seal-houston.bbb.org/seals/blue-seal-293-61-bbb-90077018.png"
            alt="Titan Ledgers BBB Business Review"
            width="200"
            height="42"
            style={{ border: 0, display: 'block' }}
          />
        </a>

        {divider}

        {/* Licensed Texas CPA */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: '#f0f4f8', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0F1A2E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
              <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 500, color: '#0F1A2E', lineHeight: 1.2 }}>Licensed Texas CPA</div>
            <div style={{ fontSize: 11, fontWeight: 300, color: '#94a3b8', lineHeight: 1.2 }}>Texas State Board of Public Accountancy</div>
          </div>
        </div>

        {divider}

        {/* Google Review Pill */}
        <TrustGooglePill />

      </div>

      <style>{`
        @media (max-width: 640px) {
          .trust-strip-inner {
            height: auto !important;
            padding: 24px 0 !important;
            flex-wrap: wrap !important;
            gap: 24px !important;
            justify-content: center !important;
          }
          .trust-divider { display: none !important; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { TitanTrustStrip });