// HomeIntro.jsx — home-page introduction (portrait + short note) and a
// three-listing preview, placed between the hero and the services.
//
// FEATURED_IDS: the three listings shown on the home page, in order. Use the
// ids from LISTINGS in Listings.jsx. Unknown ids are skipped.
const FEATURED_IDS = ['sale-florian', 'sale-one-williamsburg-wharf', 'rent-solari'];

const HomeIntro = ({ lang = 'en', onAbout, onOpenListing, onSeeSales, onSeeRentals }) => {
  const tr = (m) => m[lang] || m.en;
  const featured = FEATURED_IDS
    .map((id) => (window.LISTINGS || []).find((l) => l.id === id))
    .filter(Boolean);

  return (
    <>
      <section className="ms-intro" data-screen-label="Intro">
        <div className="ms-intro-portrait">
          <img
            src="/assets/elle-portrait.png"
            alt={tr({ en: 'Elle Lee', ko: '엘 리', ja: 'Elle Lee', zh: 'Elle Lee' })}
            loading="lazy"
          />
        </div>
        <div className="ms-intro-copy">
          <span className="ms-services-eyebrow">{tr({ en: 'Hello — I’m Elle', ko: '안녕하세요, 엘 리입니다', ja: 'はじめまして、Elle Leeです', zh: '您好，我是 Elle' })}</span>
          <h2 className="ms-intro-title">
            {tr({ en: 'Your agent, in your language.', ko: '한국어로 편하게 상담하세요.', ja: 'あなたの言葉で、寄り添うエージェント。', zh: '用您的语言，陪您找家。' })}
          </h2>
          <p className="ms-intro-body">
            {tr({
              en: 'From Busan to Osaka, Tokyo, and now New York — I know what it takes to start over here. I help buyers, renters, and families find the right home, in Korean, English, or Japanese.',
              ko: '부산에서 오사카, 도쿄를 거쳐 뉴욕까지. 낯선 도시에서 새로 시작하는 일이 어떤지 저도 잘 압니다. 매매와 임대, 가족 이주까지 한국어·영어·일본어로 도와드립니다.',
              ja: '釜山から大阪、東京、そしてニューヨークへ — この街で新しく始める大変さを知っています。ご購入、賃貸、ご家族のご移住まで、韓国語・英語・日本語でお手伝いします。',
              zh: '从釜山到大阪、东京，再到纽约 — 我深知在这里重新开始需要什么。买房、租房、家庭移居，我可以用韩语、英语或日语为您服务。'
            })}
          </p>
          <p className="ms-intro-trust">
            {tr({ en: 'Licensed Real Estate Salesperson', ko: '뉴욕주 면허 부동산 세일즈퍼슨', ja: 'NY州 不動産セールスパーソン', zh: '纽约州持牌房地产经纪人' })}
            <span aria-hidden="true"> · </span><span className="ms-brokerage">Nest Seekers International</span>
            <span aria-hidden="true"> · </span>한국어 · English · 日本語
          </p>
          <button className="btn btn-ghost" onClick={onAbout}>
            {tr({ en: 'More about me', ko: '소개 더 보기', ja: 'プロフィールを見る', zh: '了解更多' })}
          </button>
        </div>
      </section>

      {featured.length > 0 && (
        <section className="ms-featured" data-screen-label="Featured listings">
          <header className="ms-featured-head">
            <div>
              <span className="ms-services-eyebrow">{tr({ en: 'Featured', ko: '추천 매물', ja: 'おすすめ物件', zh: '精选房源' })}</span>
              <h2 className="ms-services-title">{tr({ en: 'Now showing.', ko: '지금 만나볼 수 있는 집.', ja: 'ただいまご紹介中。', zh: '正在推荐。' })}</h2>
            </div>
            <div className="ms-featured-links">
              <button className="btn btn-ghost" onClick={onSeeSales}>{tr({ en: 'All sales', ko: '매매 전체 보기', ja: '売買一覧', zh: '全部买卖' })}</button>
              <button className="btn btn-ghost" onClick={onSeeRentals}>{tr({ en: 'All rentals', ko: '임대 전체 보기', ja: '賃貸一覧', zh: '全部租赁' })}</button>
            </div>
          </header>
          <div className="ms-grid ms-featured-grid">
            {featured.map((l) => <ListingCard key={l.id} l={l} onOpen={onOpenListing} lang={lang} />)}
          </div>
        </section>
      )}
    </>
  );
};

window.HomeIntro = HomeIntro;