// Main case page assembly + tweaks panel

const TopRibbon = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { label: 'Over Repetive', children: [
      { label: 'Missie',   href: '/#missie' },
      { label: 'Aanpak',   href: '/#aanpak' },
      { label: 'Over ons', href: '/#team' },
      { label: 'Contact',  href: '/#contact' },
    ]},
    { label: 'Cases', href: 'Cases hub.html', active: true },
    { label: 'Wat het oplevert', href: 'ROI Calculator.html' },
    { label: 'Kennisbank', href: 'Kennisbank.html' },
    { label: 'Vacatures', href: 'Jobs.html' },
    { label: 'Trust Center', href: 'Trust Center.html' },
  ];
  return (
    <div className="topribbon">
      <div className="topribbon-inner">
        <a href="/" className="brand">
          <img src="assets/logo.png" alt="Repetive" />
        </a>
        <nav>
          {links.map(l => {
            if (l.children) {
              return (
                <div key={l.label} className="nav-item">
                  <a className="nav-label" href="/">{l.label}</a>
                  <div className="nav-dropdown">
                    {l.children.map(c => (
                      <a key={c.label} href={c.href}>{c.label}</a>
                    ))}
                  </div>
                </div>
              );
            }
            const cls = [
              l.active ? 'active' : '',
              l.accent ? 'nav-accent' : '',
            ].filter(Boolean).join(' ');
            return (
              <a key={l.label} href={l.href} className={cls}>
                {l.label}
                {l.accent && <span className="nav-accent-arr" aria-hidden="true">→</span>}
              </a>
            );
          })}
        </nav>
        <div className="right">
          <a href="/#contact" className="pill-cta">Plan een gesprek</a>
          <button className="ribbon-burger" onClick={() => setMenuOpen(v => !v)} aria-label="Menu" aria-expanded={menuOpen}>
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="ribbon-drawer">
          {links.map(l => {
            if (l.children) {
              return (
                <React.Fragment key={l.label}>
                  <div className="drawer-group-label">{l.label}</div>
                  {l.children.map(c => (
                    <a key={c.label} href={c.href} onClick={() => setMenuOpen(false)} className="drawer-sub">{c.label}</a>
                  ))}
                </React.Fragment>
              );
            }
            return (
              <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
            );
          })}
          <a href="/#contact" onClick={() => setMenuOpen(false)} className="drawer-cta">Plan een gesprek</a>
        </div>
      )}
    </div>
  );
};

const CasePage = ({ tweaks }) => {
  return (
    <>
      <TopRibbon />
      <div className="case" data-variant={tweaks.visualVariant} id="case">
        <Hero opener={tweaks.heroOpener} />
        <Story />
        <Workflow />
        <Quote />
        <FootCTA />
        <div id="related"><PatternReference /></div>
        <FootMeta />
      </div>
    </>
  );
};

window.CasePage = CasePage;