// Small SVG icons + decorative elements
const ArrowRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M1 7h12m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
  </svg>
);

const ArrowDown = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 1v12m-4-4 4 4 4-4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
  </svg>
);

const Plus = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.2"/>
  </svg>
);

const Quote = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 28 28" fill="none">
    <path d="M3 16c0-5 3-9 8-10v3c-3 1-5 3.5-5 7h5v8H3v-8zm14 0c0-5 3-9 8-10v3c-3 1-5 3.5-5 7h5v8h-8v-8z"
      fill="currentColor" opacity=".22"/>
  </svg>
);

const Logo = ({ color = "currentColor" }) => (
  // Wordmark: editorial emblem (Sb monogram) + "Sophie's Bureau" in serif
  <div style={{ display: "flex", alignItems: "center", gap: 14, color }}>
    {/* Emblem: thin circle, italic Sb monogram, hairline rule */}
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
      <circle cx="18" cy="18" r="17" stroke={color} strokeWidth="0.8" opacity="0.55"/>
      <circle cx="18" cy="18" r="14.2" stroke={color} strokeWidth="0.4" opacity="0.35"/>
      {/* Italic Sb set in Cormorant — drawn as text for crispness */}
      <text
        x="18"
        y="22.2"
        textAnchor="middle"
        fontFamily="Cormorant Garamond, serif"
        fontStyle="italic"
        fontWeight="500"
        fontSize="16"
        fill={color}
        letterSpacing="-0.5"
      >Sb</text>
      {/* Hairline accent under monogram */}
      <line x1="14" y1="25.5" x2="22" y2="25.5" stroke={color} strokeWidth="0.5" opacity="0.5"/>
    </svg>
    <span style={{
      fontFamily: 'var(--serif)',
      fontSize: 20,
      fontWeight: 500,
      letterSpacing: '-0.005em',
      lineHeight: 1
    }}>
      Sophie's Bureau
    </span>
  </div>
);

// Editorial photo placeholder — colored block with subtle motif + label
const EditorialPlaceholder = ({ label, tone = "sand", aspect = "4/3", motif = "lines", style = {}, src, className = "" }) => {
  const tones = {
    sand:    { bg: "#e8dcc4", ink: "rgba(44,44,44,.30)" },
    teal:    { bg: "#cfe0dd", ink: "rgba(44,44,44,.32)" },
    gold:    { bg: "#e6cfa8", ink: "rgba(44,44,44,.32)" },
    cream:   { bg: "#f3ecdf", ink: "rgba(44,44,44,.25)" },
    charcoal:{ bg: "#3a3a38", ink: "rgba(250,248,245,.30)" },
  };
  const t = tones[tone] || tones.sand;
  const motifs = {
    lines: (
      <g stroke={t.ink} strokeWidth="1" fill="none">
        {Array.from({length: 8}, (_, i) => <line key={i} x1="0" y1={i*16+12} x2="200" y2={i*16+12}/>)}
      </g>
    ),
    grid: (
      <g stroke={t.ink} strokeWidth="0.8" fill="none">
        {Array.from({length: 7}, (_, i) => <line key={"v"+i} x1={i*30+15} y1="0" x2={i*30+15} y2="160"/>)}
        {Array.from({length: 5}, (_, i) => <line key={"h"+i} x1="0" y1={i*32+16} x2="200" y2={i*32+16}/>)}
      </g>
    ),
    arc: (
      <g stroke={t.ink} strokeWidth="1" fill="none">
        <circle cx="100" cy="170" r="60"/>
        <circle cx="100" cy="170" r="90"/>
        <circle cx="100" cy="170" r="120"/>
      </g>
    ),
    object: (
      <g fill={t.ink}>
        <rect x="60" y="60" width="80" height="50" opacity="0.5"/>
        <rect x="80" y="50" width="80" height="50" opacity="0.3"/>
      </g>
    ),
    portrait: (
      <g stroke={t.ink} strokeWidth="1" fill="none">
        <circle cx="100" cy="70" r="22"/>
        <path d="M60 130 q40 -30 80 0 v40 h-80 z"/>
      </g>
    ),
  };
  return (
    <div className={`editorial-img ${className}`.trim()} style={{ aspectRatio: aspect, background: t.bg, ...style }}>
      {src ? (
        <img src={src} alt={label || ""}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
      ) : (
        <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          {motifs[motif]}
        </svg>
      )}
      {label && <div className="label">{label}</div>}
    </div>
  );
};

Object.assign(window, { ArrowRight, ArrowDown, Plus, Quote, Logo, EditorialPlaceholder });