/**
 * Pure-CSS 3D book styled as the field guide. Decorative, so aria-hidden.
 * Faces (cover / spine / fore-edge / top / back) are assembled with
 * transform-style: preserve-3d; see `.book3d` in globals.css.
 */
export default function Book3D() {
  return (
    <div className="book3d" aria-hidden="true">
      <div className="book3d__inner">
        <div className="book3d__face book3d__back" />
        <div className="book3d__face book3d__pages" />
        <div className="book3d__face book3d__top" />
        <div className="book3d__face book3d__spine">
          <span>AiBook.fun · Responsible Agentic AI</span>
        </div>
        <div className="book3d__face book3d__cover">
          <span className="book3d__kicker">The Field Guide</span>
          <h3 className="book3d__title">
            Responsible
            <br />
            Agentic AI
          </h3>
          <span className="book3d__line" />
          <span className="book3d__sub">Tested workflows you can actually run</span>
          <div className="book3d__foot">
            <svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
              <circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
              <path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
              <path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
            </svg>
            <span className="book3d__brand">AiBook.fun</span>
          </div>
          {/* Belly band — the classic publisher's wraparound strip for a themed
              tie-in, rather than redesigning the whole cover around it. */}
          <div className="book3d__band">
            <img src="/american-dream-banner.webp" alt="" />
          </div>
        </div>
      </div>
    </div>
  );
}