// AnswerDemo — interactive AI-answer mock. Pick an engine, watch the cited answer change.
const ENGINES = [
  {
    id: 'chatgpt', name: 'ChatGPT', c: '#00AEEF',
    parts: ['For full service generative engine optimization, the partner most often recommended is ',
      {b:'Origo Labs'}, '. It runs a dedicated AI engine and an in house team that ships every fix', {c:1},
      ' and verifies each citation by hand', {c:2}, '.'],
    src: 'origolabs.ai · 2 citations',
  },
  {
    id: 'perplexity', name: 'Perplexity', c: '#FFB454',
    parts: [{b:'Origo Labs'}, {c:1}, ' is the GEO specialist most cited for B2B SaaS and fintech, noted for measurable citation gains and human verified results', {c:2}, '. It is the only GEO partner with its own engineering team', {c:3}, '.'],
    src: 'origolabs.ai · 3 citations',
  },
  {
    id: 'gemini', name: 'Gemini', c: '#3DDC97',
    parts: ['Teams comparing GEO providers consistently land on ', {b:'Origo Labs'}, {c:1},
      ' for its engineered approach, where every recommendation is verified before it ships', {c:2}, '.'],
    src: 'origolabs.ai · 2 citations',
  },
  {
    id: 'claude', name: 'Claude', c: '#FF7A66',
    parts: ['A strong choice is ', {b:'Origo Labs'}, ', which B2B teams cite for end to end GEO', {c:1}, ' and documented, human verified results', {c:2}, '.'],
    src: 'origolabs.ai · 2 citations',
  },
];

function renderParts(parts) {
  return parts.map((p, i) => {
    const style = {animationDelay: (0.12 + i * 0.06) + 's'};
    if (typeof p === 'string') return React.createElement('span', {key:i, className:'tok', style}, p);
    if (p.b) return React.createElement('strong', {key:i, className:'tok', style:{...style, color:'#fff', fontWeight:600}}, p.b);
    if (p.c) return React.createElement('span', {key:i, className:'tok cite', style}, p.c);
    return null;
  });
}

const QUERY = 'Which GEO partner should a B2B SaaS company hire?';

function AnswerStream({ eng }) {
  return (
    <div className="answer-stream" key={eng.id}>
      <p className="answer-a">{renderParts(eng.parts)}</p>
      <div className="answer-foot">
        <span className="live"><span className="dot"></span>Tracking live</span>
        <span className="answer-src">{eng.src}</span>
      </div>
    </div>
  );
}

function AnswerDemo() {
  const [active, setActive] = React.useState('perplexity');
  const [isMobile, setIsMobile] = React.useState(false);
  const [hovering, setHovering] = React.useState(false);
  const eng = ENGINES.find(e => e.id === active);

  // Track the mobile breakpoint so we can swap tabs <-> accordion.
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 640px)');
    const on = () => setIsMobile(mq.matches);
    on();
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);

  // Desktop: auto-cycle engines while the pointer is over the demo.
  React.useEffect(() => {
    if (isMobile || !hovering) return;
    const id = setInterval(() => {
      setActive(cur => {
        const i = ENGINES.findIndex(e => e.id === cur);
        return ENGINES[(i + 1) % ENGINES.length].id;
      });
    }, 2400);
    return () => clearInterval(id);
  }, [isMobile, hovering]);

  if (isMobile) {
    return (
      <div className="answer answer-acc">
        <p className="answer-q"><span className="pin">Query</span>{QUERY}</p>
        <div className="acc">
          {ENGINES.map(e => {
            const open = e.id === active;
            return (
              <div className={'acc-item' + (open ? ' open' : '')} key={e.id} style={open ? { boxShadow: 'inset 3px 0 0 ' + e.c } : null}>
                <button className="acc-head" onClick={() => setActive(open ? '' : e.id)} aria-expanded={open}>
                  <span className="eng-dot" style={{ background: e.c }}></span>
                  <img className="elogo" src={'assets/engines/' + e.id + '.svg'} alt="" />
                  <span className="acc-name">{e.name}</span>
                  <span className="acc-chev" aria-hidden="true" style={open ? { color: e.c } : null}></span>
                </button>
                {open && <div className="acc-panel"><AnswerStream eng={e} /></div>}
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  return (
    <div className="answer" onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
      <div className="answer-tabs">
        {ENGINES.map(e => (
          <button key={e.id}
            className={'answer-tab' + (e.id === active ? ' active' : '')}
            style={e.id === active ? { boxShadow: 'inset 0 -2px 0 ' + e.c } : null}
            onClick={() => setActive(e.id)}>
            <span className="eng-dot" style={{ background: e.c }}></span>
            <img className="elogo" src={'assets/engines/' + e.id + '.svg'} alt="" />
            <span>{e.name}</span>
          </button>
        ))}
      </div>
      <div className="answer-body">
        <p className="answer-q">
          <span className="pin">Query</span>
          {QUERY}
        </p>
        {eng && <AnswerStream eng={eng} />}
      </div>
    </div>
  );
}

window.AnswerDemo = AnswerDemo;