/* ─────────────────────────────────────────────────────────
   ILLUSTRATIONS — tree branches, leaves, fruit, circuit nodes
   Rustic SVG with a techno-twist (precise nodes + organic curves)
   ───────────────────────────────────────────────────────── */

function Leaf({ size = 28, rotate = 0, color = "var(--moss)", veins = true, style }) {
  return (
    <svg width={size} height={size * 1.4} viewBox="0 0 28 40" style={{ transform: `rotate(${rotate}deg)`, transformOrigin: "center", ...style }} aria-hidden>
      <path d="M14 2 C 22 8, 26 18, 14 38 C 2 18, 6 8, 14 2 Z" fill={color} />
      {veins && (
        <>
          <path d="M14 4 L14 36" stroke="rgba(0,0,0,0.18)" strokeWidth="0.6" fill="none"/>
          <path d="M14 12 L20 16 M14 18 L21 22 M14 24 L19 28 M14 12 L8 16 M14 18 L7 22 M14 24 L9 28" stroke="rgba(0,0,0,0.14)" strokeWidth="0.5" fill="none"/>
        </>
      )}
    </svg>
  );
}

function Fruit({ size = 36, color = "var(--sun)", glow = true, style }) {
  return (
    <div style={{ position: "relative", display: "inline-flex", alignItems: "center", ...style }}>
      <svg width={size} height={size * 1.2} viewBox="0 0 36 44" aria-hidden style={{ animation: glow ? "pulse-fruit 4s ease-in-out infinite" : "none" }}>
        <path d="M18 4 Q 14 8 16 12" stroke="var(--bark)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
        <path d="M18 6 Q 24 4 26 8 Q 22 10 18 8 Z" fill="var(--moss)"/>
        <circle cx="18" cy="26" r="14" fill={color}/>
        <ellipse cx="22" cy="30" rx="6" ry="9" fill="rgba(0,0,0,0.12)"/>
        <ellipse cx="14" cy="20" rx="3" ry="4" fill="rgba(255,255,255,0.4)"/>
        <circle cx="18" cy="26" r="14" fill="none" stroke="var(--bark)" strokeWidth="0.6" strokeDasharray="1 3" opacity="0.4"/>
      </svg>
    </div>
  );
}

function Node({ size = 12, filled = true, color = "var(--bark)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" aria-hidden>
      <circle cx="6" cy="6" r="5" fill={filled ? color : "var(--cream)"} stroke={color} strokeWidth="1"/>
      {filled && <circle cx="6" cy="6" r="2" fill="var(--cream)"/>}
    </svg>
  );
}

function Wordmark({ size = 22, color = "var(--ink)", showFruit = true }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      {showFruit && (
        <svg width={size * 1.1} height={size * 1.1} viewBox="0 0 28 28" aria-hidden>
          <path d="M14 3 Q 11 6 13 9" stroke="var(--bark)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
          <path d="M14 4 Q 19 3 21 6 Q 17 8 14 6 Z" fill="var(--moss)"/>
          <circle cx="14" cy="17" r="10" fill="var(--sun)"/>
          <ellipse cx="11" cy="13" r="2" ry="2.5" fill="rgba(255,255,255,0.45)"/>
          <circle cx="14" cy="17" r="10" fill="none" stroke="var(--bark)" strokeWidth="0.5" strokeDasharray="1 2.5" opacity="0.5"/>
        </svg>
      )}
      <span style={{
        fontFamily: "'Newsreader', Georgia, serif",
        fontSize: size * 0.95,
        letterSpacing: "-0.02em",
        color, fontWeight: 400,
      }}>Service <span style={{ fontStyle: "italic" }}>Orchard</span></span>
    </div>
  );
}

function HeroTree({ onFruitClick }) {
  const branches = [
    { x: 180, y: 140, label: "Flyers" },
    { x: 280, y: 90,  label: "Brochures" },
    { x: 400, y: 70,  label: "Websites" },
    { x: 520, y: 90,  label: "Social posts" },
    { x: 620, y: 140, label: "Menus" },
    { x: 140, y: 240, label: "Postcards" },
    { x: 660, y: 240, label: "Letters" },
    { x: 240, y: 320, label: "Invitations" },
    { x: 560, y: 320, label: "Blogs" },
    { x: 400, y: 360, label: "Research" },
  ];
  const trunkBase = { x: 400, y: 620 };

  return (
    <svg viewBox="0 0 800 700" width="100%" height="100%" style={{ display: "block" }} aria-hidden>
      <defs>
        <radialGradient id="canopy" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="rgba(107,138,79,0.18)"/>
          <stop offset="60%" stopColor="rgba(45,74,43,0.08)"/>
          <stop offset="100%" stopColor="rgba(45,74,43,0)"/>
        </radialGradient>
      </defs>

      <ellipse cx="400" cy="220" rx="380" ry="280" fill="url(#canopy)"/>

      <line x1="40" y1="660" x2="760" y2="660" stroke="var(--bark)" strokeWidth="1" strokeDasharray="2 6" opacity="0.5"/>
      <line x1="40" y1="668" x2="760" y2="668" stroke="var(--bark)" strokeWidth="0.5" opacity="0.3"/>

      {[100, 220, 340, 460, 580, 700].map((x, i) => (
        <g key={i}>
          <circle cx={x} cy="660" r="3" fill="var(--bark)"/>
          <line x1={x} y1="660" x2={x} y2="680" stroke="var(--bark)" strokeWidth="0.6" opacity="0.4"/>
        </g>
      ))}

      <g>
        <path d={`M ${trunkBase.x - 22} ${trunkBase.y}
                  Q ${trunkBase.x - 24} ${trunkBase.y - 100}, ${trunkBase.x - 18} ${trunkBase.y - 200}
                  Q ${trunkBase.x - 14} ${trunkBase.y - 280}, ${trunkBase.x - 8} ${trunkBase.y - 380}
                  L ${trunkBase.x + 8} ${trunkBase.y - 380}
                  Q ${trunkBase.x + 14} ${trunkBase.y - 280}, ${trunkBase.x + 18} ${trunkBase.y - 200}
                  Q ${trunkBase.x + 24} ${trunkBase.y - 100}, ${trunkBase.x + 22} ${trunkBase.y}
                  Z`}
              fill="var(--bark)"/>
        {[0, 1, 2].map(i => (
          <path key={i} d={`M ${trunkBase.x - 14 + i*8} ${trunkBase.y - 20}
                            Q ${trunkBase.x - 12 + i*8} ${trunkBase.y - 200},
                              ${trunkBase.x - 6 + i*8} ${trunkBase.y - 360}`}
                stroke="var(--bark-3)" strokeWidth="0.6" fill="none" opacity="0.5"/>
        ))}
        <ellipse cx={trunkBase.x + 6} cy={trunkBase.y - 180} rx="6" ry="9" fill="var(--bark-2)"/>
        <ellipse cx={trunkBase.x + 6} cy={trunkBase.y - 180} rx="3" ry="5" fill="var(--bark)"/>
      </g>

      {branches.map((b, i) => {
        const sx = trunkBase.x + (b.x < trunkBase.x ? -8 : 8);
        const sy = trunkBase.y - 360;
        const cx1 = (sx + b.x) / 2 + (b.x < sx ? -30 : 30);
        const cy1 = sy + (b.y - sy) * 0.3;
        const cx2 = b.x + (b.x < trunkBase.x ? 20 : -20);
        const cy2 = b.y + 40;
        return (
          <g key={i}>
            <path d={`M ${sx} ${sy} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${b.x} ${b.y}`}
                  stroke="var(--bark)" strokeWidth="3" fill="none" strokeLinecap="round"/>
            <path d={`M ${sx} ${sy} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${b.x} ${b.y}`}
                  stroke="var(--bark-3)" strokeWidth="1.2" fill="none" strokeLinecap="round" opacity="0.6"
                  transform="translate(0.5, 1)"/>
            <path d={`M ${cx2} ${cy2} l ${b.x < trunkBase.x ? -14 : 14} ${-8}`}
                  stroke="var(--bark)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            <ellipse cx={cx2 + (b.x < trunkBase.x ? -16 : 16)} cy={cy2 - 10}
                     rx="5" ry="3"
                     fill="var(--moss)"
                     transform={`rotate(${b.x < trunkBase.x ? -30 : 30} ${cx2 + (b.x < trunkBase.x ? -16 : 16)} ${cy2 - 10})`}
                     style={{ transformOrigin: "center", animation: `sway ${3 + i*0.3}s ease-in-out infinite` }}/>
          </g>
        );
      })}

      {Array.from({ length: 24 }).map((_, i) => {
        const seed = i * 137;
        const x = 100 + ((seed * 7) % 600);
        const y = 60 + ((seed * 13) % 360);
        const rot = (seed % 60) - 30;
        const sz = 8 + (seed % 6);
        const colors = ["var(--moss)", "var(--moss-2)", "var(--leaf)"];
        const col = colors[i % 3];
        return (
          <ellipse key={i} cx={x} cy={y} rx={sz} ry={sz * 0.6}
                   fill={col}
                   transform={`rotate(${rot} ${x} ${y})`}
                   style={{ animation: `sway ${4 + (i % 4)}s ease-in-out infinite`, transformOrigin: `${x}px ${y}px`, animationDelay: `${i * 0.1}s` }}/>
        );
      })}

      {branches.map((b, i) => (
        <g key={`f-${i}`} style={{ cursor: onFruitClick ? "pointer" : "default", animation: `drift ${3 + (i % 3)}s ease-in-out infinite`, transformOrigin: `${b.x}px ${b.y}px`, animationDelay: `${i * 0.2}s` }}
           onClick={() => onFruitClick && onFruitClick(b.label)}>
          <circle cx={b.x} cy={b.y} r="14" fill="var(--sun)" opacity="0.18"/>
          <circle cx={b.x} cy={b.y} r="10" fill="var(--sun)"/>
          <path d={`M ${b.x} ${b.y - 10} q -2 -3, 0 -6`} stroke="var(--bark)" strokeWidth="1.2" fill="none"/>
          <ellipse cx={b.x + 3} cy={b.y - 14} rx="3" ry="1.6" fill="var(--moss)" transform={`rotate(30 ${b.x + 3} ${b.y - 14})`}/>
          <ellipse cx={b.x - 3} cy={b.y - 3} rx="2" ry="2.5" fill="rgba(255,255,255,0.45)"/>
          <circle cx={b.x} cy={b.y} r="10" fill="none" stroke="var(--bark)" strokeWidth="0.6" strokeDasharray="1.2 2.5" opacity="0.55"/>
          <text x={b.x} y={b.y + 28}
                textAnchor="middle"
                style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", fill: "var(--bark)" }}>
            {b.label}
          </text>
        </g>
      ))}

      <g>
        <path d={`M ${trunkBase.x - 12} ${trunkBase.y} q -30 30, -80 40 l -20 -2`}
              stroke="var(--bark)" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d={`M ${trunkBase.x + 12} ${trunkBase.y} q 30 30, 80 40 l 20 -2`}
              stroke="var(--bark)" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d={`M ${trunkBase.x} ${trunkBase.y} q 0 25, -10 40`}
              stroke="var(--bark)" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <circle cx={trunkBase.x - 110} cy={trunkBase.y + 38} r="3" fill="var(--bark)"/>
        <circle cx={trunkBase.x + 110} cy={trunkBase.y + 38} r="3" fill="var(--bark)"/>
        <circle cx={trunkBase.x - 10} cy={trunkBase.y + 40} r="3" fill="var(--bark)"/>
      </g>
    </svg>
  );
}

function BranchDivider({ withFruit = true }) {
  return (
    <div style={{ position: "relative", margin: "0 auto", maxWidth: 1280, padding: "0 40px" }}>
      <svg viewBox="0 0 1200 60" width="100%" height="60" style={{ display: "block" }}>
        <path d="M 0 30 Q 200 10, 400 32 Q 600 50, 800 28 Q 1000 8, 1200 30"
              stroke="var(--bark)" strokeWidth="1.2" fill="none"/>
        <path d="M 0 30 Q 200 10, 400 32 Q 600 50, 800 28 Q 1000 8, 1200 30"
              stroke="var(--bark-3)" strokeWidth="0.6" fill="none" transform="translate(1, 1)" opacity="0.6"/>
        <ellipse cx="220" cy="20" rx="6" ry="3" fill="var(--moss)" transform="rotate(-25 220 20)"/>
        <ellipse cx="420" cy="34" rx="6" ry="3" fill="var(--moss-2)" transform="rotate(20 420 34)"/>
        <ellipse cx="780" cy="28" rx="6" ry="3" fill="var(--moss)" transform="rotate(-15 780 28)"/>
        <ellipse cx="980" cy="14" rx="6" ry="3" fill="var(--leaf)" transform="rotate(30 980 14)"/>
        {withFruit && (
          <g>
            <circle cx="600" cy="38" r="7" fill="var(--sun)"/>
            <circle cx="600" cy="38" r="7" fill="none" stroke="var(--bark)" strokeWidth="0.5" strokeDasharray="1 2"/>
            <ellipse cx="598" cy="36" rx="1.5" ry="2" fill="rgba(255,255,255,0.4)"/>
          </g>
        )}
        <circle cx="100" cy="28" r="2" fill="var(--bark)"/>
        <circle cx="1100" cy="26" r="2" fill="var(--bark)"/>
      </svg>
    </div>
  );
}

function BranchSprig({ size = 60, side = "left" }) {
  return (
    <svg width={size} height={size * 0.6} viewBox="0 0 60 36" aria-hidden style={{ transform: side === "right" ? "scaleX(-1)" : "none" }}>
      <path d="M 4 18 Q 20 14, 40 16 Q 50 17, 56 12" stroke="var(--bark)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
      <ellipse cx="22" cy="11" rx="5" ry="2.5" fill="var(--moss)" transform="rotate(-30 22 11)"/>
      <ellipse cx="34" cy="22" rx="5" ry="2.5" fill="var(--moss-2)" transform="rotate(20 34 22)"/>
      <circle cx="50" cy="14" r="4" fill="var(--sun)"/>
      <circle cx="50" cy="14" r="4" fill="none" stroke="var(--bark)" strokeWidth="0.4" strokeDasharray="1 1.5"/>
    </svg>
  );
}

Object.assign(window, { Leaf, Fruit, Node, Wordmark, HeroTree, BranchDivider, BranchSprig });