// Reusable abstract CSS/SVG visual compositions — no real photos.
// Each composition is a self-contained piece of "imagery" built from gradients, blurs, lines.

const Visual = {
  // Soft warm glow with organic shapes — for hero
  HeroBloom: ({ className = "" }) => (
    <div className={`vis-hero-bloom ${className}`} aria-hidden="true">
      <style>{`
        .vis-hero-bloom { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .vis-hero-bloom .b1, .vis-hero-bloom .b2, .vis-hero-bloom .b3 {
          position: absolute; border-radius: 50%; filter: blur(80px);
          mix-blend-mode: multiply;
        }
        .vis-hero-bloom .b1 {
          width: 60vw; height: 60vw; left: -10vw; top: -20vw;
          background: radial-gradient(circle, #e8d5b7, transparent 60%);
          animation: float-a 18s ease-in-out infinite;
        }
        .vis-hero-bloom .b2 {
          width: 50vw; height: 50vw; right: -8vw; top: 10vw;
          background: radial-gradient(circle, #d4a574, transparent 60%);
          animation: float-b 22s ease-in-out infinite;
          opacity: 0.55;
        }
        .vis-hero-bloom .b3 {
          width: 40vw; height: 40vw; left: 30vw; bottom: -10vw;
          background: radial-gradient(circle, #efe6d6, transparent 60%);
          animation: float-c 26s ease-in-out infinite;
        }
        @keyframes float-a { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(4vw,3vw) scale(1.08);} }
        @keyframes float-b { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-3vw,4vw) scale(1.06);} }
        @keyframes float-c { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(2vw,-3vw) scale(1.1);} }
        .vis-hero-bloom .grain {
          position: absolute; inset: 0;
          background:
            repeating-linear-gradient(0deg, rgba(26,20,16,0.015) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgba(26,20,16,0.015) 0 1px, transparent 1px 3px);
        }
      `}</style>
      <div className="b1" /><div className="b2" /><div className="b3" />
      <div className="grain" />
    </div>
  ),

  // Editorial portrait placeholder — abstract face/silhouette suggestion
  Portrait: ({ tone = "champ", label = "PORTRAIT", className = "" }) => {
    const tones = {
      champ: ["#e8d5b7", "#d4a574", "#8a7560"],
      blush: ["#f0d7d2", "#d9a89e", "#8a6560"],
      ivory: ["#fbf6ec", "#efe6d6", "#bfb09a"],
      ink:   ["#3a2a20", "#1a1410", "#c9a961"],
    };
    const [c1, c2, c3] = tones[tone] || tones.champ;
    return (
      <div className={`vis-portrait ${className}`} aria-hidden="true">
        <style>{`
          .vis-portrait { position: relative; width: 100%; height: 100%; overflow: hidden; }
          .vis-portrait .frame { position: absolute; inset: 0; }
          .vis-portrait .label {
            position: absolute; left: 14px; bottom: 14px;
            font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em;
            text-transform: uppercase; color: rgba(255,255,255,0.7);
            mix-blend-mode: difference;
          }
          .vis-portrait .stripes {
            position: absolute; inset: 0;
            background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 12px);
          }
        `}</style>
        <div className="frame" style={{
          background: `radial-gradient(120% 80% at 30% 20%, ${c1} 0%, ${c2} 45%, ${c3} 100%)`
        }} />
        {/* Soft silhouette ovals */}
        <svg viewBox="0 0 200 280" preserveAspectRatio="xMidYMid slice" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
          <defs>
            <radialGradient id={`pg-${tone}`} cx="50%" cy="35%" r="55%">
              <stop offset="0%" stopColor="rgba(255,255,255,0.45)"/>
              <stop offset="60%" stopColor="rgba(255,255,255,0.05)"/>
              <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
            </radialGradient>
            <linearGradient id={`pl-${tone}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="rgba(0,0,0,0)"/>
              <stop offset="100%" stopColor="rgba(26,20,16,0.45)"/>
            </linearGradient>
          </defs>
          <ellipse cx="100" cy="110" rx="42" ry="56" fill={`url(#pg-${tone})`} />
          <path d="M30 280 C 30 200, 70 170, 100 170 C 130 170, 170 200, 170 280 Z" fill={c3} opacity="0.35"/>
          <rect width="200" height="280" fill={`url(#pl-${tone})`} />
        </svg>
        <div className="stripes" />
        <div className="label">{label}</div>
      </div>
    );
  },

  // Abstract still-life: bottle/jar shapes for product imagery
  Stilllife: ({ className = "" }) => (
    <div className={`vis-still ${className}`} aria-hidden="true">
      <style>{`
        .vis-still { position: relative; width: 100%; height: 100%; overflow: hidden;
          background: linear-gradient(160deg, #efe6d6, #f7f1e8 60%, #e8d5b7);
        }
        .vis-still svg { position: absolute; inset: 0; width: 100%; height: 100%; }
      `}</style>
      <svg viewBox="0 0 240 320" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="bottle" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#fbf6ec" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#c9a961" stopOpacity="0.7"/>
          </linearGradient>
          <linearGradient id="shadow" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(0,0,0,0)"/>
            <stop offset="100%" stopColor="rgba(26,20,16,0.18)"/>
          </linearGradient>
        </defs>
        {/* surface */}
        <rect x="0" y="240" width="240" height="80" fill="url(#shadow)"/>
        {/* tall bottle */}
        <g>
          <rect x="58" y="100" width="44" height="140" rx="4" fill="url(#bottle)" stroke="#1a1410" strokeOpacity="0.15"/>
          <rect x="70" y="80" width="20" height="22" fill="#1a1410" opacity="0.7"/>
          <rect x="64" y="160" width="32" height="28" fill="#fbf6ec" opacity="0.6"/>
        </g>
        {/* jar */}
        <g>
          <rect x="130" y="160" width="64" height="80" rx="6" fill="#d4a574" opacity="0.85" stroke="#1a1410" strokeOpacity="0.18"/>
          <rect x="130" y="148" width="64" height="14" rx="3" fill="#c9a961"/>
        </g>
        {/* small flask */}
        <g>
          <circle cx="200" cy="220" r="18" fill="#fbf6ec" stroke="#1a1410" strokeOpacity="0.18"/>
          <rect x="195" y="196" width="10" height="8" fill="#1a1410" opacity="0.7"/>
        </g>
        {/* highlights */}
        <ellipse cx="68" cy="120" rx="4" ry="40" fill="white" opacity="0.4"/>
        <ellipse cx="142" cy="180" rx="3" ry="28" fill="white" opacity="0.4"/>
      </svg>
    </div>
  ),

  // Concentric arches — used as decorative section header
  Arches: ({ className = "" }) => (
    <svg className={className} viewBox="0 0 600 200" preserveAspectRatio="xMidYMax meet" aria-hidden="true">
      <g fill="none" stroke="#c9a961" strokeOpacity="0.5" strokeWidth="0.6">
        {[0,1,2,3,4,5,6,7].map(i => (
          <path key={i} d={`M ${300 - (180 - i*22)} 200 A ${180 - i*22} ${180 - i*22} 0 0 1 ${300 + (180 - i*22)} 200`} />
        ))}
      </g>
    </svg>
  ),

  // Tiny ornament glyph
  Glyph: ({ className = "" }) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 2 L13 11 L22 12 L13 13 L12 22 L11 13 L2 12 L11 11 Z" fill="#c9a961"/>
    </svg>
  ),
};

window.Visual = Visual;