/* global React, ReactDOM, PuffyKit, PuffySite */
// Shared legal/docs page. Configurable via window.__PUFFY_DOC = { title, updated, sections }
const { T2, T3, TEAL } = window.PuffyKit;
const { Nav, Footer, Reveal, Section } = window.PuffySite;

function App() {
  const doc = window.__PUFFY_DOC || { title: 'Document', updated: '', sections: [] };
  return (
    <>
      <Nav active={doc.navKey}/>
      <section style={{ padding: '72px 0 32px', background: '#fff' }}>
        <div className="p-wrap">
          <Reveal>
            <p className="p-eyebrow">{doc.eyebrow || 'Legal'}</p>
            <h1 className="p-h1" style={{ fontSize: 'clamp(36px, 5vw, 56px)', maxWidth: 820 }}>{doc.title}</h1>
            {doc.updated && (
              <p style={{ fontSize: 14, color: T3, marginTop: 16 }}>Last updated {doc.updated}</p>
            )}
          </Reveal>
        </div>
      </section>
      <section style={{ padding: '32px 0 96px', background: '#fff' }}>
        <div className="p-wrap">
          <div className="p-doc">
            {doc.intro && (
              <Reveal><p className="p-article-lede" style={{ fontSize: 19, marginBottom: 32 }}>{doc.intro}</p></Reveal>
            )}
            {doc.sections.map((s, i) => (
              <Reveal key={i} delay={i * 40}>
                <h2>{s.h}</h2>
                {s.body.map((b, j) => {
                  if (typeof b === 'string') return <p key={j}>{b}</p>;
                  if (b.list) return (
                    <ul key={j}>{b.list.map((li, k) => <li key={k}>{li}</li>)}</ul>
                  );
                  return null;
                })}
              </Reveal>
            ))}
            <Reveal>
              <div style={{ marginTop: 48, padding: '24px', background: '#F7F7F5', borderRadius: 16, fontSize: 15, color: T2, lineHeight: 1.55 }}>
                Questions? Email <a href="mailto:hello@puffy.app" style={{ color: TEAL, fontWeight: 510 }}>hello@puffy.app</a> and a human will reply.
              </div>
            </Reveal>
          </div>
        </div>
      </section>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);