/* BrandArchway — shared chrome: tokens, wave bg, nav, footer, primitives */

const C = {
  primary: '#A100FF',
  primaryVivid: '#A617E4',
  primaryActive: '#7A00C2',
  success: '#2EC471',
  canvas: '#F4F2F8',
  surfaceSoft: '#EDEAF2',
  card: '#FFFFFF',
  dark: '#1C1C1C',
  darkElevated: '#212121',
  darkRule: '#2A2A2A',
  hairline: '#E2DDEC',
  hairlineSoft: '#EFEBF6',
  ink: '#141414',
  body: '#595959',
  bodyStrong: '#2A2A2A',
  muted: '#8A8A8A',
  mutedSoft: '#B0B0B0',
  onDark: '#FFFFFF',
  onDarkSoft: '#A0A0A0',
  onDarkMuted: '#6F6F6F',
  logoNavy: '#0E2057',
};

const sharedStyles = {
  container: { maxWidth: 1280, margin: '0 auto', padding: '0 40px' },
  containerWide: { maxWidth: 1440, margin: '0 auto', padding: '0 40px' },
  containerNarrow: { maxWidth: 960, margin: '0 auto', padding: '0 40px' },
};

const PAYOFF = {
  fontFamily: "'Libre Baskerville', serif",
  fontStyle: 'italic',
  fontWeight: 400,
  color: C.primary,
};

/* ── WAVE OVERLAY (decorative, light bands only) ── */
function WaveOverlay() {
  return (
    <div className="wave-overlay" aria-hidden="true">
      <svg viewBox="0 0 1440 800" xmlns="http://www.w3.org/2000/svg"
        style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}
        preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="wg1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#E0D8F8" stopOpacity="0.0" />
            <stop offset="30%" stopColor="#DAD0F6" stopOpacity="0.22" />
            <stop offset="70%" stopColor="#D4CAF4" stopOpacity="0.24" />
            <stop offset="100%" stopColor="#E4DCFA" stopOpacity="0.0" />
          </linearGradient>
          <linearGradient id="wg2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#E4DCF8" stopOpacity="0.20" />
            <stop offset="55%" stopColor="#DAD0F6" stopOpacity="0.18" />
            <stop offset="100%" stopColor="#EAE4FC" stopOpacity="0.0" />
          </linearGradient>
          <linearGradient id="wg3" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#EDE8FC" stopOpacity="0.26" />
            <stop offset="60%" stopColor="#E2DCF8" stopOpacity="0.16" />
            <stop offset="100%" stopColor="#EEE8FC" stopOpacity="0.0" />
          </linearGradient>
        </defs>
        <path d="M-100 800 L-100 520 C 80 475, 300 555, 560 490 C 760 438, 940 365, 1140 408 C 1290 440, 1410 498, 1540 478 L1540 800 Z" fill="url(#wg1)" />
        <path d="M-100 800 L-100 600 C 70 558, 280 638, 510 585 C 720 535, 895 455, 1090 502 C 1265 545, 1400 595, 1540 565 L1540 800 Z" fill="url(#wg2)" />
        <path d="M-100 475 C 130 425, 370 505, 640 442 C 858 388, 1035 325, 1275 368 C 1390 390, 1468 424, 1540 408 L1540 535 C 1408 558, 1265 528, 1075 578 C 858 632, 665 685, 462 646 C 282 612, 88 662, -100 624 Z" fill="url(#wg3)" />
        <path d="M-100 500 C 80 460, 280 540, 520 480 C 720 430, 900 360, 1100 400 C 1260 432, 1390 490, 1540 470" fill="none" stroke="#9070C0" strokeWidth="0.8" opacity="0.12" />
        <path d="M-100 460 C 120 410, 360 490, 620 430 C 840 375, 1020 318, 1260 360 C 1380 382, 1460 416, 1540 398" fill="none" stroke="#9070C0" strokeWidth="0.7" opacity="0.1" />
        <path d="M-100 580 C 60 540, 260 620, 480 570 C 700 520, 870 445, 1070 492 C 1250 535, 1390 585, 1540 555" fill="none" stroke="#8060B8" strokeWidth="0.6" opacity="0.09" />
      </svg>
    </div>
  );
}

/* ── SECTION LABEL ── */
function SectionLabel({ text, dark }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      background: dark ? 'rgba(255,255,255,0.06)' : C.card,
      borderRadius: 9999,
      padding: '8px 16px',
      fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
      color: dark ? C.onDark : C.ink, letterSpacing: '0.2px',
      marginBottom: 28,
      border: dark ? '1px solid rgba(255,255,255,0.10)' : 'none',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.primary, flexShrink: 0, display: 'block' }}></span>
      {text}
    </div>
  );
}

/* ── BUTTON ── */
function Button({ children, variant = 'primary', onClick, style: extraStyle, href, target, rel }) {
  const [hov, setHov] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const base = {
    fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 500,
    padding: '14px 24px', height: 48, borderRadius: 8,
    border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
    transition: 'background 0.15s, box-shadow 0.15s',
    textDecoration: 'none', lineHeight: 1, whiteSpace: 'nowrap',
    ...extraStyle,
  };
  const variants = {
    primary: {
      background: press ? C.primaryActive : hov ? C.primaryVivid : C.primary,
      color: C.card,
    },
    secondary: {
      background: C.card, color: C.ink,
      border: `1px solid ${C.hairline}`,
      boxShadow: hov ? '0 4px 16px rgba(20,20,20,0.06)' : 'none',
    },
    ghostDark: {
      background: 'transparent', color: C.onDark,
      border: '1px solid rgba(255,255,255,0.18)',
    },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      target={target}
      rel={rel || (target === '_blank' ? 'noopener noreferrer' : undefined)}
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => { setHov(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{ ...base, ...variants[variant] }}
    >
      {children}
    </Tag>
  );
}

/* ── TOP NAV ── (sticky; collapses to a hamburger on mobile) */
function TopNav({ activePage = 'process', cta }) {
  // Internal links (Process, About, the CTA) point at our own pages on this domain
  // via window.URLS (root-relative). Cases / Free B2B Value have no page here yet,
  // so they stay on the main Wix site. target="_top" keeps navigation correct whether
  // a page is standalone (the new subdomain model) or still embedded in a Wix iframe.
  // "Getting Started" intentionally omitted: only needed on the Wix homepage.
  const links = [
    { label: T.nav.cases,     key: 'cases',     href: URLS.cases },      // TODO: point at case-studies page when its URL is ready
    { label: T.nav.process,   key: 'process',   href: URLS.process },
    { label: T.nav.about,     key: 'about',     href: URLS.about },
    { label: T.nav.freeValue, key: 'freeValue', href: URLS.freeValue },  // TODO: specific Free B2B Value URL when provided
  ];

  const BP = 768; // mobile breakpoint
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth <= BP : false
  );
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onResize = () => {
      const m = window.innerWidth <= BP;
      setIsMobile(m);
      if (!m) setOpen(false); // collapsing back to desktop closes the panel
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const defaultCta = (
    <Button
      href={URLS.method}
      target="_top"
      style={isMobile ? { padding: '9px 14px', height: 40, fontSize: 14 } : undefined}
    >
      {T.nav.cta}
    </Button>
  );

  const logo = (
    <a href={URLS.home} target="_top"
      style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', textDecoration: 'none', flexShrink: 0 }}>
      <img src="/assets/logo.svg" alt="BrandArchway" style={{ height: isMobile ? 34 : 40, display: 'block' }} />
    </a>
  );

  /* Animated hamburger / close button */
  const burger = (
    <button
      onClick={() => setOpen(o => !o)}
      aria-label={open ? 'Close menu' : 'Open menu'}
      aria-expanded={open}
      style={{
        flexShrink: 0, width: 44, height: 44, borderRadius: 10,
        border: `1px solid ${C.hairline}`, background: C.card,
        cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        padding: 0,
      }}
    >
      <span style={{ position: 'relative', width: 20, height: 14, display: 'block' }}>
        {[0, 1, 2].map(i => (
          <span key={i} style={{
            position: 'absolute', left: 0, height: 2, width: '100%', borderRadius: 2,
            background: C.ink, transition: 'transform 0.25s ease, opacity 0.2s ease, top 0.25s ease',
            top: open ? 6 : (i * 6),
            transform: open ? (i === 0 ? 'rotate(45deg)' : i === 2 ? 'rotate(-45deg)' : 'scaleX(0)') : 'none',
            opacity: open && i === 1 ? 0 : 1,
          }} />
        ))}
      </span>
    </button>
  );

  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 100, padding: isMobile ? '12px 12px 0' : '16px 24px 0' }}>
      <div style={{
        background: C.card, borderRadius: 16,
        padding: isMobile ? '10px 10px 10px 14px' : '12px 16px 12px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        boxShadow: '0 2px 20px rgba(20,20,20,0.07)',
        maxWidth: 980, margin: '0 auto', gap: isMobile ? 8 : 12,
        position: 'relative', zIndex: 2,
      }}>
        {logo}

        {!isMobile && (
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            {links.map(l => (
              <a key={l.key} href={l.href} target="_top"
                style={{
                  background: 'none', border: 'none', cursor: 'pointer',
                  fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500,
                  color: activePage === l.key ? C.primary : C.ink,
                  padding: '4px 0', textDecoration: 'none', whiteSpace: 'nowrap',
                }}>
                {l.label}
              </a>
            ))}
          </div>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 10, flexShrink: 0 }}>
          {cta || defaultCta}
          {isMobile && burger}
        </div>
      </div>

      {/* Mobile dropdown panel */}
      {isMobile && (
        <div style={{
          maxWidth: 980, margin: '8px auto 0',
          maxHeight: open ? 460 : 0,
          opacity: open ? 1 : 0,
          overflow: 'hidden',
          transition: 'max-height 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease',
          pointerEvents: open ? 'auto' : 'none',
        }}>
          <div style={{
            background: C.card, borderRadius: 16,
            boxShadow: '0 8px 28px rgba(20,20,20,0.10)',
            padding: '8px 12px 16px',
          }}>
            {links.map((l, i) => (
              <a key={l.key} href={l.href} target="_top"
                onClick={() => setOpen(false)}
                style={{
                  display: 'block', textAlign: 'center',
                  fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 600,
                  color: activePage === l.key ? C.primary : C.ink,
                  textDecoration: 'none', padding: '18px 12px',
                  borderTop: i === 0 ? 'none' : `1px solid ${C.hairlineSoft}`,
                }}>
                {l.label}
              </a>
            ))}
            <a href={URLS.method} target="_top"
              onClick={() => setOpen(false)}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginTop: 12, height: 52, borderRadius: 10,
                background: C.primary, color: C.card,
                fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 600,
                textDecoration: 'none',
              }}>
              {T.nav.cta}
            </a>
          </div>
        </div>
      )}
    </div>
  );
}

/* ── FOOTER ── */
function Footer() {
  const cols = [
    { title: T.footer.colProcess, links: [
      { label: T.footer.linkBrandCoPilot, href: '#' },
      { label: T.footer.linkLeadEngine, href: '#' },
      { label: T.footer.linkTeamEnablement, href: '#' },
      { label: T.footer.linkGuarantee, href: '#' },
    ] },
    { title: T.footer.colAbout, links: [
      { label: T.footer.linkAboutUs, href: URLS.about },
      { label: T.footer.linkPhilosophy, href: URLS.about },
      { label: T.footer.linkCaseStudies, href: URLS.cases },
      { label: T.footer.linkNewsletter, href: URLS.home },
    ] },
    { title: T.footer.colStart, links: [
      { label: T.footer.linkFreeAudit, href: URLS.audit },
      { label: T.footer.linkBookMethod, href: URLS.method },
      { label: T.footer.linkContact, href: 'mailto:info@brandarchway.com' },
      { label: T.footer.linkLinkedIn, href: 'https://www.linkedin.com/company/brandarchway' },
    ] },
  ];
  return (
    <footer style={{ background: C.dark, padding: '64px 0 32px', borderTop: `1px solid ${C.darkElevated}` }}>
      <div style={sharedStyles.container}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', marginBottom: 48 }}>
          <div style={{ flex: '0 0 220px' }}>
            <div style={{ marginBottom: 16 }}>
              <img src="/assets/logo.svg" alt="BrandArchway" style={{ height: 44, display: 'block', filter: 'brightness(0) invert(1)' }} />
            </div>
            <p style={{ fontSize: 14, color: C.onDarkSoft, lineHeight: 1.65, maxWidth: 200 }}>
              {T.footer.tagline}
            </p>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 13, fontWeight: 600, color: C.onDark, marginBottom: 16, letterSpacing: '0.3px' }}>
                {col.title}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.links.map(l => {
                  const ext = l.href && (l.href.startsWith('http') || l.href.startsWith('mailto'));
                  return (
                    <a key={l.label} href={l.href}
                      target={ext ? '_blank' : '_top'}
                      rel={ext && l.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                      style={{ fontSize: 14, color: C.onDarkSoft, textDecoration: 'none' }}
                      onMouseEnter={e => e.target.style.color = C.onDark}
                      onMouseLeave={e => e.target.style.color = C.onDarkSoft}>
                      {l.label}
                    </a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: `1px solid ${C.darkElevated}`, paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 13, color: C.onDarkSoft }}>{T.footer.copyright}</span>
          <span style={{ fontSize: 13, color: C.onDarkSoft }}>{T.footer.contact}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  C, sharedStyles, PAYOFF,
  WaveOverlay, SectionLabel, Button, TopNav, Footer,
});