/* WMJR Consulting — component library */

const wmjrStyles = {
  // Buttons
  btnBase: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontSize: 'var(--t-md)',
    fontWeight: 500, letterSpacing: '-0.005em',
    padding: '12px 22px', border: '1px solid transparent',
    borderRadius: 'var(--r-md)', cursor: 'pointer',
    transition: 'all 160ms ease', textDecoration: 'none'
  }
};

/* ─────────  WORDMARK  ─────────
   Light mode: official PNG asset.
   Dark mode: HTML-rebuilt wordmark in white Montserrat + original orange cloud icon.
*/
function WMJRMark({ size = 32, mono = false, compact = false }) {
  const textColor = mono ? '#fff' : '#111111';
  const accentColor = 'var(--brand-accent)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.55 }}>
      <img src="assets/wmjr-cloud.png" alt=""
      style={{ ...{ height: size * 2.2, display: 'block', width: "106.219px" }, height: "70.3906px" }} />
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 0.95, gap: size * 0.06 }}>
        <span style={{ ...{
            fontFamily: '"Montserrat", system-ui, sans-serif', fontWeight: 800,
            fontSize: size * 1.55, letterSpacing: '-0.01em', color: textColor
          }, fontSize: "28px" }}>WMJR</span>
        <span style={{ ...{
            fontFamily: '"Montserrat", system-ui, sans-serif', fontWeight: 700,
            fontSize: size * 0.78, letterSpacing: '0.02em', color: textColor,
            transform: 'scaleX(0.78)', transformOrigin: 'left center',
            display: 'inline-block'
          }, fontWeight: "500", fontSize: "17.5px" }}>CONSULTING</span>
        {!compact && <span style={{ ...{
            fontFamily: '"Montserrat", system-ui, sans-serif', fontWeight: 600,
            fontSize: size * 0.34, letterSpacing: '0.22em', color: accentColor,
            marginTop: size * 0.18
          }, letterSpacing: "2.393px", width: "119.156px", color: "rgb(124, 124, 124)", fontSize: "6px" }}>AI &amp; DATA SOLUTIONS</span>}
      </span>
    </span>);

}

/* Inline cloud icon (stylized — coral cloud + person, evoking the logo) */
function CloudIcon({ size = 36, color = 'var(--brand-accent)', accent = 'var(--brand-mid)' }) {
  return (
    <svg width={size * 1.15} height={size} viewBox="0 0 46 40" fill="none" aria-hidden>
      <path d="M14 22 Q9 22 9 17 Q9 12 14 12 Q15 7 21 7 Q27 7 28 12 Q34 12 34 17 Q34 22 28 22 Z"
      fill={color} />
      <circle cx="20" cy="28" r="3.2" fill={accent} />
      <path d="M14 38 Q14 32 20 32 Q26 32 26 38 Z" fill={accent} />
      <path d="M30 26 L34 22 M30 30 L36 26 M30 34 L34 32" stroke={color} strokeWidth="2" strokeLinecap="round" />
    </svg>);

}

/* ─────────  BUTTONS  ───────── */
function Button({ variant = 'primary', size = 'md', children, icon, ...rest }) {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 'var(--t-sm)' },
    md: { padding: '12px 22px', fontSize: 'var(--t-md)' },
    lg: { padding: '16px 28px', fontSize: 'var(--t-lg)' }
  };
  const variants = {
    primary: { background: 'var(--btn-primary)', color: '#fff', border: '1px solid var(--btn-primary)' },
    dark: { background: 'var(--brand-deep)', color: '#fff', border: '1px solid var(--brand-deep)' },
    ghost: { background: 'transparent', color: 'var(--ink-1)', border: '1px solid var(--line)' },
    link: { background: 'transparent', color: 'var(--brand-accent)', border: '1px solid transparent', padding: '12px 0' }
  };
  return (
    <button style={{ ...wmjrStyles.btnBase, ...sizes[size], ...variants[variant] }} {...rest}>
      {children}
      {icon !== false && variant !== 'link' && <span style={{ fontSize: '1.1em', lineHeight: 1 }}>→</span>}
      {variant === 'link' && <span aria-hidden>→</span>}
    </button>);

}

/* ─────────  SERVICE CARDS  ───────── */
function ServiceCardA({ tag, title, desc, items }) {
  return (
    <div style={{
      background: 'var(--bg-alt)', border: '1px solid var(--line)',
      borderRadius: 'var(--r-lg)', padding: 28, display: 'flex',
      flexDirection: 'column', gap: 14, height: '100%'
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)',
        textTransform: 'uppercase', letterSpacing: '0.12em',
        color: 'var(--brand-accent)'
      }}>{tag}</div>
      <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'var(--t-2xl)', lineHeight: 1.15, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ margin: 0, color: 'var(--ink-3)', fontSize: 'var(--t-md)', lineHeight: 1.55 }}>{desc}</p>
      {items &&
      <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
          {items.map((it, i) =>
        <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 'var(--t-sm)', color: 'var(--ink-2)' }}>
              <span style={{ width: 6, height: 6, marginTop: 8, background: 'var(--brand-spark)', borderRadius: '50%', flexShrink: 0 }} />
              {it}
            </li>
        )}
        </ul>
      }
    </div>);

}

function ServiceCardB({ num, title, desc }) {
  return (
    <div style={{
      background: 'var(--brand-deep)', color: '#fff',
      borderRadius: 'var(--r-lg)', padding: 32, height: '100%',
      display: 'flex', flexDirection: 'column', gap: 18,
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)', color: 'var(--brand-spark)', letterSpacing: '0.1em' }}>{num}</span>
        <span style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.3)', display: 'grid', placeItems: 'center', fontSize: 16 }}>↗</span>
      </div>
      <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'var(--t-2xl)', lineHeight: 1.1, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ margin: 0, color: 'rgba(255,255,255,0.7)', fontSize: 'var(--t-sm)', lineHeight: 1.6 }}>{desc}</p>
    </div>);

}

function ServiceCardC({ title, desc, kpi }) {
  return (
    <div style={{
      background: 'var(--bg-alt)', border: '1px solid var(--line)',
      borderRadius: 'var(--r-md)', padding: 0, display: 'grid',
      gridTemplateColumns: '1fr', height: '100%', overflow: 'hidden'
    }}>
      <div style={{ padding: '24px 24px 0', borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ display: 'flex', gap: 4, marginBottom: 18 }}>
          {[0, 1, 2, 3, 4].map((i) =>
          <div key={i} style={{ flex: 1, height: 4, background: i < (kpi.filled || 3) ? 'var(--brand-accent)' : 'var(--line)' }} />
          )}
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)', color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>
          {kpi.label}
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--t-3xl)', fontWeight: 600, letterSpacing: '-0.025em', color: 'var(--brand-deep)', marginBottom: 18 }}>
          {kpi.value}
        </div>
      </div>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontSize: 'var(--t-lg)', fontWeight: 600 }}>{title}</h3>
        <p style={{ margin: 0, color: 'var(--ink-3)', fontSize: 'var(--t-sm)', lineHeight: 1.55 }}>{desc}</p>
      </div>
    </div>);

}

/* ─────────  STATS  ───────── */
function StatA({ value, label, source }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '24px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--t-5xl)', fontWeight: 600, letterSpacing: '-0.04em', color: 'var(--brand-deep)', lineHeight: 1 }}>
        {value}
      </div>
      <div style={{ fontSize: 'var(--t-md)', color: 'var(--ink-2)', lineHeight: 1.4, maxWidth: '28ch' }}>{label}</div>
      {source && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)', color: 'var(--ink-4)', marginTop: 4 }}>{source}</div>}
    </div>);

}

function StatB({ value, label }) {
  return (
    <div style={{
      background: 'var(--brand-deep)', color: '#fff',
      padding: '32px 28px', borderRadius: 'var(--r-md)',
      display: 'flex', flexDirection: 'column', gap: 8,
      borderLeft: '4px solid var(--brand-spark)'
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--t-4xl)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 'var(--t-sm)', color: 'rgba(255,255,255,0.75)' }}>{label}</div>
    </div>);

}

/* ─────────  FORM  ───────── */
function Field({ label, placeholder, type = 'text', required, multiline, name }) {
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 'var(--t-sm)', color: 'var(--ink-2)', fontWeight: 500 }}>
        {label}{required && <span style={{ color: 'var(--brand-accent)', marginLeft: 2 }}>*</span>}
      </span>
      <Tag
        type={type}
        name={name}
        placeholder={placeholder}
        rows={multiline ? 4 : undefined}
        required={required}
        style={{
          width: '100%', padding: '12px 14px', border: '1px solid var(--line)',
          borderRadius: 'var(--r-md)', fontFamily: 'var(--font-body)',
          fontSize: 'var(--t-md)', color: 'var(--ink-1)',
          background: 'var(--bg-alt)', resize: multiline ? 'vertical' : 'none',
          outline: 'none'
        }} />
    </label>);
}

/* ─────────  HERO  ───────── */
function HeroBlock() {
  return (
    <div style={{
      background: 'var(--bg-alt)', border: '1px solid var(--line)',
      borderRadius: 'var(--r-lg)', padding: '56px 56px 48px',
      display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center'
    }}>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--t-xs)', textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--brand-accent)', marginBottom: 24 }}>
          AI &amp; Data Solutions
        </div>
        <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'var(--t-6xl)', lineHeight: 0.95, fontWeight: 800, letterSpacing: '-0.025em', color: 'var(--brand-deep)' }}>
          Dados que <span style={{ color: 'var(--brand-accent)' }}>decidem</span>.<br />
          IA que <span style={{ color: 'var(--brand-accent)' }}>entrega</span>.
        </h1>
        <p style={{ marginTop: 24, marginBottom: 32, color: 'var(--ink-3)', fontSize: 'var(--t-lg)', lineHeight: 1.5, maxWidth: '52ch', fontWeight: 400 }}>
          Consultoria boutique em AI &amp; Data — estratégia, plataformas, modelos e Gen-AI — para transformar dados em vantagem competitiva mensurável.
        </p>
        <div style={{ display: 'flex', gap: 12 }}>
          <Button variant="primary">Marcar reunião</Button>
          <Button variant="ghost">Ver casos</Button>
        </div>
      </div>
      <div style={{
        background: 'var(--brand-deep)', borderRadius: 'var(--r-md)',
        padding: 28, color: '#fff', height: '100%', minHeight: 260,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        backgroundImage: 'radial-gradient(circle at 80% 10%, rgba(242,107,58,0.22), transparent 55%)'
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)', color: 'var(--brand-accent)' }}>
          // ai.pipeline.status
        </div>
        <div style={{ display: 'grid', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 'var(--t-sm)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'rgba(255,255,255,0.6)' }}>models_in_prod</span>
            <span style={{ color: 'var(--brand-accent)' }}>● 12 / 12</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'rgba(255,255,255,0.6)' }}>data_quality</span>
            <span>+42%</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'rgba(255,255,255,0.6)' }}>insights_24h</span>
            <span style={{ color: 'var(--brand-accent)' }}>318 ✓</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'rgba(255,255,255,0.6)' }}>model_accuracy</span>
            <span>96.4%</span>
          </div>
        </div>
        <div style={{ paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.12)', fontSize: 'var(--t-xs)', color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)' }}>
          live from prod · last sync 12s ago
        </div>
      </div>
    </div>);

}

/* ─────────  NAVBAR  ───────── */
function NavBar() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '16px 32px', background: 'var(--bg-alt)', border: '1px solid var(--line)',
      borderRadius: 'var(--r-lg)'
    }}>
      <WMJRMark size={26} />
      <nav style={{ display: 'flex', gap: 28, fontSize: 'var(--t-sm)', fontWeight: 500, color: 'var(--ink-2)' }}>
        <a style={{ textDecoration: 'none', color: 'inherit' }}>Serviços</a>
        <a style={{ textDecoration: 'none', color: 'inherit' }}>AI &amp; Data</a>
        <a style={{ textDecoration: 'none', color: 'inherit' }}>Casos</a>
        <a style={{ textDecoration: 'none', color: 'inherit' }}>Insights</a>
        <a style={{ textDecoration: 'none', color: 'inherit' }}>Sobre</a>
      </nav>
      <Button variant="primary" size="sm">Falar connosco</Button>
    </div>);

}

/* ─────────  FOOTER  ───────── */
function FooterBlock() {
  return (
    <div style={{
      background: 'var(--brand-deep)', color: '#fff',
      borderRadius: 'var(--r-lg)', padding: '48px 40px 28px',
      display: 'flex', flexDirection: 'column', gap: 36
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <WMJRMark size={26} mono compact />
          <p style={{ marginTop: 20, color: 'rgba(255,255,255,0.6)', fontSize: 'var(--t-sm)', lineHeight: 1.55, maxWidth: 300 }}>AI & Data Solutions.
Estratégia, plataformas e modelos de IA para empresas.
Portugal · Remoto.</p>
        </div>
        {[
        { h: 'Serviços', items: ['Data Strategy', 'Data Engineering', 'AI & ML', 'Gen-AI'] },
        { h: 'Empresa', items: ['Sobre', 'Equipa', 'Casos', 'Carreiras'] },
        { h: 'Contacto', items: ['adm@wmjrconsulting.pt', '\n', '\n', '\n'] }].
        map((col, i) =>
        <div key={i}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--t-xs)', textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--brand-spark)', marginBottom: 14 }}>{col.h}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8, fontSize: 'var(--t-sm)', color: 'rgba(255,255,255,0.75)' }}>
              {col.items.map((t) => <li key={t}>{t}</li>)}
            </ul>
          </div>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.12)', fontSize: 'var(--t-xs)', color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)' }}>
        <span>© 2026 WMJR Consulting, Lda · Portugal</span>
        <span>Privacidade · Termos · Cookies</span>
      </div>
    </div>);

}

Object.assign(window, {
  WMJRMark, CloudIcon, Button,
  ServiceCardA, ServiceCardB, ServiceCardC,
  StatA, StatB, Field,
  HeroBlock, NavBar, FooterBlock
});