/* Editorial.jsx — single-page composition.
 *
 * One viewport, no nav, no sections. Centered logo, wordmark, body
 * paragraph block, footer line. Edit COPY to change what the page says.
 */

const COPY = {
  body: [
    "Two firms run different ends of the Ethereum stack: Pol Finance in market structure, Aligned in verification. Zonda Markets is the research bench between them.",
    "We build settlement, ordering, and credit infrastructure for Ethereum.",
  ],
  contact: "contact@zondamarkets.com",
};

// Subtle paper grain — fixed full-viewport SVG, multiplied over the
// cream background. Low opacity, just enough to give the paper depth.
function PaperGrain() {
  return (
    <svg className="grain" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <filter id="paperGrain">
        <feTurbulence
          type="fractalNoise"
          baseFrequency="0.85"
          numOctaves="2"
          stitchTiles="stitch"
          seed="5"
        />
        <feColorMatrix
          values="0 0 0 0 0.08
                  0 0 0 0 0.06
                  0 0 0 0 0.04
                  0 0 0 1 0"
        />
      </filter>
      <rect width="100%" height="100%" filter="url(#paperGrain)" />
    </svg>
  );
}

// Ink-bleed filter — applied to text so letter edges look like ink
// absorbed into paper. feTurbulence generates noise; feDisplacementMap
// pushes the source pixels along that noise. Low `scale` keeps it subtle.
// Bump `scale` (e.g. 0.8 → 1.5) for a more pronounced "wet ink" feel.
function InkFilter() {
  return (
    <svg
      aria-hidden="true"
      style={{ position: "absolute", width: 0, height: 0, overflow: "hidden" }}
    >
      <defs>
        <filter id="inkBleed" x="-2%" y="-2%" width="104%" height="104%">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="1.5"
            numOctaves="2"
            seed="4"
            result="noise"
          />
          <feDisplacementMap
            in="SourceGraphic"
            in2="noise"
            scale="0.8"
            xChannelSelector="R"
            yChannelSelector="G"
          />
        </filter>
      </defs>
    </svg>
  );
}

function Editorial() {
  return (
    <React.Fragment>
      <PaperGrain />
      <InkFilter />

      <main className="editorial">
        <div className="editorial__mark">
          <Wordmark src="logos/zonda_wordmark_5.png" width={320} />
        </div>

        <article className="editorial__body">
          {COPY.body.map((para, i) => (
            <p key={i}>
              {para.split(/(Zonda Markets)/g).map((part, j) =>
                part === "Zonda Markets"
                  ? <em key={j} className="editorial__brand">{part}</em>
                  : part
              )}
            </p>
          ))}
        </article>

        <p className="editorial__contact">{COPY.contact}</p>
      </main>
    </React.Fragment>
  );
}

Object.assign(window, { Editorial, PaperGrain, InkFilter });