const { Button, Card, Wordmark, Icon, TextField, FilterChip } = window.InStashDesignSystem_400c92;

const NAV = [
  { href: 'about.html', label: 'About' },
  { href: 'contact.html', label: 'Contact' },
];
const FOOT = [
  { href: 'about.html', label: 'About' },
  { href: 'contact.html', label: 'Contact' },
  { href: 'privacy.html', label: 'Privacy policy' },
  { href: 'terms.html', label: 'Terms of service' },
];

function SiteHeader({ showCta = true }) {
  return (
    <header className="site-header">
      <a href="index.html" className="brand-link" aria-label="In Stash home"><img src="assets/logo/mark-small-on-dark.svg" alt="" width="40" height="40" className="brand-mark" /><Wordmark size="md" showMark={false} /></a>
      <nav className="site-nav">
        {NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
        {showCta && <Button variant="secondary" size="sm" onClick={() => (location.href = 'index.html#join')}>Join the waiting list</Button>}
      </nav>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <span className="foot-tag">Your stash, your story.</span>
      <nav className="foot-nav">{FOOT.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}</nav>
      <span className="foot-meta">© {new Date().getFullYear()} In Stash</span>
    </footer>
  );
}

function SitePage({ children, showCta }) {
  return (
    <div className="site">
      <SiteHeader showCta={showCta} />
      <main className="site-main">{children}</main>
      <SiteFooter />
    </div>
  );
}

function Eyebrow({ children }) {
  return <p className="eyebrow">{children}</p>;
}

function Placeholder({ children }) {
  return <span className="ph">[{children}]</span>;
}

// `final` renders real copy; without it each paragraph shows as a bracketed placeholder (stub pages).
function LegalPage({ title, updated, intro, sections, final }) {
  const body = t => (final ? t : <Placeholder>{t}</Placeholder>);
  return (
    <SitePage>
      <article className="prose">
        <Eyebrow>Last updated {updated}</Eyebrow>
        <h1 className="script-h1">{title}</h1>
        {intro && <p className="lede">{intro}</p>}
        <nav className="toc" aria-label="On this page">
          {sections.map((s, i) => <a key={s.h} href={`#s${i + 1}`}>{i + 1}. {s.h}</a>)}
        </nav>
        {sections.map((s, i) => (
          <section key={s.h} id={`s${i + 1}`} className="legal-section">
            <h2>{i + 1}. {s.h}</h2>
            {s.p.map((t, j) => <p key={j}>{body(t)}</p>)}
            {s.ul && <ul>{s.ul.map((t, j) => <li key={j}>{body(t)}</li>)}</ul>}
            {s.after && s.after.map((t, j) => <p key={'a' + j}>{body(t)}</p>)}
          </section>
        ))}
      </article>
    </SitePage>
  );
}

function mount(el) {
  ReactDOM.createRoot(document.getElementById('root')).render(el);
}

Object.assign(window, { SiteHeader, SiteFooter, SitePage, Eyebrow, Placeholder, LegalPage, mount });