// ExampleShowcase — the section below the hero. Two canonical offers
// (Speed-to-Lead, Reputation Management). Pick one; the choice drives this
// card AND every pillar's worked example below it.

function ExampleShowcase({ selected, onSelect }) {
  const examples = window.OFFERIQ_EXAMPLES;
  const ex = examples.find(e => e.id === selected) || examples[0];

  return (
    <section className="crm-section">
      <div className="container-narrow">
        <div className="numchip" style={{marginBottom:16}}>
          <span className="dot" style={{background:'#0e1830'}}><i className="fas fa-flask" style={{fontSize:10}}></i></span>
          <span>Two canonical offers</span>
        </div>
        <h2 className="page-h2" style={{marginBottom:10}}>Pick the offer you'll build against.</h2>
        <p className="page-lead" style={{marginBottom:22}}>
          OfferIQ ships with two worked examples. Choose one and every pillar below retunes to it, so you see exactly what each pillar looks like for the offer you're building. Switch anytime.
        </p>

        {/* Selector */}
        <div className="ex-toggle" role="tablist" aria-label="Choose a worked example">
          {examples.map(e => {
            const on = e.id === selected;
            return (
              <button
                key={e.id}
                role="tab"
                aria-selected={on}
                className={`ex-toggle-btn ${on ? 'active' : ''}`}
                style={{['--ex-accent']: e.accent}}
                onClick={() => onSelect(e.id)}
              >
                <span className="ex-toggle-icon"><i className={`fas ${e.icon}`}></i></span>
                <span className="ex-toggle-text">
                  <span className="ex-toggle-name">{e.name}</span>
                  <span className="ex-toggle-sub">{on ? 'Driving the pillars below' : 'Tap to switch'}</span>
                </span>
                {on && <span className="ex-toggle-check"><i className="fas fa-check"></i></span>}
              </button>
            );
          })}
        </div>

        {/* Selected offer card */}
        <article className="crm-card">
          <div className="crm-card-head">
            <div className="crm-logo"><i className={`fas ${ex.icon}`}></i></div>
            <div style={{flex:1,minWidth:0}}>
              <div className="crm-name">{ex.name}</div>
              <div className="crm-tag">{ex.tag}</div>
            </div>
          </div>

          <div className="crm-row">
            <div className="crm-problem">
              <div className="crm-eye"><i className="fas fa-crosshairs"></i> The one problem it solves</div>
              <div className="crm-problem-q">{ex.oneProblem}</div>
              <div className="crm-problem-sub">{ex.oneProblemSub}</div>
            </div>

            <div className="crm-proof">
              <div className="crm-eye"><i className="fas fa-circle-play"></i> What we show on the launch call</div>
              <LaunchProof ex={ex} />
            </div>
          </div>

          <div className="crm-foot">
            <i className="fas fa-arrow-down"></i>
            <span>Every pillar below is tuned to {ex.name}.</span>
          </div>
        </article>
      </div>
    </section>
  );
}

function LaunchProof({ ex }) {
  return (
    <div className="lc-mockup">
      <div className="lc-head">
        <span className="lc-rec"></span>
        <span>Launch call · live demo</span>
      </div>
      <div className="lc-title">{ex.proofTitle}</div>
      <ul className="lc-list">
        {ex.proofLines.map((line, i) => (
          <li key={i}><i className="fas fa-check"></i><span>{line}</span></li>
        ))}
      </ul>
      <div className="lc-close"><i className="fas fa-flag-checkered"></i><span>{ex.proofClose}</span></div>
    </div>
  );
}

window.ExampleShowcase = ExampleShowcase;