/* REVO JURIS — Media components: placeholder photos woven into the layout.
   ImageSlot uses neutral grayscale stand-in photos (picsum) with a navy
   treatment + "Placeholder" badge, so the layout reads as photo-rich now and
   real images drop straight in later. Swap `src` for your own /assets path. */

function ImageSlot({ seed, src, ratio = '4/5', w = 900, h = 1100, caption, badge = true, style, className = '' }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  // Use a real photo when `src` is given; otherwise a grayscale stand-in (picsum).
  const isReal = !!src;
  const phUrl = `https://picsum.photos/seed/revojuris-${seed}/${w}/${h}?grayscale`;
  const url = isReal ? rjAsset(src) : rjAsset(phUrl);
  return (
    <div className={'imgslot ' + className + (isReal ? ' real' : '')} style={{ aspectRatio: ratio, ...style }}>
      <img src={url} alt={caption ? tx(caption) : ''} loading="lazy" />
      {badge && !isReal && <span className={'badge' + cjk}><Icon name="image" size={11} />{tx({ en: 'Placeholder', zh: '佔位圖' })}</span>}
      {caption && <span className={'cap' + cjk}>{tx(caption)}</span>}
    </div>
  );
}

/* Intro split — sits right after the stat strip to break the text early. */
function IntroSplit({ onEnquire }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const ticks = [
    { en: 'Matched to a panel solicitor within 24 hours', zh: '24小時內配對網絡執業律師' },
    { en: 'Transparent, fixed fees agreed before any work', zh: '收費透明固定，工作前先議定' },
    { en: 'English · 廣東話 · 普通話 throughout', zh: '全程提供中、英、普通話服務' },
  ];
  return (
    <section className="band paper" id="intro" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div className="container">
        <div className="media-split compact">
          <ImageSlot seed="intro" src="assets/photos/why.png" ratio="1/1" caption={{ en: 'Counsel at work', zh: '律師辦公' }} className="ms-img" />
          <div className="ms-text">
            <div className="ms-eyebrow"><Eyebrow><span className={cjk}>{tx({ en: 'Why REVO JURIS', zh: '為何選擇億誠' })}</span></Eyebrow></div>
            <h2 className={cjk}>{tx({ en: 'A calm, trusted route to the right solicitor', zh: '冷靜可靠，直達合適律師' })}</h2>
            <p className={'lead' + cjk}>{tx({ en: 'We are a trusted referral network — not a law firm. We listen, then connect you to an independent solicitor suited to your matter, quickly and clearly.', zh: '我們是可信賴的法律轉介網絡，並非律師行。我們細心聆聽，迅速而清晰地為您配對切合需要的獨立執業律師。' })}</p>
            <ul className="ms-ticks">
              {ticks.map((t, i) => <li key={i}><Icon name="check" size={20} /><span className={cjk}>{tx(t)}</span></li>)}
            </ul>
            <div className="ms-cta">
              <button className={'btn btn-primary' + cjk} onClick={() => rjWA()}><Icon name="message-circle" size={18} />{tx(UI.findSolicitor)}</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Feature split (image reversed) — sits before the FAQ to add air. */
function FeatureSplit({ onEnquire }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const ticks = [
    { en: 'Criminal defence — 24/7 from arrest to appeal', zh: '刑事辯護 — 由被捕到上訴，全天候候命' },
    { en: 'Civil letters & litigation — debt, contracts, employment', zh: '民事律師信及訴訟 — 追債、合約、勞資' },
    { en: 'Wills & inheritance — probate and cross-border estates', zh: '遺囑及遺產 — 遺產認證及跨境繼承' },
  ];
  return (
    <section className="band paper" id="approach" style={{ background: 'var(--paper-50)', paddingTop: 60, paddingBottom: 60 }}>
      <div className="container">
        <div className="media-split feat-horizontal">
          <div className="ms-text">
            <div className="ms-eyebrow"><Eyebrow><span className={cjk}>{tx({ en: 'How we help', zh: '我們如何協助' })}</span></Eyebrow></div>
            <h2 className={cjk}>{tx({ en: 'One clear path across three areas of law', zh: '三大法律範疇，一條清晰路徑' })}</h2>
            <p className={'lead' + cjk}>{tx({ en: 'Tell us what happened. We assess your matter, explain your options in plain language, and introduce a solicitor who handles cases like yours every day.', zh: '告訴我們事情經過。我們評估您的個案，以淺白語言講解選擇，並為您引薦熟悉同類案件的律師。' })}</p>
            <ul className="ms-ticks">
              {ticks.map((t, i) => <li key={i}><Icon name="check" size={20} /><span className={cjk}>{tx(t)}</span></li>)}
            </ul>
            <div className="ms-cta">
              <button className={'btn btn-outline' + cjk} onClick={() => rjWA()}><Icon name="message-circle" size={17} />{tx({ en: 'Start an enquiry', zh: '開始查詢' })}</button>
            </div>
          </div>
          <ImageSlot seed="approach" src="assets/photos/howwehelp.png" ratio="3/2" caption={{ en: 'A clear conversation', zh: '清晰的論詢' }} className="ms-img" />
        </div>
      </div>
    </section>
  );
}

/* Gallery — horizontal auto-scrolling marquee carousel of real photos. */
function GalleryStrip() {
  const lang = useLang();
  const tx = useTx();
  const slides = [
    { s: 'g2', src: 'assets/photos/g2.png', c: { en: 'Client consultation', zh: '客戶諮詢' } },
    { s: 'g3', src: 'assets/photos/g3.png', c: { en: 'The team at work', zh: '團隊工作實況' } },
    { s: 'g4', src: 'assets/photos/g4.png', c: { en: 'Reviewing the case', zh: '審視案件' } },
    { s: 'g5', src: 'assets/photos/g5.png', c: { en: 'Case meeting', zh: '案件會議' } },
  ];
  // duplicate the set so the marquee loops seamlessly
  const loop = slides.concat(slides.map(s => ({ ...s, s: s.s + '-b' })));
  return (
    <section className="band cream" id="gallery">
      <div className="container">
        <SecHead head={{ eyebrow: { en: 'Gallery', zh: '圖庫' }, h2: { en: 'Inside REVO JURIS', zh: '億誠一覽' } }} center />
      </div>
      <div className="gallery-marquee" role="region" aria-label={tx({ en: 'Photo gallery', zh: '相片圖庫' })}>
        <div className="gallery-track">
          {loop.map(g => (
            <figure className="gallery-slide" key={g.s}>
              <img src={rjAsset(g.src)} alt={tx(g.c)} loading="lazy" />
              <figcaption className={lang === 'ZH' ? 'cjk' : ''}>{tx(g.c)}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ImageSlot, IntroSplit, FeatureSplit, GalleryStrip });