/**
 * A server-rendered tall page to test scroll restoration on refresh.
 *
 * Unlike the client-only LongPage, this component's HTML is present in the
 * initial server response, so the page is already at full height when React
 * hydrates. This lets useLayoutEffect restore the scroll position before
 * the browser paints — no flash.
 */
export default function ServerLongPage() {
  const sections = [
    { color: "#e64980", label: "Magenta" },
    { color: "#be4bdb", label: "Violet" },
    { color: "#7048e8", label: "Indigo" },
    { color: "#4263eb", label: "Royal Blue" },
    { color: "#1c7ed6", label: "Cerulean" },
    { color: "#099268", label: "Emerald" },
    { color: "#e8590c", label: "Vermilion" },
    { color: "#d9480f", label: "Rust" },
  ];

  return (
    <div>
      <h2>Server Long Page — Scroll Restoration Demo</h2>
      <p style={{ marginBottom: "0.5rem", color: "#666" }}>
        This page is <strong>server-rendered</strong>, so all HTML is present at
        hydration time. Scroll down, <strong>refresh</strong> the page — the
        scroll position restores without any flash.
      </p>
      <p
        style={{
          marginBottom: "1rem",
          display: "flex",
          gap: "0.5rem",
          flexWrap: "wrap",
        }}
      >
        Jump to:{" "}
        {sections.map(({ label }, i) => (
          <a key={i} href={`#srv-section-${i + 1}`} style={{ color: "blue" }}>
            {label}
          </a>
        ))}
      </p>
      {sections.map(({ color, label }, i) => (
        <div
          key={i}
          id={`srv-section-${i + 1}`}
          style={{
            height: "60vh",
            background: color,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: "2rem",
            fontWeight: "bold",
            color: "white",
            textShadow: "1px 1px 4px rgba(0,0,0,0.3)",
            borderRadius: 8,
            marginBottom: "1rem",
          }}
        >
          {label} Section (#{i + 1})
        </div>
      ))}
    </div>
  );
}