function WhyAtela() {
  const copy = window.atelaGetCopySection('whyAtela');
  const headlineLines = Array.isArray(copy.headlineLines) ? copy.headlineLines : String(copy.headline || '').split('\n');
  const bodyLines = Array.isArray(copy.body) ? copy.body : String(copy.body || '').split('\n').filter(Boolean);
  const blocks = Array.isArray(copy.blocks) ? copy.blocks : [];
  const currentLocale = window.atelaGetCurrentLocale ? window.atelaGetCurrentLocale() : 'ko';
  const MotionStage = window.MarketplaceMotion;
  const motionCopy = window.atelaGetCopySection('marketplace');

  return (
    <section id="why-atela" className="landing-why">
      <div className="atela-container">
        <div className="landing-why-head">
          <span className="atela-eyebrow" style={{ color: 'rgba(255,255,255,0.45)' }}>{copy.eyebrow}</span>
          <h2 className="atela-h2">
            {headlineLines.map((line, i) => (
              <React.Fragment key={`${line}-${i}`}>
                {i > 0 && <br />}
                {line}
              </React.Fragment>
            ))}
          </h2>
        </div>

        {bodyLines.length > 0 && (
          <div className="landing-why-body">
            {bodyLines.map((line, i) => (
              <p key={`${line}-${i}`}>{line}</p>
            ))}
          </div>
        )}

        {blocks.length > 0 && (
          <div className="landing-why-grid">
            {blocks.map((block, i) => (
              <div key={i} className="landing-why-block">
                <h3>{block.title}</h3>
                <p>{block.body}</p>
              </div>
            ))}
          </div>
        )}

        {MotionStage && motionCopy && (
          <MotionStage copy={motionCopy} currentLocale={currentLocale} className="landing-why-motion"/>
        )}
      </div>
    </section>
  );
}

window.WhyAtela = WhyAtela;