/* WMJR Consulting — landing-page + i18n */

/* ── Translations ── */
const TRANSLATIONS = {
  en: {
    nav: {
      links: [['servicos','Services'],['casos','Cases'],['processo','Process'],['sobre','About'],['contacto','Contact']],
      cta: 'Book a meeting'
    },
    hero: {
      eyebrow: 'AI & Data Solutions',
      h1: [['Data that ','decides','.'],['AI that ','delivers','.']],
      desc: 'Boutique consulting in AI & Data. Strategy, platforms, models and automation — to transform data into measurable competitive advantage.',
      ctaPrimary: 'Book a meeting', ctaSecondary: 'See cases',
      stats: ['● 40+ projects', '● 99.97% uptime', '● Porto · Lisbon']
    },
    logos: { label: 'Technology stack' },
    services: {
      eyebrow: 'What we do',
      h2: ['Four practice areas.', 'One integrated stack.'],
      counter: '04 areas', cta: 'Talk to a specialist', deliverLabel: 'What we deliver',
      items: [
        { id:'strategy', tag:'01', title:'Data Strategy', desc:'We define vision, governance and data roadmap aligned with business objectives.', items:['Maturity assessment','Roadmap & governance','Compliance & privacy','Operating model'] },
        { id:'eng',      tag:'02', title:'Data Engineering', desc:'Robust platforms — lakehouses, ingestion and transformation pipelines, quality.', items:['Lakehouse & warehousing','ETL/ELT & streaming','Data quality & observability','Cloud infrastructure'] },
        { id:'bi',       tag:'03', title:'Analytics & BI', desc:'Self-service dashboards, semantic metrics and democratised data access.', items:['Executive dashboards','Semantic layer','Self-service BI','KPIs & forecasting'] },
        { id:'ai',       tag:'04', title:'AI & Automation', desc:'Predictive models, LLMs, copilots and process automation with agentic systems.', items:['ML / predictive','LLMs & RAG','Agentic systems','Process automation'] }
      ]
    },
    metrics: {
      eyebrow: 'Results', h2: 'Metrics that speak for themselves.',
      stats: [
        { to:40,    suffix:'+',   label:'projects delivered in banking, energy and retail' },
        { to:3.2,   suffix:'x',   label:'average time-to-insight acceleration post-project' },
        { to:99.97, suffix:'%',   label:'average uptime on managed data pipelines' },
        { to:12,    suffix:' wk', label:'average time-to-value on AI projects' }
      ]
    },
    cases: {
      eyebrow: 'Case studies', h2: 'Recent work.',
      items: [
        { sector:'Banking', client:'Top-5 Iberian bank',    title:'Unified data platform for risk and compliance',            metric:'−68%', metricLabel:'regulatory reporting time',        tags:['Lakehouse','BCBS-239','Snowflake'] },
        { sector:'Energy',  client:'European grid operator', title:'Predictive load models and dispatch optimisation',         metric:'+14%', metricLabel:'annual operational efficiency',    tags:['ML','Forecasting','MLOps'] },
        { sector:'Retail',  client:'Omnichannel chain',      title:'Procurement copilot with RAG over internal catalogue',    metric:'−40%', metricLabel:'average purchasing decision time', tags:['LLM','RAG','Agents'] }
      ]
    },
    testimonials: {
      eyebrow: 'What clients say',
      h2: ['Results confirmed', 'by those who lived them.'],
      items: [
        { quote:"The data platform reduced regulatory reporting time from 3 days to 4 hours. Senior delivery, no surprises, no juniors managing the project.", name:'Director of Risk Data', company:'Top-5 Iberian bank', sector:'Banking' },
        { quote:"Predictive models in production in 8 weeks, with an immediate +14% in operational efficiency. What was promised was delivered — on time.", name:'Head of Innovation', company:'European grid operator', sector:'Energy' },
        { quote:"The procurement copilot transformed how the team works. Less time on research, more time negotiating with real data behind every decision.", name:'VP Supply Chain', company:'Omnichannel chain', sector:'Retail' }
      ]
    },
    process: {
      eyebrow: 'How we work', h2: 'Four phases. Results in weeks.',
      steps: [
        { n:'01', t:'Discovery', d:'Stakeholder workshops, maturity assessment, data analysis and existing architecture review.' },
        { n:'02', t:'Roadmap',   d:'Phased plan with priorities, risks, dependencies and measurable milestones.' },
        { n:'03', t:'Delivery',  d:'Dedicated squads work with your team in short sprints with iterative deliverables.' },
        { n:'04', t:'Operations',d:'Handover, training, continuous observability and 24/7 support when applicable.' }
      ]
    },
    about: {
      eyebrow: 'Who we are', h2: ['Consulting. Senior.', 'Hands-on.'],
      p1: 'Data engineer and systems architect with experience in critical projects in banking, energy and retail.',
      p2: "No juniors on critical projects. No opaque subcontracting. We work closely with the client's team.",
      linkedin: 'LinkedIn →',
      stats: [{ v:'15+', l:'years of average experience' },{ v:'100%', l:'senior consultants' },{ v:'04', l:'main sectors' },{ v:'PT · BR', l:'native markets' }]
    },
    cta: {
      h2: 'Ready to transform data into decisions?',
      p: 'Book a 30-minute discovery session. No commitment, with a maturity assessment at the end.',
      btn: 'Book a meeting →'
    },
    contact: {
      eyebrow: 'Contact', h2: 'Tell us about your challenge.',
      p: 'We respond within 24 business hours. For strategic conversations, book a discovery session directly.',
      location: 'Portugal · Remote',
      fields: { name:'Name', namePh:'Maria Silva', email:'Email', emailPh:'maria@company.com', company:'Company', companyPh:'Company Ltd.', role:'Role', rolePh:'Head of Data', challenge:'Challenge', challengePh:'Tell us briefly about your context and objectives…' },
      required: 'Fields marked * are required.',
      sending: 'Sending…',
      success: '✓ Message sent! We\'ll be in touch shortly.',
      error: '⚠ Error sending. Please email adm@wmjrconsulting.pt',
      btn: 'Send request →'
    },
    footer: {
      tagline: 'Boutique consulting in AI & Data Solutions. Strategy, platforms, models and automation.',
      services: 'Services', contact: 'Contact',
      serviceList: ['Data Strategy','Data Engineering','Analytics & BI','AI & Automation'],
      copyright: '© 2026 WMJR Consulting, Lda · Portugal',
      legal: 'Privacy · Terms · Cookies'
    }
  },

  pt: {
    nav: {
      links: [['servicos','Serviços'],['casos','Casos'],['processo','Processo'],['sobre','Sobre'],['contacto','Contacto']],
      cta: 'Marcar reunião'
    },
    hero: {
      eyebrow: 'AI & Data Solutions',
      h1: [['Dados que ','decidem','.'],['IA que ','entrega','.']],
      desc: 'Consultoria boutique em AI & Data. Estratégia, plataformas, modelos e automação — para transformar dados em vantagem competitiva mensurável.',
      ctaPrimary: 'Marcar reunião', ctaSecondary: 'Ver casos',
      stats: ['● 40+ projetos', '● 99.97% uptime', '● Porto · Lisboa']
    },
    logos: { label: 'Stack tecnológico' },
    services: {
      eyebrow: 'O que fazemos',
      h2: ['Quatro áreas de prática.', 'Uma stack integrada.'],
      counter: '04 áreas', cta: 'Falar com um especialista', deliverLabel: 'O que entregamos',
      items: [
        { id:'strategy', tag:'01', title:'Data Strategy',    desc:'Definimos visão, governance e roadmap de dados alinhados com os objetivos de negócio.',                items:['Avaliação de maturidade','Roadmap & governance','Compliance & privacidade','Modelo operacional'] },
        { id:'eng',      tag:'02', title:'Data Engineering', desc:'Plataformas robustas — lakehouses, pipelines de ingestão e transformação, qualidade.',                items:['Lakehouse & warehousing','ETL/ELT & streaming','Data quality & observability','Infraestrutura cloud'] },
        { id:'bi',       tag:'03', title:'Analytics & BI',   desc:'Dashboards self-service, métricas semânticas e democratização do acesso a dados.',                   items:['Dashboards executivos','Camada semântica','Self-service BI','KPIs & forecasting'] },
        { id:'ai',       tag:'04', title:'AI & Automação',   desc:'Modelos preditivos, LLMs, copilots e automação de procedimentos com sistemas agênticos.',             items:['ML / preditivo','LLMs & RAG','Sistemas agênticos','Automação de processos'] }
      ]
    },
    metrics: {
      eyebrow: 'Resultados', h2: 'Métricas que falam por si.',
      stats: [
        { to:40,    suffix:'+',    label:'projetos entregues em banca, energia e retalho' },
        { to:3.2,   suffix:'x',    label:'aceleração média do time-to-insight pós-projeto' },
        { to:99.97, suffix:'%',    label:'uptime médio em pipelines de dados geridos' },
        { to:12,    suffix:' sem', label:'time-to-value médio em projetos de AI' }
      ]
    },
    cases: {
      eyebrow: 'Casos de estudo', h2: 'Trabalho recente.',
      items: [
        { sector:'Banca',   client:'Top-5 banco ibérico',    title:'Plataforma de dados unificada para risco e compliance',            metric:'−68%', metricLabel:'tempo de relatórios regulatórios', tags:['Lakehouse','BCBS-239','Snowflake'] },
        { sector:'Energia', client:'Operador de rede europeu',title:'Modelos preditivos de carga e otimização de despacho',            metric:'+14%', metricLabel:'eficiência operacional anual',    tags:['ML','Forecasting','MLOps'] },
        { sector:'Retalho', client:'Cadeia omnicanal',        title:'Copilot de procurement com RAG sobre catálogo interno',           metric:'−40%', metricLabel:'tempo médio de decisão de compra',tags:['LLM','RAG','Agents'] }
      ]
    },
    testimonials: {
      eyebrow: 'O que dizem os clientes',
      h2: ['Resultados confirmados', 'por quem os viveu.'],
      items: [
        { quote:'A plataforma de dados reduziu o tempo de reporting regulatório de 3 dias para 4 horas. Entrega sénior, sem surpresas, sem juniores a gerir.', name:'Director of Risk Data', company:'Top-5 banco ibérico', sector:'Banca' },
        { quote:'Modelos preditivos em produção em 8 semanas, com +14% de eficiência operacional imediato. O que foi prometido, foi entregue — e dentro do prazo.', name:'Head of Innovation', company:'Operador de rede europeu', sector:'Energia' },
        { quote:'O copilot de procurement transformou a forma como a equipa trabalha. Menos tempo em pesquisa, mais tempo em negociação com dados reais.', name:'VP Supply Chain', company:'Cadeia omnicanal', sector:'Retalho' }
      ]
    },
    process: {
      eyebrow: 'Como trabalhamos', h2: 'Quatro fases. Resultado em semanas.',
      steps: [
        { n:'01', t:'Discovery', d:'Workshop com stakeholders, avaliação de maturidade, análise de dados e arquitetura existente.' },
        { n:'02', t:'Roadmap',   d:'Plano faseado com prioridades, riscos, dependências e marcos mensuráveis.' },
        { n:'03', t:'Entrega',   d:'Squads dedicadas trabalham com a vossa equipa em sprints curtos com entregas iterativas.' },
        { n:'04', t:'Operação',  d:'Handover, formação, observabilidade contínua e suporte 24/7 quando aplicável.' }
      ]
    },
    about: {
      eyebrow: 'Quem somos', h2: ['Consultoria. Sénior.', 'Hands-on.'],
      p1: 'Engenheiro de dados e arquiteto de sistemas com experiência em projetos críticos de banca, energia e retalho.',
      p2: 'Sem juniores em projetos críticos. Sem subcontratação opaca. Trabalhamos em estreita colaboração com a equipa do cliente.',
      linkedin: 'LinkedIn →',
      stats: [{ v:'15+', l:'anos de experiência média' },{ v:'100%', l:'consultores seniores' },{ v:'04', l:'sectores principais' },{ v:'PT · BR', l:'mercados nativos' }]
    },
    cta: {
      h2: 'Pronto para transformar dados em decisão?',
      p: 'Marque uma sessão de descoberta de 30 minutos. Sem compromisso, com avaliação de maturidade no final.',
      btn: 'Marcar reunião →'
    },
    contact: {
      eyebrow: 'Contacto', h2: 'Conte-nos sobre o seu desafio.',
      p: 'Respondemos em 24 horas úteis. Para conversas estratégicas, marque diretamente uma sessão de descoberta.',
      location: 'Portugal · Remoto',
      fields: { name:'Nome', namePh:'Maria Silva', email:'Email', emailPh:'maria@empresa.pt', company:'Empresa', companyPh:'Empresa, S.A.', role:'Cargo', rolePh:'Head of Data', challenge:'Desafio', challengePh:'Conte-nos brevemente sobre o vosso contexto e objetivos…' },
      required: 'Os campos com * são obrigatórios.',
      sending: 'A enviar…',
      success: '✓ Mensagem enviada! Entraremos em contacto brevemente.',
      error: '⚠ Erro ao enviar. Escreva para adm@wmjrconsulting.pt',
      btn: 'Enviar pedido →'
    },
    footer: {
      tagline: 'Consultoria boutique em AI & Data Solutions. Estratégia, plataformas, modelos e automação.',
      services: 'Serviços', contact: 'Contacto',
      serviceList: ['Data Strategy','Data Engineering','Analytics & BI','AI & Automação'],
      copyright: '© 2026 WMJR Consulting, Lda · Portugal',
      legal: 'Privacidade · Termos · Cookies'
    }
  }
};

/* ── Language Context ── */
const LangContext = React.createContext('en');
function useLang() { return React.useContext(LangContext); }

/* ── Scroll fade-in hook ── */
function useFadeIn(delay = 0) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (delay) el.style.transitionDelay = delay + 'ms';
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { el.classList.add('lp-visible'); obs.disconnect(); }
    }, { threshold: 0.1 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

/* ── Theme icons ── */
function SunIcon() {
  return (
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
      <circle cx="12" cy="12" r="5"/>
      <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
      <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
    </svg>
  );
}
function MoonIcon() {
  return (
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  );
}

/* ── NAV ── */
function LPNav({ isDark = false, onToggleDark, lang = 'en', onToggleLang }) {
  const t = TRANSLATIONS[lang].nav;
  const [menuOpen, setMenuOpen] = React.useState(false);
  const scrollTo = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setMenuOpen(false);
  };
  const iconBtn = { background: 'transparent', border: '1px solid var(--line)', borderRadius: 8, cursor: 'pointer', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-2)', transition: 'all 160ms ease', flexShrink: 0 };
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'color-mix(in srgb, var(--bg) 92%, transparent)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <WMJRMark size={20} mono={isDark} compact />
        <nav className="lp-nav-links" style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500, color: 'var(--ink-2)' }}>
          {t.links.map(([id, label]) =>
            <a key={id} onClick={() => scrollTo(id)} style={{ cursor: 'pointer', color: 'inherit', textDecoration: 'none' }}>{label}</a>
          )}
        </nav>
        <div className="lp-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {/* Language toggle */}
          <button onClick={onToggleLang} aria-label="Switch language"
            style={{ ...iconBtn, width: 'auto', padding: '0 10px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', gap: 0 }}>
            <span style={{ color: lang === 'en' ? 'var(--brand-accent)' : 'var(--ink-4)' }}>EN</span>
            <span style={{ color: 'var(--line)', margin: '0 4px' }}>|</span>
            <span style={{ color: lang === 'pt' ? 'var(--brand-accent)' : 'var(--ink-4)' }}>PT</span>
          </button>
          {/* Dark mode toggle */}
          <button onClick={onToggleDark} aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'} style={iconBtn}>
            {isDark ? <SunIcon /> : <MoonIcon />}
          </button>
          <Button variant="primary" size="sm" onClick={() => scrollTo('contacto')}>{t.cta}</Button>
        </div>
        <button className="lp-hamburger" onClick={() => setMenuOpen(!menuOpen)}
          style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 8, color: 'var(--ink-1)', fontSize: 22, lineHeight: 1 }}
          aria-label="Menu" aria-expanded={menuOpen}>
          {menuOpen ? '✕' : '☰'}
        </button>
      </div>
      {menuOpen && (
        <div style={{ background: 'var(--bg)', borderTop: '1px solid var(--line)', padding: '20px 32px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
          {t.links.map(([id, label]) =>
            <a key={id} onClick={() => scrollTo(id)} style={{ cursor: 'pointer', color: 'var(--ink-1)', textDecoration: 'none', fontSize: 17, fontWeight: 500, padding: '4px 0', borderBottom: '1px solid var(--line-2)' }}>
              {label}
            </a>
          )}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <Button variant="primary" size="md" onClick={() => scrollTo('contacto')}>{t.cta}</Button>
            <button onClick={() => { onToggleLang(); setMenuOpen(false); }} aria-label="Switch language"
              style={{ ...iconBtn, width: 'auto', padding: '0 10px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600 }}>
              <span style={{ color: lang === 'en' ? 'var(--brand-accent)' : 'var(--ink-4)' }}>EN</span>
              <span style={{ color: 'var(--line)', margin: '0 4px' }}>|</span>
              <span style={{ color: lang === 'pt' ? 'var(--brand-accent)' : 'var(--ink-4)' }}>PT</span>
            </button>
            <button onClick={() => { onToggleDark(); setMenuOpen(false); }} style={{ ...iconBtn, width: 44, height: 44 }}>
              {isDark ? <SunIcon /> : <MoonIcon />}
            </button>
          </div>
        </div>
      )}
    </header>
  );
}

/* ── HERO ── */
function LPHero() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].hero;
  const ref = useFadeIn();
  return (
    <section style={{ padding: '96px 32px 80px', maxWidth: 1280, margin: '0 auto' }}>
      <div ref={ref} className="lp-fade lp-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--brand-accent)', marginBottom: 28 }}>
            {t.eyebrow}
          </div>
          <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.96, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--ink-1)' }}>
            {t.h1.map(([pre, accent, post], i) =>
              <React.Fragment key={i}>
                {i > 0 && <br />}
                {pre}<span style={{ color: 'var(--brand-accent)' }}>{accent}</span>{post}
              </React.Fragment>
            )}
          </h1>
          <p style={{ marginTop: 28, marginBottom: 36, color: 'var(--ink-3)', fontSize: 19, lineHeight: 1.55, maxWidth: '54ch', fontWeight: 400 }}>{t.desc}</p>
          <div className="lp-hero-cta" style={{ display: 'flex', gap: 12 }}>
            <Button variant="primary" size="lg" onClick={() => document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' })}>{t.ctaPrimary}</Button>
            <Button variant="ghost" size="lg" onClick={() => document.getElementById('casos')?.scrollIntoView({ behavior: 'smooth' })}>{t.ctaSecondary}</Button>
          </div>
          <div className="lp-hero-stats" style={{ marginTop: 56, display: 'flex', gap: 32, fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
            {t.stats.map(s => <span key={s}>{s}</span>)}
          </div>
        </div>
        <div className="lp-hero-panel" style={{ background: 'var(--brand-deep)', borderRadius: 14, padding: 28, color: '#fff', minHeight: 340, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', backgroundImage: 'radial-gradient(circle at 80% 10%, rgba(242,107,58,0.25), transparent 55%)', boxShadow: '0 24px 60px -20px rgba(0,0,0,0.4)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand-accent)' }}>// ai.pipeline.status</div>
          <div style={{ display: 'grid', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 14 }}>
            {[['models_in_prod','12','var(--brand-accent)'],['data_quality','99.6%',null],['insights_24h','146 ✓','var(--brand-accent)'],['model_accuracy','0.93',null],['drift_30d','0.3% ↓','var(--brand-accent)']].map(([k,v,c]) =>
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'rgba(255,255,255,0.6)' }}>{k}</span>
                <span style={{ color: c || '#fff' }}>{v}</span>
              </div>
            )}
          </div>
          <div style={{ paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.12)', fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)' }}>
            live from prod · last sync 12s ago
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── LOGOS / STACK ── */
const TECH_STACK = ['Snowflake','dbt','Databricks','Apache Spark','Azure','AWS','GCP','Power BI','LangChain','Python'];

function LPLogos() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].logos;
  const ref = useFadeIn();
  return (
    <section style={{ padding: '40px 32px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--ink-4)', marginBottom: 20, textAlign: 'center' }}>{t.label}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', alignItems: 'center' }}>
          {TECH_STACK.map(tech =>
            <span key={tech} style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: 'var(--ink-3)', padding: '8px 18px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--bg-alt)' }}>{tech}</span>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── SERVIÇOS ── */
function LPServices() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].services;
  const [activeId, setActiveId] = React.useState('strategy');
  const cur = t.items.find(s => s.id === activeId) || t.items[0];
  const ref = useFadeIn();
  return (
    <section id="servicos" style={{ padding: '96px 32px', background: 'var(--bg-alt)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>
              {t.h2[0]}<br />{t.h2[1]}
            </h2>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-3)' }}>{t.counter}</div>
        </div>
        <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--line)', marginBottom: 40, overflowX: 'auto' }}>
          {t.items.map(s => {
            const isActive = s.id === activeId;
            return (
              <button key={s.id} onClick={() => setActiveId(s.id)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '18px 28px', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start', minWidth: 160, borderBottom: isActive ? '2px solid var(--brand-accent)' : '2px solid transparent', marginBottom: -1, color: isActive ? 'var(--ink-1)' : 'var(--ink-3)', fontFamily: 'var(--font-display)', transition: 'all 200ms ease' }}>
                <span style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: isActive ? 'var(--brand-accent)' : 'var(--ink-4)' }}>{s.tag}</span>
                <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{s.title}</span>
              </button>
            );
          })}
        </div>
        <div className="lp-services-panel" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.1 }}>{cur.title}</h3>
            <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 18, lineHeight: 1.55, maxWidth: '50ch' }}>{cur.desc}</p>
            <div style={{ marginTop: 32 }}>
              <Button variant="link" onClick={() => document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' })}>{t.cta}</Button>
            </div>
          </div>
          <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 32 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'var(--ink-3)', marginBottom: 18 }}>{t.deliverLabel}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
              {cur.items.map(it =>
                <li key={it} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontSize: 16, color: 'var(--ink-1)' }}>
                  <span style={{ width: 8, height: 8, marginTop: 8, background: 'var(--brand-accent)', borderRadius: 2, flexShrink: 0 }} />{it}
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── MÉTRICAS ── */
function CounterStat({ to, suffix = '', label }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const dur = 1400, start = performance.now();
          const tick = now => { const t = Math.min(1,(now-start)/dur); setVal(to*(1-Math.pow(1-t,3))); if(t<1) requestAnimationFrame(tick); };
          requestAnimationFrame(tick); obs.disconnect();
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to]);
  const display = Number.isInteger(to) ? Math.round(val) : val.toFixed(2);
  return (
    <div ref={ref} style={{ padding: '32px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px,6vw,80px)', fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--ink-1)', lineHeight: 1 }}>{display}{suffix}</div>
      <div style={{ marginTop: 12, fontSize: 16, color: 'var(--ink-3)', maxWidth: '32ch', lineHeight: 1.4 }}>{label}</div>
    </div>
  );
}

function LPMetrics() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].metrics;
  const ref = useFadeIn();
  return (
    <section style={{ padding: '96px 32px' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>{t.h2}</h2>
        </div>
        <div className="lp-metrics-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32 }}>
          {t.stats.map(s => <CounterStat key={s.label} to={s.to} suffix={s.suffix} label={s.label} />)}
        </div>
      </div>
    </section>
  );
}

/* ── CASOS ── */
function LPCases() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].cases;
  const ref = useFadeIn();
  return (
    <section id="casos" style={{ padding: '96px 32px', background: 'var(--bg-alt)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>{t.h2}</h2>
        </div>
        <div className="lp-cases-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
          {t.items.map((c, i) =>
            <article key={i} className="lp-case" style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 28, display: 'flex', flexDirection: 'column', gap: 18, transition: 'transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease', cursor: 'pointer', minHeight: 360 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'var(--brand-accent)' }}>{c.sector}</span>
                <span style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', fontSize: 14, color: 'var(--ink-2)' }}>↗</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{c.client}</div>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--ink-1)', lineHeight: 1.2 }}>{c.title}</h3>
              <div style={{ marginTop: 'auto', paddingTop: 18, borderTop: '1px solid var(--line-2)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--brand-accent)', lineHeight: 1 }}>{c.metric}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.4 }}>{c.metricLabel}</div>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {c.tags.map(tag => <span key={tag} style={{ fontSize: 11, fontFamily: 'var(--font-mono)', padding: '4px 10px', borderRadius: 999, border: '1px solid var(--line)', color: 'var(--ink-3)' }}>{tag}</span>)}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── TESTEMUNHOS ── */
function LPTestimonials() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].testimonials;
  const ref = useFadeIn();
  return (
    <section style={{ padding: '96px 32px' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>
            {t.h2[0]}<br />{t.h2[1]}
          </h2>
        </div>
        <div className="lp-testimonials-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {t.items.map((item, i) =>
            <blockquote key={i} style={{ margin: 0, padding: 32, background: 'var(--bg-alt)', border: '1px solid var(--line)', borderRadius: 14, display: 'flex', flexDirection: 'column', gap: 24, borderTop: '3px solid var(--brand-accent)' }}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', fontStyle: 'italic' }}>"{item.quote}"</p>
              <footer style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--ink-1)' }}>{item.name}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>{item.company}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--brand-accent)', marginTop: 4 }}>{item.sector}</span>
              </footer>
            </blockquote>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── PROCESSO ── */
function LPProcess() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].process;
  const ref = useFadeIn();
  return (
    <section id="processo" style={{ padding: '96px 32px' }}>
      <div ref={ref} className="lp-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>{t.h2}</h2>
        </div>
        <div className="lp-process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0, position: 'relative' }}>
          {t.steps.map(s =>
            <div key={s.n} style={{ padding: '28px 24px 28px 0', borderTop: '2px solid var(--brand-accent)', position: 'relative' }}>
              <div style={{ position: 'absolute', top: -8, left: 0, width: 14, height: 14, background: 'var(--brand-accent)', borderRadius: '50%' }} />
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand-accent)', marginBottom: 14, letterSpacing: '0.1em' }}>{s.n}</div>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--ink-1)' }}>{s.t}</h3>
              <p style={{ marginTop: 10, color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── SOBRE ── */
function LPAbout() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].about;
  const ref = useFadeIn();
  return (
    <section id="sobre" style={{ padding: '96px 32px', background: 'var(--brand-deep)', color: '#fff' }}>
      <div ref={ref} className="lp-fade lp-about-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
            {t.h2[0]}<br />{t.h2[1]}
          </h2>
          <p style={{ marginTop: 24, color: 'rgba(255,255,255,0.75)', fontSize: 18, lineHeight: 1.55, maxWidth: '46ch' }}>{t.p1}</p>
          <p style={{ marginTop: 16, color: 'rgba(255,255,255,0.6)', fontSize: 16, lineHeight: 1.55, maxWidth: '46ch' }}>{t.p2}</p>
          <a href="https://www.linkedin.com/in/mariomendesjunior/" target="_blank" rel="noopener noreferrer"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 28, color: 'var(--brand-accent)', fontFamily: 'var(--font-mono)', fontSize: 13, textDecoration: 'none' }}>
            {t.linkedin}
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
          {t.stats.map(s =>
            <div key={s.l} style={{ borderLeft: '4px solid var(--brand-accent)', padding: '20px 24px', background: 'rgba(255,255,255,0.04)', borderRadius: 8 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em' }}>{s.v}</div>
              <div style={{ marginTop: 6, fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── CTA BANNER ── */
function LPCTABanner() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].cta;
  const ref = useFadeIn();
  return (
    <section style={{ padding: '64px 32px' }}>
      <div ref={ref} className="lp-fade lp-cta-inner" style={{ maxWidth: 1280, margin: '0 auto', background: 'var(--brand-accent)', color: '#fff', borderRadius: 18, padding: '56px 48px', display: 'grid', gridTemplateColumns: '1.5fr auto', gap: 32, alignItems: 'center', backgroundImage: 'linear-gradient(135deg, var(--brand-accent) 0%, #D9512A 100%)' }}>
        <div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,3.5vw,44px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05 }}>{t.h2}</h2>
          <p style={{ marginTop: 12, color: 'rgba(255,255,255,0.85)', fontSize: 17, lineHeight: 1.5, maxWidth: '60ch' }}>{t.p}</p>
        </div>
        <button onClick={() => document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' })} style={{ background: '#fff', color: 'var(--brand-deep)', border: 'none', padding: '18px 32px', borderRadius: 8, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
          {t.btn}
        </button>
      </div>
    </section>
  );
}

/* ── CONTACTO ── */
function LPContact() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].contact;
  const [status, setStatus] = React.useState('idle');
  const ref = useFadeIn();

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/mykopdnr', { method: 'POST', body: new FormData(e.target), headers: { Accept: 'application/json' } });
      if (res.ok) { setStatus('success'); e.target.reset(); } else setStatus('error');
    } catch { setStatus('error'); }
  }

  return (
    <section id="contacto" style={{ padding: '96px 32px', background: 'var(--bg-alt)', borderTop: '1px solid var(--line)' }}>
      <div ref={ref} className="lp-fade lp-contact-grid" style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,3.5vw,44px)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-1)', lineHeight: 1.05 }}>{t.h2}</h2>
          <p style={{ marginTop: 18, color: 'var(--ink-3)', fontSize: 16, lineHeight: 1.55 }}>{t.p}</p>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)', fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-2)', display: 'grid', gap: 10 }}>
            <a href="mailto:adm@wmjrconsulting.pt" style={{ color: 'inherit', textDecoration: 'none' }}>adm@wmjrconsulting.pt</a>
            <div style={{ color: 'var(--ink-3)' }}>{t.location}</div>
            <a href="https://www.linkedin.com/in/mariomendesjunior/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--brand-accent)', textDecoration: 'none', marginTop: 4 }}>LinkedIn →</a>
          </div>
        </div>
        <form onSubmit={handleSubmit} className="lp-form-grid" style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Field label={t.fields.name}      name="nome"    placeholder={t.fields.namePh}      required />
          <Field label={t.fields.email}     name="email"   placeholder={t.fields.emailPh}     type="email" required />
          <Field label={t.fields.company}   name="empresa" placeholder={t.fields.companyPh} />
          <Field label={t.fields.role}      name="cargo"   placeholder={t.fields.rolePh} />
          <div style={{ gridColumn: '1/-1' }}>
            <Field label={t.fields.challenge} name="desafio" placeholder={t.fields.challengePh} multiline required />
          </div>
          <div style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, flexWrap: 'wrap', gap: 12 }}>
            <span role="status" aria-live="polite" style={{ fontSize: 12, color: status === 'error' ? 'var(--err)' : status === 'success' ? 'var(--ok)' : 'var(--ink-3)' }}>
              {status === 'success' && t.success}
              {status === 'error'   && t.error}
              {(status === 'idle' || status === 'sending') && t.required}
            </span>
            <Button variant="primary" size="md" disabled={status === 'sending' || status === 'success'} icon={false}>
              {status === 'sending' ? t.sending : t.btn}
            </Button>
          </div>
        </form>
      </div>
    </section>
  );
}

/* ── FOOTER ── */
function LPFooter() {
  const lang = useLang();
  const t = TRANSLATIONS[lang].footer;
  return (
    <footer style={{ padding: '48px 32px 28px', background: 'var(--brand-deep)', color: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 36 }}>
        <div className="lp-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 48 }}>
          <div>
            <WMJRMark size={22} mono compact />
            <p style={{ marginTop: 20, color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.55, maxWidth: 320 }}>{t.tagline}</p>
            <a href="https://www.linkedin.com/in/mariomendesjunior/" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16, color: 'var(--brand-accent)', fontFamily: 'var(--font-mono)', fontSize: 12, textDecoration: 'none' }}>LinkedIn →</a>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.services}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8, fontSize: 14, color: 'rgba(255,255,255,0.75)' }}>
              {t.serviceList.map(s => <li key={s}>{s}</li>)}
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--brand-accent)', marginBottom: 14 }}>{t.contact}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8, fontSize: 14, color: 'rgba(255,255,255,0.75)' }}>
              <li><a href="mailto:adm@wmjrconsulting.pt" style={{ color: 'inherit', textDecoration: 'none' }}>adm@wmjrconsulting.pt</a></li>
              <li>Portugal · Remote</li>
            </ul>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.12)', fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)', flexWrap: 'wrap', gap: 8 }}>
          <span>{t.copyright}</span>
          <span>{t.legal}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TRANSLATIONS, LangContext, LPNav, LPHero, LPLogos, LPServices, LPMetrics, LPCases, LPTestimonials, LPProcess, LPAbout, LPCTABanner, LPContact, LPFooter });