/* EOMA landing v3 · Hero answer card (§2)
   The single Perplexity-style citation card with "Your brand isn't here" overlay.
   Same primitive used by Mirror Switcher (§3) to swap between 6 industry verticals.
*/

function HeroAnswerCard({ fixture, className = "" }) {
  if (!fixture) return null;
  return (
    <article className={`answer-card ${className}`} aria-label={`${fixture.provider} answer card — ${fixture.chip}`}>
      <header className="answer-head">
        <span className="answer-provider">
          <span className="answer-provider-dot">{providerInitial(fixture.provider)}</span>
          <span>{fixture.provider}</span>
        </span>
        <span className="answer-date">{fixture.date}</span>
      </header>

      <div className="answer-q">
        <span className="q-label">Q</span>
        {fixture.question}
      </div>

      <div className="answer-body">
        {fixture.answer.map((node, i) => {
          if (typeof node === "string") return <p key={i}>{node}</p>;
          return (
            <div key={i} className="bullet">
              <span>
                <span className="bullet-name">{node.bullet}</span>
                <span className="source-chip">{node.source}</span>
                <span>{node.after}</span>
              </span>
            </div>
          );
        })}
      </div>

      <footer className="answer-sources">
        <span style={{ color: "var(--ink-muted)", marginRight: 4 }}>Sources:</span>
        {fixture.sources.map((s, i) => (
          <span key={i} className="src">
            <span className="src-num">{i + 1}</span>
            <span className="src-name">{s}</span>
          </span>
        ))}
      </footer>

      <div className="answer-notice">{fixture.notice}</div>
    </article>
  );
}

function providerInitial(name) {
  const map = {
    "Perplexity": "P", "ChatGPT": "C", "Claude": "C", "Gemini": "G", "Google AI": "G",
  };
  return map[name] || name[0];
}

Object.assign(window, { HeroAnswerCard });