// 06 Content for every channel — original card structure, contextualized images inside each card
const Channels = () => {
  const R = (p) => (window.__r ? window.__r(p) : p);
  const items = [
    {
      kind: 'ecommerce',
      icon: 'cart',
      title: 'Ecommerce',
      desc: 'Clean product visuals for PDP and marketplaces',
      img: R('images/channels-ecom.jpg'),
    },
    {
      kind: 'campaign',
      icon: 'camera',
      title: 'Campaign',
      desc: 'Styled visuals for marketing and brand storytelling',
      img: R('images/channels-campaign.jpg'),
    },
    {
      kind: 'social',
      icon: 'phone',
      title: 'Social',
      desc: 'Fast variations for reels, ads, and trend content',
      img: R('images/channels-social.jpg'),
    },
    {
      kind: 'print',
      icon: 'print',
      title: 'Print',
      desc: 'High-resolution assets for catalogs and retail',
      img: R('images/channels-print.jpg'),
    },
  ];

  return (
    <section className="channels" data-screen-label="06 Channels">
      <div className="section__header">
        <div className="section__eyebrow">CHANNELS</div>
        <h2 className="section__title">
          Create content for <br />
          <em className="serif">every</em> fashion channel.
        </h2>
      </div>
      <div className="channels__grid">
        {items.map((c, i) => (
          <div key={i} className="ch-card">
            <div className="ch-card__media">
              <ChannelContext kind={c.kind} img={c.img} />
              <div className="ch-card__chip">
                <Glyph name={c.icon} size={16} />
              </div>
            </div>
            <div className="ch-card__meta">
              <h3 className="ch-card__title">{c.title}</h3>
              <p className="ch-card__desc">{c.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// Renders the right context INSIDE the card media frame (no browser chrome,
// no outer padding — fits naturally into the original aspect-ratio box).
const ChannelContext = ({ kind, img }) => {
  if (kind === 'ecommerce') {
    return (
      <div className="ch-ctx ch-ctx--pdp">
        <img src={img} alt="" className="ch-ctx__bg" />
        <div className="ch-ctx__pdp-panel">
          <div className="ch-ctx__pdp-name">Cropped Field Jacket</div>
          <div className="ch-ctx__pdp-price">€ 489</div>
          <div className="ch-ctx__pdp-sizes">
            {['XS','S','M','L','XL'].map((s, idx) => (
              <span key={s} className={`ch-ctx__pdp-size ${idx === 2 ? 'is-active' : ''}`}>{s}</span>
            ))}
          </div>
          <div className="ch-ctx__pdp-cta">Add to bag</div>
        </div>
      </div>
    );
  }
  if (kind === 'campaign') {
    return (
      <div className="ch-ctx ch-ctx--campaign">
        <img src={img} alt="" className="ch-ctx__bg" />
        <div className="ch-ctx__campaign-type">
          <div className="ch-ctx__campaign-hd">Spring —<br/><em>Unwritten</em></div>
          <div className="ch-ctx__campaign-sub">ATELIER NORD · SS26</div>
        </div>
      </div>
    );
  }
  if (kind === 'social') {
    return (
      <div className="ch-ctx ch-ctx--ig">
        <img src={img} alt="" className="ch-ctx__bg" />
        <div className="ch-ctx__ig-top">
          <span className="ch-ctx__ig-avatar" />
          <span className="ch-ctx__ig-user">atelier.nord</span>
          <span className="ch-ctx__ig-dots">•••</span>
        </div>
        <span className="ch-ctx__ig-ad">AD</span>
        <div className="ch-ctx__ig-bar">
          <span>♡</span><span>◉</span><span>↗</span><span className="r">◻</span>
        </div>
      </div>
    );
  }
  if (kind === 'print') {
    return (
      <div className="ch-ctx ch-ctx--mag">
        <img src={img} alt="" className="ch-ctx__bg" />
        <div className="ch-ctx__mag-folio">P. 048 · FW26</div>
        <div className="ch-ctx__mag-title">Quiet<br/><em>Ceremony</em></div>
      </div>
    );
  }
  return null;
};

Object.assign(window, { Channels, ChannelContext });