/* global React */

// A round "MADE BY HUMANS" stamp — text curved on a circular path.
function HumanStamp({ size = 132, color = "var(--marigold-700)", rotate = -8, style: extra = {} }) {
  const id = "stamp-arc-" + Math.random().toString(36).slice(2, 8);
  return (
    <svg width={size} height={size} viewBox="0 0 132 132" style={{ display: "block", transform: `rotate(${rotate}deg)`, ...extra }}>
      <defs>
        <path id={id} d="M 66 66 m -50 0 a 50 50 0 1 1 100 0 a 50 50 0 1 1 -100 0" />
      </defs>
      {/* outer ring */}
      <circle cx="66" cy="66" r="62" fill="none" stroke={color} strokeWidth="1.4" opacity="0.6" />
      <circle cx="66" cy="66" r="56" fill="none" stroke={color} strokeWidth="1.2" opacity="0.4" />

      {/* curved text */}
      <text fill={color} style={{
        fontFamily: "var(--font-body)",
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
      }}>
        <textPath href={`#${id}`} startOffset="0%">
          This art was made by humans · This art was made by humans ·
        </textPath>
      </text>

      {/* center */}
      <g transform="translate(66 66)">
        <path d="M -16 12 C -24 4, -24 -10, -16 -14 C -10 -14, -4 -10, 0 -4 C 4 -10, 10 -14, 16 -14 C 24 -10, 24 4, 16 12 C 10 17, 0 22, 0 22 C 0 22, -10 17, -16 12 Z"
              fill={color} opacity="0.92" />
        <text x="0" y="38" textAnchor="middle" fill={color} style={{
          fontFamily: "var(--font-hand)",
          fontSize: 16,
        }}>
          no AI 🤍
        </text>
      </g>
    </svg>
  );
}

function MakersNote() {
  return (
    <section style={{ padding: "16px 0 56px", position: "relative" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "0 32px" }}>
        <div style={{
          position: "relative",
          background: "var(--cream)",
          borderRadius: 24,
          padding: "56px 56px 56px 64px",
          border: "1px solid rgba(42,33,24,0.08)",
          boxShadow: "0 8px 28px rgba(42,33,24,0.10)",
          display: "grid",
          gridTemplateColumns: "1fr auto",
          gap: 48,
          alignItems: "center",
          transform: "rotate(-0.3deg)",
          overflow: "visible",
        }}>
          {/* tape pieces */}
          <Tape tone="marigold" rotate={-7} width={108} top={-16} left={56} opacity={0.65} />
          <Tape tone="tide" rotate={8} width={84} top={-12} right={120} opacity={0.55} />

          {/* paper-grain overlay */}
          <div aria-hidden="true" style={{
            position: "absolute", inset: 0, borderRadius: 24, pointerEvents: "none",
            background: "radial-gradient(circle at 18% 22%, rgba(42,33,24,0.03) 0, transparent 38%), radial-gradient(circle at 82% 78%, rgba(232,128,31,0.04) 0, transparent 48%)",
          }} />

          {/* text */}
          <div style={{ position: "relative" }}>
            <Eyebrow color="var(--marigold-700)">a note from bárbara</Eyebrow>

            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(26px, 3.2vw, 40px)",
              color: "var(--ink)",
              lineHeight: 1.18,
              margin: "16px 0 24px",
              letterSpacing: "-0.01em",
              textWrap: "balance",
              maxWidth: 680,
            }}>
              Most of my products are made by me on procreate I hope my art can bring you some piece of happiness and you can relate to it in any type of way!
            </p>

            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <span style={{
                fontFamily: "var(--font-hand)",
                fontSize: 30,
                color: "var(--marigold-700)",
                lineHeight: 1,
              }}>
                — Bárbara
              </span>
            </div>
          </div>

          {/* stamp */}
          <div style={{ position: "relative", flexShrink: 0 }}>
            <HumanStamp size={148} color="var(--marigold-700)" rotate={-6} />
          </div>
        </div>
      </div>
    </section>
  );
}

window.MakersNote = MakersNote;
window.HumanStamp = HumanStamp;