/* EZV Studio – Página de Suporte (compartilhada por todos os apps) */
/* eslint-disable */

const { useState: useS_SUP, useEffect: useE_SUP } = React;

const SUP_FORM_ENDPOINT = 'https://formsubmit.co/ajax/rmfromt@gmail.com';
const SUP_EMAIL = 'rmfromt@gmail.com';
const SUP_INSTAGRAM = 'https://www.instagram.com/ezvstudio/';

const SUP_APPS = [
  { value: 'easy-driver', label: 'Easy Driver' },
  { value: 'ez-runner', label: 'Ez Runner' },
  { value: 'descomplica', label: 'Descomplica' },
  { value: 'mulher', label: 'Mulher + Saúde + Proteção' },
  { value: 'servidor-rj', label: 'Servidor RJ+' },
  { value: 'hollywood', label: 'Hollywood Prompt Engine' },
  { value: 'outro', label: null }, // preenchido por idioma abaixo
];

/* ── i18n (pt / en / es) ──────────────────────────────── */
const SUP = {
  pt: {
    back: 'Voltar ao EZV Studio',
    eyebrow: 'SUPORTE · EZV STUDIO',
    titleA: 'Como podemos', titleB: 'te ajudar?',
    desc: 'Suporte para todos os apps do EZV Studio — Easy Driver, Ez Runner, Descomplica, Mulher + Saúde + Proteção, Servidor RJ+ e Hollywood Prompt Engine.',
    responseTime: 'Tempo médio de resposta: até 48 horas úteis.',
    otherLabel: 'Outro / não sei',
    contact: {
      label: 'Outros canais',
      emailTitle: 'E-mail',
      igTitle: 'Instagram',
      igNote: 'Também atendemos por Direct no Instagram — manda uma mensagem que a gente responde por lá também.',
    },
    faq: {
      label: 'Perguntas frequentes',
      title: 'Central de ajuda',
      items: [
        { q: 'Como recuperar minha senha?', a: 'Utilize a opção "Esqueci minha senha" disponível na tela de login.' },
        { q: 'Como excluir minha conta?', a: 'Entre em contato pelo formulário ou e-mail informando o aplicativo e o e-mail da conta.' },
        { q: 'Como reportar um bug?', a: 'Informe o nome do aplicativo, versão, dispositivo e uma descrição do problema.' },
      ],
    },
    legal: { privacy: 'Política de Privacidade' },
    form: {
      name: 'Seu nome',
      namePh: 'Como podemos te chamar',
      email: 'Seu e-mail',
      emailPh: 'para a gente responder',
      app: 'Qual app?',
      message: 'Mensagem',
      messagePh: 'Descreva o que está acontecendo — quanto mais detalhes, mais rápido a gente resolve.',
      submit: 'Enviar mensagem',
      sending: 'Enviando…',
      successTitle: 'Mensagem enviada!',
      successSub: 'Recebemos sua mensagem e vamos responder no e-mail informado assim que possível.',
      newMessage: 'Enviar outra mensagem',
      errorTitle: 'Não foi possível enviar.',
      errorSub: 'Tenta de novo em alguns instantes ou manda um e-mail direto para',
    },
  },
  en: {
    back: 'Back to EZV Studio',
    eyebrow: 'SUPPORT · EZV STUDIO',
    titleA: 'How can we', titleB: 'help you?',
    desc: 'Support for every EZV Studio app — Easy Driver, Ez Runner, Descomplica, Mulher + Saúde + Proteção, Servidor RJ+ and Hollywood Prompt Engine.',
    responseTime: 'Average response time: within 48 business hours.',
    otherLabel: "Other / not sure",
    contact: {
      label: 'Other channels',
      emailTitle: 'Email',
      igTitle: 'Instagram',
      igNote: 'We also help over Instagram DM — send us a message and we\'ll reply there too.',
    },
    faq: {
      label: 'Frequently asked questions',
      title: 'Help center',
      items: [
        { q: 'How do I recover my password?', a: 'Use the "Forgot password" option available on the login screen.' },
        { q: 'How do I delete my account?', a: 'Contact us via the form or email, letting us know the app and the account email.' },
        { q: 'How do I report a bug?', a: 'Tell us the app name, version, device and a description of the issue.' },
      ],
    },
    legal: { privacy: 'Privacy Policy' },
    form: {
      name: 'Your name',
      namePh: 'What should we call you',
      email: 'Your email',
      emailPh: 'so we can reply',
      app: 'Which app?',
      message: 'Message',
      messagePh: "Describe what's happening — the more detail, the faster we can help.",
      submit: 'Send message',
      sending: 'Sending…',
      successTitle: 'Message sent!',
      successSub: "We've received your message and will reply to your email as soon as possible.",
      newMessage: 'Send another message',
      errorTitle: "Couldn't send it.",
      errorSub: 'Try again in a moment, or email us directly at',
    },
  },
  es: {
    back: 'Volver al EZV Studio',
    eyebrow: 'SOPORTE · EZV STUDIO',
    titleA: '¿Cómo podemos', titleB: 'ayudarte?',
    desc: 'Soporte para todas las apps de EZV Studio — Easy Driver, Ez Runner, Descomplica, Mulher + Saúde + Proteção, Servidor RJ+ y Hollywood Prompt Engine.',
    responseTime: 'Tiempo medio de respuesta: hasta 48 horas hábiles.',
    otherLabel: 'Otra / no lo sé',
    contact: {
      label: 'Otros canales',
      emailTitle: 'Correo',
      igTitle: 'Instagram',
      igNote: 'También atendemos por Direct de Instagram — envíanos un mensaje y te respondemos por ahí también.',
    },
    faq: {
      label: 'Preguntas frecuentes',
      title: 'Centro de ayuda',
      items: [
        { q: '¿Cómo recupero mi contraseña?', a: 'Usa la opción "Olvidé mi contraseña" disponible en la pantalla de inicio de sesión.' },
        { q: '¿Cómo elimino mi cuenta?', a: 'Contáctanos por el formulario o correo indicando la app y el correo de la cuenta.' },
        { q: '¿Cómo reporto un error?', a: 'Indica el nombre de la app, versión, dispositivo y una descripción del problema.' },
      ],
    },
    legal: { privacy: 'Política de Privacidad' },
    form: {
      name: 'Tu nombre',
      namePh: 'Cómo te llamamos',
      email: 'Tu correo',
      emailPh: 'para poder responderte',
      app: '¿Qué app?',
      message: 'Mensaje',
      messagePh: 'Describe lo que está pasando — cuanto más detalle, más rápido podemos ayudarte.',
      submit: 'Enviar mensaje',
      sending: 'Enviando…',
      successTitle: '¡Mensaje enviado!',
      successSub: 'Recibimos tu mensaje y responderemos a tu correo lo antes posible.',
      newMessage: 'Enviar otro mensaje',
      errorTitle: 'No se pudo enviar.',
      errorSub: 'Intenta de nuevo en un momento, o escríbenos directamente a',
    },
  },
};

function getInitialLangSUP() {
  try {
    const u = new URL(window.location.href);
    const fromUrl = u.searchParams.get('lang');
    if (fromUrl && SUP[fromUrl]) return fromUrl;
    const fromLs = localStorage.getItem('ezLang');
    if (fromLs && SUP[fromLs]) return fromLs;
  } catch {}
  return 'pt';
}

/* ── lang switch ──────────────────────────────────────── */
function SUPLangSwitch({ lang, setLang }) {
  const langs = [
    { code: 'pt', Flag: FlagBR },
    { code: 'en', Flag: FlagUS },
    { code: 'es', Flag: FlagES },
  ];
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {langs.map(({ code, Flag }) => {
        const active = code === lang;
        return (
          <button key={code} onClick={() => setLang(code)} style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 28, height: 28, borderRadius: 999,
            border: `1.5px solid ${active ? EDPC.purple : EDPC.border}`,
            background: 'transparent', padding: 0, cursor: 'pointer',
            opacity: active ? 1 : 0.55,
            transition: 'opacity 0.15s, border-color 0.15s',
            boxShadow: active ? `0 0 0 2px rgba(167,139,250,0.18)` : 'none',
          }}><Flag size={18} /></button>
        );
      })}
    </div>
  );
}

/* ── nav ──────────────────────────────────────────────── */
function SUPNav({ lang, setLang, T }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(10,10,11,0.72)',
      backdropFilter: 'blur(18px)',
      WebkitBackdropFilter: 'blur(18px)',
      borderBottom: `1px solid ${EDPC.border}`,
    }}>
      <div style={{
        maxWidth: 900, margin: '0 auto', padding: '14px 28px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
      }}>
        <a href={`index.html?lang=${lang}`} style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          textDecoration: 'none', color: EDPC.fg2,
          fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
          transition: 'color 0.2s',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.color = EDPC.fg; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = EDPC.fg2; }}
        >
          <span style={{ fontSize: 15, lineHeight: 1 }}>←</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span>EZV</span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: EDPC.purple, display: 'inline-block' }}/>
            <span>Studio</span>
          </span>
        </a>
        <SUPLangSwitch lang={lang} setLang={setLang} />
      </div>
    </nav>
  );
}

/* ── contact chip ─────────────────────────────────────── */
function SUPContactCard({ icon, title, value, href }) {
  return (
    <a
      href={href}
      target={href.startsWith('http') ? '_blank' : undefined}
      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '16px 18px', borderRadius: 14,
        background: EDPC.bg2, border: `1px solid ${EDPC.border}`,
        textDecoration: 'none', color: EDPC.fg,
        transition: 'border-color 0.2s, transform 0.2s',
        flex: 1, minWidth: 220,
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = EDPC.purpleDim; e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = EDPC.border; e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      <div style={{
        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
        background: EDPC.purpleSoft, border: `1px solid ${EDPC.purpleDim}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{icon}</div>
      <div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: EDPC.fg3 }}>{title}</div>
        <div style={{ fontSize: 14, fontWeight: 500, color: EDPC.fg, marginTop: 2 }}>{value}</div>
      </div>
    </a>
  );
}

/* ── form ─────────────────────────────────────────────── */
const supInputStyle = {
  width: '100%', boxSizing: 'border-box',
  height: 46, padding: '0 14px', borderRadius: 10,
  background: EDPC.bg, border: `1px solid ${EDPC.border}`,
  color: EDPC.fg, fontSize: 14, fontFamily: 'Inter, sans-serif',
  outline: 'none', transition: 'border-color 0.15s',
};

function SUPForm({ T, lang }) {
  const f = T.form;
  const [status, setStatus] = useS_SUP('idle'); // idle | sending | success | error
  const [name, setName] = useS_SUP('');
  const [email, setEmail] = useS_SUP('');
  const [app, setApp] = useS_SUP('');
  const [message, setMessage] = useS_SUP('');
  const [honey, setHoney] = useS_SUP('');

  async function onSubmit(e) {
    e.preventDefault();
    if (status === 'sending') return;
    if (honey) return; // bot trap
    setStatus('sending');
    const appLabel = SUP_APPS.find((a) => a.value === app)?.label || (app === 'outro' ? T.otherLabel : app) || '—';
    try {
      const res = await fetch(SUP_FORM_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          Nome: name,
          Email: email,
          App: appLabel,
          Mensagem: message,
          _subject: `Suporte EZV Studio — ${appLabel}`,
          _template: 'table',
          _captcha: 'false',
        }),
      });
      if (!res.ok) throw new Error('bad status');
      setStatus('success');
    } catch {
      setStatus('error');
    }
  }

  if (status === 'success') {
    return (
      <div style={{
        padding: '48px 32px', borderRadius: 20, textAlign: 'center',
        background: EDPC.bg2, border: `1px solid ${EDPC.purpleDim}`,
      }}>
        <div style={{
          width: 52, height: 52, borderRadius: 999, margin: '0 auto 20px',
          background: EDPC.purpleSoft, border: `1px solid ${EDPC.purpleDim}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={EDPC.purple} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 6L9 17l-5-5"/>
          </svg>
        </div>
        <div style={{ fontSize: 19, fontWeight: 500, color: EDPC.fg, marginBottom: 8 }}>{f.successTitle}</div>
        <p style={{ fontSize: 14, color: EDPC.fg2, lineHeight: 1.6, maxWidth: 380, margin: '0 auto 24px' }}>{f.successSub}</p>
        <button
          onClick={() => { setStatus('idle'); setName(''); setEmail(''); setMessage(''); }}
          style={{
            height: 42, padding: '0 20px', borderRadius: 999, cursor: 'pointer',
            background: 'transparent', border: `1px solid ${EDPC.borderHi}`, color: EDPC.fg,
            fontSize: 13, fontFamily: 'Inter, sans-serif',
          }}
        >{f.newMessage}</button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{
      display: 'flex', flexDirection: 'column', gap: 18,
      padding: '32px', borderRadius: 20,
      background: EDPC.bg2, border: `1px solid ${EDPC.border}`,
    }}>
      <input
        type="text" value={honey} onChange={(e) => setHoney(e.target.value)}
        name="_honey" tabIndex={-1} autoComplete="off"
        style={{ position: 'absolute', left: -9999, width: 1, height: 1, opacity: 0 }}
        aria-hidden="true"
      />
      <div className="sup-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <div>
          <label style={{ display: 'block', fontSize: 12, color: EDPC.fg2, marginBottom: 8 }}>{f.name}</label>
          <input required type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={f.namePh} style={supInputStyle}
            onFocus={(e) => { e.currentTarget.style.borderColor = EDPC.purpleDim; }}
            onBlur={(e) => { e.currentTarget.style.borderColor = EDPC.border; }}
          />
        </div>
        <div>
          <label style={{ display: 'block', fontSize: 12, color: EDPC.fg2, marginBottom: 8 }}>{f.email}</label>
          <input required type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={f.emailPh} style={supInputStyle}
            onFocus={(e) => { e.currentTarget.style.borderColor = EDPC.purpleDim; }}
            onBlur={(e) => { e.currentTarget.style.borderColor = EDPC.border; }}
          />
        </div>
      </div>
      <div>
        <label style={{ display: 'block', fontSize: 12, color: EDPC.fg2, marginBottom: 8 }}>{f.app}</label>
        <select required value={app} onChange={(e) => setApp(e.target.value)} style={{ ...supInputStyle, cursor: 'pointer' }}
          onFocus={(e) => { e.currentTarget.style.borderColor = EDPC.purpleDim; }}
          onBlur={(e) => { e.currentTarget.style.borderColor = EDPC.border; }}
        >
          <option value="" disabled>—</option>
          {SUP_APPS.map((a) => (
            <option key={a.value} value={a.value}>{a.value === 'outro' ? T.otherLabel : a.label}</option>
          ))}
        </select>
      </div>
      <div>
        <label style={{ display: 'block', fontSize: 12, color: EDPC.fg2, marginBottom: 8 }}>{f.message}</label>
        <textarea
          required rows={6} value={message} onChange={(e) => setMessage(e.target.value)} placeholder={f.messagePh}
          style={{ ...supInputStyle, height: 'auto', padding: '12px 14px', resize: 'vertical', fontFamily: 'Inter, sans-serif', lineHeight: 1.5 }}
          onFocus={(e) => { e.currentTarget.style.borderColor = EDPC.purpleDim; }}
          onBlur={(e) => { e.currentTarget.style.borderColor = EDPC.border; }}
        />
      </div>

      {status === 'error' && (
        <div style={{ fontSize: 13, color: '#f87171', lineHeight: 1.5 }}>
          {f.errorTitle} {f.errorSub} <a href={`mailto:${SUP_EMAIL}`} style={{ color: '#f87171' }}>{SUP_EMAIL}</a>.
        </div>
      )}

      <button
        type="submit"
        disabled={status === 'sending'}
        style={{
          height: 48, borderRadius: 999, border: '1px solid transparent',
          background: EDPC.fg, color: EDPC.bg,
          fontSize: 14, fontWeight: 500, fontFamily: 'Inter, sans-serif',
          cursor: status === 'sending' ? 'default' : 'pointer',
          opacity: status === 'sending' ? 0.7 : 1,
          transition: 'transform 0.2s',
        }}
        onMouseEnter={(e) => { if (status !== 'sending') e.currentTarget.style.transform = 'translateY(-1px)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
      >
        {status === 'sending' ? f.sending : f.submit}
      </button>
    </form>
  );
}

/* ── icons ────────────────────────────────────────────── */
function SUPMailIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={EDPC.purple} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>
    </svg>
  );
}
function SUPInstaIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={EDPC.purple} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.5" fill={EDPC.purple} stroke="none"/>
    </svg>
  );
}

/* ── app ──────────────────────────────────────────────── */
function SUPApp() {
  const [lang, setLang] = useS_SUP(getInitialLangSUP());
  useE_SUP(() => {
    try {
      localStorage.setItem('ezLang', lang);
      const u = new URL(window.location.href);
      u.searchParams.set('lang', lang);
      window.history.replaceState({}, '', u);
    } catch {}
  }, [lang]);
  const T = SUP[lang] || SUP.pt;

  return (
    <div style={{ background: EDPC.bg, color: EDPC.fg, fontFamily: 'Inter, sans-serif', minHeight: '100vh' }}>
      <SUPNav lang={lang} setLang={setLang} T={T} />
      <main>
        <EDPSection padTop={72} padBottom={100} style={{ maxWidth: 900 }}>
          <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 4px' }}>
            <Reveal><EDPEyebrow style={{ marginBottom: 20 }}>{T.eyebrow}</EDPEyebrow></Reveal>
            <Reveal delay={80}>
              <h1 style={{
                fontFamily: 'Inter, sans-serif',
                fontSize: 'clamp(38px, 6vw, 60px)',
                fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
                margin: 0, color: EDPC.fg,
              }}>
                {T.titleA}<br/>
                <span style={{ color: EDPC.purple, fontStyle: 'italic', fontWeight: 400 }}>{T.titleB}</span>
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: EDPC.fg2, margin: '24px 0 36px', maxWidth: 620 }}>{T.desc}</p>
            </Reveal>

            <Reveal delay={220} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 44 }}>
              <SUPContactCard icon={<SUPMailIcon />} title={T.contact.emailTitle} value={SUP_EMAIL} href={`mailto:${SUP_EMAIL}`} />
              <SUPContactCard icon={<SUPInstaIcon />} title={T.contact.igTitle} value="@ezvstudio" href={SUP_INSTAGRAM} />
            </Reveal>
            <Reveal delay={260} style={{ marginBottom: 20 }}>
              <p style={{ fontSize: 13, color: EDPC.fg3, lineHeight: 1.6, maxWidth: 620 }}>{T.contact.igNote}</p>
            </Reveal>

            <Reveal delay={290} style={{ marginBottom: 44 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 12, color: EDPC.fg2, fontFamily: 'JetBrains Mono, monospace',
                padding: '8px 14px', borderRadius: 999,
                border: `1px solid ${EDPC.border}`, background: EDPC.bg2,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: EDPC.green, boxShadow: `0 0 8px ${EDPC.green}` }}/>
                {T.responseTime}
              </span>
            </Reveal>

            <Reveal delay={320}>
              <SUPForm T={T} lang={lang} />
            </Reveal>
          </div>
        </EDPSection>

        <EDPSection padTop={0} padBottom={100} style={{ maxWidth: 900, borderTop: `1px solid ${EDPC.border}` }}>
          <div style={{ maxWidth: 900, margin: '0 auto', padding: '56px 4px 0' }}>
            <Reveal><EDPEyebrow style={{ marginBottom: 20 }}>{T.faq.label}</EDPEyebrow></Reveal>
            <Reveal delay={60}>
              <h2 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 'clamp(26px, 3.4vw, 34px)',
                fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 24px', color: EDPC.fg,
              }}>{T.faq.title}</h2>
            </Reveal>
            <div>
              {T.faq.items.map((item, i) => (
                <Reveal key={i} delay={100 + i * 40}>
                  <div style={{ padding: '20px 0', borderBottom: i < T.faq.items.length - 1 ? `1px solid ${EDPC.border}` : 'none' }}>
                    <div style={{ fontSize: 15, fontWeight: 500, color: EDPC.fg, marginBottom: 8 }}>{item.q}</div>
                    <div style={{ fontSize: 14, color: EDPC.fg2, lineHeight: 1.6 }}>{item.a}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </EDPSection>
      </main>
      <footer style={{
        borderTop: `1px solid ${EDPC.border}`,
        padding: '36px 32px',
        maxWidth: 900, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
        color: EDPC.fg3, letterSpacing: '0.06em',
      }}>
        <span>© 2026 EZV Studio · Suporte</span>
        <a
          href="/privacidade/"
          style={{ color: EDPC.fg3, textDecoration: 'none', transition: 'color 0.2s', fontSize: 11, letterSpacing: '0.06em' }}
          onMouseEnter={(e) => { e.currentTarget.style.color = EDPC.fg2; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = EDPC.fg3; }}
        >
          {T.legal.privacy}
        </a>
        <a
          href={SUP_INSTAGRAM}
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: EDPC.fg3, display: 'flex', alignItems: 'center', gap: 6, textDecoration: 'none', transition: 'color 0.2s', fontSize: 11, letterSpacing: '0.06em' }}
          onMouseEnter={(e) => { e.currentTarget.style.color = EDPC.fg2; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = EDPC.fg3; }}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="2" width="20" height="20" rx="5"/>
            <circle cx="12" cy="12" r="4"/>
            <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
          </svg>
          @ezvstudio
        </a>
      </footer>
    </div>
  );
}

const supRoot = ReactDOM.createRoot(document.getElementById('root'));
supRoot.render(<SUPApp />);