// Visual placeholder components: abstract organic SVGs + labeled image slots.

const EdenLogoMark = ({ size = 26 }) => (
  <img
    src="assets/eden-logo-full.png"
    alt="Eden Wellness"
    style={{
      // Render the full logo (tree + wordmark). Aspect ratio 1280:1024 = 1.25:1.
      height: size * 1.6,
      width: 'auto',
      display: 'inline-block',
      verticalAlign: 'middle',
    }}
  />
);

const ArrowRight = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2 6 L 10 6 M 7 3 L 10 6 L 7 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Plus = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M6 2 L 6 10 M 2 6 L 10 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);

const CheckIcon = () => (
  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
    <path d="M2 5.5 L 4 7.5 L 8 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// Organic topographic placeholder — different hash per id for variation
const BotanicalPlaceholder = ({ label, seed = 1, accent = 'phosphor' }) => {
  const paths = React.useMemo(() => {
    const rnd = (n) => {
      let x = Math.sin(seed * 9999 + n * 31) * 10000;
      return x - Math.floor(x);
    };
    const layers = [];
    for (let i = 0; i < 9; i++) {
      const pts = [];
      const offY = 100 + i * 50 + rnd(i) * 30;
      for (let x = -40; x <= 440; x += 16) {
        const y = offY + Math.sin((x + rnd(i + 10) * 200) * 0.016 + i * 0.8) * (24 + rnd(i + 20) * 30);
        pts.push(`${x},${y.toFixed(1)}`);
      }
      layers.push(pts.join(' '));
    }
    return layers;
  }, [seed]);

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
        <defs>
          <linearGradient id={`grad-${seed}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#1e2e24" />
            <stop offset="0.6" stopColor="#152018" />
            <stop offset="1" stopColor="#0e1813" />
          </linearGradient>
          <radialGradient id={`glow-${seed}`} cx="65%" cy="25%" r="65%">
            <stop offset="0" stopColor="rgba(201, 168, 117, 0.14)" />
            <stop offset="0.5" stopColor="rgba(141, 160, 122, 0.06)" />
            <stop offset="1" stopColor="rgba(141, 160, 122, 0)" />
          </radialGradient>
        </defs>
        <rect width="400" height="500" fill={`url(#grad-${seed})`} />
        <rect width="400" height="500" fill={`url(#glow-${seed})`} />
        {paths.map((p, i) => (
          <polyline
            key={i}
            points={p}
            fill="none"
            stroke={i % 3 === 0 ? "rgba(201, 168, 117, 0.22)" : "rgba(181, 200, 156, 0.18)"}
            strokeWidth={i === 4 ? 1.1 : 0.5}
            opacity={0.35 + i * 0.05}
          />
        ))}
        {/* Scatter dots — like seeds */}
        {[...Array(24)].map((_, i) => {
          const x = ((Math.sin(seed * 99 + i * 13) + 1) / 2) * 400;
          const y = ((Math.cos(seed * 77 + i * 7) + 1) / 2) * 500;
          const r = 0.6 + ((Math.sin(i * 3) + 1) / 2) * 1.4;
          return <circle key={i} cx={x} cy={y} r={r} fill="rgba(237, 229, 210, 0.28)" />;
        })}
      </svg>
      {label && (
        <div style={{
          position: 'absolute',
          bottom: 14, left: 14,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'rgba(232,226,213,0.45)',
          padding: '4px 8px',
          border: '1px solid rgba(232,226,213,0.1)',
          borderRadius: 2,
          background: 'rgba(7,11,8,0.5)',
        }}>
          IMAGE · {label}
        </div>
      )}
    </div>
  );
};

// Organic blob -- decorative
const OrganicBlob = ({ className = '', style = {} }) => (
  <svg viewBox="0 0 400 400" className={className} style={style}>
    <defs>
      <radialGradient id="blobGrad" cx="50%" cy="50%">
        <stop offset="0" stopColor="rgba(184,216,176,0.25)" />
        <stop offset="1" stopColor="rgba(184,216,176,0)" />
      </radialGradient>
    </defs>
    <path
      d="M200,30 C290,40 360,120 350,220 C340,310 260,370 180,360 C100,350 40,280 50,190 C60,110 130,25 200,30 Z"
      fill="url(#blobGrad)"
    />
  </svg>
);

// Team placeholder — silhouette lines
const TeamPlaceholder = ({ name, seed = 1 }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    <BotanicalPlaceholder label={`PORTRAIT · ${name?.toUpperCase()}`} seed={seed} />
    <svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.35 }}>
      <path d="M100,60 Q75,60 75,90 Q75,115 85,120 Q60,130 55,180 Q52,220 65,260 L 135,260 Q 148,220 145,180 Q 140,130 115,120 Q 125,115 125,90 Q 125,60 100,60 Z" fill="rgba(232,226,213,0.15)" stroke="rgba(184,216,176,0.25)" strokeWidth="0.6"/>
    </svg>
  </div>
);

Object.assign(window, { EdenLogoMark, ArrowRight, Plus, CheckIcon, BotanicalPlaceholder, OrganicBlob, TeamPlaceholder });