import EmailForm from "./EmailForm";
import Book3D from "./Book3D";

export default function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-tabs" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div className="wrap hero-grid">
        <div className="hero-visual">
          <Book3D />
        </div>
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="tick"></span>
            <span className="spec">
              Field guide · Edition&nbsp;001 · Kickstarter&nbsp;Sept&nbsp;26,&nbsp;2026
            </span>
          </div>
          <h1>
            The field guide to using AI agents{" "}
            <span className="serif-it">responsibly</span> at work.
          </h1>
          <p className="hero-sub">
            Not theory. Not hype. A subscription guide of{" "}
            <span className="hl">tested workflows you can actually run</span> — each with the
            real tool output, the guardrails, and a 15-minute exercise so you learn by doing.
          </p>
          <EmailForm className="hero-form" cta="Send me the preview chapter" />
          <p className="hero-note">
            Free preview + first access at launch · <b>3 emails, no spam</b>
          </p>
        </div>
      </div>
    </section>
  );
}