/* global React, CCButton */
// Phone mockup (left or right) + copy block (the other side).
// Used twice on the page with different copy and a different small overlay.
function PhoneFeature({
  align = 'left',           // which side the phone goes on
  headline,
  body,                     // array of paragraphs OR string
  ctaLabel,
  ctaHref,
  overlayKind = 'bubbles',  // 'bubbles' (message pill cluster) or 'sparkle' (worth-repeating)
  photo = 1,                // index into assets/outfits/outfit-NN.png
}) {
  const bodyArr = Array.isArray(body) ? body : [body];
  const phone = (
    <div className="cc-phone-wrap">
      <div className="cc-phone">
        <div className="cc-phone-figure">
          <img src={`assets/outfits/outfit-${String(photo).padStart(2, '0')}.png`} alt="" loading="lazy" />
        </div>
        {overlayKind === 'bubbles' && (
          <div className="cc-overlay-bubbles" aria-hidden="true">
            <div className="cc-bubble cc-bubble-sm" />
            <div className="cc-bubble cc-bubble-md" />
            <div className="cc-bubble cc-bubble-pill"><span>•••</span></div>
          </div>
        )}
        {overlayKind === 'sparkle' && (
          <div className="cc-overlay-sparkle" aria-hidden="true">
            <img className="cc-sparkle" src="assets/sparkle.svg" alt="" />
            <div className="cc-overlay-title">Worth repeating</div>
            <div className="cc-overlay-body">You tend to reach for this when it matters.</div>
          </div>
        )}
      </div>
    </div>
  );
  const copy = (
    <div className="cc-phone-copy">
      {headline && <h2 className="cc-section-h">{headline}</h2>}
      {bodyArr.map((p, i) => (
        <p key={i} className="cc-section-p">{p}</p>
      ))}
      {ctaLabel && (
        <div className="cc-phone-cta">
          {ctaHref
            ? <a href={ctaHref} target="_blank" rel="noopener noreferrer"><CCButton variant="outline" size="sm">{ctaLabel}</CCButton></a>
            : <CCButton variant="outline" size="sm">{ctaLabel}</CCButton>
          }
        </div>
      )}
    </div>
  );
  return (
    <section className={`cc-phone-feature cc-align-${align}`}>
      {align === 'left' ? <>{phone}{copy}</> : <>{copy}{phone}</>}
    </section>
  );
}

window.PhoneFeature = PhoneFeature;