/**
 * Hero — full-bleed photo with cursive names + tracked "Save the Date" stamp.
 *
 * Decorative framing is driven by the `frame` prop (Tweakable):
 *   - "corners"  → the corner flourish (assets/frame-corner.svg) pinned to the
 *                  top-right, and a 180°-mirrored copy bottom-left.
 *   - "grapes"   → the grape-cluster frame, rotated 90° + stretched to wrap the
 *                  whole landscape hero (assets/frame-grapes-rot.svg).
 *   - "nouveau"  → the flowing art-nouveau frame, same rotate-90°+stretch treatment.
 *   - "none"     → bare photo.
 *
 * `frameColor` ("light" | "dark") recolours the line art via CSS filter so it
 * reads over a bright or dark photo.
 *
 * Photo is an <image-slot> web component so the user can drag-and-drop their
 * own engagement shot. The slot persists per-id via localStorage in the
 * prototype; in the RR7 port, replace it with a real <img src> driven by a loader.
 */
function Hero({ couple, frame = "vine", frameColor = "light" }) {
  return (
    <section
      id="hero"
      className={`section hero hero--frame-${frameColor}`}
      data-screen-label="01 Hero">
      
      <image-slot
        id="hero-photo"
        placeholder="Couple in greenhouse — full-bleed"
        shape="rect">
      </image-slot>

      <SectionFrame frame={frame} />

      <div className="hero-content">
        <h1 className="hero-names">
          {couple.first} <span className="amp">&amp;</span> {couple.second}
        </h1>
        <div className="hero-stamp">Save the Date</div>
      </div>
    </section>);

}

if (typeof window !== "undefined") window.Hero = Hero;