/* bloo.app — shared site chrome: links, icons, style tokens, nav, footer.
   Loaded before each page's own script; exports via window.Site so other
   babel-scoped page scripts can read it. */

(function () {
const { Button } = window.BlooAppDesignSystem_ab7292;
const { useT } = window.I18n;

/* ---- edit these to point at real destinations ---- */
const LINKS = {
  checkoutApi: '/api/checkout',
  book: 'https://cal.com/bruno-luigi-wnqfwi/30min?overlayCalendar=true',
  companyEmail: 'contato@bloo.app',
  personalEmail: 'bruno@bloo.app',
  linkedin: 'https://www.linkedin.com/in/blooapp/',
  medium: 'https://medium.com/@blooapp',
  youtube: 'https://www.youtube.com/@FlutterUX',
};
const EXT = { target: '_blank', rel: 'noopener noreferrer' };

/* ---- inline icons (Lucide-style paths) ---- */
const Icon = ({ d, size = 22, sw = 1.75 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const IconCode    = (p) => <Icon {...p} d={<><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></>} />;
const IconLayers  = (p) => <Icon {...p} d={<><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></>} />;
const IconUsers   = (p) => <Icon {...p} d={<><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></>} />;
const IconSpark   = (p) => <Icon {...p} d={<path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2L12 3z"/>} />;
const IconArrow   = (p) => <Icon {...p} d={<path d="M5 12h14M13 6l6 6-6 6"/>} />;
const IconCheck   = (p) => <Icon {...p} d={<path d="M20 6L9 17l-5-5"/>} />;
const IconExternal = (p) => <Icon {...p} d={<><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></>} />;
const IconMail    = (p) => <Icon {...p} d={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/></>} />;
const IconPackage = (p) => <Icon {...p} d={<><path d="M16.5 9.4L7.5 4.21"/><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4a2 2 0 001-1.73z"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/></>} />;
const IconTarget  = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>} />;
const IconTrendUp = (p) => <Icon {...p} d={<><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></>} />;

const Icons = { IconCode, IconLayers, IconUsers, IconSpark, IconArrow, IconCheck, IconExternal, IconMail, IconPackage, IconTarget, IconTrendUp };

/* ---- shared style tokens (spread/reused by each page's own style object) ---- */
const S = {
  container: { maxWidth: 1120, margin: '0 auto', padding: '0 var(--space-8)' },
  nav: { position: 'sticky', top: 0, zIndex: 20, background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--border-subtle)' },
  navInner: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64, gap: 24 },
  brand: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, letterSpacing: '-.03em', color: 'var(--text-strong)', textDecoration: 'none', flex: 'none' },
  navLinks: { display: 'flex', gap: 26, flex: 1, justifyContent: 'center' },
  navLink: { fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', fontWeight: 500, whiteSpace: 'nowrap' },
  navLinkActive: { color: 'var(--brand)' },

  section: { padding: 'var(--space-21) 0' },
  sectionHead: { textAlign: 'center', maxWidth: 640, margin: '0 auto var(--space-12)', display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' },
  sectionHeadLeft: { textAlign: 'left', maxWidth: 680, margin: '0 0 var(--space-12)', display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.1em', color: 'var(--text-accent)', whiteSpace: 'nowrap' },
  h1: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 52, lineHeight: 1.08, letterSpacing: '-.03em', color: 'var(--text-strong)', margin: 0 },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 40, lineHeight: 1.1, letterSpacing: '-.02em', color: 'var(--text-strong)', margin: 0 },
  h3: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, letterSpacing: '-.01em', color: 'var(--text-strong)', margin: 0 },
  sectionSub: { fontSize: 17, lineHeight: 1.55, color: 'var(--text-muted)', margin: 0 },

  cardBody: { fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-body)', margin: 0, flex: 1 },
  cardLink: { fontSize: 14, fontWeight: 500, color: 'var(--text-link)', textDecoration: 'none', display: 'inline-flex', gap: 6, alignItems: 'center' },
  serviceIcon: { display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--blue-50)', color: 'var(--brand)', alignItems: 'center', justifyContent: 'center', flex: 'none' },
  checkDot: { flex: 'none', width: 22, height: 22, borderRadius: '50%', background: 'var(--success-bg)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 },

  metricsBand: { background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', padding: 'var(--space-10) 0' },
  metricsInner: { display: 'flex', justifyContent: 'space-around', gap: 24, flexWrap: 'wrap' },
  metricNum: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, letterSpacing: '-.02em', color: 'var(--brand)' },
  metricLabel: { fontSize: 14, color: 'var(--text-muted)', marginTop: 4, maxWidth: 150 },

  cta: { background: 'var(--surface-inverse)', padding: 'var(--space-21) 0' },
  ctaInner: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' },

  footer: { padding: 'var(--space-14) 0 var(--space-8)', background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)' },
  footHead: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', color: 'var(--text-subtle)', marginBottom: 12, textTransform: 'uppercase' },
  footLink: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 8, width: 'fit-content', whiteSpace: 'nowrap' },
};

/* ---- nav ---- */
const PAGE_LABELS = {
  services: { en: 'Services', pt: 'Serviços' },
  'case-studies': { en: 'Case studies', pt: 'Estudos de caso' },
  products: { en: 'Products', pt: 'Produtos' },
  about: { en: 'About', pt: 'Sobre' },
  contact: { en: 'Contact', pt: 'Contato' },
};
function SiteNav({ active }) {
  const { t, locale } = useT();
  const items = [
    ['services.html', PAGE_LABELS.services[locale], 'services'],
    ['case-studies.html', PAGE_LABELS['case-studies'][locale], 'case-studies'],
    ['products.html', PAGE_LABELS.products[locale], 'products'],
    ['about.html', PAGE_LABELS.about[locale], 'about'],
    ['contact.html', PAGE_LABELS.contact[locale], 'contact'],
  ];
  return (
    <header style={S.nav}>
      <div style={S.container} className="site-container">
        <div style={S.navInner}>
          <a href="index.html" style={S.brand}>bloo<span style={{ color: 'var(--brand)' }}>.</span>app</a>
          <nav style={S.navLinks} className="site-nav-links">
            {items.map(([href, label, key]) => (
              <a key={key} href={href} style={{ ...S.navLink, ...(active === key ? S.navLinkActive : {}) }}>{label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flex: 'none' }}>
            <Button as="a" href={LINKS.book} {...EXT} size="sm" trailingIcon={<IconExternal size={15} />}>{t('Book a call', 'Agendar uma call')}</Button>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---- footer ---- */
function SiteFooter() {
  const { t, locale } = useT();
  return (
    <footer style={S.footer}>
      <div style={{ ...S.container, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 32 }} className="site-container">
        <div style={{ maxWidth: 280 }}>
          <div style={S.brand}>bloo<span style={{ color: 'var(--brand)' }}>.</span>app</div>
          <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 10, lineHeight: 1.5 }}>{t('Front-end craft and AI enablement for teams that want to move faster.', 'Front-end de qualidade e capacitação em IA para times que querem avançar mais rápido.')}</p>
        </div>
        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }} className="site-footer-cols">
          <div>
            <div style={S.footHead}>{t('Explore', 'Explorar')}</div>
            <a href="services.html" style={S.footLink}>{PAGE_LABELS.services[locale]}</a>
            <a href="case-studies.html" style={S.footLink}>{PAGE_LABELS['case-studies'][locale]}</a>
            <a href="products.html" style={S.footLink}>{PAGE_LABELS.products[locale]}</a>
          </div>
          <div>
            <div style={S.footHead}>{t('Company', 'Empresa')}</div>
            <a href="about.html" style={S.footLink}>{PAGE_LABELS.about[locale]}</a>
            <a href="contact.html" style={S.footLink}>{PAGE_LABELS.contact[locale]}</a>
          </div>
          <div>
            <div style={S.footHead}>{t('Connect', 'Redes')}</div>
            <a href={`mailto:${LINKS.companyEmail}`} style={S.footLink}>{LINKS.companyEmail}</a>
            <a href={LINKS.linkedin} {...EXT} style={S.footLink}>LinkedIn</a>
            <a href={LINKS.medium} {...EXT} style={S.footLink}>Medium</a>
            <a href={LINKS.youtube} {...EXT} style={S.footLink}>YouTube</a>
          </div>
        </div>
      </div>
      <div style={{ ...S.container, borderTop: '1px solid var(--border-subtle)', marginTop: 32, paddingTop: 20, fontSize: 12, color: 'var(--text-subtle)', fontFamily: 'var(--font-mono)' }} className="site-container">
        {t('© 2026 bloo.app — built with real UX expertise.', '© 2026 bloo.app — construído com experiência real em UX.')}
      </div>
    </footer>
  );
}

/* ---- reusable bottom CTA band ---- */
function CTASection({ heading, body, primaryLabel, primaryHref = LINKS.book, secondary }) {
  const { t } = useT();
  const label = primaryLabel || t('Book a call', 'Agendar uma call');
  return (
    <section style={S.cta}>
      <div style={{ ...S.container, ...S.ctaInner }} className="site-container">
        <h2 style={{ ...S.h2, color: 'var(--text-onbrand)', maxWidth: 620 }}>{heading}</h2>
        {body && <p style={{ fontSize: 17, color: 'rgba(255,255,255,.75)', maxWidth: 520, lineHeight: 1.5, margin: '0 auto' }}>{body}</p>}
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 10 }}>
          <Button as="a" href={primaryHref} {...EXT} size="lg" trailingIcon={<IconExternal />}>{label}</Button>
          {secondary && (
            <Button as="a" href={secondary.href} size="lg" variant="secondary"
                    style={{ background: 'transparent', borderColor: 'rgba(255,255,255,.3)', color: 'var(--text-onbrand)' }}>
              {secondary.label}
            </Button>
          )}
        </div>
      </div>
    </section>
  );
}

window.Site = { LINKS, EXT, Icons, Icon, S, SiteNav, SiteFooter, CTASection, PAGE_LABELS };
})();