// Small shared components: icons, button, section header, chat bubble decor.
const { useEffect, useRef, useState } = React;

// ── Inline SVG icons (Lucide-style strokes, no external dep) ──
const Icon = ({ name, size = 20, stroke = 2 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "maximize":
      return (
        <svg {...common}>
          <path d="M8 3H5a2 2 0 0 0-2 2v3" />
          <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
          <path d="M3 16v3a2 2 0 0 0 2 2h3" />
          <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
        </svg>
      );
    case "link":
      return (
        <svg {...common}>
          <path d="M9 17H7a5 5 0 1 1 0-10h2" />
          <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
          <line x1="8" y1="12" x2="16" y2="12" />
        </svg>
      );
    case "user-check":
      return (
        <svg {...common}>
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <polyline points="17 11 19 13 23 9" />
        </svg>
      );
    case "user-plus":
      return (
        <svg {...common}>
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <line x1="19" y1="8" x2="19" y2="14" />
          <line x1="22" y1="11" x2="16" y2="11" />
        </svg>
      );
    case "users":
      return (
        <svg {...common}>
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
      );
    case "check-square":
      return (
        <svg {...common}>
          <polyline points="9 11 12 14 22 4" />
          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
        </svg>
      );
    case "bot":
      return (
        <svg {...common}>
          <rect x="3" y="8" width="18" height="12" rx="3" />
          <path d="M12 8V4" />
          <circle cx="12" cy="3" r="1" />
          <circle cx="9" cy="14" r="1" />
          <circle cx="15" cy="14" r="1" />
        </svg>
      );
    case "credit-card":
      return (
        <svg {...common}>
          <rect x="2" y="5" width="20" height="14" rx="2" />
          <line x1="2" y1="10" x2="22" y2="10" />
          <line x1="6" y1="15" x2="10" y2="15" />
        </svg>
      );
    case "arrow-right":
      return (
        <svg {...common}>
          <line x1="5" y1="12" x2="19" y2="12" />
          <polyline points="12 5 19 12 12 19" />
        </svg>
      );
    case "check":
      return (
        <svg {...common}>
          <polyline points="20 6 9 17 4 12" />
        </svg>
      );
    case "x":
      return (
        <svg {...common}>
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      );
    case "sparkles":
      return (
        <svg {...common}>
          <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2" />
        </svg>
      );
    case "play":
      return (
        <svg {...common}>
          <polygon points="6 4 20 12 6 20 6 4" />
        </svg>
      );
    default: return null;
  }
};

// Eyebrow + Title block
const SectionHead = ({ eyebrow, title, sub, align = "left" }) => (
  <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : "none", margin: align === "center" ? "0 auto" : 0 }}>
    {eyebrow && <div className="eyebrow">{eyebrow}</div>}
    <h2 className="section__title" dangerouslySetInnerHTML={{ __html: title }} />
    {sub && <p className="section__sub" style={align === "center" ? { margin: "0 auto" } : null}>{sub}</p>}
  </div>
);

// Hook: section dwell tracker via IntersectionObserver
function useSectionDwell(ref, sectionKey) {
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    let enteredAt = null;

    const flush = (reason) => {
      if (enteredAt != null) {
        const duration_ms = Date.now() - enteredAt;
        track("Section Dwell", { section: sectionKey, duration_ms, ended_by: reason });
        enteredAt = null;
      }
    };

    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && e.intersectionRatio >= 0.5) {
            if (enteredAt == null) {
              enteredAt = Date.now();
              track("Section Viewed", { section: sectionKey });
            }
          } else {
            flush("scroll_away");
          }
        });
      },
      { threshold: [0, 0.5, 1] }
    );
    obs.observe(el);

    const onFlush = (e) => flush(e.detail.reason || "page_hide");
    window.addEventListener("__flushDwell", onFlush);

    return () => {
      obs.disconnect();
      window.removeEventListener("__flushDwell", onFlush);
      flush("unmount");
    };
  }, [sectionKey]);
}

// Persona switcher bar (dev/demo)
const PersonaBar = ({ active, onChange, personaId }) => (
  <div className="persona-bar">
    <div className="persona-bar__inner">
      <span className="persona-bar__label">데모 · 페르소나 전환</span>
      <div className="persona-bar__tabs">
        {Object.entries(personas).map(([k, p]) => (
          <button
            key={k}
            className={"persona-bar__tab" + (active === k ? " persona-bar__tab--active" : "")}
            onClick={() => onChange(k)}
          >
            {p.label}
          </button>
        ))}
      </div>
      <span className="persona-bar__id">{personaId}</span>
    </div>
  </div>
);

Object.assign(window, { Icon, SectionHead, useSectionDwell, PersonaBar });