/* Ez Studio – Landing Page hi-fi dark premium (direção A) */
/* eslint-disable */

const { useState: useS_L, useEffect: useE_L } = React;

const LC = {
  bg: '#0a0a0b',
  bg2: '#0d0d10',
  bg3: '#111114',
  fg: '#f6f4ef',
  fg2: 'rgba(246,244,239,0.62)',
  fg3: 'rgba(246,244,239,0.4)',
  fg4: 'rgba(246,244,239,0.22)',
  border: 'rgba(255,255,255,0.07)',
  borderHi: 'rgba(255,255,255,0.14)',
  purple: '#a78bfa',
  purpleSoft: 'rgba(167,139,250,0.14)',
  purpleDim: 'rgba(167,139,250,0.32)',
};

const ECOSYSTEM_APPS = [
  { name: 'Cobinha EZ Snake', file: 'icon-cobinha', cat: 'GAME', link: 'https://play.google.com/store/apps/details?id=com.ezcorp.cobrinha_arcade' },
  { name: 'Puzzle EZ Classic', file: 'icon-puzzle-ez', cat: 'GAME', link: 'https://play.google.com/store/apps/details?id=com.ezcorp.ezblocos' },
  { name: 'Doce Mania', file: 'icon-doce-mania', cat: 'GAME' },
  { name: 'Wizard Thomas', file: 'icon-wizard-thomas', cat: 'GAME' },
  { name: 'Água · Vida Saudável', file: 'icon-agua', cat: 'HEALTH', link: 'https://play.google.com/store/apps/details?id=com.ezcorp.agua_vida_saudavel' },
  { name: 'Mulher · Saúde', file: 'icon-mulher', cat: 'HEALTH', link: 'https://play.google.com/store/apps/details?id=com.ezcorp.mulher_saude_e_protecao' },
  { name: 'Agenda Ez', file: 'icon-agenda', cat: 'APP', link: 'https://play.google.com/store/apps/details?id=com.rmtecnologias.agendaez' },
  { name: 'AppTest Console Br', file: 'icon-apptest', cat: 'DEV', link: 'https://play.google.com/store/apps/details?id=com.ezcorp.testadoresplayconsole' },
  { name: 'Athlo', file: 'icon-athlo', cat: 'FITNESS' },
  { name: 'Mercadão Ez', file: 'icon-mercadao', cat: 'APP' },
  { name: 'Jackie', file: 'icon-jackie', cat: 'KIDS' },
  { name: 'Hollywood Prompt Engine', file: 'icon-hollywood', cat: 'AI' },
];

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

/* ── Primitives ───────────────────────────────── */

function LSection({ children, id, padTop = 120, padBottom = 120, style }) {
  return (
    <section id={id} style={{ padding: `${padTop}px 0 ${padBottom}px`, position: 'relative', ...style }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px', position: 'relative' }}>
        {children}
      </div>
    </section>
  );
}

function LEyebrow({ children, style }) {
  return (
    <div style={{
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
      color: LC.purple, ...style,
    }}>{children}</div>
  );
}

function LButton({ children, variant = 'primary', href = '#', icon }) {
  const isPrimary = variant === 'primary';
  return (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      height: 48, padding: '0 24px', borderRadius: 999,
      fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
      letterSpacing: '-0.005em', textDecoration: 'none',
      background: isPrimary ? LC.fg : 'transparent',
      color: isPrimary ? LC.bg : LC.fg,
      border: isPrimary ? '1px solid transparent' : `1px solid ${LC.borderHi}`,
      transition: 'transform 0.2s, opacity 0.2s, border-color 0.2s',
      cursor: 'pointer',
    }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-1px)';
        if (!isPrimary) e.currentTarget.style.borderColor = LC.purple;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        if (!isPrimary) e.currentTarget.style.borderColor = LC.borderHi;
      }}
    >
      {children}
      {icon && <span aria-hidden style={{ fontSize: 13, opacity: 0.6 }}>{icon}</span>}
    </a>
  );
}

/* ── Lang switcher ────────────────────────────── */
function LLangSwitch({ 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 ? LC.purple : LC.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 LNav({ 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 ${LC.border}`,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '14px 40px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500,
          letterSpacing: '-0.01em', color: LC.fg,
        }}>
          <span>Ez</span>
          <span style={{ width: 5, height: 5, borderRadius: 999, background: LC.purple, boxShadow: `0 0 10px ${LC.purple}` }}/>
          <span>Studio</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          {[['#sobre', T.nav.about], ['#projetos', T.nav.projects], ['#apps', T.nav.apps], ['#contato', T.nav.contact]].map(([href, label]) => (
            <a key={href} href={href} style={{
              fontSize: 13, color: LC.fg2, textDecoration: 'none', transition: 'color 0.15s',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = LC.fg}
              onMouseLeave={(e) => e.currentTarget.style.color = LC.fg2}
            >{label}</a>
          ))}
          <div style={{ width: 1, height: 14, background: LC.border }}/>
          <LLangSwitch lang={lang} setLang={setLang} />
        </div>
      </div>
    </nav>
  );
}

/* ── Hero ─────────────────────────────────────── */
function LHero({ T }) {
  return (
    <LSection padTop={140} padBottom={160} style={{ overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)',
        width: 1000, height: 700,
        background: 'radial-gradient(50% 50% at 50% 50%, rgba(167,139,250,0.13) 0%, rgba(167,139,250,0) 70%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <Reveal>
          <LEyebrow style={{ marginBottom: 28 }}>{T.hero.eyebrow}</LEyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: 'clamp(52px, 8.5vw, 112px)',
            fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.94,
            margin: '0 0 32px', color: LC.fg,
          }}>
            {T.hero.h1a[0]}<br/>
            <em style={{ fontStyle: 'italic', color: LC.purple, fontWeight: 400 }}>{T.hero.h1a[1]}</em>
          </h1>
        </Reveal>
        <Reveal delay={180}>
          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)',
            color: LC.fg2, lineHeight: 1.65, fontFamily: 'Inter, sans-serif',
            margin: '0 auto 44px', maxWidth: 520,
          }}>{T.hero.sub}</p>
        </Reveal>
        <Reveal delay={260} style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <LButton variant="primary" href="#projetos">{T.hero.ctaProjects}</LButton>
          <LButton variant="ghost" href="#contato">{T.hero.ctaTalk}</LButton>
        </Reveal>
      </div>
    </LSection>
  );
}

/* ── About ────────────────────────────────────── */
function LAbout({ T }) {
  const a = T.about;
  const s = T.stats;

  function hl(text, phrase) {
    if (!text || !phrase) return text;
    const i = text.indexOf(phrase);
    if (i === -1) return text;
    return (
      <React.Fragment>
        {text.slice(0, i)}
        <em style={{ fontStyle: 'normal', color: LC.fg, fontWeight: 500 }}>{phrase}</em>
        {text.slice(i + phrase.length)}
      </React.Fragment>
    );
  }

  return (
    <LSection id="sobre" style={{ borderTop: `1px solid ${LC.border}` }}>
      <div className="l-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><LEyebrow style={{ marginBottom: 20 }}>{a.label}</LEyebrow></Reveal>
          <Reveal delay={80}>
            <h2 style={{
              fontFamily: 'Inter, sans-serif',
              fontSize: 'clamp(28px, 3.2vw, 44px)',
              fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
              margin: '0 0 32px', color: LC.fg, whiteSpace: 'pre-line',
            }}>{a.title}</h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {a.body.map((p, i) => (
                <React.Fragment key={i}>
                  {i === 1 && (
                    <div style={{
                      fontFamily: 'JetBrains Mono, monospace',
                      fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
                      color: LC.purple, marginBottom: 2,
                    }}>{a.tag}</div>
                  )}
                  <p style={{ fontSize: 15, color: LC.fg2, lineHeight: 1.7, margin: 0 }}>
                    {hl(p, a.bodyHl[i])}
                  </p>
                </React.Fragment>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal delay={200}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 1, background: LC.border,
            border: `1px solid ${LC.border}`, borderRadius: 20, overflow: 'hidden',
          }}>
            {[
              ['10+', s.active],
              ['100%', s.cross],
              ['AI', s.years],
              ['Online', s.city],
            ].map(([num, label]) => (
              <div key={label} style={{ background: LC.bg2, padding: '36px 30px', transition: 'background 0.2s' }}
                onMouseEnter={(e) => e.currentTarget.style.background = LC.bg3}
                onMouseLeave={(e) => e.currentTarget.style.background = LC.bg2}
              >
                <div style={{
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 48, fontWeight: 500, letterSpacing: '-0.03em',
                  color: LC.purple, lineHeight: 1, marginBottom: 10,
                }}>{num}</div>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: LC.fg3,
                }}>{label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </LSection>
  );
}

/* ── Projects ─────────────────────────────────── */
function LProjects({ T, lang }) {
  const p = T.projects;
  return (
    <LSection id="projetos" style={{
      borderTop: `1px solid ${LC.border}`,
      background: `linear-gradient(180deg, ${LC.bg} 0%, ${LC.bg2} 50%, ${LC.bg} 100%)`,
    }}>
      <Reveal><LEyebrow style={{ marginBottom: 20 }}>{p.label}</LEyebrow></Reveal>
      <Reveal delay={80}>
        <h2 style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 'clamp(28px, 3.6vw, 52px)',
          fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          margin: '0 0 52px', color: LC.fg, whiteSpace: 'pre-line',
        }}>{p.title}</h2>
      </Reveal>

      <Reveal delay={120}>
        <EasyDriverCard T={T} layout="wide" />
      </Reveal>

      <div className="l-proj-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14 }}>
        <Reveal delay={180}>
          <EzRunnerCard T={T} />
        </Reveal>
        <Reveal delay={240}>
          <DescomplicaCard T={T} />
        </Reveal>
      </div>
    </LSection>
  );
}

/* ── Ecosystem ────────────────────────────────── */
function LEcosystem({ T }) {
  const e = T.ecosystem;
  return (
    <LSection id="apps" style={{
      borderTop: `1px solid ${LC.border}`,
      background: `linear-gradient(180deg, ${LC.bg} 0%, ${LC.bg2} 50%, ${LC.bg} 100%)`,
    }}>
      <div className="l-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 56 }}>
        <div>
          <Reveal><LEyebrow style={{ marginBottom: 20 }}>{e.label}</LEyebrow></Reveal>
          <Reveal delay={80}>
            <h2 style={{
              fontFamily: 'Inter, sans-serif',
              fontSize: 'clamp(28px, 3.6vw, 52px)',
              fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
              margin: 0, color: LC.fg,
            }}>
              <span style={{ color: LC.fg2 }}>{e.titleA}</span><br/>
              <em style={{ fontStyle: 'italic', color: LC.purple, fontWeight: 400 }}>{e.titleB}</em>
            </h2>
          </Reveal>
        </div>
        <Reveal delay={120} style={{ display: 'flex', alignItems: 'flex-end' }}>
          <p style={{ fontSize: 15, color: LC.fg2, lineHeight: 1.7, margin: 0 }}>{e.sub}</p>
        </Reveal>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: 10,
      }}>
        {ECOSYSTEM_APPS.map((app, i) => {
          const Tag = app.link ? 'a' : 'div';
          const tagProps = app.link ? {
            href: app.link, target: '_blank', rel: 'noopener noreferrer',
          } : {};
          return (
            <Reveal key={app.file} delay={Math.min(i * 25, 220)}>
              <Tag {...tagProps} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                gap: 10, padding: '22px 14px',
                background: LC.bg2,
                border: `1px solid ${LC.border}`,
                borderRadius: 16,
                position: 'relative',
                textDecoration: 'none',
                transition: 'border-color 0.22s, transform 0.22s',
                cursor: app.link ? 'pointer' : 'default',
              }}
                onMouseEnter={(ev) => {
                  if (app.link) { ev.currentTarget.style.borderColor = LC.purple; ev.currentTarget.style.transform = 'translateY(-2px)'; }
                }}
                onMouseLeave={(ev) => {
                  ev.currentTarget.style.borderColor = LC.border;
                  ev.currentTarget.style.transform = 'translateY(0)';
                }}
              >
                {app.link && (
                  <span aria-hidden style={{
                    position: 'absolute', top: 8, right: 9,
                    fontFamily: 'Inter, sans-serif', fontSize: 10,
                    color: LC.purple, opacity: 0.7,
                  }}>↗</span>
                )}
                <div style={{
                  width: 58, height: 58, borderRadius: 14, overflow: 'hidden',
                  border: `1px solid ${LC.border}`,
                  boxShadow: '0 8px 20px -8px rgba(0,0,0,0.5)',
                  flexShrink: 0,
                }}>
                  <img
                    src={`assets/${app.file}.png`}
                    alt={app.name}
                    style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover' }}
                  />
                </div>
                <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{
                    fontFamily: 'Inter, sans-serif',
                    fontSize: 12, fontWeight: 500,
                    color: LC.fg, lineHeight: 1.3,
                  }}>{app.name}</div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: LC.fg3,
                  }}>{app.cat}</div>
                </div>
              </Tag>
            </Reveal>
          );
        })}
      </div>
    </LSection>
  );
}

/* ── Contact ──────────────────────────────────── */
function LContact({ T }) {
  const c = T.contact;
  return (
    <LSection id="contato" style={{ borderTop: `1px solid ${LC.border}` }}>
      <div className="l-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><LEyebrow style={{ marginBottom: 20 }}>{c.label}</LEyebrow></Reveal>
          <Reveal delay={80}>
            <h2 style={{
              fontFamily: 'Inter, sans-serif',
              fontSize: 'clamp(28px, 3.6vw, 52px)',
              fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
              margin: '0 0 24px', color: LC.fg,
            }}>
              {c.titleBreak[0]}<br/>
              <em style={{ fontStyle: 'italic', color: LC.purple, fontWeight: 400 }}>{c.titleBreak[1]}</em>
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontSize: 15, color: LC.fg2, lineHeight: 1.7, margin: '0 0 28px', maxWidth: 400, fontFamily: 'Inter, sans-serif' }}>
              {c.bodyOpen}
            </p>
          </Reveal>
          <Reveal delay={180}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="mailto:contato@ezstudio.com.br" style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 13, color: LC.purple, textDecoration: 'none',
                letterSpacing: '0.04em', transition: 'opacity 0.15s',
              }}
                onMouseEnter={(e) => e.currentTarget.style.opacity = '0.7'}
                onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
              >contato@ezstudio.com.br</a>
              <span style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11, color: LC.fg3, letterSpacing: '0.08em',
              }}>{c.city}</span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={160}>
          <form style={{ display: 'flex', flexDirection: 'column', gap: 12 }} onSubmit={(e) => e.preventDefault()}>
            {[{ placeholder: c.nameP, type: 'text' }, { placeholder: c.emailP, type: 'email' }].map(({ placeholder, type }) => (
              <input key={placeholder} type={type} placeholder={placeholder} style={{
                width: '100%', height: 48, padding: '0 16px', borderRadius: 10,
                background: LC.bg2, border: `1px solid ${LC.border}`,
                color: LC.fg, fontSize: 14, fontFamily: 'Inter, sans-serif',
                outline: 'none', transition: 'border-color 0.2s',
              }}
                onFocus={(e) => e.currentTarget.style.borderColor = LC.purpleDim}
                onBlur={(e) => e.currentTarget.style.borderColor = LC.border}
              />
            ))}
            <textarea placeholder={c.msgP} rows={5} style={{
              width: '100%', padding: '14px 16px', borderRadius: 10,
              background: LC.bg2, border: `1px solid ${LC.border}`,
              color: LC.fg, fontSize: 14, fontFamily: 'Inter, sans-serif',
              outline: 'none', resize: 'vertical', transition: 'border-color 0.2s',
            }}
              onFocus={(e) => e.currentTarget.style.borderColor = LC.purpleDim}
              onBlur={(e) => e.currentTarget.style.borderColor = LC.border}
            />
            <button type="submit" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              height: 48, padding: '0 24px', borderRadius: 999,
              background: LC.fg, color: LC.bg,
              border: 'none', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              letterSpacing: '-0.005em', alignSelf: 'flex-start',
              transition: 'opacity 0.2s, transform 0.2s',
            }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
            >
              {c.send}
              <span aria-hidden style={{ fontSize: 13, opacity: 0.55 }}>→</span>
            </button>
          </form>
        </Reveal>
      </div>
    </LSection>
  );
}

/* ── Footer ───────────────────────────────────── */
function LFooter({ T }) {
  const f = T.footer;
  return (
    <footer style={{
      borderTop: `1px solid ${LC.border}`,
      padding: '32px 40px',
      maxWidth: 1280, margin: '0 auto',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
      color: LC.fg3, letterSpacing: '0.06em',
    }}>
      <span>{f.rights}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: LC.purple, boxShadow: `0 0 8px ${LC.purple}` }}/>
        <span>{f.made}</span>
      </div>
    </footer>
  );
}

/* ── App ──────────────────────────────────────── */
function LandingApp() {
  const [lang, setLang] = useS_L(getInitialLangL());

  useE_L(() => {
    try {
      localStorage.setItem('ezLang', lang);
      const u = new URL(window.location.href);
      u.searchParams.set('lang', lang);
      window.history.replaceState({}, '', u);
    } catch {}
    window.__ezLang = lang;
    window.__ezSetLang = setLang;
  }, [lang, setLang]);

  window.__ezLang = lang;

  const T = I18N[lang] || I18N.pt;

  return (
    <div style={{ background: LC.bg, color: LC.fg, fontFamily: 'Inter, sans-serif', minHeight: '100vh' }}>
      <LNav lang={lang} setLang={setLang} T={T} />
      <main>
        <LHero T={T} key={'hero-' + lang} />
        <LAbout T={T} key={'about-' + lang} />
        <LProjects T={T} lang={lang} key={'proj-' + lang} />
        <LEcosystem T={T} key={'eco-' + lang} />
        <LContact T={T} key={'contact-' + lang} />
      </main>
      <LFooter T={T} />
    </div>
  );
}

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