// Reviews — bento mosaic testimonials

const REVIEWS = {
  left: [
    {
      quote: "Shipped our first internal copilot in three weeks. Quality surprised the whole eng team.",
      name: "Marcus Reid",
      role: "CTO, Veloce AI",
      avatar: "assets/team-leo.jpg",
    },
    {
      quote: "Zero back-and-forth on visual direction. They understood our design language on day one.",
      name: "Sarah Chen",
      role: "Head of Design, Forma",
      avatar: "assets/team-mira.jpg",
    },
    {
      quote: "Eval-first approach gave us confidence to ship. We knew exactly what was working before release.",
      name: "James Osei",
      role: "Founder, Nordvik",
      avatar: "assets/team-juno.jpg",
    },
  ],
  centerTop: [
    {
      quote: "Best prompt engineering and deployment work I've seen from an outside team. They act like seniors.",
      name: "Priya Nair",
      role: "VP Engineering, Lumia",
      avatar: "assets/team-aria.jpg",
    },
  ],
  featured: {
    quote: "We went from a rough brief to a production AI feature in eight weeks — design, evals, and deployment fully handled. It felt like having a senior product team embedded inside ours.",
    name: "Daniel Marçal",
    role: "Co-Founder, Atmos",
    avatar: "assets/team-noah.jpg",
    media: "assets/testimonials-bg.jpg",
  },
  right: [
    {
      quote: "Cleanest hand-off I've ever seen. Docs, evals, CI pipeline — all there on day one of maintenance.",
      name: "Tom Kowalski",
      role: "CPO, Stackfield",
      avatar: "assets/team-juno.jpg",
    },
    {
      quote: "Latency stayed under 300ms p95. They benchmark everything before declaring it done.",
      name: "Yuki Tanaka",
      role: "Staff Engineer, Rayfield",
      avatar: "assets/team-mira.jpg",
    },
    {
      quote: "From discovery to v1 in six weeks. Scope was tight and they held it the whole sprint.",
      name: "Cleo Davis",
      role: "Product Lead, Caspian",
      avatar: "assets/team-aria.jpg",
    },
  ],
};

// ─── ReviewCard ───────────────────────────────────────────────
const ReviewCard = ({ quote, name, role, avatar }) => (
  <article className="ag-review-card">
    <p className="ag-review-card__quote">"{quote}"</p>
    <div className="ag-review-card__footer">
      <span className="ag-avatar" style={{ backgroundImage: `url('${avatar}')` }} />
      <div>
        <div className="ag-about__quoter-name">{name}</div>
        <div className="ag-about__quoter-role">{role}</div>
      </div>
    </div>
  </article>
);

// ─── FeaturedReviewCard ───────────────────────────────────────
const FeaturedReviewCard = ({ quote, name, role, avatar, media }) => (
  <article className="ag-reviews__featured">
    <div
      className="ag-reviews__featured-media"
      style={{ backgroundImage: `url('${media}')` }}
    >
      <span className="ag-chip ag-chip--dark">
        <SparkleIcon size={11} />
        Featured
      </span>
    </div>
    <div className="ag-reviews__featured-body">
      <p className="ag-reviews__featured-quote">"{quote}"</p>
      <div className="ag-reviews__featured-footer">
        <div className="ag-reviews__reviewer">
          <span className="ag-avatar" style={{ backgroundImage: `url('${avatar}')` }} />
          <div>
            <div className="ag-about__quoter-name">{name}</div>
            <div className="ag-about__quoter-role">{role}</div>
          </div>
        </div>
        <Button variant="light">Read more</Button>
      </div>
    </div>
  </article>
);

// ─── Reviews ─────────────────────────────────────────────────
const Reviews = () => (
  <section className="ag-reviews" id="ag-section-reviews">
    <SectionHeading
      eyebrow="Reviews"
      sub="What teams say after shipping with us."
    >
      Trusted by builders<br/>who ship.
    </SectionHeading>

    <div className="ag-reviews__bento">
      <div className="ag-reviews__col ag-reviews__col--left">
        {REVIEWS.left.map((r) => <ReviewCard key={r.name} {...r} />)}
      </div>

      <div className="ag-reviews__col ag-reviews__col--center">
        {REVIEWS.centerTop.map((r) => <ReviewCard key={r.name} {...r} />)}
        <FeaturedReviewCard {...REVIEWS.featured} />
      </div>

      <div className="ag-reviews__col ag-reviews__col--right">
        {REVIEWS.right.map((r) => <ReviewCard key={r.name} {...r} />)}
      </div>
    </div>
  </section>
);

window.Reviews = Reviews;