Hero Section
├── mediaMode: image | video
├── heroImage (fallback / poster)
├── heroPoster (capa do vídeo)
├── heroVideo (UUID ou URL)
└── toggles: autoplay, loop, overlay

sections/hero-video/
├── section.jsx
├── schema.json
└── styles.css

snippets/corvex-video/
└── snippet.jsx

"sections": ["hero-video", …]

{
  "name": "Hero com vídeo",
  "category": "Banner",
  "settings": [
    {
      "id": "mediaMode",
      "type": "select",
      "label": "Tipo de mídia",
      "options": [
        { "value": "image", "label": "Imagem" },
        { "value": "video", "label": "Vídeo" }
      ],
      "default": "image"
    },
    { "id": "heroImage", "type": "image", "label": "Imagem" },
    { "id": "heroPoster", "type": "image", "label": "Poster do vídeo" },
    { "id": "heroVideo", "type": "video", "label": "Vídeo" },
    { "id": "videoAutoplay", "type": "checkbox", "label": "Autoplay", "default": true },
    { "id": "videoLoop", "type": "checkbox", "label": "Loop", "default": true },
    { "id": "showOverlay", "type": "checkbox", "label": "Overlay escuro", "default": true },
    { "id": "title", "type": "text", "label": "Título", "default": "Bem-vindo" },
    { "id": "subtitle", "type": "textarea", "label": "Subtítulo" },
    { "id": "buttonLabel", "type": "text", "label": "Botão" },
    { "id": "buttonUrl", "type": "url", "label": "Link do botão" }
  ]
}

import CorvexVideo from '@corvex/snippets/corvex-video';
import './styles.css';

export default function HeroVideoSection({ settings = {} }) {
  const {
    mediaMode = 'image',
    heroImage,
    heroPoster,
    heroVideo,
    videoAutoplay = true,
    videoLoop = true,
    showOverlay,
    title,
    subtitle,
    buttonLabel,
    buttonUrl,
  } = settings;

  const showVideo = mediaMode === 'video' && heroVideo;
  const poster = heroPoster || heroImage;

  return (
    <section
      className={`hero-video${showOverlay ? ' hero-video--overlay' : ''}`}
    >
      <div className="hero-video__media" aria-hidden={showVideo ? undefined : true}>
        {showVideo ? (
          <CorvexVideo
            value={heroVideo}
            poster={poster}
            autoplay={videoAutoplay}
            muted
            loop={videoLoop}
            controls={false}
            preload="metadata"
            className="hero-video__video"
            ariaLabel={title}
          />
        ) : heroImage ? (
          <img
            src={heroImage}
            alt={title ?? ''}
            className="hero-video__image"
            fetchPriority="high"
          />
        ) : null}
      </div>

      <div className="hero-video__content">
        {title ? <h1 className="hero-video__title">{title}</h1> : null}
        {subtitle ? <p className="hero-video__subtitle">{subtitle}</p> : null}
        {buttonLabel ? (
          <a href={buttonUrl || '#'} className="hero-video__cta">
            {buttonLabel}
          </a>
        ) : null}
      </div>
    </section>
  );
}

.hero-video {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: inherit;
}

.hero-video__media {
  position: absolute;
  inset: 0;
}

.hero-video__image,
.hero-video__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay, transparent);
  z-index: 1;
  pointer-events: none;
}

.hero-video__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}