/* global React, Reveal, Icon */
// שיר — editable via admin panel. poem prop: { lines: string (newline-separated), source: string }
const PoemSection = ({ poem }) => {
  const lines = (poem && poem.lines) ? poem.lines.split('\n') : [
    'הַכְּאֵב לֹא נֶעֱלַם —',
    'הוּא רַק לָמַד לָלֶכֶת לְצִדִּי.',
    'וּמִשָּׁם, לְאַט,',
    'צָמְחוּ הַמִּלִּים.',
  ];
  const source = (poem && poem.source) || 'מתוך הספר';

  return (
    <section id="poem" style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(165deg, #7E0A1D 0%, #2A0610 100%)',
      color: 'var(--text-on-red)', padding: 'clamp(80px, 11vw, 150px) 28px',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-15%', insetInlineStart: '50%', transform: 'translateX(-50%)',
        width: 760, height: 760, pointerEvents: 'none',
        background: 'radial-gradient(circle, rgba(212,175,122,0.16), transparent 66%)',
      }} />
      <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <Reveal>
          <div aria-hidden="true" style={{ display: 'flex', justifyContent: 'center', marginBottom: 26, color: 'var(--gold)' }}>
            <Icon name="quote" size={40} />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p style={{
            fontFamily: 'var(--font-poem)', fontWeight: 500,
            fontSize: 'clamp(1.6rem, 3.4vw, 2.7rem)',
            lineHeight: 1.7, margin: 0, color: '#FFFFFF', textWrap: 'balance',
          }}>
            {lines.map((line, i) => (
              <React.Fragment key={i}>
                <span style={i === lines.length - 1 ? { color: 'var(--gold)' } : {}}>
                  {line}
                </span>
                {i < lines.length - 1 && <br />}
              </React.Fragment>
            ))}
          </p>
        </Reveal>
        <Reveal delay={260}>
          <div style={{
            marginTop: 38, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
            letterSpacing: '0.18em', color: 'var(--text-on-red-soft)',
          }}>— {source}</div>
        </Reveal>
      </div>
    </section>
  );
};
window.PoemSection = PoemSection;