/* ActiveFit360 marketing — Recommended Products (Amazon affiliate) page */
const NS_af = window.Activefit360DesignSystem_d87766;

const AF_CATEGORIES = [
  'Pain & Recovery Tools', 'Home Gym & Mobility', 'Joint Braces & Support', 'Wrist, Hand & Thumb Support',
  'Neck & Back Support', 'Compression Wear', 'Daily Living Aids', 'Supplements & Nutrition',
  'Seating & Sleep', 'Books & Education',
];
const AF_CATEGORY_ICON = {
  'Pain & Recovery Tools': 'heart-pulse', 'Home Gym & Mobility': 'dumbbell', 'Joint Braces & Support': 'bone',
  'Wrist, Hand & Thumb Support': 'target', 'Neck & Back Support': 'shield-check', 'Compression Wear': 'waves',
  'Daily Living Aids': 'house', 'Supplements & Nutrition': 'leaf', 'Seating & Sleep': 'building', 'Books & Education': 'graduation-cap',
};
const AF_CATEGORY_TONE = {
  'Pain & Recovery Tools': 'mint', 'Home Gym & Mobility': 'sky', 'Joint Braces & Support': 'mint',
  'Wrist, Hand & Thumb Support': 'sky', 'Neck & Back Support': 'sunrise', 'Compression Wear': 'sage',
  'Daily Living Aids': 'sunrise', 'Supplements & Nutrition': 'sage', 'Seating & Sleep': 'sky', 'Books & Education': 'sunrise',
};

function AffiliatesPage() {
  const { Card, Badge, Button } = NS_af;
  const I = window.Icon;
  const [activeCategory, setActiveCategory] = React.useState('All');
  const allProducts = window.AF_AFFILIATE_PRODUCTS || [];
  const products = activeCategory === 'All' ? allProducts : allProducts.filter(p => p.category === activeCategory);
  return (
    <React.Fragment>
      {/* header */}
      <section style={{ padding: '24px var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', background: 'var(--wash-mint)', borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(36px,5vw,68px)', textAlign: 'center' }}>
          <Badge variant="neutral" icon={<I name="sparkles" size={11} />}>Handpicked by our team</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px,5vw,58px)', letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '18px auto 0', maxWidth: '20ch', lineHeight: 1.05 }}>
            Recommended Products
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '18px auto 0', maxWidth: '54ch', lineHeight: 1.6 }}>
            Gear our therapists trust to support recovery, mobility, and everyday movement — hand-picked to complement your care plan.
          </p>
        </div>
      </section>

      {/* category filter pills */}
      <section style={{ padding: 'var(--space-10) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {['All', ...AF_CATEGORIES].map(cat => (
            <button key={cat} onClick={() => setActiveCategory(cat)} style={{
              fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 700, cursor: 'pointer',
              padding: '8px 16px', borderRadius: 'var(--radius-pill)', border: '1.5px solid ' + (activeCategory === cat ? 'transparent' : 'var(--border-strong)'),
              background: activeCategory === cat ? 'var(--color-primary-soft)' : 'var(--surface-card)',
              color: activeCategory === cat ? 'var(--green-800)' : 'var(--text-body)',
              transition: 'var(--transition-base)' }}>{cat}</button>
          ))}
        </div>
      </section>

      {/* product grid */}
      <section style={{ padding: 'var(--space-16) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div className="af-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' }}>
            {products.map(p => (
              <Card key={p.title} style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden', height: '100%' }}>
                {p.image ? (
                  <div style={{ height: 200, flexShrink: 0, background: 'var(--wash-mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, overflow: 'hidden' }}>
                    <img src={p.image} alt={p.title} style={{ maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto', objectFit: 'contain', mixBlendMode: 'multiply' }} />
                  </div>
                ) : (
                  <window.Media tone={AF_CATEGORY_TONE[p.category] || 'sage'} icon={AF_CATEGORY_ICON[p.category] || 'image'} radius="0" height={200} style={{ flexShrink: 0 }} />
                )}
                <div style={{ padding: 'clamp(18px,2.5vw,24px)', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <Badge variant="neutral" style={{ alignSelf: 'flex-start', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.category}</Badge>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, lineHeight: 1.25, color: 'var(--ink-900)', margin: '14px 0 6px',
                    minHeight: 'calc(1.25em * 2)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.title}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55, margin: '0 0 14px',
                    minHeight: 'calc(1.55em * 3)', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.desc}</p>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: p.price ? 'space-between' : 'flex-end', gap: 12, marginTop: 'auto' }}>
                    {p.price && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700, color: 'var(--ink-900)', flexShrink: 0 }}>{p.price}</span>}
                    <Button as="a" href={p.href} target="_blank" rel="nofollow noopener sponsored" size="sm"
                      iconRight={<I name="arrow-up-right" size={15} />}>View on Amazon</Button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* affiliate disclosure */}
      <section style={{ padding: 'var(--space-10) var(--gutter) var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', alignItems: 'flex-start', gap: 10,
          padding: '14px 18px', background: 'var(--surface-sunken)', borderRadius: 'var(--radius-lg)', fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>
          <I name="shield-check" size={16} style={{ flexShrink: 0, marginTop: 2, color: 'var(--green-600)' }} />
          <span>Disclosure: as an Amazon Associate, ActiveFit360 earns from qualifying purchases made through the links above. This comes at no extra cost to you and helps support our practice.</span>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { AffiliatesPage });