/* global React */
/* ─────────────────────────────────────────────────────────────────────────────
   CLIENT TICKER — infinite horizontal marquee
   Shows on homepage directly below the hero.
   Each card: logo → business name → industry → links out in a new tab.
   Hover anywhere on the strip to pause scrolling.
   ──────────────────────────────────────────────────────────────────────────── */

const CLIENTS = [
  {
    name: 'Protein Pals',
    displayName: 'Protein Pals',
    industry: 'Meal Delivery',
    service: 'Meta Ads · ManyChat · Zoho CRM · Conversion API',
    logo: '/assets/clients/protein-pals.jpg',
    logoType: 'circle',
    link: 'https://proteinpals.ca/',
    region: 'Toronto GTA, Canada',
  },
  {
    name: 'Hairscope AI',
    displayName: 'Hairscope',
    industry: 'Health Tech · AI SaaS',
    service: 'Lead generation · Creative direction',
    logo: '/assets/clients/hairscope-ai.png',
    logoType: 'wide',
    link: 'https://hairscope.ai/',
    region: 'India · Global',
  },
  {
    name: 'Waterz',
    displayName: 'Waterz',
    industry: 'Luxury Tourism',
    service: 'Instagram growth · Paid ads',
    logo: '/assets/clients/waterz-goa.jpg',
    logoType: 'circle',
    link: 'https://waterz.in/',
    region: 'Goa, India',
  },
  {
    name: 'NS Wealth',
    displayName: 'NS Wealth',
    industry: 'Financial Advisory',
    service: 'Lead generation · Meta Ads',
    logo: '/assets/clients/ns-wealth.jpg',
    logoType: 'circle',
    link: 'https://nswealth.in/',
    region: 'India',
  },
  {
    name: 'Automed 360',
    displayName: 'Automed 360',
    industry: 'Automotive Services',
    service: 'Social media · Local lead gen',
    logo: '/assets/clients/automed-360.jpg',
    logoType: 'circle',
    link: 'https://www.instagram.com/automed360mumbai/',
    region: 'Mumbai, India',
  },
  {
    name: 'JK Cars',
    displayName: 'JK Cars',
    industry: 'Chauffeur · Transport',
    service: 'Local marketing · Social media',
    logo: '/assets/clients/jk-cars.jpg',
    logoType: 'circle',
    link: 'https://www.instagram.com/jkcarsmumbai/',
    region: 'Mumbai, India',
  },
  {
    name: 'JK Automed Global',
    displayName: 'JK Automed Global',
    industry: 'Automotive · B2B',
    service: 'Brand presence · Lead generation',
    logo: '/assets/clients/jk-automed.jpg',
    logoType: 'circle',
    link: 'https://www.instagram.com/jkautomedgloballlp/',
    region: 'India',
  },
  {
    name: 'Mariyah Mehendi Art',
    displayName: 'Mariyah Mehendi',
    industry: 'Beauty · Weddings',
    service: 'Instagram growth · Organic content',
    logo: '/assets/clients/mariyah-mehendi.jpg',
    logoType: 'circle',
    link: 'https://www.instagram.com/mariyah_mehendi_art/',
    region: 'India',
  },
  {
    name: 'Ryaann Ace',
    displayName: 'Ryaann Ace',
    industry: 'B2B Manufacturing',
    service: 'Brand identity · Social media',
    logo: '/assets/clients/ryaann-ace.jpg',
    logoType: 'circle',
    link: 'https://www.instagram.com/ryaannaceurbanesittings/',
    region: 'India',
  },
  {
    name: 'Hi-Tech Physiotherapy',
    displayName: 'Hi-Tech Physio',
    industry: 'Healthcare · Rehab',
    service: 'Local lead gen · Meta Ads',
    logo: '/assets/clients/hitech-physio.png',
    logoType: 'wide',
    link: 'https://www.instagram.com/dr.zaidstherapy/',
    region: 'India',
  },
];

const UNIQUE_INDUSTRY_COUNT = 9;

/* ── Single card ── */
function TickerCard({ displayName, industry, logo, logoType, link, region }) {
  const [hovered, setHovered] = React.useState(false);

  return (
    <a
      href={link}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        width: 176,
        flexShrink: 0,
        padding: '22px 16px 20px',
        borderRight: '1px solid var(--border)',
        textDecoration: 'none',
        background: hovered ? 'var(--paper-100)' : 'transparent',
        transition: 'background 160ms',
        verticalAlign: 'top',
      }}
    >
      {/* Logo area — fixed 64px tall so all cards align */}
      <div style={{
        height: 64, width: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 12, flexShrink: 0,
      }}>
        {logoType === 'circle' ? (
          <div style={{
            width: 52, height: 52, borderRadius: '50%',
            overflow: 'hidden', flexShrink: 0,
            border: '1px solid var(--border)',
            outline: hovered ? '2px solid var(--accent-subtle)' : '2px solid transparent',
            transition: 'outline 160ms',
          }}>
            <img
              src={logo}
              alt={displayName}
              width="52" height="52"
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover', display: 'block',
                filter: hovered ? 'grayscale(0)' : 'grayscale(0.1)',
                transition: 'filter 160ms',
              }}
            />
          </div>
        ) : (
          /* Wide wordmark logos */
          <img
            src={logo}
            alt={displayName}
            style={{
              height: 32, width: 'auto', maxWidth: 136,
              objectFit: 'contain', display: 'block',
              filter: hovered ? 'grayscale(0)' : 'grayscale(0.2)',
              transition: 'filter 160ms',
            }}
          />
        )}
      </div>

      {/* Name */}
      <span style={{
        fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
        color: hovered ? 'var(--fg)' : 'var(--fg-muted)',
        lineHeight: 1.25, marginBottom: 5, display: 'block',
        transition: 'color 160ms',
      }}>{displayName}</span>

      {/* Industry */}
      <span style={{
        fontFamily: 'var(--font-sans)', fontSize: 10,
        textTransform: 'uppercase', letterSpacing: '0.11em',
        color: hovered ? 'var(--accent)' : 'var(--fg-subtle)',
        lineHeight: 1, display: 'block',
        transition: 'color 160ms',
      }}>{industry}</span>

      {/* Region — only visible on hover */}
      <span style={{
        fontFamily: 'var(--font-sans)', fontSize: 10,
        color: 'var(--fg-subtle)', marginTop: 5, lineHeight: 1.3,
        display: 'block',
        opacity: hovered ? 1 : 0,
        transition: 'opacity 160ms',
      }}>{region}</span>
    </a>
  );
}

/* ── Main section ── */
function ClientTicker() {
  /* React state controls play/pause — avoids CSS specificity fight with inline animation */
  const [paused, setPaused] = React.useState(false);

  /* Double the array for a seamless loop */
  const items = [...CLIENTS, ...CLIENTS];

  return (
    <section
      aria-label="Clients and industries we have worked with"
      style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}
    >
      {/* ── Header row ── */}
      <div className="ticker-header" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 40px', borderBottom: '1px solid var(--border)',
        flexWrap: 'wrap', gap: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--fg-subtle)', fontWeight: 500 }}>
            Brands worked with
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em', color: 'var(--fg)', lineHeight: 1 }}>
            {CLIENTS.length}
          </span>
          <span style={{ width: 1, height: 12, background: 'var(--border-strong)', display: 'inline-block' }}/>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--fg-subtle)', fontWeight: 500 }}>
            Industries
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em', color: 'var(--fg)', lineHeight: 1 }}>
            {UNIQUE_INDUSTRY_COUNT}
          </span>
        </div>
        <span className="ticker-hint" style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-subtle)', fontStyle: 'italic' }}>
          Hover to pause · click any brand to visit
        </span>
      </div>

      {/* ── Marquee ── */}
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{ overflow: 'hidden', position: 'relative', cursor: 'default' }}
      >
        {/* Edge fades */}
        <div aria-hidden style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 72, background: 'linear-gradient(to right, var(--bg), transparent)', zIndex: 2, pointerEvents: 'none' }}/>
        <div aria-hidden style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 72, background: 'linear-gradient(to left, var(--bg), transparent)', zIndex: 2, pointerEvents: 'none' }}/>

        {/* Scrolling track */}
        <div style={{
          display: 'inline-flex',
          /* animationPlayState is inline so React state controls it directly — no CSS specificity issue */
          animation: 'client-ticker-scroll 56s linear infinite',
          animationPlayState: paused ? 'paused' : 'running',
          willChange: 'transform',
        }}>
          {items.map((c, i) => (
            <TickerCard key={i} {...c}/>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes client-ticker-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
          [style*="client-ticker-scroll"] { animation: none !important; }
        }
      `}</style>
    </section>
  );
}

window.ClientTicker = ClientTicker;
window.CLIENTS = CLIENTS;