/* Shared page parts — Hero, Section, ImageSlot, PullQuote, MetaList, Stub.
   These are the primitives every sub-page composes from. They have no
   page-specific knowledge. */

// ---- PageHero — page-opening unit ----------------------------------------
// Eyebrow → title → standfirst → optional actions → optional meta dl.

const PageHero = ({ eyebrow, title, standfirst, actions, meta, children }) => (
  <header className="page-hero" data-screen-label="Page hero">
    {eyebrow && <div className="page-hero__eyebrow">{eyebrow}</div>}
    <h1 className="page-hero__title">{title}</h1>
    {standfirst && <p className="page-hero__standfirst">{standfirst}</p>}
    {actions && <div className="page-hero__actions">{actions}</div>}
    {meta && <dl className="page-hero__meta">{meta}</dl>}
    {children}
  </header>
);

// ---- Section — eyebrow + title + standfirst + body ----------------------
// Two-column on desktop; head sticks while body scrolls.

const Section = ({ id, eyebrow, title, standfirst, aside, children, tight, flat }) => (
  <section
    className={[
      "page-section",
      tight && "page-section--tight",
      flat && "page-section--flat",
    ].filter(Boolean).join(" ")}
    id={id}
  >
    <header className="page-section__head">
      {eyebrow && <div className="page-section__eyebrow">{eyebrow}</div>}
      {title && <h2 className="page-section__title">{title}</h2>}
      {standfirst && <p className="page-section__standfirst">{standfirst}</p>}
      {aside && <div className="page-section__aside">{aside}</div>}
    </header>
    <div className="page-section__body">{children}</div>
  </section>
);

// ---- Stub — labelled placeholder block ----------------------------------

const Stub = ({ label = "Content TBC", note }) => (
  <div className="page-stub" aria-label="Placeholder content">
    <span className="page-stub__lbl">{label}</span>
    {note && <span className="page-stub__note">{note}</span>}
  </div>
);

// ---- PullQuote — italic pull-quote with 2px Ink-Blue rule + named sig --

const PullQuote = ({ children, name, role, variant }) => (
  <figure className={["page-pull", variant === "investor" && "page-pull--investor"].filter(Boolean).join(" ")}>
    {variant !== "investor" && <div className="page-pull__rule" />}
    <blockquote className="page-pull__q">{children}</blockquote>
    <figcaption className="page-pull__sig">
      <span className="page-pull__name">{name}</span>
      <span className="page-pull__role">{role}</span>
    </figcaption>
  </figure>
);

// ---- MetaList — definition list, four-up grid --------------------------

const MetaList = ({ items }) => (
  <dl className="page-meta">
    {items.map(([dt, dd], i) => (
      <div key={i}>
        <dt>{dt}</dt>
        <dd>{dd}</dd>
      </div>
    ))}
  </dl>
);

// ---- ImageSlot ----------------------------------------------------------
// Editorial placeholder. Per the user's call:
//   "Curated architectural/detail placeholders from a neutral source,
//    clearly marked as placeholder in alt text."
// The .imgslot--placeholder class stamps a 'commissioned photography
// pending' badge over the image in the top-left.
//
// We use Unsplash for source URLs — they survive without auth and degrade
// to the paper-coloured background if they fail. The badge sits on top
// either way.

const ImageSlot = ({
  src,
  alt,
  caption,
  variant = "wide",      // "wide" | "square" | "portrait"
  className = "",
  asPlaceholder = true,
  children,
}) => (
  <div
    className={[
      "imgslot",
      variant && `imgslot--${variant}`,
      asPlaceholder && "imgslot--placeholder",
      className,
    ].filter(Boolean).join(" ")}
  >
    {src && <img src={src} alt={(asPlaceholder ? "Placeholder · " : "") + (alt || "")} loading="lazy" />}
    {caption && <div className="imgslot__caption">{caption}</div>}
    {children}
  </div>
);

// ---- Curated Unsplash placeholder pool ----------------------------------
// Architectural · domestic-detail · device-and-detail. No people, no
// stormy skies, no families on sofas. Picked to sit on Solas Paper.
//
// All URLs are unsplash.com photo IDs — stable, cache-friendly.
// Each entry: { id, alt, kind }. Kind is for art-direction notes.

const IMG = {
  // Architectural — London brick, terraces, considered exteriors
  terrace:   { src: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1200&q=80&auto=format", alt: "Victorian terrace house, London", kind: "architectural" },
  doorway:   { src: "https://images.unsplash.com/photo-1517363898874-737b62a7db91?w=1200&q=80&auto=format", alt: "Black front door with brass knocker", kind: "architectural" },
  brickwall: { src: "https://images.unsplash.com/photo-1571055107559-3e67626fa8be?w=1200&q=80&auto=format", alt: "Brick façade in afternoon light", kind: "architectural" },
  staircase: { src: "https://images.unsplash.com/photo-1505873242700-f289a29e1e0f?w=1200&q=80&auto=format", alt: "Townhouse staircase, considered detail", kind: "architectural" },

  // Domestic detail — interiors, considered, no people
  kitchen:   { src: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80&auto=format", alt: "Kitchen counter, morning light", kind: "domestic-detail" },
  desk:      { src: "https://images.unsplash.com/photo-1494526585095-c41746248156?w=1200&q=80&auto=format", alt: "Desk with reading lamp", kind: "domestic-detail" },
  tea:       { src: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=1200&q=80&auto=format", alt: "Coffee cup on a wooden surface", kind: "domestic-detail" },
  shelf:     { src: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=1200&q=80&auto=format", alt: "Bookshelf detail, evening light", kind: "domestic-detail" },

  // Device-and-detail — sensors, paper, instruments
  paper:     { src: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1200&q=80&auto=format", alt: "Document on paper, fountain pen", kind: "device-and-detail" },
  letter:    { src: "https://images.unsplash.com/photo-1568667256549-094345857637?w=1200&q=80&auto=format", alt: "Letter and envelope, considered correspondence", kind: "device-and-detail" },
  meter:     { src: "https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&q=80&auto=format", alt: "Brass pressure gauge, vintage instrument", kind: "device-and-detail" },
  blueprint: { src: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1200&q=80&auto=format", alt: "Architectural drawing on paper", kind: "device-and-detail" },
};

// ---- SectionOpener — numbered editorial set-number ribbon ---------------

const SectionOpener = ({ n, title }) => (
  <header className="section-opener">
    <div className="section-opener__n">{n}</div>
    <h2 className="section-opener__t">{title}</h2>
  </header>
);

// ---- HiringStrip — used on Careers, About to surface an open role ----

const HiringStrip = ({ role, where, onNav }) => (
  <aside className="hiring-strip" data-screen-label="Hiring strip">
    <span className="hiring-strip__lbl">Open role</span>
    <p className="hiring-strip__txt">
      <strong>{role}</strong> · {where}.
    </p>
    <a
      href="#/careers"
      className="hiring-strip__cta"
      onClick={(e) => { e.preventDefault(); onNav("/careers"); }}
    >See description →</a>
  </aside>
);

// ---- WaitlistCTA — the editorial close that drives every explainer to /quote.
// Stronger than the homepage HomeownerInvite: this one ends a page that has
// already made the argument. The reader has been brought along; the close
// is the ask. It accuses the category and offers the alternative in the
// same breath.
//
// Variants:
//   "argument"  — used at the end of Approach (the thesis page)
//   "personal"  — used at the end of About / FAQ (the company-facing pages)
//
// Designed to sit on Solas Paper without a card; the visual weight is the
// 2px Ink-Blue accent rule and the size of the closing sentence.

const WAITLIST_CTA_COPY = window.solasContent.waitlistCta;

const WaitlistCTA = ({ variant = "argument", onNav }) => {
  const c = WAITLIST_CTA_COPY[variant] || WAITLIST_CTA_COPY.argument;
  return (
    <section className="waitlist-cta" data-screen-label="Waitlist close">
      <div className="waitlist-cta__inner">
        <div className="waitlist-cta__rule" />
        <span className="waitlist-cta__eyebrow">{c.eyebrow}</span>
        <h2 className="waitlist-cta__title">{c.title}</h2>
        <p className="waitlist-cta__standfirst">{c.standfirst}</p>
        <div className="waitlist-cta__actions">
          <a
            href="#/quote"
            className="btn btn--primary"
            onClick={(e) => { e.preventDefault(); onNav("/quote"); }}
          >{c.cta}</a>
          <a
            href="#/faq"
            className="waitlist-cta__secondary"
            onClick={(e) => { e.preventDefault(); onNav("/faq"); }}
          >{WAITLIST_CTA_COPY.secondaryLabel}</a>
        </div>
        <p className="waitlist-cta__note">
          {WAITLIST_CTA_COPY.note}
        </p>
      </div>
    </section>
  );
};

Object.assign(window, {
  PageHero, Section, Stub, PullQuote, MetaList,
  ImageSlot, SectionOpener, HiringStrip, WaitlistCTA, IMG,
});