// heroes.jsx — 3 hero/selector variations + shared chrome (StatusBadge, Logo)
// Exports to window: HeroClassic, HeroSplit, HeroChat, StatusBadge, Logo, COURSE_META, HERO_VARIANTS

const COURSE_META = {
  tax: {
    key: "tax",
    label: "確定申告コース",
    sub: "サラリーマン・個人事業主・副業のある方へ",
    color: TOKENS.primary,
    colorDeep: TOKENS.primaryDeep,
    tint: "rgba(45,177,255,0.10)",
    tintBorder: "rgba(45,177,255,0.30)",
    Icon: IconDocCheck,
    emoji: "📊",
  },
  guardian: {
    key: "guardian",
    label: "後見人コース",
    sub: "近居の高齢者を持つご家族へ",
    color: TOKENS.green,
    colorDeep: TOKENS.greenDeep,
    tint: "rgba(76,175,130,0.12)",
    tintBorder: "rgba(76,175,130,0.32)",
    Icon: IconCareHeart,
    emoji: "💛",
  },
};

const HERO_VARIANTS = [
  { id: "classic", label: "案A · 王道センター" },
  { id: "split", label: "案B · 左右スプリット" },
  { id: "chat", label: "案C · 会話風カード" },
];

// ---- shared chrome ------------------------------------------------------
function StatusBadge({ style }) {
  return (
    <span className="status-badge" style={style}>
      <IconCalendar size={15} color={TOKENS.navy} sw={1.9} />
      近日提供予定・先行お問い合わせ受付中
    </span>
  );
}

function Logo({ size = "md" }) {
  const big = size === "lg";
  return (
    <div className="logo">
      <span className="logo-mark" aria-hidden="true">
        <IconShield size={big ? 26 : 22} color="#fff" sw={1.9} />
      </span>
      <span className="logo-text">
        <strong>確定申告サポート</strong>
        <small>by インペリアル・メッセンジャー</small>
      </span>
    </div>
  );
}

// ---- shared selector card ----------------------------------------------
function CourseCard({ meta, onSelect, variant }) {
  const [hover, setHover] = useState(false);
  return (
    <button
      type="button"
      className={"course-card course-card--" + variant}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => onSelect(meta.key)}
      style={{
        "--cc-color": meta.color,
        "--cc-deep": meta.colorDeep,
        "--cc-tint": meta.tint,
        "--cc-border": meta.tintBorder,
      }}
    >
      <span className="cc-emoji" aria-hidden="true">{meta.emoji}</span>
      <span className="cc-icon" aria-hidden="true">
        <meta.Icon size={30} color={meta.color} sw={1.7} />
      </span>
      <span className="cc-body">
        <span className="cc-title">{meta.label}</span>
        <span className="cc-sub">{meta.sub}</span>
      </span>
      <span className="cc-go">
        このコースを見る
        <IconArrowRight size={18} color={meta.colorDeep} sw={2} />
      </span>
    </button>
  );
}

// ===== 案A · 王道センター =================================================
function HeroClassic({ onSelect }) {
  return (
    <div className="hero hero--classic">
      <StatusBadge />
      <h1 className="hero-title">
        お金のこと、<wbr />いっしょに。
      </h1>
      <p className="hero-lede">
        確定申告も、ご家族の財産管理も。<br />
        近所の税理士さんに話すような気軽さで、専門家がそっと寄り添います。
      </p>
      <div className="hero-question">
        <IconChat size={20} color={TOKENS.gray} sw={1.8} />
        あなたはどちらですか？
      </div>
      <div className="selector-grid">
        <CourseCard meta={COURSE_META.tax} onSelect={onSelect} variant="classic" />
        <CourseCard meta={COURSE_META.guardian} onSelect={onSelect} variant="classic" />
      </div>
    </div>
  );
}

// ===== 案B · 左右スプリット ===============================================
function SplitHalf({ meta, onSelect }) {
  return (
    <button
      type="button"
      className="split-half"
      onClick={() => onSelect(meta.key)}
      style={{ "--sh-color": meta.color, "--sh-deep": meta.colorDeep, "--sh-tint": meta.tint }}
    >
      <span className="sh-icon" aria-hidden="true">
        <meta.Icon size={46} color={meta.colorDeep} sw={1.55} />
      </span>
      <span className="sh-title">{meta.label}</span>
      <span className="sh-sub">{meta.sub}</span>
      <span className="sh-go">
        えらぶ <IconArrowRight size={18} color="#fff" sw={2.1} />
      </span>
    </button>
  );
}
function HeroSplit({ onSelect }) {
  return (
    <div className="hero hero--split">
      <div className="split-stage">
        <SplitHalf meta={COURSE_META.tax} onSelect={onSelect} />
        <SplitHalf meta={COURSE_META.guardian} onSelect={onSelect} />
        <div className="split-center">
          <StatusBadge />
          <h1 className="hero-title hero-title--split">お金のこと、いっしょに。</h1>
          <div className="hero-question hero-question--split">あなたはどちらですか？</div>
        </div>
      </div>
    </div>
  );
}

// ===== 案C · 会話風カード =================================================
function ChatReply({ meta, onSelect, delay }) {
  return (
    <button
      type="button"
      className="chat-reply"
      style={{ "--cr-color": meta.color, "--cr-deep": meta.colorDeep, "--cr-tint": meta.tint, "--cr-border": meta.tintBorder, animationDelay: delay }}
      onClick={() => onSelect(meta.key)}
    >
      <span className="cr-icon" aria-hidden="true">
        <meta.Icon size={26} color={meta.colorDeep} sw={1.7} />
      </span>
      <span className="cr-body">
        <span className="cr-title">{meta.label}</span>
        <span className="cr-sub">{meta.sub}</span>
      </span>
      <IconArrowRight size={18} color={meta.colorDeep} sw={2} />
    </button>
  );
}
function HeroChat({ onSelect }) {
  return (
    <div className="hero hero--chat">
      <StatusBadge />
      <div className="chat-window">
        <div className="chat-row">
          <span className="chat-avatar" aria-hidden="true">
            <IconChat size={22} color="#fff" sw={1.9} />
          </span>
          <div className="chat-bubbles">
            <div className="chat-bubble chat-bubble--1">こんにちは。<b>お金のこと、いっしょに。</b></div>
            <div className="chat-bubble chat-bubble--2">確定申告も、ご家族の財産管理も。まずはお気軽に。</div>
            <div className="chat-bubble chat-bubble--3"><b>あなたはどちらですか？</b></div>
          </div>
        </div>
        <div className="chat-replies">
          <ChatReply meta={COURSE_META.tax} onSelect={onSelect} delay="0.15s" />
          <ChatReply meta={COURSE_META.guardian} onSelect={onSelect} delay="0.28s" />
        </div>
      </div>
    </div>
  );
}

function HeroSwitch({ variant, onSelect }) {
  if (variant === "split") return <HeroSplit onSelect={onSelect} />;
  if (variant === "chat") return <HeroChat onSelect={onSelect} />;
  return <HeroClassic onSelect={onSelect} />;
}

Object.assign(window, {
  COURSE_META, HERO_VARIANTS,
  StatusBadge, Logo, CourseCard,
  HeroClassic, HeroSplit, HeroChat, HeroSwitch,
});