// Gedeelde componenten: logo, knoppen, kaarten, section tags
const { useState, useEffect, useRef } = React;

function BmLogo({ light }) {
  // Officiële logo van brandmerck.nl; op donkere vlakken de witte variant
  return (
    <img src={light ? 'images/bmlogo-wit.png' : 'images/bmlogo.png'} alt="Brandmerck"
      style={{ display: 'block', height: 30, width: 'auto' }} />
  );
}

function SectionTag({ children, style }) {
  return (
    <span style={{
      display: 'inline-block', background: 'var(--bm-teal)', color: '#fff',
      fontSize: 12, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase',
      padding: '7px 16px 7px 14px',
      clipPath: 'polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%)',
      ...style
    }}>{children}</span>
  );
}

function NotchCard({ children, style, notch = 20 }) {
  return (
    <div style={{
      background: '#fff', color: '#12302E',
      clipPath: `polygon(0 0, 100% 0, 100% calc(100% - ${notch}px), calc(100% - ${notch}px) 100%, 0 100%)`,
      boxShadow: '0 10px 30px rgba(6,40,38,0.12)',
      ...style
    }}>{children}</div>
  );
}

function CtaButton({ children, onClick, big, secondary, style, type }) {
  const [hover, setHover] = useState(false);
  const base = secondary
    ? { background: hover ? '#E9F2F1' : '#fff', color: 'var(--bm-teal-ink)', border: '2px solid var(--bm-teal)' }
    : {
        background: hover
          ? 'linear-gradient(90deg, var(--bm-cta-2), var(--bm-cta-1))'
          : 'linear-gradient(90deg, var(--bm-cta-1), var(--bm-cta-2))',
        color: '#fff', border: 'none'
      };
  return (
    <button type={type || 'button'} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        ...base,
        fontFamily: "'Lato', sans-serif", fontWeight: 700,
        fontSize: big ? 16 : 14, letterSpacing: '0.8px', textTransform: 'uppercase',
        padding: big ? '16px 34px' : '12px 24px',
        borderRadius: 999, cursor: 'pointer',
        boxShadow: hover ? '0 6px 18px rgba(239,108,26,0.35)' : '0 3px 10px rgba(6,40,38,0.18)',
        transition: 'all 0.18s ease', whiteSpace: 'nowrap',
        ...style
      }}>
      {children} <span style={{ fontSize: big ? 15 : 13 }}>↗</span>
    </button>
  );
}

// Vinkje in tekstlijstjes
function Check() {
  return <span style={{ color: 'var(--bm-teal-bright)', fontWeight: 900, marginRight: 8 }}>✓</span>;
}

// ── Geaggregeerde reviewdata (Google + The Feedback Company) ────────────────
let _reviewsCache = null;
function useReviewsData() {
  const [data, setData] = useState(_reviewsCache);
  useEffect(() => {
    if (_reviewsCache) return;
    fetch('reviews.json').then((r) => (r.ok ? r.json() : null)).then((d) => {
      if (d?.reviews?.length) { _reviewsCache = d; setData(d); }
    }).catch(() => {});
  }, []);
  return data;
}

const nlRating = (v) => (v == null ? null : String(v).replace('.', ','));

// Witte badge met het gecombineerde reviewgemiddelde; werkt op licht en donker.
function ReviewBadge({ style }) {
  const data = useReviewsData();
  const combined = nlRating(data?.combined?.rating5) || '4,6';
  const total = data?.combined?.total;
  const googleUrl = data?.google?.cid
    ? `https://maps.google.com/?cid=${data.google.cid}`
    : 'https://www.google.com/search?q=brandmerck+reviews';
  const fcUrl = data?.feedback_company?.url || 'https://www.feedbackcompany.com/nl-nl/reviews/brandmerck';
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 14, background: '#fff', borderRadius: 12,
      padding: '14px 20px', boxShadow: '0 6px 18px rgba(6,40,38,0.15)', ...style
    }}>
      <span style={{ fontWeight: 900, fontSize: 26, fontFamily: "'Lato', sans-serif", color: '#12302E' }}>{combined}</span>
      <div>
        <div style={{ color: '#F4B400', fontSize: 16, letterSpacing: 2 }}>★★★★★</div>
        <div style={{ fontSize: 12.5, color: '#5A7472' }}>
          {total ? `gemiddeld uit ${total} reviews · ` : 'gemiddeld · '}
          <a href={googleUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--bm-teal-ink)', fontWeight: 700 }}>Google</a>
          {' & '}
          <a href={fcUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--bm-teal-ink)', fontWeight: 700 }}>The Feedback Company</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BmLogo, SectionTag, NotchCard, CtaButton, Check, useReviewsData, nlRating, ReviewBadge });