/* global React */
const { useState } = React;

/* Shared Nav for sub-pages — links go back to home or stay within sub-pages */
window.PageNav = function PageNav() {
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a href="Praatbox Marketing.html" className="nav__logo">
          <span className="nav__logo-mark">P</span>
          <span>praatbox</span>
        </a>
        <div className="nav__links">
          <a href="Praatbox Marketing.html#features">Features</a>
          <a href="Pricing.html">Pricing</a>
          <a href="Documentation.html">Developers</a>
          <a href="Customers.html">Customers</a>
        </div>
        <div className="nav__cta">
          <a href="Login.html" className="btn btn--ghost btn--sm">Sign in</a>
          <a href="Register.html" className="btn btn--primary btn--sm">Start free →</a>
        </div>
      </div>
    </nav>
  );
};

window.PageFooter = function PageFooter() {
  const cols = {
    Product: [
      ["Features", "Praatbox Marketing.html#features"],
      ["Pricing", "Pricing.html"],
      ["Live demo", "Live Demo.html"],
      ["Integrations", "Integrations.html"],
      ["Changelog", "Changelog.html"],
    ],
    Developers: [
      ["Documentation", "Documentation.html"],
      ["API reference", "API Reference.html"],
      ["Webhooks", "Webhooks.html"],
      ["Self-hosted", "Self-hosted.html"],
      ["Status", "Status.html"],
    ],
    Company: [
      ["About", "About.html"],
      ["Customers", "Customers.html"],
      ["Careers", "Careers.html"],
      ["Press kit", "Press Kit.html"],
      ["Contact", "Contact.html"],
    ],
    Legal: [
      ["Privacy", "Privacy.html"],
      ["Terms", "Terms.html"],
      ["DPA", "DPA.html"],
      ["Security", "Security.html"],
      ["Cookies", "Cookies.html"],
    ],
  };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <a href="Praatbox Marketing.html" className="nav__logo">
              <span className="nav__logo-mark">P</span><span>praatbox</span>
            </a>
            <p className="mono" style={{ maxWidth: "26ch", marginTop: 16 }}>AI chat that actually answers. Made in Amsterdam.</p>
          </div>
          {Object.entries(cols).map(([h, items]) => (
            <div key={h} className="footer__col">
              <h5>{h}</h5>
              <ul>{items.map(([l, href]) => <li key={l}><a href={href} className="ulink">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer__lockup">praat<em>box</em>.</div>
        <div className="footer__legal">
          <span>© 2026 Praatbox B.V. — Singel 542, 1017 AZ Amsterdam — KvK 84291734</span>
          <span>● All systems operational</span>
        </div>
      </div>
    </footer>
  );
};

/* Generic page header with eyebrow + display title */
window.PageHeader = function PageHeader({ eyebrow, title, titleEm, sub }) {
  return (
    <section className="section" style={{ paddingBottom: 56 }}>
      <div className="container">
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="display display--xl" style={{ marginTop: 18, lineHeight: 1.02, textWrap: "pretty" }}>
          {title} {titleEm && <em className="italic" style={{ color: "var(--accent)" }}>{titleEm}</em>}
        </h1>
        {sub && <p className="lead" style={{ marginTop: 24, maxWidth: "60ch" }}>{sub}</p>}
      </div>
    </section>
  );
};

/* Apply tweaks values from localStorage if present */
window.applyTweaks = function applyTweaks() {
  try {
    const raw = localStorage.getItem("praatbox_tweaks");
    const t = raw ? JSON.parse(raw) : {};
    const root = document.documentElement;
    if (t.accent) root.style.setProperty("--accent", t.accent);
    if (t.theme) root.setAttribute("data-theme", t.theme);
    if (t.density) root.setAttribute("data-density", t.density);
  } catch (e) {}
};