// components/what-you-get.jsx
// Section 5/6. "What you actually get."
// Three relief-framed cards. Card 3 includes a "See what we're working on." link → #faq-whats-next.

function WhatYouGetSection({ onWhatsNext }) {
  const C = window.COPY;

  const linkClick = (e, href) => {
    e.preventDefault();
    onWhatsNext();
    // Update hash so the link is shareable.
    history.pushState(null, "", href);
  };

  return (
    <section
      id="what-you-get"
      aria-labelledby="wyg-heading"
      className="section-cream wyg"
    >
      <div className="container">
        <h2 id="wyg-heading" className="section-h2 wyg-h2" data-reveal>
          <span className="wyg-h2-slam">
            <span>Not </span>
            <span className="wyg-h2-flare">ESPN.</span>
          </span>
          <br />
          <span className="wyg-h2-line2">Not trying to be.</span>
        </h2>

        {C.whatYouGet.eyebrow && (
          <p className="wyg-eyebrow">{C.whatYouGet.eyebrow}</p>
        )}

        <div className="wyg-grid">
          {C.whatYouGet.cards.map((card, i) => (
            <div key={i} className={"wyg-card" + (card.rejectStyle ? " wyg-card-" + card.rejectStyle : "")}>
              {card.rejectStyle === "espn-correction" && card.rejectHeader && (
                <p className="wyg-card-reject" aria-hidden="true">{card.rejectHeader}</p>
              )}
              <h3 className="wyg-card-h">{card.header}</h3>
              <p className="wyg-card-body">{card.body}</p>
              {card.body2Italic && (
                <p className="wyg-card-body wyg-card-aside">{card.body2Italic}</p>
              )}
              {card.body3 && <p className="wyg-card-body">{card.body3}</p>}
              {card.body2 && <p className="wyg-card-body">{card.body2}</p>}
              {card.footerLink && (
                <a
                  href={card.footerLink.href}
                  className="wyg-card-link"
                  onClick={(e) => linkClick(e, card.footerLink.href)}
                >
                  {card.footerLink.label}
                </a>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatYouGetSection = WhatYouGetSection;