// SKEight — real app screenshots used across the marketing site.

const APP_SCREENSHOTS = {
  chart: "screenshots/IMG_1772.PNG",
  relationships: "screenshots/IMG_1773.PNG",
  career: "screenshots/IMG_1774.PNG",
  health: "screenshots/IMG_1775.PNG",
  past: "screenshots/IMG_1776.PNG",
  now: "screenshots/IMG_1777.PNG",
  future: "screenshots/IMG_1778.PNG",
};

function AppScreenshot({ image = "chart", alt, style }) {
  return (
    <div className="real-phone-frame" style={style}>
      <img src={APP_SCREENSHOTS[image]} alt={alt || `SKEight ${image} screen`} loading="lazy" />
    </div>
  );
}

function ScreenshotShowcase({ items }) {
  return (
    <div className="real-shot-grid">
      {items.map(item => (
        <div className="real-shot-card" key={item.image}>
          <AppScreenshot image={item.image} alt={item.alt} style={{ width: "min(100%, 360px)" }} />
          <div className="real-shot-caption">{item.label}</div>
        </div>
      ))}
    </div>
  );
}

function ScreenChart() {
  return <AppScreenshot image="chart" alt="Real SKEight chart report screenshot" />;
}

function ScreenLuck() {
  return <AppScreenshot image="now" alt="Real SKEight current luck cycle screenshot" />;
}

function ScreenDaily() {
  return <AppScreenshot image="relationships" alt="Real SKEight relationships report screenshot" />;
}

function ScreenYearly() {
  return <AppScreenshot image="future" alt="Real SKEight future luck cycle screenshot" />;
}

Object.assign(window, {
  APP_SCREENSHOTS, AppScreenshot, ScreenshotShowcase,
  ScreenChart, ScreenLuck, ScreenDaily, ScreenYearly,
});