// legal-pages.jsx — Terms & Conditions, Privacy Policy, and Imprint pages

// ─── Shared layout ────────────────────────────────────────────────────────────

const LegalLayout = ({ title, subtitle, children, onHome, embedded }) => {
  React.useEffect(() => {
    window.scrollTo(0, 0);
    const prev = document.title;
    document.title = title + " | OttoKlar";
    return () => { document.title = prev; };
  }, [title]);
  return (
    <div style={{ background: "var(--bg)", minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      {/* Mini header */}
      <header className="hdr">
        <div className="wrap hdr-row">
          <a href="/" onClick={(e) => { e.preventDefault(); onHome && onHome(); }} aria-label="OttoKlar home">
            <Logo />
          </a>
          <button
            className="btn btn-ghost btn-sm"
            data-testid="legal-back"
            onClick={() => onHome && onHome()}
            style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
            {t("Legal.back")}
          </button>
        </div>
      </header>

      {/* Hero */}
      <div style={{ background: "var(--paper)", borderBottom: "1px solid var(--rule)", padding: "56px 0 48px" }}>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Legal.eyebrow")}</div>
          <h1 className="h2" data-testid="legal-title">{title}</h1>
          {subtitle && <p className="lead" style={{ marginTop: 14 }}>{subtitle}</p>}
        </div>
      </div>

      {/* Content */}
      <div className="wrap" style={{ maxWidth: 760, padding: "56px 28px 80px", flex: 1 }}>
        {children}
      </div>

      {/* Footer is suppressed when the page is embedded (e.g. as an overlay inside the
          onboarding modal), because its legal links call window.__nav and would jump the
          global router, unmounting the dashboard underneath. */}
      {!embedded && <Footer onHome={onHome} />}
    </div>
  );
};

const LegalSection = ({ heading, children }) => (
  <section style={{ marginBottom: 44 }}>
    <h2 style={{
      fontSize: 18, fontWeight: 600, letterSpacing: "-0.015em",
      marginBottom: 14, paddingBottom: 10,
      borderBottom: "1px solid var(--rule)", color: "var(--ink)"
    }}>{heading}</h2>
    <div style={{ display: "flex", flexDirection: "column", gap: 12, color: "var(--ink-3)", fontSize: 15, lineHeight: 1.65 }}>
      {children}
    </div>
  </section>
);

// A {p:…} block is usually a plain string. It may also be an array of inline
// segments where a segment is either a string or a link object {href, text} —
// used to keep real <a> anchors (e.g. the EU ODR URL) inside running prose.
const renderInline = (content) => {
  if (!Array.isArray(content)) return content;
  return content.map((seg, i) =>
    typeof seg === "string"
      ? <React.Fragment key={i}>{seg}</React.Fragment>
      : <a key={i} href={seg.href} target="_blank" rel="noopener noreferrer"
           style={{ color: "var(--accent)", fontWeight: 500 }}>{seg.text}</a>
  );
};

const P = ({ children }) => <p style={{ margin: 0 }}>{renderInline(children)}</p>;

const LegalList = ({ items }) => (
  <ul style={{ margin: "4px 0 0", padding: "0 0 0 20px", display: "flex", flexDirection: "column", gap: 6 }}>
    {items.map((item, i) => <li key={i}>{item}</li>)}
  </ul>
);

// Renders a {card:[…]} block — preserves the styled address-card presentation from the
// original hardcoded JSX. Each line in the array is separated by <br/>.
const LegalCardBlock = ({ lines }) => (
  <div style={{
    marginTop: 4, padding: "16px 20px", background: "var(--paper)",
    border: "1px solid var(--rule)", borderRadius: 10, fontSize: 14, lineHeight: 1.7
  }}>
    {lines.map((line, i) => (
      <React.Fragment key={i}>
        {i === 0 ? <strong>{line}</strong> : line}
        {i < lines.length - 1 && <br />}
      </React.Fragment>
    ))}
  </div>
);

// ─── Block-model renderer ─────────────────────────────────────────────────────

const LegalDocView = ({ doc }) => (
  <>
    {doc.sections.map((s, i) => (
      <LegalSection key={i} heading={s.heading}>
        {s.blocks.map((b, j) =>
          b.ul    ? <LegalList key={j} items={b.ul} /> :
          b.card  ? <LegalCardBlock key={j} lines={b.card} /> :
                    <P key={j}>{b.p}</P>
        )}
      </LegalSection>
    ))}
  </>
);

// ─── Terms & Conditions ───────────────────────────────────────────────────────

const TermsPage = ({ onHome, embedded }) => {
  const doc = legalDoc("terms");
  return (
    <LegalLayout title={doc.title} subtitle={doc.subtitle} onHome={onHome} embedded={embedded} pageKey="terms">
      <LegalDocView doc={doc} />
    </LegalLayout>
  );
};

// ─── Privacy Policy ───────────────────────────────────────────────────────────

const PrivacyPage = ({ onHome, embedded }) => {
  const doc = legalDoc("privacy");
  return (
    <LegalLayout title={doc.title} subtitle={doc.subtitle} onHome={onHome} embedded={embedded} pageKey="privacy">
      <LegalDocView doc={doc} />
    </LegalLayout>
  );
};

// ─── Imprint ──────────────────────────────────────────────────────────────────

const ImprintPage = ({ onHome }) => {
  const doc = legalDoc("imprint");
  return (
    <LegalLayout title={doc.title} subtitle={doc.subtitle} onHome={onHome} pageKey="imprint">
      <LegalDocView doc={doc} />
    </LegalLayout>
  );
};


Object.assign(window, { TermsPage, PrivacyPage, ImprintPage });