// Footer + Impressum / Privacy modal.

const DocModal = ({ title, kind, t, onClose }) => {
  // kind: "impressum" — flat list-of-lists (address card style)
  // kind: "privacy"  — sectioned: { h, p: [string|{href,label}|paragraph-array] }
  const isPrivacy = kind === "privacy";
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(20,18,15,0.78)",
      zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center",
      padding: "40px", backdropFilter: "blur(4px)"
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "var(--bone)", color: "var(--graphite)",
        maxWidth: isPrivacy ? 720 : 560, width: "100%", maxHeight: "84vh", overflowY: "auto",
        padding: isPrivacy ? "64px 72px 56px" : "56px 56px 48px",
        boxShadow: "var(--shadow-image)", position: "relative"
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 18, right: 18, background: "transparent",
          border: "none", cursor: "pointer", fontSize: 22, lineHeight: 1,
          color: "var(--fg-muted)", padding: 8
        }}>×</button>
        <Eyebrow tone="gold">· {title} ·</Eyebrow>
        <div style={{ marginTop: 16 }}><HairlineGold width={48} /></div>

        {!isPrivacy &&
          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 22,
            fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.65, color: "var(--graphite)" }}>
            {t.impressum_blocks.map((block, i) =>
              <div key={i}>
                {block.map((line, j) => <div key={j}>{line}</div>)}
              </div>
            )}
          </div>
        }

        {isPrivacy &&
          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 26,
            fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.7, color: "var(--graphite)" }}>
            {t.privacy_intro &&
              <p style={{ margin: 0, fontStyle: "italic", color: "var(--fg-muted)" }}
                dangerouslySetInnerHTML={{ __html: t.privacy_intro }} />
            }
            {t.privacy_blocks.map((sec, i) =>
              <section key={i}>
                <h4 style={{
                  margin: "0 0 10px", fontFamily: "var(--font-serif)", fontStyle: "italic",
                  fontSize: 16, fontWeight: 500, color: "var(--graphite)", letterSpacing: "0.01em"
                }}>{sec.h}</h4>
                {sec.p.map((para, j) =>
                  <p key={j} style={{ margin: j === 0 ? 0 : "10px 0 0" }}
                    dangerouslySetInnerHTML={{ __html: para }} />
                )}
              </section>
            )}
          </div>
        }
      </div>
    </div>);
};


const Footer = ({ t, onNav }) => {
  const [openDoc, setOpenDoc] = React.useState(null); // "impressum" | "privacy" | null
  const handle = (item) => {
    if (typeof item === "object" && item.action) setOpenDoc(item.action);
  };
  return (
    <footer style={{
      background: "var(--ink-2)", color: "var(--bone)", padding: "80px 56px 32px",
      borderTop: "1px solid rgba(201,168,106,0.3)"
    }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 56, alignItems: "flex-start"
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 28, fontWeight: 500
              }}></div>
              <Eyebrow tone="gold" style={{ marginTop: 6 }}>· {t.nav_lead} ·</Eyebrow>
            </div>
          </div>
          <p style={{
            marginTop: 22, fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 17, color: "rgba(245,241,234,0.6)", maxWidth: 340, lineHeight: 1.55
          }}>{t.footer_lead}</p>
        </div>
        {t.footer_cols.map((col, i) =>
        <div key={i}>
            <Eyebrow tone="gold">{col.h}</Eyebrow>
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
              {col.items.map((it, j) => {
              const label = typeof it === "string" ? it : it.label;
              const isAction = typeof it === "object" && it.action;
              const isNav = typeof it === "object" && it.nav;
              const href = typeof it === "object" ? it.href : undefined;
              const clickable = isAction || isNav || !!href;
              return (
                <a key={j}
                href={href || (isNav ? "#" + it.nav : undefined)}
                target={href ? "_blank" : undefined}
                rel={href ? "noopener noreferrer" : undefined}
                onClick={
                  isAction ? (e) => { e.preventDefault(); handle(it); } :
                  isNav ? (e) => { e.preventDefault(); onNav && onNav(it.nav); } :
                  undefined
                }
                style={{
                  fontFamily: "var(--font-sans)", fontSize: 13.5,
                  color: "rgba(245,241,234,0.78)", cursor: clickable ? "pointer" : "default",
                  textDecoration: "none"
                }}>{label}</a>);

            })}
            </div>
          </div>
        )}
      </div>
      <div style={{
        maxWidth: 1240, margin: "64px auto 0", paddingTop: 22,
        borderTop: "1px solid rgba(245,241,234,0.12)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "var(--font-sans)", fontSize: 10.5, letterSpacing: "0.22em",
        textTransform: "uppercase", color: "rgba(245,241,234,0.5)"
      }}>
        <span>{t.footer_legal}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Diamond size={5} /> {t.footer_diamond} <Diamond size={5} />
        </span>
      </div>
      {openDoc === "impressum" &&
        <DocModal kind="impressum" title={t.impressum_title} t={t} onClose={() => setOpenDoc(null)} />}
      {openDoc === "privacy" &&
        <DocModal kind="privacy" title={t.privacy_title} t={t} onClose={() => setOpenDoc(null)} />}
    </footer>);

};


window.Footer = Footer;
