// Registry page

function PageRegistry({ content }) {
  const registry = content.registry;
  return (
    <main className="page-enter">
      <header className="page-head">
        <window.Eucalyptus size={220} color="var(--moss)" animated style={{ position: 'absolute', top: -40, left: -40, opacity: 0.4 }} />
        <window.PalmLeaf size={240} color="var(--fern)" animated style={{ position: 'absolute', top: -60, right: -80, transform: 'scaleX(-1) rotate(-20deg)', opacity: 0.4 }} />
        <div className="container">
          <span className="eyebrow">{registry.eyebrow}</span>
          <h1 className="h2" style={{ marginTop: 22 }}>{registry.titleLine}<br/><i>{registry.titleEmphasis}</i></h1>
        </div>
        <window.Sprig size={180} color="var(--fern)" style={{ position: 'absolute', top: 30, right: 100, opacity: 0.6 }} />
      </header>

      <section className="container">
        <p className="body-lg" style={{ marginTop: 56, maxWidth: 640 }}>
          {registry.intro}
        </p>

        <div className="registry-grid">
          {registry.items.map((item) => (
            <div className="registry-card" key={item.number}>
              <span className="num">{item.number}</span>
              <h3 className="name">{item.name}</h3>
              <p className="body" style={{ fontSize: 14 }}>{item.description}</p>
              <div className="arrow-btn">
                <span>{item.cta}</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>→</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

window.PageRegistry = PageRegistry;