// Our Story page

function PageStory({ content }) {
  const story = content.story;
  const blocks = story.blocks || [];
  const firstBlock = blocks[0] || {};
  const secondBlock = blocks[1] || {};
  const proposal = story.proposal || {};
  return (
    <main className="page-enter">
      <header className="page-head">
        <window.PalmLeaf size={280} color="var(--fern-deep)" animated style={{ position: 'absolute', top: -80, left: -100, transform: 'rotate(-25deg)', opacity: 0.4 }} />
        <window.Eucalyptus size={200} color="var(--moss)" animated style={{ position: 'absolute', top: -20, right: -40, opacity: 0.45 }} />
        <window.Butterfly size={36} color="var(--terra)" animated style={{ position: 'absolute', top: '40%', right: '15%', zIndex: 5 }} />
        <div className="container">
          <span className="eyebrow">{story.eyebrow}</span>
          <h1 className="h2" style={{ marginTop: 22 }}>{story.titleLine}<br/><i>{story.titleEmphasis}</i></h1>
        </div>
        <window.FernFrond size={180} color="var(--fern)" flip style={{ position: 'absolute', top: 20, right: 60, opacity: 0.55 }} />
      </header>

      <section className="container">
        <div className="story-grid">
          <div className="story-block">
            <span className="story-marker">{firstBlock.marker}</span>
            <h3 className="story-h3">{firstBlock.title}</h3>
            <window.PhotoCard src={window.imgUrl(firstBlock.photoKey, 1200)} caption={firstBlock.photoCaption} ratio="4/3" strength={0.12} style={{ marginBottom: 16 }} />
            <p className="body">{firstBlock.body}</p>
          </div>
          <div className="story-block" style={{ paddingTop: 60 }}>
            <span className="story-marker">{secondBlock.marker}</span>
            <h3 className="story-h3">{secondBlock.title}</h3>
            <p className="body">{secondBlock.body}</p>
            <window.PhotoCard src={window.imgUrl(secondBlock.photoKey, 1200)} caption={secondBlock.photoCaption} ratio="4/3" strength={0.12} style={{ marginTop: 16 }} />
          </div>
        </div>

        <div className="story-grid" style={{ paddingTop: 0, gridTemplateColumns: '1.2fr 1fr', alignItems: 'center' }}>
          <div className="story-block wide">
            <window.PhotoCard src={window.imgUrl(proposal.photoKey, 1400)} caption={proposal.photoCaption} ratio="3/4" strength={0.16} style={{ height: 520 }} />
          </div>
          <div className="story-block">
            <span className="story-marker">{proposal.marker}</span>
            <h3 className="story-h3">{window.textLines(proposal.title)}</h3>
            <p className="body">{proposal.body}</p>
          </div>
        </div>

        <div className="timeline">
          <div className="label" style={{ marginBottom: 24 }}>{story.timelineLabel}</div>
          {story.timeline.map((item, i) => (
            <div className="timeline-row" key={i}>
              <span className="timeline-year">{item.year}</span>
              <span className="h3" style={{ fontStyle: 'italic' }}>{item.title}</span>
              <span className="body">{item.description}</span>
            </div>
          ))}
        </div>
      </section>

      <window.PhotoBand src={window.imgUrl(story.photoBandKey, 2400)} height={380} caption={story.photoBandCaption} scrim="bottom" />
    </main>
  );
}

window.PageStory = PageStory;