/* ═══════════════════════════════════════════════════════════════
   PAGE SHELL
   Just the chrome that makes pages look alike: a page header, then
   sections with a thin accent banner between them, alternating
   backgrounds, and a left-aligned heading with a blurb and rule.

   Whatever goes inside a section is passed as `content` — the shell
   doesn't care what it is.

   No <main> and no footer here — Layout provides both, so a page
   using this shell drops straight into the router's Outlet.

   Usage:
     <PageShell
       title="Community"
       intro="One line under the page title."
       sections={[
         {
           id: "local",              // matches the nav hash, #local

           title: "Local Chapters",
           blurb: "Optional line under the section heading.",
           accent: "#138ba0",        // heading, banner, rule
           background: "#eef9fb",
           actions: <SomeButton />,  // optional, right of the heading
           content: <YourStuff />,
         },
       ]}
     />
   ═══════════════════════════════════════════════════════════════ */

import type { ReactNode } from "react";

const TEAL = "#138ba0";

export type ShellSection = {
  id: string;
  title: string;
  blurb?: string;
  accent: string;
  background: string;
  actions?: ReactNode;
  content: ReactNode;
};

type PageShellProps = {
  title: ReactNode;
  intro?: ReactNode;
  sections: ShellSection[];
};

export function Section({ section }: { section: ShellSection }) {
  const {
    id,
    title,
    blurb,
    accent,
    background,
    // Optional action bar for this section's heading row — a view
    // toggle, a filter, a link. Whatever the section needs; the
    // shell just gives it a place to sit.
    actions,
    content,
  } = section;

  return (
    <section
      id={id}
      className="py-20"
      style={{ background, scrollMarginTop: "5rem" }}
    >
      {/* Heading — left aligned, optional actions on the right */}
      <div className="max-w-6xl mx-auto px-6 mb-10">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h2 className="text-4xl md:text-5xl font-800" style={{ color: accent }}>
              {title}
            </h2>
            {blurb && <p className="mt-2 text-[#4a6b72] max-w-xl">{blurb}</p>}
          </div>
          {actions}
        </div>
        <div className="mt-6 h-px w-full" style={{ background: accent, opacity: 0.35 }} />
      </div>

      {content}
    </section>
  );
}

export default function PageShell({ title, intro, sections }: PageShellProps) {
  return (
    <>
      {/* Page header */}
      <div className="pt-24 pb-12 px-6" style={{ background: "#eef9fb" }}>
        <div className="max-w-6xl mx-auto">
          <h1 className="text-5xl md:text-6xl font-800" style={{ color: TEAL }}>
            {title}
          </h1>
          {intro && <p className="mt-3 text-lg text-[#4a6b72] max-w-2xl">{intro}</p>}
        </div>
      </div>

      {sections.map((section, i) => (
        <div key={section.id}>
          {/* Thin solid banner between sections */}
          <div className="h-2" style={{ background: section.accent }} />
          <Section section={section} />
          {i === sections.length - 1 && (
            <div className="h-2" style={{ background: section.accent }} />
          )}
        </div>
      ))}

    </>
  );
}