// Shared components for Tutoro

const FloatyShapes = () => (
  <>
    <svg className="floaty" style={{ top: 40, right: -20, animationDelay: "0s" }} width="60" height="60" viewBox="0 0 60 60">
      <circle cx="30" cy="30" r="26" fill="#FFD668" stroke="#1b1740" strokeWidth="3" />
      <path d="M30 16v28M16 30h28" stroke="#1b1740" strokeWidth="3" strokeLinecap="round" />
    </svg>
    <svg className="floaty" style={{ bottom: 30, left: -30, animationDelay: "1.2s" }} width="70" height="70" viewBox="0 0 70 70">
      <path d="M35 6l8 20 22 2-17 14 6 22-19-12-19 12 6-22-17-14 22-2z" fill="#FF8A8A" stroke="#1b1740" strokeWidth="3" strokeLinejoin="round" />
    </svg>
    <svg className="floaty" style={{ top: -20, left: "30%", animationDelay: "0.6s" }} width="50" height="50" viewBox="0 0 50 50">
      <rect x="6" y="6" width="38" height="38" rx="10" fill="#A7E8C4" stroke="#1b1740" strokeWidth="3" transform="rotate(15 25 25)" />
    </svg>
  </>
);

const Confetti = ({ count = 30 }) => {
  const colors = ["#FFD668", "#FF8A8A", "#7CC8FF", "#A7E8C4", "#B79CFF", "#FFB0DB"];
  return (
    <>
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="confetti"
          style={{
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * -50}px`,
            background: colors[i % colors.length],
            animationDelay: `${Math.random() * 2}s`,
            animationDuration: `${2 + Math.random() * 2}s`,
            transform: `rotate(${Math.random() * 360}deg)`,
          }}
        />
      ))}
    </>
  );
};

const Stars = ({ value, size = 14 }) => {
  return (
    <span style={{ display: "inline-flex", gap: 2, alignItems: "center" }}>
      {[1,2,3,4,5].map(n => (
        <svg key={n} width={size} height={size} viewBox="0 0 24 24" fill={n <= Math.round(value) ? "#F6B93B" : "#E5E1D5"}>
          <path d="m12 2 2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.8 5.8 21.2l1.6-7L2 9.3l7.1-.7Z" />
        </svg>
      ))}
      <span style={{ fontWeight: 800, fontFamily: "Baloo 2", marginLeft: 4 }}>{value.toFixed(1)}</span>
    </span>
  );
};

const SubjectChip = ({ subject, active, onClick }) => (
  <button
    className={`pill ${active ? subject.color : "ghost"}`}
    style={{ cursor: "pointer", fontSize: 13, padding: "8px 14px" }}
    onClick={onClick}
  >
    <span style={{ fontSize: 16 }}>{subject.icon}</span>
    {subject.name}
  </button>
);

const TutorCard = ({ tutor, onClick, compact = false }) => (
  <div className="tutor-card" onClick={onClick}>
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
      <div className="avatar" style={{ background: tutor.avatarBg }}>{tutor.emoji}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 2 }}>
          <h3 style={{ fontSize: 19 }}>{tutor.name}</h3>
          <span className="pill" style={{ background: "var(--mint)", padding: "2px 8px", fontSize: 11 }}>
            ✓ ยืนยัน
          </span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink-soft)" }}>
          {tutor.subjectIcon} {tutor.subject} · {tutor.grades}
        </div>
        <div style={{ marginTop: 8 }}>
          <Stars value={tutor.rating} />
          <span style={{ fontSize: 12, color: "var(--muted)", marginLeft: 6 }}>({tutor.reviews})</span>
        </div>
      </div>
    </div>
    {!compact && (
      <p style={{ fontSize: 13, color: "var(--ink-soft)", margin: "12px 0 14px", lineHeight: 1.5 }}>
        {tutor.bio}
      </p>
    )}
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }}>
      {tutor.badges.map((b, i) => (
        <span key={i} className="pill ghost" style={{ fontSize: 11, padding: "3px 9px" }}>{b}</span>
      ))}
    </div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 12, borderTop: "2px dashed var(--border)" }}>
      <div>
        <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>
          ฿{tutor.rate}<span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>/ชม.</span>
        </div>
      </div>
      <button className="btn primary sm">
        จองเลย <Icon name="arrow" size={14} color="white" />
      </button>
    </div>
  </div>
);

const StatTile = ({ icon, value, label, color = "yellow" }) => (
  <div className="stat" style={{ display: "flex", alignItems: "center", gap: 12 }}>
    <div style={{
      width: 42, height: 42, borderRadius: 14,
      background: `var(--${color})`,
      border: "2px solid var(--ink)",
      display: "grid", placeItems: "center",
      fontSize: 22, flexShrink: 0
    }}>{icon}</div>
    <div>
      <div className="v">{value}</div>
      <div className="l">{label}</div>
    </div>
  </div>
);

const ProgressBar = ({ value, max, color = "coral" }) => {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div className="bar">
      <span style={{
        width: `${pct}%`,
        background: color === "mint"
          ? "linear-gradient(90deg, #A7E8C4, #5DC892)"
          : color === "sky"
          ? "linear-gradient(90deg, #7CC8FF, #3FA4F2)"
          : "linear-gradient(90deg, #FF8A8A, #FFD668)"
      }} />
    </div>
  );
};

const SectionHeader = ({ title, action, sub }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 14 }}>
    <div>
      <h2 style={{ fontSize: 22 }}>{title}</h2>
      {sub && <div style={{ fontSize: 13, color: "var(--muted)", fontWeight: 600, marginTop: 2 }}>{sub}</div>}
    </div>
    {action}
  </div>
);

Object.assign(window, {
  FloatyShapes, Confetti, Stars, SubjectChip, TutorCard, StatTile, ProgressBar, SectionHeader
});