"use client";

import type { ReactNode } from "react";

/**
 * Decorative, asset-free mock windows for the two feature panels (Revival Inc.
 * and RustyWolf). They replace the old raster screenshots so the panels read as
 * a little OS window instead of a flat image. Purely presentational — the real
 * copy lives in the `.web-feature-text` paragraph below each window.
 */

function Chrome({
  title,
  tabs,
  children,
}: {
  title?: string;
  tabs?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="fw" aria-hidden="true">
      <div className={"fw-bar" + (tabs ? " fw-bar-browser" : "")}>
        <span className="fw-dots">
          <span className="fw-dot" />
          <span className="fw-dot" />
          <span className="fw-dot" />
        </span>
        {tabs ?? <span className="fw-title">{title}</span>}
      </div>
      <div className="fw-body">{children}</div>
    </div>
  );
}

function GameBody() {
  return (
    <div className="fw-scene">
      <span className="fw-stars" />
      <span className="fw-moon" />
      <span className="fw-hills" />
      <div className="fw-graves">
        <span className="fw-grave" />
        <span className="fw-grave" />
        <span className="fw-grave" />
        <span className="fw-grave" />
      </div>
      <span className="fw-scan" />
      <div className="fw-hud">
        <span className="fw-hearts">♥ ♥ ♥</span>
        <span className="fw-score">SCORE 0000</span>
      </div>
      <span className="fw-start">PRESS START</span>
    </div>
  );
}

function BrowserBody() {
  const tiles = ["G", "Y", "R", "D", "X"];
  return (
    <div className="fw-browser">
      <div className="fw-toolbar">
        <span className="fw-nav">‹</span>
        <span className="fw-nav">›</span>
        <span className="fw-nav fw-nav-reload">⟳</span>
        <span className="fw-url">
          <span className="fw-lock" />
          rustywolf://start
        </span>
      </div>
      <div className="fw-page">
        <div className="fw-wordmark">
          Rusty<span>Wolf</span>
        </div>
        <div className="fw-search">
          <span className="fw-search-dot" />
          <span className="fw-search-text">Search or enter address</span>
        </div>
        <div className="fw-tiles">
          {tiles.map((t) => (
            <span key={t} className="fw-tile">
              {t}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function FeatureWindow({ variant }: { variant: "game" | "browser" }) {
  if (variant === "game") {
    return (
      <Chrome title="revival-inc — mini jame gam #55">
        <GameBody />
      </Chrome>
    );
  }
  return (
    <Chrome
      tabs={
        <div className="fw-tabs">
          <span className="fw-tab">
            <span className="fw-tab-dot" />
            New Tab
          </span>
          <span className="fw-tab-plus">+</span>
        </div>
      }
    >
      <BrowserBody />
    </Chrome>
  );
}