---
import type { ImageMetadata } from 'astro';
import { getImage } from 'astro:assets';

interface Props { title: string; eyebrow?: string; bgImage?: ImageMetadata | string }
const { title, eyebrow, bgImage } = Astro.props;
const bgUrl = typeof bgImage === 'string' ? bgImage : bgImage ? (await getImage({ src: bgImage, width: 1920 })).src : null;
---
<section class:list={['phero', { 'phero--photo': bgUrl }]} style={bgUrl ? `background-image:url(${bgUrl})` : undefined}>
  <div class="container" data-reveal>
    {eyebrow && <p class="eyebrow">{eyebrow}</p>}
    <h1>{title}</h1>
  </div>
</section>

<style>
  /* Banner scuro come nel Figma: ~460px, titolo bianco maiuscolo ~44px */
  .phero { background: var(--c-dark); min-height: 380px; display: flex; align-items: center; }
  .phero .container { width: 100%; }
  .phero h1 { text-transform: uppercase; font-weight: 500; color: #fff; font-size: clamp(2.2rem, 4vw, 2.75rem); letter-spacing: .04em; margin: 0; }
  .phero--photo { position: relative; background-size: cover; background-position: center; }
  .phero--photo::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.6); }
  .phero--photo .container { position: relative; }
  @media (max-width: 767px) { .phero { min-height: 240px; } }
</style>