// components/SuportePage.jsx
const SUPPORT_CARD_ICONS = [
  (<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" stroke="currentColor" strokeWidth="1.6"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  (<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  (<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 6h16v12H4z" stroke="currentColor" strokeWidth="1.6"/><path d="M4 10h16M9 14h6" stroke="currentColor" strokeWidth="1.6"/></svg>),
];

const SUPPORT_CARD_LINKS = [
  { link: 'suporte@memberai.pro', href: 'mailto:suporte@memberai.pro' },
  { link: 'urgente@memberai.pro', href: 'mailto:urgente@memberai.pro' },
  { link: 'faturamento@memberai.pro', href: 'mailto:faturamento@memberai.pro' },
];

const SUPPORT_CHANNEL_ICONS = [
  (<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" stroke="currentColor" strokeWidth="1.6"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  (<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M20.5 14c0 3.6-3.8 6.5-8.5 6.5-1.3 0-2.5-.2-3.7-.6L4 21l1.2-4.1C4.5 15.7 4 14.4 4 13c0-3.6 3.8-6.5 8.5-6.5S21 9.4 21 13c0 .3 0 .7-.1 1" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  (<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="4" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="3.5" stroke="currentColor" strokeWidth="1.6"/><circle cx="17" cy="7" r="1" fill="currentColor"/></svg>),
  (<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 7c0-1.1.9-2 2-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" stroke="currentColor" strokeWidth="1.6"/><path d="M10 9l6 3-6 3V9z" fill="currentColor"/></svg>),
];

const SUPPORT_CHANNEL_HREFS = [
  'mailto:suporte@memberai.pro',
  'https://app.memberai.pro/',
  'https://www.instagram.com/memberai.pro',
  'https://www.youtube.com/@memberaipro',
];

const SuportePage = () => {
  const cards = SUPPORT_CARD_ICONS.map((icon, i) => ({
    icon,
    title: t('suporte.cards.' + i + '.title'),
    copy: t('suporte.cards.' + i + '.copy'),
    link: SUPPORT_CARD_LINKS[i].link,
    href: SUPPORT_CARD_LINKS[i].href,
  }));
  const channels = SUPPORT_CHANNEL_ICONS.map((icon, i) => ({
    icon,
    label: t('suporte.channels.' + i + '.label'),
    value: t('suporte.channels.' + i + '.value'),
    href: SUPPORT_CHANNEL_HREFS[i],
  }));

  return (<div className="support-page">
      <section className="support-hero">
        <div className="container">
          <span className="t-eyebrow">{t('suporte.hero.eyebrow')}</span>
          <h1>{t('suporte.hero.title_a')} <em style={{color:'var(--accent)', fontStyle:'italic'}}>{t('suporte.hero.title_em')}</em>{t('suporte.hero.title_b')}</h1>
          <p>{t('suporte.hero.sub')}</p>
        </div>
      </section>

      <section className="container">
        <div className="support-grid">
          {cards.map((c, i) => (<div key={i} className="support-card">
              <div className="support-card-icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.copy}</p>
              <a href={c.href} className="support-link">{c.link}</a>
            </div>))}
        </div>
      </section>

      <section className="support-contact">
        <div className="container support-contact-inner">
          <div>
            <h2>{t('suporte.contact.title')}</h2>
            <p>{t('suporte.contact.p1')}</p>
            <p style={{marginTop:"20px"}}>{t('suporte.contact.p2_a')} <strong style={{color:"var(--fg)"}}>{t('suporte.contact.p2_b')}</strong> {t('suporte.contact.p2_c')} <strong style={{color:"var(--fg)"}}>{t('suporte.contact.p2_d')}</strong> {t('suporte.contact.p2_e')}</p>
          </div>
          <div className="support-channels">
            {channels.map((c, i) => (<a key={i} href={c.href} target={c.href.startsWith('mailto') ? undefined : "_blank"} rel="noopener" className="support-channel">
                <div className="ch-icon">{c.icon}</div>
                <div className="ch-label">
                  <span className="ch-label-main">{c.label}</span>
                  <span className="ch-label-sub">{c.value}</span>
                </div>
                <svg className="ch-arrow" width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M4 8h8M8 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </a>))}
          </div>
        </div>
      </section>
    </div>);
};