/* components.jsx — shared UI: icons, header, footer, small building blocks.
   Exports everything to window for the other Babel scripts. */
const { useState, useEffect, useRef } = React;

/* ---------------------------------------------------------------
   Icons — lucide-style line icons (1.75 stroke, round caps)
   --------------------------------------------------------------- */
const ICON_PATHS = {
  arrowRight: 'M5 12h14M13 6l6 6-6 6',
  arrowLeft: 'M19 12H5M11 18l-6-6 6-6',
  chevronRight: 'M9 6l6 6-6 6',
  chevronDown: 'M6 9l6 6 6-6',
  check: 'M20 6L9 17l-5-5',
  clipboard: 'M9 4h6a1 1 0 0 1 1 1v1H8V5a1 1 0 0 1 1-1zM8 6H6a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-2',
  listChecks: 'M11 6h10M11 12h10M11 18h10M3 6l1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17',
  calendar: 'M8 2v4M16 2v4M3 9h18M5 5h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z',
  dumbbell: 'M6.5 6.5l11 11M21 21l-1-1M3 3l1 1M18 22l4-4M2 6l4-4M6.5 17.5l-2 2M19.5 6.5l-2-2',
  brain: 'M9.5 3A2.5 2.5 0 0 0 7 5.5v.5a2.5 2.5 0 0 0-2 2.45A2.5 2.5 0 0 0 5 13a2.5 2.5 0 0 0 2 4.45V18a2.5 2.5 0 0 0 5 0V5.5A2.5 2.5 0 0 0 9.5 3zM14.5 3A2.5 2.5 0 0 1 17 5.5v.5a2.5 2.5 0 0 1 2 2.45A2.5 2.5 0 0 1 19 13a2.5 2.5 0 0 1-2 4.45V18a2.5 2.5 0 0 1-5 0',
  backpack: 'M6 8a6 6 0 0 1 12 0v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zM9 8a3 3 0 0 1 6 0M9 14h6M9 21v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5',
  bag: 'M6 2l-2 4v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6l-2-4H6zM4 6h16M16 10a4 4 0 0 1-8 0',
  instagram: 'M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM17.5 6.5h.01',
  mail: 'M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM3 7l9 6 9-6',
  shield: 'M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z',
  shieldCheck: 'M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3zM9 12l2 2 4-4',
  target: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2z',
  clock: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 7v5l3 2',
  flag: 'M5 21V4M5 4h11l-1.5 3.5L16 11H5',
  layers: 'M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5',
  fileText: 'M14 2H6a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7l-5-5zM14 2v5h5M9 13h6M9 17h6M9 9h2',
  mapPin: 'M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12zM12 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
  menu: 'M4 7h16M4 12h16M4 17h16',
  x: 'M6 6l12 12M18 6L6 18',
  download: 'M12 3v12M7 10l5 5 5-5M5 21h14',
  external: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
  phone: 'M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z',
  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-4.5-4.5',
  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0',
  star: 'M12 3l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3z',
  bell: 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  info: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 16v-4M12 8h.01',
  compass: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM16 8l-2 6-6 2 2-6 6-2z',
};
function Icon({ name, size = 20, stroke = 1.75, className = '', style }) {
  const d = ICON_PATHS[name] || '';
  return (
    <svg className={`ico ${className}`} width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg} />)}
    </svg>
  );
}

/* ---------------------------------------------------------------
   Brand mark — abstract anvil/shield monogram (placeholder)
   --------------------------------------------------------------- */
function BrandMark({ size = 34 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true" style={{ flexShrink: 0 }}>
      <rect x="1" y="1" width="38" height="38" rx="7" fill="var(--accent)" />
      <rect x="1" y="1" width="38" height="38" rx="7" fill="none" stroke="rgba(255,255,255,.14)" />
      {/* stylised "RS" anvil */}
      <path d="M11 25h18M13 25v-2h14v2M16 23v-3h8v3M19 20v-4M21 20v-4M17 16h6"
        fill="none" stroke="var(--on-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------------------------------------------------------------
   Top header + nav
   --------------------------------------------------------------- */
const NAV = [
  { id: 'start', label: 'Start' },
  { id: 'kurse', label: 'Kursübersicht' },
  { id: 'wiki', label: 'Wiki' },
  { id: 'kw-plan', label: 'KW-Plan' },
  { id: 'checkliste', label: 'Checkliste' },
  { id: 'plan-7', label: '7-Tage-Plan' },
  { id: 'shop', label: 'Shop' },
];

function Header({ route, onNav }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);
  return (
    <header className="hdr">
      {/* official-style utility strip */}
      <div className="hdr__strip">
        <div className="wrap hdr__strip-in">
          <span className="mono">Informationsportal · Vorbereitung auf den Dienststart</span>
          <span className="hdr__strip-right mono">
            <button className="hdr__admin" onClick={() => onNav('admin')}>
              <Icon name="shield" size={13} /> Admin / CMS
            </button>
            <span className="hdr__strip-sep" />
            <span className="dot-ok" /> Inoffizielles Angebot
          </span>
        </div>
      </div>

      <div className="wrap hdr__bar">
        <a className="brand" href="#/start" onClick={(e) => { e.preventDefault(); onNav('start'); }}>
          <BrandMark />
          <span className="brand__txt">
            <strong>Rekruten-Schmiede</strong>
            <em>Vorbereitung · Struktur · Übersicht</em>
          </span>
        </a>

        <nav className="nav" aria-label="Hauptnavigation">
          {NAV.map(n => (
            <a key={n.id} href={`#/${n.id}`}
              className={`nav__link ${route === n.id ? 'is-active' : ''}`}
              onClick={(e) => { e.preventDefault(); onNav(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>

        <div className="hdr__actions">
          <button className="btn btn--ghost hdr__login" onClick={() => onNav('start')}>
            <Icon name="user" size={17} /> Anmelden
          </button>
          <button className="hdr__burger" aria-label="Menü" onClick={() => setOpen(o => !o)}>
            <Icon name={open ? 'x' : 'menu'} size={22} />
          </button>
        </div>
      </div>

      {open && (
        <nav className="nav-mobile" aria-label="Mobile Navigation">
          {NAV.map(n => (
            <a key={n.id} href={`#/${n.id}`}
              className={`nav-mobile__link ${route === n.id ? 'is-active' : ''}`}
              onClick={(e) => { e.preventDefault(); onNav(n.id); }}>
              {n.label}
              <Icon name="chevronRight" size={18} />
            </a>
          ))}
        </nav>
      )}
    </header>
  );
}

/* ---------------------------------------------------------------
   Breadcrumb (official-site convention)
   --------------------------------------------------------------- */
function Breadcrumb({ trail, onNav }) {
  return (
    <nav className="crumb" aria-label="Brotkrümel">
      <div className="wrap crumb__in">
        {trail.map((t, i) => (
          <span key={i} className="crumb__seg">
            {t.id ? (
              <a href={`#/${t.id}`} onClick={(e) => { e.preventDefault(); onNav(t.id); }}>{t.label}</a>
            ) : <span aria-current="page">{t.label}</span>}
            {i < trail.length - 1 && <Icon name="chevronRight" size={14} className="crumb__sep" />}
          </span>
        ))}
      </div>
    </nav>
  );
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
function Footer({ onNav }) {
  const cols = [
    { h: 'Plattform', links: [['Kursübersicht', 'kurse'], ['KW-Plan', 'kw-plan'], ['Dienststart-Checkliste', 'checkliste'], ['7-Tage-Plan', 'plan-7']] },
    { h: 'Angebot', links: [['Rekruten-Shop', 'shop'], ['Alpha-Paket', 'shop'], ['Trainingsmaterial', 'shop']] },
    { h: 'Service', links: [['Kontakt', null], ['Häufige Fragen', null], ['Instagram', null]] },
  ];
  return (
    <footer className="ft">
      <div className="wrap ft__top">
        <div className="ft__brand">
          <div className="brand">
            <BrandMark size={30} />
            <span className="brand__txt"><strong>Rekruten-Schmiede</strong></span>
          </div>
          <p className="muted">Strukturierte Vorbereitung, Checklisten und Trainingspläne für angehende Rekruten. Orientierung vor dem Dienststart.</p>
          <div className="ft__social">
            <a className="ft__soc" href="#" aria-label="Instagram"><Icon name="instagram" size={19} /></a>
            <a className="ft__soc" href="#" aria-label="E-Mail"><Icon name="mail" size={19} /></a>
          </div>
        </div>
        {cols.map((c, i) => (
          <div key={i} className="ft__col">
            <h4>{c.h}</h4>
            <ul>
              {c.links.map((l, j) => (
                <li key={j}>
                  <a href={l[1] ? `#/${l[1]}` : '#'} onClick={(e) => { if (l[1]) { e.preventDefault(); onNav(l[1]); } }}>{l[0]}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="ft__disclaimer wrap">
        <Icon name="info" size={18} />
        <p><strong>Hinweis:</strong> Die Rekruten-Schmiede ist ein <strong>inoffizielles, privates Vorbereitungsangebot</strong> und steht in keiner Verbindung zur Bundeswehr oder einer Behörde. Alle Angaben ohne Gewähr.</p>
      </div>

      <div className="ft__legal">
        <div className="wrap ft__legal-in">
          <span className="muted mono">© 2026 Rekruten-Schmiede</span>
          <span className="ft__legal-links">
            {['Impressum', 'Datenschutz', 'Disclaimer'].map(l => (
              <a key={l} href="#">{l}</a>
            ))}
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------------------------------------------------------
   Small shared building blocks
   --------------------------------------------------------------- */
function SectionHead({ eyebrow, title, lead, children }) {
  return (
    <div className="section-head">
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2>{title}</h2>
      {lead && <p>{lead}</p>}
      {children}
    </div>
  );
}

function ProgressBar({ value, max }) {
  const pct = max ? Math.round((value / max) * 100) : 0;
  return (
    <div className="pbar" role="progressbar" aria-valuenow={value} aria-valuemax={max}>
      <div className="pbar__fill" style={{ width: pct + '%' }} />
    </div>
  );
}

Object.assign(window, {
  Icon, BrandMark, Header, Breadcrumb, Footer, SectionHead, ProgressBar, NAV,
  useState, useEffect, useRef,
});