/* global React */

/** Intro strip — wide horizontal callout: short statement + supporting paragraph. */
function IntroStrip({ headA, headItalic, body, dark = true }) {
  return (
    <section className={`cs-intro-strip${dark ? ' is-dark' : ''}`}>
      <div className="cs-intro-strip-inner">
        <h2>{headA} {headItalic && <em>{headItalic}</em>}</h2>
        <p>{body}</p>
      </div>
    </section>
  );
}

/** Vertical timeline — dotted left rail with timeline items. */
function Timeline({ heading, italic, items = [], dark = true }) {
  return (
    <section className={`cs-timeline${dark ? ' is-dark' : ''}`}>
      <div className="cs-timeline-inner">
        <h2>{heading} {italic && <em>{italic}</em>}</h2>
        <div className="cs-timeline-list">
          {items.map((it, i) => (
            <div key={i} className={`cs-timeline-item${it.accent ? ' is-accent' : ''}`}>
              <div className="cs-timeline-dot"></div>
              <div className="cs-timeline-jaar">{it.tag}</div>
              <h3 className="cs-timeline-title">{it.title}</h3>
              <p className="cs-timeline-text">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Values grid — 2x2 grid of small value cards. */
function ValuesGrid({ heading, italic, items = [] }) {
  return (
    <section className="cs-values">
      <div className="cs-values-inner">
        <div className="cs-values-head">
          <h2>{heading} {italic && <em>{italic}</em>}</h2>
        </div>
        <div className="cs-values-grid">
          {items.map((v, i) => (
            <div key={i} className="cs-value-card">
              <div className="cs-value-icon">{v.icon}</div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Outside-of-work cards — image-on-top hobby/personal cards. */
function OutsideGrid({ heading, italic, items = [] }) {
  return (
    <section className="cs-outside">
      <div className="cs-outside-inner">
        <div className="cs-outside-head">
          <h2>{heading} {italic && <em>{italic}</em>}</h2>
        </div>
        <div className="cs-outside-grid">
          {items.map((it, i) => (
            <article key={i} className={`cs-outside-card${it.accent ? ' is-accent' : ''}`}>
              {it.img && <img src={it.img} alt={it.title} className="cs-outside-foto"/>}
              <div className="cs-outside-body">
                <h4>{it.title}</h4>
                <p>{it.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Story two-column block — text on left, big photo on right. */
function StoryBlock({ eyebrow, headA, headItalic, paragraphs = [], img }) {
  return (
    <section className="cs-story">
      <div className="cs-story-text">
        {eyebrow && <div className="cs-eyebrow">{eyebrow}</div>}
        <h2>{headA} {headItalic && <em>{headItalic}</em>}</h2>
        {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
      </div>
      <div className="cs-story-photo">
        <img src={img} alt=""/>
      </div>
    </section>
  );
}

window.IntroStrip = IntroStrip;
window.Timeline = Timeline;
window.ValuesGrid = ValuesGrid;
window.OutsideGrid = OutsideGrid;
window.StoryBlock = StoryBlock;