/* Small atoms shared across sections */
const Arrow = ({ size = 14, dir = "right" }) => (
  <svg className="arr" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="square" strokeLinejoin="miter" style={dir === "down" ? { transform: "rotate(90deg)" } : undefined}>
    <path d="M5 12 H19" />
    <path d="M13 6 L19 12 L13 18" />
  </svg>
);

const Diamond = () => (
  <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2 L22 12 L12 22 L2 12 Z" /></svg>
);

const Dot = () => <span className="dot"></span>;

const Chip = ({ children, solid = false, outline = true }) => (
  <span className={`chip ${solid ? "solid" : outline ? "outline" : ""}`}>
    {!solid && <Dot />}
    {children}
  </span>
);

/* Mid-funnel conversion band — reused at a couple of points down the page */
const CtaBand = ({ eyebrow, title, accent, note, cta = "Оставить заявку", to = "regular", onCta }) => (
  <section className="cta-band">
    <div className="wrap">
      <div className="cb-l">
        {eyebrow && <div className="cb-eyebrow">{eyebrow}</div>}
        <h3>
          {title} {accent && <span className="acc">{accent}</span>}
        </h3>
      </div>
      <div className="cb-r">
        <button className="btn acid lg" onClick={() => onCta && onCta(to)}>
          {cta} <Arrow />
        </button>
        {note && <span className="cb-note">{note}</span>}
      </div>
    </div>
  </section>
);

/* Brand mark — concentric record grooves bowed into a sound wave */
const Mark = () => {
  const C = 12, lobes = 7, steps = 96;
  const rings = [
    { base: 3.3, amp: 0.8, w: 1.5, o: 1 },
    { base: 6.5, amp: 1.0, w: 1.1, o: 0.78 },
    { base: 9.6, amp: 1.2, w: 1.1, o: 0.56 },
  ];
  const ringPath = (base, amp) => {
    let d = "";
    for (let i = 0; i <= steps; i++) {
      const t = (i / steps) * 2 * Math.PI;
      const r = base + Math.sin(t * lobes) * amp;
      d += (i ? "L" : "M") + (C + Math.cos(t) * r).toFixed(2) + " " + (C + Math.sin(t) * r).toFixed(2) + " ";
    }
    return d + "Z";
  };
  return (
    <svg className="mark" viewBox="0 0 24 24" aria-hidden="true" fill="none">
      {rings.map((r, i) => (
        <path key={i} d={ringPath(r.base, r.amp)} stroke="var(--acid)" strokeOpacity={r.o} strokeWidth={r.w} strokeLinejoin="round" />
      ))}
      <circle cx="12" cy="12" r="1.5" fill="var(--acid)" />
    </svg>
  );
};

/* Синестезия — генератор вкус-портретов трека */
const SYN_URL = (c) => "https://вкусныйтрек.рф/?utm_source=vkus-tech&utm_medium=landing&utm_campaign=" + c;

Object.assign(window, { Arrow, Diamond, Dot, Chip, CtaBand, Mark, SYN_URL });