/* Design reminder: Practical Navy + Mint Editorial. Preview videos must never be represented as real seller testimonials. */
import { Info, PlayCircle, ShieldCheck } from "lucide-react";

const layoutPreviewVideos = [
  { id: "preview-01", videoId: "M7lc1UVf-VE", label: "Preview player 01" },
  { id: "preview-02", videoId: "ScMzIvxBSi4", label: "Preview player 02" },
  { id: "preview-03", videoId: "aqz-KE-bpKQ", label: "Preview player 03" },
];

export default function VerifiedVideoTestimonials() {
  return (
    <section className="verified-video-section" aria-labelledby="verified-videos-title">
      <div className="shell">
        <div className="verified-video-section__heading">
          <span className="eyebrow eyebrow--line eyebrow--dark">VIDEO STORY AREA</span>
          <h2 id="verified-videos-title">Video Story Layout Preview</h2>
          <p>These public YouTube embeds are layout previews only. They are not customer testimonials and will be replaced with seller-approved videos.</p>
        </div>

        <div className="video-preview-grid" aria-label="YouTube video layout previews">
          {layoutPreviewVideos.map((video) => (
            <article className="video-preview-card" key={video.id}>
              <div className="video-preview-card__frame">
                <iframe src={`https://www.youtube-nocookie.com/embed/${video.videoId}?rel=0`} title={`${video.label} — not a seller testimonial`} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />
                <span className="video-preview-card__play" aria-hidden="true"><PlayCircle size={28} /></span>
              </div>
              <div className="video-preview-card__body">
                <span className="video-preview-card__label">Layout preview — not a testimonial</span>
                <h3>{video.label}</h3>
                <p>Replace this player with a homeowner-approved video, accurate title, location, and consent record.</p>
              </div>
            </article>
          ))}
        </div>

        <div className="verified-video-empty verified-video-empty--note">
          <div className="verified-video-empty__icon"><ShieldCheck size={28} /></div>
          <div><strong>Publish seller stories only with permission.</strong><p>Remove these layout previews before launch or replace them with verified homeowner videos that your team has permission to use.</p></div>
          <Info className="verified-video-empty__info" size={18} aria-hidden="true" />
        </div>
      </div>
    </section>
  );
}
