// sections-b.jsx — Timeline + Article + Implications

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

/* =================================================================
   TIMELINE
================================================================= */
function TimelineSection({ onHighlight }){
  const eras = window.ERAS;
  const [idx, setIdx] = useStateB(2);

  const pick = (i) => {
    setIdx(i);
    onHighlight && onHighlight(eras[i].para);
  };

  const era = eras[idx];
  const fillPct = (idx / (eras.length - 1)) * 100;

  return (
    <div className="timeline-wrap">
      <div className="timeline-track">
        <div className="tl-rail">
          <div className="tl-fill" style={{width: fillPct + '%'}}></div>
          {eras.map((e, i) => {
            const left = (i/(eras.length-1))*100;
            return (
              <React.Fragment key={e.yr}>
                <div
                  className={"tl-node" + (e.key ? " diamond" : "") + (idx===i ? " is-active" : "")}
                  style={{left: left + '%'}}
                  onClick={()=>pick(i)}
                  role="button"
                  aria-label={e.name}
                />
                <div className="tl-label" style={{left: left + '%'}}>{e.yr}</div>
              </React.Fragment>
            );
          })}
        </div>
        <input
          type="range" min="0" max={eras.length-1} value={idx}
          onChange={(e)=>pick(parseInt(e.target.value))}
          style={{width:'100%',marginTop:56,accentColor:'var(--accent-gold)',opacity:0.7}}
        />
      </div>

      <div className="era-panel">
        <div className="era-range">{era.range}</div>
        <h3 className="era-name">{era.name}</h3>
        <div className="era-chips">
          {era.status.map(s => <span key={s} className="chip">{s}</span>)}
        </div>
        <p className="era-desc">{era.evt}</p>
        <div className="mood-lbl">National mood</div>
        <div className="mood-bar">
          <div className="mood-bar-fill" style={{width: (era.mood*100)+'%'}}></div>
        </div>
        <div className="mood-ticks"><span>Closed</span><span>Open</span></div>
        {era.para!==null && (
          <p style={{fontSize:11,letterSpacing:'0.14em',marginTop:20,color:'var(--gold-light)',opacity:0.75,textTransform:'uppercase'}}>
            ↓ Relevant passage highlighted below
          </p>
        )}
      </div>
    </div>
  );
}

/* =================================================================
   ARTICLE
================================================================= */
function ArticleSection({ highlight }){
  const paras = window.PARAS;
  return (
    <>
      <div className="prose">
        {paras.map((text, i) => (
          <React.Fragment key={i}>
            <p
              id={"para-" + i}
              className={
                (i===0 ? "dropcap " : "") +
                (highlight===i ? "is-highlight" : "")
              }>
              {text}
            </p>

            {i===2 && (
              <figure className="figure">
                <img src="assets/persepolis.jpg" alt="Darius palace ruins at Persepolis" />
                <figcaption className="figure-caption">
                  6th-century BC Darius palace ruins at Persepolis, Fars province — once the ceremonial capital of the Achaemenid empire, standing for 2,500 years since its destruction by Alexander.
                </figcaption>
              </figure>
            )}

            {i===4 && (
              <blockquote className="pullquote">
                <p>"Oil revenues funded rapid development. Five-star hotels opened up, there was a vibrant arts scene and a cosmopolitan nightlife."</p>
                <cite>— on Iran's golden age, 1965 – 1977</cite>
              </blockquote>
            )}

            {i===5 && (
              <div className="figure" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
                <figure>
                  <img src="assets/carter-shah.png" alt="The Carters and the Shah of Iran at a state dinner" />
                  <figcaption className="figure-caption">
                    The Carters and the royal couple of Iran at a White House state dinner, 1977.
                  </figcaption>
                </figure>
                <figure>
                  <img src="assets/safavid-parade-2.png" alt="Safavid-costume parade at Persepolis, 1971" />
                  <figcaption className="figure-caption">
                    Soldiers in Safavid costume parade at Persepolis during the 2,500-year anniversary of the Iranian empire, October 1971.
                  </figcaption>
                </figure>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      <aside className="sidebar">
        <div className="side-card">
          <h4>Key timeline</h4>
          <div className="tl-list">
            {[
              ['1920s','Reza Shah begins modernisation'],
              ['1953','Western-backed coup restores Shah'],
              ['1960s–70s','Golden age of development'],
              ['1977','Carter\u2019s New Year visit to Tehran'],
              ['1979','Islamic Revolution'],
              ['2026','Reform attempts continue to be crushed']
            ].map(([y,t]) => (
              <div key={y} className="tl-row">
                <div className="tl-yr">{y}</div>
                <div className="tl-evt">{t}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="side-card">
          <h4>About the author</h4>
          <div className="author-name">Nicholas Paisner</div>
          <div className="author-role">Head of Content</div>
          <p className="author-bio">Nicholas leads Cazenove's editorial and research initiatives, focusing on geopolitical analysis and long-term investment implications.</p>
        </div>

        <div className="side-card" style={{background:'var(--cream-dark)',color:'var(--charcoal)'}}>
          <h4 style={{color:'var(--navy)'}}>Related reading</h4>
          <div style={{display:'grid',gap:14,fontSize:13,lineHeight:1.55}}>
            <div style={{paddingBottom:12,borderBottom:'1px solid var(--rule)'}}>
              <div style={{fontSize:10,letterSpacing:'0.18em',color:'var(--gold)',textTransform:'uppercase',marginBottom:4}}>Markets</div>
              <div>The Gulf after oil — positioning for the energy transition</div>
            </div>
            <div style={{paddingBottom:12,borderBottom:'1px solid var(--rule)'}}>
              <div style={{fontSize:10,letterSpacing:'0.18em',color:'var(--gold)',textTransform:'uppercase',marginBottom:4}}>Geopolitics</div>
              <div>When elite consensus lies: lessons from 1979</div>
            </div>
            <div>
              <div style={{fontSize:10,letterSpacing:'0.18em',color:'var(--gold)',textTransform:'uppercase',marginBottom:4}}>Long view</div>
              <div>Cycles of openness — a century of emerging markets</div>
            </div>
          </div>
        </div>
      </aside>
    </>
  );
}

/* =================================================================
   INVESTMENT IMPLICATIONS
================================================================= */
function ImplicationsSection(){
  return (
    <>
      {window.IMPLICATIONS.map((im, i) => (
        <div key={i} className="impl-card" tabIndex={0}>
          <div className="impl-era">{im.era}</div>
          <h3 className="impl-evt">{im.evt}</h3>
          <div className="impl-cue">↓ Investment implication</div>
          <div className="impl-reveal">
            <p className="impl-text">{im.text}</p>
            <span className="impl-tag">{im.tag}</span>
          </div>
        </div>
      ))}
    </>
  );
}

Object.assign(window, { TimelineSection, ArticleSection, ImplicationsSection });