/* HeroVisual.jsx - Shared building blocks for the 7 secondary-page heroes.
   Provides:
     - HeroPhoto      : 50/50 photo placeholder with asymmetric 80px corner,
                       monospace descriptor (drop-in zone for real photography).
     - HeroFloatCard  : floating UI card overflowing the photo (notification etc.)
     - HeroFloatPill  : floating mono pill (badge/manifesto/contextual)
     - HeroBubbles    : symbolic mosaic of 8 question bubbles (FAQ only)
   Photos are intentionally placeholders - we never fabricate human imagery.
   The mono label describes what should be shot/dropped in production. */

(function () {
  // --hv-corner : 80px par défaut, réduit en mobile via media query (voir <style> de HeroPhoto)
  const RADII = {
    'bottom-left':  '16px 16px 16px var(--hv-corner, 80px)',
    'bottom-right': '16px 16px var(--hv-corner, 80px) 16px',
    'top-left':     'var(--hv-corner, 80px) 16px 16px 16px',
    'top-right':    '16px var(--hv-corner, 80px) 16px 16px',
  };

  // --- 1) HeroPhoto -------------------------------------------------------
  const HeroPhoto = ({
    corner = 'bottom-left',
    tone = 'dark',
    src,           // image URL (Unsplash CDN ou autre)
    alt = '',
    objectPosition = 'center',
    label,         // mono descriptor (utilisé seulement si pas de src)
    sub,
    minHeight = 620,
    children,      // floating elements
  }) => {
    const radius = RADII[corner] || RADII['bottom-left'];
    const stripes = tone === 'dark'
      ? 'repeating-linear-gradient(132deg, #1f1f22 0 14px, #18181a 14px 28px)'
      : 'repeating-linear-gradient(132deg, #d9d3c4 0 14px, #cdc6b6 14px 28px)';
    const wash = tone === 'dark'
      ? 'radial-gradient(circle at 28% 22%, rgba(244,239,230,0.06), transparent 65%)'
      : 'radial-gradient(circle at 28% 22%, rgba(255,255,255,0.45), transparent 65%)';
    return (
      <div className="hero-photo-wrap hv-photo-wrap" style={{
        position: 'relative',
        width: '100%',
        minHeight,
        height: '100%',
      }}>
        {/* Responsive - surcharge les styles inline (desktop ≥1025px inchangé) */}
        <style>{`
          @media (max-width: 900px) {
            .hv-photo-wrap, .hv-photo-frame { min-height: 480px !important; }
          }
          @media (max-width: 720px) {
            .hv-photo-wrap, .hv-photo-frame { min-height: 420px !important; }
            .hv-photo-frame { --hv-corner: 56px; }
            .hv-floats .hv-float-card { max-width: calc(100vw - 64px); }
          }
          @media (max-width: 480px) {
            .hv-photo-wrap, .hv-photo-frame { min-height: 340px !important; }
            .hv-photo-frame { --hv-corner: 44px; }
          }
        `}</style>
        {/* the photo */}
        <div className="hero-photo-frame hv-photo-frame" style={{
          position: 'relative',
          width: '100%',
          minHeight,
          height: '100%',
          borderRadius: radius,
          overflow: 'hidden',
          background: '#1a1a1b',
          backgroundImage: src ? undefined : `${wash}, ${stripes}`,
          boxShadow: tone === 'dark'
            ? '0 24px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(244,239,230,0.05)'
            : '0 24px 64px rgba(10,10,11,0.12), inset 0 1px 0 rgba(255,255,255,0.4)',
        }}>
          {src ? (
            <img src={src} alt={alt} loading="lazy" style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition,
              display: 'block',
            }}/>
          ) : null}
          {/* film grain */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            backgroundImage: tone === 'dark'
              ? 'radial-gradient(rgba(244,239,230,0.55) 0.6px, transparent 0.6px)'
              : 'radial-gradient(rgba(10,10,11,0.55) 0.6px, transparent 0.6px)',
            backgroundSize: '3px 3px',
            opacity: 0.09,
            mixBlendMode: tone === 'dark' ? 'screen' : 'multiply',
            pointerEvents: 'none',
          }}/>
          {/* duotone overlay (charbon 10% sur sombre / crème 8% sur clair) */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: tone === 'dark'
              ? 'linear-gradient(180deg, rgba(10,10,11,0.10) 0%, rgba(10,10,11,0.10) 40%, rgba(10,10,11,0.42) 100%)'
              : 'linear-gradient(180deg, rgba(244,239,230,0.08) 0%, rgba(244,239,230,0.08) 40%, rgba(244,239,230,0.32) 100%)',
            pointerEvents: 'none',
          }}/>
          {/* monospace descriptor - uniquement si pas de photo */}
          {!src ? (
            <div style={{
              position: 'absolute', left: 22, bottom: 20, right: 22,
              display: 'flex', flexDirection: 'column', gap: 6,
              pointerEvents: 'none',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                color: tone === 'dark' ? 'rgba(244,239,230,0.55)' : 'rgba(10,10,11,0.55)',
              }}>PHOTO · DROP-IN</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.04em',
                color: tone === 'dark' ? 'rgba(244,239,230,0.78)' : 'rgba(10,10,11,0.78)',
                lineHeight: 1.45,
                maxWidth: 360,
              }}>{label}</span>
              {sub ? (
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '0.06em',
                  color: tone === 'dark' ? 'rgba(244,239,230,0.42)' : 'rgba(10,10,11,0.42)',
                  lineHeight: 1.4,
                }}>{sub}</span>
              ) : null}
            </div>
          ) : null}
          <CornerMark corner={corner} tone={tone}/>
        </div>
        {/* floating elements layer (overflows the photo) */}
        <div className="hero-floats hv-floats" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
        }}>{children}</div>
      </div>
    );
  };

  // visual cue at the 80px corner - minimal cross-hatch ¬ tick
  const CornerMark = ({ corner, tone }) => {
    const pos = {
      'bottom-left':  { left: 16,  bottom: 16, transform: 'rotate(0deg)' },
      'bottom-right': { right: 16, bottom: 16, transform: 'rotate(90deg)' },
      'top-left':     { left: 16,  top: 16,    transform: 'rotate(270deg)' },
      'top-right':    { right: 16, top: 16,    transform: 'rotate(180deg)' },
    }[corner];
    return (
      <div aria-hidden style={{
        position: 'absolute', ...pos,
        width: 18, height: 18,
        borderLeft: `1.5px solid ${tone === 'dark' ? 'rgba(244,239,230,0.30)' : 'rgba(10,10,11,0.30)'}`,
        borderBottom: `1.5px solid ${tone === 'dark' ? 'rgba(244,239,230,0.30)' : 'rgba(10,10,11,0.30)'}`,
        opacity: 0.6,
      }}/>
    );
  };

  // --- 2) HeroFloatCard ---------------------------------------------------
  // Anchors a floating card to one of the photo corners with offset + rotation.
  const HeroFloatCard = ({
    anchor = 'top-right', // top-left | top-right | bottom-left | bottom-right
    offset = { x: -24, y: -24 },
    rotation = 0,
    width,
    background = 'var(--charbon-doux)',
    border = '1px solid var(--hairline-on-dark)',
    color = 'var(--fg-on-dark)',
    padding = '14px 16px',
    radius = 14,
    shadow = '0 18px 40px rgba(0,0,0,0.35)',
    children,
    floatAnim = false,
  }) => {
    const sidePos = {};
    if (anchor.includes('top'))    sidePos.top    = offset.y;
    if (anchor.includes('bottom')) sidePos.bottom = offset.y;
    if (anchor.includes('left'))   sidePos.left   = offset.x;
    if (anchor.includes('right'))  sidePos.right  = offset.x;
    return (
      <div className="hv-float-card" style={{
        position: 'absolute', ...sidePos,
        transform: `rotate(${rotation}deg)`,
        width,
        background,
        color,
        border,
        borderRadius: radius,
        padding,
        boxShadow: shadow,
        pointerEvents: 'auto',
        animation: floatAnim ? 'heroFloatY 3.6s ease-in-out infinite' : undefined,
      }}>
        {children}
      </div>
    );
  };

  // --- 3) HeroFloatPill ---------------------------------------------------
  const HeroFloatPill = ({
    anchor = 'top-right',
    offset = { x: -16, y: -16 },
    rotation = 0,
    variant = 'signature', // signature | dark | cream
    children,
  }) => {
    const palette = {
      signature: { bg: 'var(--signature)',         fg: 'var(--charbon-profond)' },
      dark:      { bg: 'var(--charbon-profond)',   fg: 'var(--signature)' },
      cream:     { bg: 'var(--creme-pur)',         fg: 'var(--charbon-profond)' },
    }[variant];
    return (
      <HeroFloatCard
        anchor={anchor}
        offset={offset}
        rotation={rotation}
        background={palette.bg}
        color={palette.fg}
        border="0"
        radius={9999}
        padding="9px 16px"
        shadow="0 14px 32px rgba(0,0,0,0.30)">
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          fontWeight: 500, whiteSpace: 'nowrap',
        }}>{children}</span>
      </HeroFloatCard>
    );
  };

  // --- 4) HeroBubbles (FAQ symbolic mosaic) -------------------------------
  // 8 chat-style question bubbles scattered with rotation/opacity variation.
  const HeroBubbles = ({ items, minHeight = 520 }) => {
    // 8 layout slots - chosen to feel scattered, not gridded.
    const slots = [
      { top: '4%',  left: '6%',  rot: 0, op: 0.85, float: false, z: 3 },
      { top: '9%',  left: '54%', rot: 0, op: 1.0,  float: false, z: 4 },
      { top: '24%', left: '26%', rot: 0, op: 0.9,  float: false, z: 3 },
      { top: '36%', left: '62%', rot: 0, op: 0.75, float: false, z: 2 },
      { top: '46%', left: '4%',  rot: 0, op: 1.0,  float: false, z: 4 },
      { top: '60%', left: '40%', rot: 0, op: 0.78, float: false, z: 2 },
      { top: '74%', left: '8%',  rot: 0, op: 0.72, float: false, z: 1 },
      { top: '80%', left: '50%', rot: 0, op: 0.92, float: false, z: 3 },
    ];
    return (
      <div className="hv-bubbles" style={{
        position: 'relative', width: '100%', minHeight,
        height: '100%',
      }}>
        {items.slice(0, 8).map((q, i) => {
          const s = slots[i];
          return (
            <div key={i} className="hv-bubble" style={{
              position: 'absolute',
              top: s.top, left: s.left,
              transform: `rotate(${s.rot}deg)`,
              opacity: s.op,
              zIndex: s.z,
              padding: '12px 16px',
              background: 'var(--charbon-doux)',
              border: '1px solid rgba(244,239,230,0.15)',
              borderBottomLeftRadius: 4,
              borderTopLeftRadius: 16,
              borderTopRightRadius: 16,
              borderBottomRightRadius: 16,
              color: 'var(--fg-on-dark)',
              fontFamily: 'var(--font-body)', fontWeight: 500,
              fontSize: 13, lineHeight: 1.3,
              maxWidth: 240,
              boxShadow: '0 12px 28px rgba(0,0,0,0.30)',
              animation: s.float ? 'heroFloatY 4s ease-in-out infinite' : undefined,
              animationDelay: s.float ? `${i * 0.4}s` : undefined,
            }}>
              {q}
            </div>
          );
        })}
        {/* a soft halo behind the cluster */}
        <div aria-hidden style={{
          position: 'absolute', inset: '20% 10% 20% 10%',
          background: 'radial-gradient(circle, rgba(212,255,63,0.08) 0%, transparent 65%)',
          filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0,
        }}/>
        {/* Responsive - la mosaïque en % déborde sous 720px :
           on bascule en liste "chat" verticale (positions inline neutralisées) */}
        <style>{`
          @media (max-width: 720px) {
            .hv-bubbles {
              min-height: 0 !important;
              display: flex; flex-direction: column;
              gap: 12px; padding: 8px 0;
            }
            .hv-bubbles .hv-bubble {
              position: static !important;
              max-width: 82% !important;
              opacity: 1 !important;
              transform: none !important;
            }
            .hv-bubbles .hv-bubble:nth-child(even) { align-self: flex-end; }
          }
        `}</style>
      </div>
    );
  };

  // expose
  window.HeroPhoto = HeroPhoto;
  window.HeroFloatCard = HeroFloatCard;
  window.HeroFloatPill = HeroFloatPill;
  window.HeroBubbles = HeroBubbles;
})();