/* global React, MktIcon */
// Trakkables.com — product portfolio grid + footer.
// Products come from content/products.json, footer text from content/site.json (edited at /admin).

function ProductCard({ p, onOpen }) {
  const { Badge } = window.DesignSystem_6ce6e1;
  const [hover, setHover] = React.useState(false);
  return (
    <button type="button" data-product={p.theme} onClick={() => onOpen(p)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      aria-label={`Learn about Trakkables ${p.name}`}
      style={{ textAlign: 'left', font: 'inherit', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)',
        padding: 26, display: 'flex', flexDirection: 'column', gap: 16, boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'var(--transition-base)', cursor: 'pointer' }}>
      <div style={{ height: 64, borderRadius: 'var(--radius-md)', background: p.tint, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 }}>
        <img src={p.logo} alt={`Trakkables ${p.name}`} style={{ maxHeight: 38, maxWidth: '80%', objectFit: 'contain' }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)' }}>{p.name}</h3>
        <Badge tone={p.status === 'Live' ? 'success' : p.status === 'Waitlist' ? 'accent' : 'neutral'}>{p.status}</Badge>
      </div>
      <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--text-muted)', flex: 1 }}>{p.desc}</p>
      <span className="tk-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 600, fontSize: 15, color: p.accent }}>
        Read more <MktIcon name="arrow-right" size={16} />
      </span>
    </button>
  );
}

function MktProductModal({ product, onClose }) {
  const { Badge, Button } = window.DesignSystem_6ce6e1;
  React.useEffect(() => {
    if (!product) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    if (window.lucide) window.lucide.createIcons();
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [product, onClose]);
  if (!product) return null;
  const p = product;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(12,16,20,0.68)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '48px 20px', overflowY: 'auto' }}>
      <div data-product={p.theme} onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={`About Trakkables ${p.name}`}
        style={{ position: 'relative', width: '100%', maxWidth: 560, background: '#fff', color: '#161616', borderRadius: 18, boxShadow: '0 30px 80px rgba(0,0,0,0.4)', overflow: 'hidden' }}>
        <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 18, right: 18, width: 36, height: 36, borderRadius: 10, border: '1px solid #E1E4E8', background: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4a5158', zIndex: 2 }}><MktIcon name="x" size={18} /></button>
        <div style={{ background: p.tint, padding: '28px 44px 24px', borderBottom: `3px solid ${p.accent}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
          <img src={p.logo} alt={`Trakkables ${p.name}`} style={{ maxHeight: 44, maxWidth: 200, objectFit: 'contain', objectPosition: 'left center' }} />
          <span style={{ flex: 'none', marginRight: 44 }}><Badge tone={p.status === 'Live' ? 'success' : p.status === 'Waitlist' ? 'accent' : 'neutral'}>{p.status}</Badge></span>
        </div>
        <div style={{ padding: '30px 44px 40px' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: "'JetBrains Mono',ui-monospace,monospace", fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.accent, marginBottom: 12 }}>
            <span style={{ width: 26, height: 2, background: p.accent, display: 'inline-block' }} />{p.tagline}
          </div>
          <h2 style={{ fontFamily: "'Saira Semi Condensed',sans-serif", fontWeight: 800, fontSize: 30, lineHeight: 1.12, letterSpacing: '-0.01em', margin: '0 0 14px' }}>Trakkables {p.name}</h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, margin: '0 0 22px', color: '#2b3138' }}>{p.summary}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginBottom: 30 }}>
            {(p.points || []).map((pt) => (
              <div key={pt} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                <span style={{ flex: 'none', marginTop: 1, color: p.accent, display: 'inline-flex' }}><MktIcon name="check-circle" size={17} /></span>
                <span style={{ fontSize: 14.5, lineHeight: 1.5, color: '#3b424a' }}>{pt}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <a href={p.href} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
              <Button iconRight={<MktIcon name="arrow-up-right" size={17} />}>{p.cta}</Button>
            </a>
            <button type="button" onClick={onClose} style={{ font: 'inherit', background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Saira Semi Condensed',sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: '0.02em', color: '#79828D' }}>Back to portfolio</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function MktProducts() {
  const [active, setActive] = React.useState(null);
  const { products, site } = tkContent();
  return (
    <section id="portfolio" style={{ background: 'var(--surface-page)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '72px 28px' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>{site.portfolio.eyebrow}</div>
          <h2 style={{ margin: '8px 0 0', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.01em', color: 'var(--text-strong)' }}>{site.portfolio.title}</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 22 }}>
          {products.map((p) => <ProductCard key={p.name} p={p} onOpen={setActive} />)}
        </div>
      </div>
      <MktProductModal product={active} onClose={() => setActive(null)} />
    </section>
  );
}

// Icon shapes for the social links listed in content/site.json (matched by label).
const MKT_SOCIAL_ICONS = {
  'LinkedIn': 'M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z',
  'Instagram': 'M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07c-1.28.06-2.15.26-2.91.56-.79.3-1.46.72-2.13 1.38A5.88 5.88 0 0 0 .63 4.14c-.3.76-.5 1.63-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.9 5.9 0 0 0 2.13-1.38 5.9 5.9 0 0 0 1.38-2.13c.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.13A5.88 5.88 0 0 0 19.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z',
  'Facebook': 'M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'
};

function MktSocial({ label, href }) {
  const path = MKT_SOCIAL_ICONS[label];
  const external = href && href !== '#';
  return (
    <a href={href} aria-label={label} title={label}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
      style={{ width: 38, height: 38, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--tk-gray-800)', color: 'var(--tk-gray-300)', transition: 'var(--transition-base)' }}
      onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--tk-teal)'; e.currentTarget.style.color = '#fff'; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--tk-gray-800)'; e.currentTarget.style.color = 'var(--tk-gray-300)'; }}>
      {path
        ? <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={path} /></svg>
        : <span style={{ fontSize: 12, fontWeight: 700 }}>{label.slice(0, 2)}</span>}
    </a>
  );
}

function MktFooter({ onAbout, onPress, onSupport, onTerms, onContact }) {
  const { products, site } = tkContent();
  const cols = {
    Products: products.map((p) => p.name),
    Company: ['About', 'Careers', 'Contact', 'News & Updates'],
    Resources: ['Support', 'Terms and Conditions'],
  };
  return (
    <footer style={{ background: 'var(--tk-ink)', color: 'var(--tk-gray-300)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 28px 40px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <div style={{ marginBottom: 16 }}><img src="/assets/images/logos/trakkables-corporate-teal.png" alt="Trakkables Software Systems" style={{ height: 40, display: 'block' }} /></div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, maxWidth: 260, color: 'var(--tk-gray-400)' }}>{site.footer.tagline}</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {site.footer.socials.map((s) => <MktSocial key={s.label} {...s} />)}
          </div>
        </div>
        {Object.entries(cols).map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-heading)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--tk-gray-500)', marginBottom: 14 }}>{h}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
              {items.map((i) => {
                const handler = i === 'About' ? onAbout : i === 'News & Updates' ? onPress : i === 'Support' ? onSupport : i === 'Terms and Conditions' ? onTerms : i === 'Contact' ? onContact : null;
                return <li key={i}><a href="#" onClick={handler ? (e) => { e.preventDefault(); handler(); } : undefined} style={handler
                  ? { color: 'var(--tk-gray-300)', textDecoration: 'none', fontSize: 15, fontWeight: 500, transition: 'var(--transition-base)', cursor: 'pointer' }
                  : { color: 'var(--tk-gray-300)', textDecoration: 'none', fontSize: 14 }}>{i}</a></li>;
              })}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--tk-gray-800)', padding: '18px 28px', maxWidth: 1200, margin: '0 auto', fontSize: 13, color: 'var(--tk-gray-500)' }}>
        {site.footer.copyright}
      </div>
    </footer>
  );
}

window.MktProducts = MktProducts;
window.MktProductModal = MktProductModal;
window.MktFooter = MktFooter;