/* ShareCard — a bold, friendly closing moment that makes the guide easy to pass
   on. Copy-link works for real (with a little "Copied!" confirmation); the other
   buttons open native share intents. Built for the "extremely shareable" goal. */
function ShareCard({ lang }) {
  const [copied, setCopied] = React.useState(false);
  const url = (typeof window !== 'undefined' && window.location) ? window.location.href : 'https://oasisfreshmarkets.net';
  const msg = t(lang,
    'Free Oklahoma EBT & SNAP guide — how to apply, what you can buy, and how to save. Check it out:',
    'Guía gratis de EBT y SNAP de Oklahoma — cómo solicitar, qué comprar y cómo ahorrar. Míralo:');

  const doCopy = async () => {
    try {
      if (navigator.clipboard) await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) { setCopied(true); setTimeout(() => setCopied(false), 1800); }
  };

  const nativeShare = async () => {
    if (navigator.share) { try { await navigator.share({ title: 'Oasis EBT & SNAP Guide', text: msg, url }); } catch (e) {} }
    else doCopy();
  };

  const btns = [
    { id: 'copy', icon: copied ? 'Check' : 'Link', label: copied ? t(lang, 'Copied!', '¡Copiado!') : t(lang, 'Copy link', 'Copiar enlace'), onClick: doCopy, bg: copied ? 'var(--leaf-500)' : 'var(--cream-50)', fg: copied ? '#fff' : 'var(--forest-800)' },
    { id: 'text', icon: 'MessageCircle', label: t(lang, 'Text it', 'Por mensaje'), href: 'sms:?&body=' + encodeURIComponent(msg + ' ' + url), bg: 'var(--cream-50)', fg: 'var(--forest-800)' },
    { id: 'wa', icon: 'Send', label: 'WhatsApp', href: 'https://wa.me/?text=' + encodeURIComponent(msg + ' ' + url), bg: 'var(--cream-50)', fg: 'var(--forest-800)' },
    { id: 'fb', icon: 'Facebook', label: 'Facebook', href: 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url), bg: 'var(--cream-50)', fg: 'var(--forest-800)' },
  ];

  return (
    <section id="share" style={{ padding: 'var(--space-16) 0' }}>
      <div className="oasis-container">
        <div style={{ background: 'linear-gradient(135deg, var(--forest-700), var(--forest-900))', borderRadius: 'var(--radius-2xl)', padding: 'clamp(28px, 5vw, 56px)', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-xl)' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 90% at 100% 0%, rgba(227,161,44,0.22), transparent 55%)' }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-10)', alignItems: 'center' }}>
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.1)', border: '1.5px solid rgba(255,255,255,0.18)', marginBottom: 16 }}>
                <Icon name="HeartHandshake" size={18} stroke="var(--gold-400)" />
                <span style={{ color: 'var(--gold-400)', fontWeight: 800, fontSize: 'var(--fs-caption)', letterSpacing: '0.04em' }}>{t(lang, 'Pass it on', 'Pásalo')}</span>
              </div>
              <h2 style={{ color: 'var(--cream-50)', fontSize: 'clamp(28px, 4.5vw, 44px)', margin: '0 0 12px' }}>
                {t(lang, 'Know someone who could use this?', '¿Conoces a alguien que lo necesite?')}
              </h2>
              <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-lead)', margin: 0, lineHeight: 'var(--lh-normal)' }}>
                {t(lang, 'Millions of dollars in benefits go unused every year because people don’t know they qualify. One share could feed a family.', 'Millones de dólares en beneficios no se usan cada año porque la gente no sabe que califica. Un solo mensaje podría alimentar a una familia.')}
              </p>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {btns.map((b) => {
                const inner = (
                  <React.Fragment>
                    <Icon name={b.icon} size={22} stroke={b.fg} strokeWidth={2.3} />
                    <span style={{ fontWeight: 800, fontSize: 'var(--fs-small)' }}>{b.label}</span>
                  </React.Fragment>
                );
                const style = {
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                  padding: '18px 16px', borderRadius: 'var(--radius-lg)', cursor: 'pointer',
                  background: b.bg, color: b.fg, border: 'none', textDecoration: 'none',
                  fontFamily: 'var(--font-body)', boxShadow: 'var(--shadow-sm)',
                  transition: 'transform var(--dur-fast) var(--ease-spring), filter var(--dur-base) var(--ease-out)',
                };
                const hover = {
                  onMouseEnter: (e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.filter = 'brightness(1.04)'; },
                  onMouseLeave: (e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.filter = 'none'; },
                };
                return b.href
                  ? <a key={b.id} href={b.href} target="_blank" rel="noopener" style={style} {...hover}>{inner}</a>
                  : <button key={b.id} type="button" onClick={b.onClick} style={style} {...hover}>{inner}</button>;
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ShareCard });