// ════════════════════════════════════════════════════════════════════════
// THANKS — the people who helped build Kannada Gothu.
// To add someone: append an entry to HELPERS. `socials` keys can be
// insta · linkedin · x · github · web (any subset, or none).
// ════════════════════════════════════════════════════════════════════════

const HELPERS = [
  { name: 'Shruti Koundinya', did: 'Brand identity designer', socials: { linkedin: 'https://www.linkedin.com/search/results/people/?keywords=Shruti%20Koundinya', insta: 'shruti.koundinya', portfolio: 'https://www.figma.com/proto/qVyDAs9XS988u63Y0vn3xn/Portfolio?node-id=5-83&p=f&t=hewrZ8kW37LHjm8m-1&scaling=contain&content-scaling=fixed&page-id=0%3A1' } },
  { name: 'Arjun Ravikumar', did: 'Social media lead', socials: { insta: 'arjuns.pov' } },
  { name: 'Pragun Ashok', did: 'Founding engineering team · game design', socials: { linkedin: 'in/pragunashok', insta: 'pragunashok' } },
];

const SOCIAL_META = {
  insta:    { label: 'Instagram', url: (h) => `https://instagram.com/${h.replace(/^@/, '')}` },
  linkedin: { label: 'LinkedIn',  url: (h) => (/^https?:/.test(h) ? h : `https://linkedin.com/${h.replace(/^\//, '')}`) },
  x:        { label: 'X',         url: (h) => `https://x.com/${h.replace(/^@/, '')}` },
  github:   { label: 'GitHub',    url: (h) => `https://github.com/${h}` },
  portfolio:{ label: 'Portfolio', url: (h) => h },
  web:      { label: 'Website',   url: (h) => (/^https?:/.test(h) ? h : `https://${h}`) },
};
const SOCIAL_ICON = { insta: 'insta', linkedin: 'linkedin', x: 'xlogo', github: 'github', web: 'globe', portfolio: 'globe' };

function initials(name) {
  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join('');
}

function starPoints(n, cx, cy, ro, ri) {
  const pts = [];
  for (let i = 0; i < n * 2; i++) {
    const r = i % 2 ? ri : ro, a = (Math.PI * i) / n - Math.PI / 2;
    pts.push((cx + r * Math.cos(a)).toFixed(2) + ',' + (cy + r * Math.sin(a)).toFixed(2));
  }
  return pts.join(' ');
}

function StarAvatar({ name, size = 72, alt }) {
  return (
    <div style={{ width: size, height: size, position: 'relative', flexShrink: 0 }}>
      <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
        <polygon points={starPoints(9, 50, 53, 50, 37)} fill="#52000B" />
        <polygon points={starPoints(9, 50, 50, 50, 37)} fill={alt ? T.red : T.gold} stroke="#52000B" strokeWidth="3" strokeLinejoin="round" />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: 4,
        fontFamily: F.display, fontWeight: 800, fontSize: size * 0.3, letterSpacing: -0.5, color: alt ? T.cream : '#52000B' }}>{initials(name)}</div>
    </div>
  );
}

function SocialBtn({ k, handle, who }) {
  const m = SOCIAL_META[k];
  if (!m) return null;
  const rest = '0 4px 0 #6e0014';
  return (
    <a href={m.url(handle)} target="_blank" rel="noreferrer" aria-label={`${who} on ${m.label}`}
      style={{ height: 36, padding: '0 13px 0 10px', borderRadius: 999, background: T.red, color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 7,
        fontFamily: F.display, fontWeight: 700, fontSize: 14, textDecoration: 'none', boxShadow: rest, transition: 'transform .08s, box-shadow .08s' }}
      onPointerDown={(e) => { e.currentTarget.style.transform = 'translateY(3px)'; e.currentTarget.style.boxShadow = '0 1px 0 #6e0014'; }}
      onPointerUp={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = rest; }}
      onPointerLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = rest; }}>
      <Icon name={SOCIAL_ICON[k]} size={16} color="#fff" sw={2.2} />{m.label}
    </a>
  );
}

const TILTS = [-2, 1.5, -1];

function HelperCard({ p, i }) {
  const socials = Object.entries(p.socials || {}).filter(([, h]) => h);
  const tilt = TILTS[i % TILTS.length];
  return (
    <div className="kb-thx-card" style={{ '--tilt': tilt + 'deg', background: T.card, borderRadius: 20, padding: '22px 20px 20px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 10, minWidth: 0 }}>
      <StarAvatar name={p.name} alt={i % 2 === 1} />
      <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 22, lineHeight: 1.1, color: T.ink, letterSpacing: -0.4, marginTop: 2, overflowWrap: 'anywhere' }}>{p.name}</div>
      <div style={{ background: T.goldFixed, color: T.goldInk, borderRadius: 999, padding: '5px 12px', fontFamily: F.ui, fontWeight: 700, fontSize: 13, lineHeight: 1.3, textWrap: 'balance' }}>{p.did}</div>
      {socials.length > 0 && (
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center', paddingTop: 4 }}>
          {socials.map(([k, h]) => <SocialBtn key={k} k={k} handle={h} who={p.name} />)}
        </div>
      )}
    </div>
  );
}

function Thanks({ tw }) {
  return (
    <div id="thanks" style={{ background: T.surface, scrollMarginTop: 68, position: 'relative', overflow: 'hidden' }}>
      <KolamBg />
      <div aria-hidden style={{ position: 'absolute', right: -120, top: -120, pointerEvents: 'none' }}><Rangoli size={460} color={T.gold} opacity={0.14} /></div>
      <div aria-hidden style={{ position: 'absolute', left: -90, bottom: -110, pointerEvents: 'none' }}><Rangoli size={320} color={T.red} opacity={0.05} /></div>
      <div className="kb-wrap" style={{ maxWidth: 1180, margin: '0 auto', padding: '88px 28px 100px', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ fontFamily: F.translit, fontWeight: 700, fontSize: 'clamp(22px, 2.4vw, 28px)', color: T.red, lineHeight: 1.4, paddingBottom: 2 }}>Dhanyavādagaḷu</div>
          <Eyebrow color={T.goldDark} style={{ marginTop: 6 }}>Thank you</Eyebrow>
          <div lang="kn" style={{ fontFamily: "'Noto Sans Kannada', sans-serif", fontWeight: 400, fontSize: 14, color: T.sub, opacity: 0.7, lineHeight: 1.4, marginTop: 4 }}>ಧನ್ಯವಾದಗಳು</div>
          <h2 style={{ fontFamily: F.display, fontWeight: 800, letterSpacing: -0.8, fontSize: 'clamp(34px, 5vw, 64px)', lineHeight: 1.02,
            color: T.ink, margin: '18px 0 0', maxWidth: 820, textWrap: 'balance' }}>
            We didn’t build this <span style={{ color: T.red, display: 'inline-block', transform: 'rotate(-3deg)' }}>alone!</span>
          </h2>
          <p style={{ fontFamily: F.ui, fontSize: 'clamp(16px, 1.5vw, 18.5px)', lineHeight: 1.55, color: T.sub, margin: '18px 0 0', maxWidth: 540, textWrap: 'pretty' }}>
            The people who gave their time, craft and ideas to Kannada Gothu. Go say namaskāra to them.
          </p>
        </div>
        <div className="kb-thanks" style={{ marginTop: 44 }}>
          {HELPERS.map((p, i) => <HelperCard key={i} p={p} i={i} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Thanks, HELPERS });