// Flower placeholder — stylized SVG "sketch" for product cards and hero imagery.
// Not realistic; monochrome-ish and overlays a striped ph texture.

function FlowerArt({ hue = '#d9a78a', bg = '#f2dfcd', seed = 1, label, aspect = '1/1', style = {} }){
  // Deterministic layout using seed
  const petals = 6 + (seed % 3);
  const cx = 100, cy = 104;
  const r1 = 44;
  const stemLen = 62 + (seed * 7) % 20;
  const darker = shade(hue, -0.25);
  const lighter = shade(hue, 0.25);
  const leafHue = '#6f8b66';

  const petalEls = Array.from({length: petals}).map((_, i) => {
    const ang = (Math.PI * 2 * i) / petals + seed * 0.35;
    const rx = 22, ry = 34;
    const px = cx + Math.cos(ang) * 14;
    const py = cy + Math.sin(ang) * 14;
    return (
      <ellipse key={i} cx={px} cy={py} rx={rx} ry={ry}
        transform={`rotate(${(ang * 180/Math.PI)+90} ${px} ${py})`}
        fill={i%2===0 ? hue : lighter} opacity="0.9" />
    );
  });

  return (
    <div className="ph" style={{ aspectRatio: aspect, background: bg, ...style }}>
      <svg viewBox="0 0 200 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{position:'absolute', inset:0}}>
        {/* stem */}
        <path d={`M ${cx} ${cy+r1-6} Q ${cx-8} ${cy + stemLen*0.6} ${cx-4} ${cy + stemLen}`} stroke={leafHue} strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* leaf */}
        <path d={`M ${cx-5} ${cy + stemLen*0.55} Q ${cx-30} ${cy + stemLen*0.6} ${cx-36} ${cy + stemLen*0.48}
                  Q ${cx-22} ${cy + stemLen*0.45} ${cx-5} ${cy + stemLen*0.55} Z`} fill={leafHue} opacity="0.85"/>
        {/* petals */}
        <g>{petalEls}</g>
        {/* center */}
        <circle cx={cx} cy={cy} r="14" fill={darker} />
        <circle cx={cx} cy={cy} r="6" fill={shade(hue, -0.45)} />
      </svg>
      {label ? <div className="label">{label}</div> : null}
    </div>
  );
}

function shade(hex, amt){
  // amt -1..1. Simple HSL-ish mix towards black/white via channel blending.
  const c = hex.replace('#','');
  const n = parseInt(c.length===3 ? c.split('').map(x=>x+x).join('') : c, 16);
  let r = (n>>16)&255, g=(n>>8)&255, b=n&255;
  if(amt >= 0){ r = Math.round(r + (255-r)*amt); g = Math.round(g + (255-g)*amt); b = Math.round(b + (255-b)*amt); }
  else { const k = 1+amt; r = Math.round(r*k); g = Math.round(g*k); b = Math.round(b*k); }
  return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
}

// Simple striped placeholder for "photo not yet taken" cases
function PhotoPh({label='photo', aspect='4/5', tone='#ecdcc4'}){
  return (
    <div className="ph" style={{ aspectRatio: aspect, background: tone }}>
      <div className="label">{label}</div>
    </div>
  );
}

window.FlowerArt = FlowerArt;
window.PhotoPh = PhotoPh;
window.shade = shade;