// Niche ke saare sections — saara Urdu mein

function Manifesto() {
  return (
    <section className="manifesto" id="manifesto" data-screen-label="۰۲ منشور">
      <div className="manifesto__head">
        <div className="manifesto__eyebrow">
          <span className="manifesto__eyebrow-num">۰۱</span>
          <span>منشور</span>
        </div>
        <h2 className="manifesto__title">
          ہر شہر کی <em>اپنی</em> پہچان ہے۔<br/>
          ہم وہ پہچان ہیں۔
        </h2>
      </div>

      <div className="manifesto__body">
        <p className="manifesto__lead">
          ملتان کا حلوہ، لاہور کا کھُسّہ، پشاور کا چپّل، ہنزہ کی خوبانی — یہ صرف اشیاء نہیں،
          یہ مٹی کا قرض ہیں، ہاتھوں کی محنت ہیں، اور صدیوں کی روایت ہیں۔
        </p>
        <p>
          مشہور وہ بازار ہے جہاں ہر شہر اپنی اصل پہچان لے کر کھڑا ہوتا ہے۔ ہم
          <strong> وینڈر سے براہِ راست </strong>
          آپ تک پہنچاتے ہیں — کوئی بیچ والا نہیں، کوئی نقل نہیں۔ آپ تک وہی پہنچتا ہے
          جو وہاں بنا، جیسا بنا، اور جیسا ہونا چاہیے تھا۔
        </p>
      </div>

      <div className="manifesto__stats">
        <div className="stat">
          <div className="stat__num">۲۸</div>
          <div className="stat__lbl">شہر</div>
          <div className="stat__desc">ملک بھر سے، ہر شہر کی اپنی پہچان</div>
        </div>
        <div className="stat">
          <div className="stat__num">۶</div>
          <div className="stat__lbl">صوبے و خطے</div>
          <div className="stat__desc">پورا پاکستان ایک پلیٹ فارم پر</div>
        </div>
        <div className="stat">
          <div className="stat__num">۰</div>
          <div className="stat__lbl">بیچ والے</div>
          <div className="stat__desc">وینڈر سے براہِ راست آپ کی دہلیز تک</div>
        </div>
      </div>
    </section>
  );
}

function Directory() {
  const items = window.MASHOOR_DIRECTORY;
  const provinces = ["Punjab", "Sindh", "KP", "Balochistan", "GB", "AJK"];
  const PR = window.MASHOOR_PROVINCES;

  return (
    <section className="directory" id="directory" data-screen-label="۰۳ فہرست">
      <div className="directory__head">
        <div className="directory__eyebrow">
          <span className="manifesto__eyebrow-num">۰۲</span>
          <span>فہرست</span>
        </div>
        <h2 className="directory__title">پاکستان کا نقشۂ ہنر</h2>
        <p className="directory__sub">
          ہر صوبہ، ہر شہر، اور ہر وہ چیز جس کے لیے وہ مشہور ہے۔
        </p>
      </div>

      <div className="directory__list">
        {provinces.map((p) => {
          const rows = items.filter(it => it.province === p);
          return (
            <div className="province" key={p}>
              <div className="province__head">
                <div className="province__name">{PR[p]}</div>
                <div className="province__rule" aria-hidden="true" />
                <div className="province__count">{window.urNum(rows.length)} ہنر</div>
              </div>
              <ul className="province__rows">
                {rows.map((row, idx) => (
                  <li key={idx} className="row">
                    <div className="row__num">{window.urNum(idx + 1).padStart(2, '۰')}</div>
                    <div className="row__city">{row.ur}</div>
                    <div className="row__rule" aria-hidden="true" />
                    <div className="row__item">{row.urItem}</div>
                    <div className="row__arrow" aria-hidden="true">↖</div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "۰۱", t: "شہر چنیں",         b: "اپنی پسند کا شہر یا ہنر منتخب کریں — اٹھائیس شہر، آپ کی انگلیوں پر۔" },
    { n: "۰۲", t: "وینڈر سے ملیں",   b: "ہر مصنوعہ کے ساتھ بنانے والے کا نام، علاقہ، اور اس کی کہانی۔" },
    { n: "۰۳", t: "گھر منگوائیں",     b: "براہِ راست ترسیل، کوئی بیچ والا نہیں — صرف اصل چیز، اصل قیمت پر۔" },
  ];
  return (
    <section className="how" id="how" data-screen-label="۰۴ طریقۂ کار">
      <div className="how__head">
        <div className="directory__eyebrow on-dark">
          <span className="manifesto__eyebrow-num">۰۳</span>
          <span>طریقۂ کار</span>
        </div>
        <h2 className="how__title">تین قدم — اور پاکستان آپ کے ہاتھ میں</h2>
      </div>
      <div className="how__steps">
        {steps.map((s, idx) => (
          <div className="step" key={idx}>
            <div className="step__num">{s.n}</div>
            <div className="step__rule" aria-hidden="true" />
            <h3 className="step__title">{s.t}</h3>
            <p className="step__body">{s.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="quote" data-screen-label="۰۵ قول">
      <div className="quote__eyebrow" aria-hidden="true">
        <span className="quote__eyebrow-line" />
        <span className="quote__eyebrow-text">قول</span>
        <span className="quote__eyebrow-line" />
      </div>
      <blockquote className="quote__text">
        ہر چیز اپنی جگہ سے ہی اچھی لگتی ہے۔ ملتان کا حلوہ ملتان میں،
        پشاور کی چپّل پشاور میں۔ ہم نے سوچا — کیوں نہ یہ سب ایک جگہ ہو،
        مگر اپنی اصل کے ساتھ۔
      </blockquote>
      <div className="quote__cite">— مشہور کا منشور</div>
    </section>
  );
}

function Download() {
  return (
    <section className="download" id="download" data-screen-label="۰۶ ڈاؤن لوڈ">
      <div className="download__inner">
        <div className="download__copy">
          <div className="directory__eyebrow">
            <span className="manifesto__eyebrow-num">۰۴</span>
            <span>ایپ</span>
          </div>
          <h2 className="download__title">پاکستان کی پہچان<br/>اب آپ کی رسائی میں</h2>
          <p className="download__sub">
            مشہور ایپ ڈاؤن لوڈ کریں — اٹھائیس شہر، ایک ایپ۔
          </p>

          <div className="apps">
            <a
              className="app-card"
              href="https://play.google.com/store/apps/details?id=com.amalAxis.mashoor_app"
              target="_blank"
              rel="noopener noreferrer"
            >
              <div className="app-card__head">
                <span className="app-card__kind">صارفین کے لیے</span>
                <span className="app-card__name">مشہور</span>
              </div>
              <p className="app-card__desc">پاکستان کے ہر شہر کی پہچان، براہِ راست آپ کی دہلیز تک۔</p>
              <span className="app-card__cta">
                <span className="app-card__cta-sup">گوگل پلے سے حاصل کریں</span>
                <span className="app-card__cta-arrow">←</span>
              </span>
            </a>

            <a
              className="app-card app-card--vendor"
              href="https://play.google.com/store/apps/details?id=com.amalAxis.Mashoorvendor"
              target="_blank"
              rel="noopener noreferrer"
            >
              <div className="app-card__head">
                <span className="app-card__kind">وینڈرز کے لیے</span>
                <span className="app-card__name">مشہور وینڈر</span>
              </div>
              <p className="app-card__desc">اپنا ہنر براہِ راست پورے پاکستان تک پہنچائیں۔</p>
              <span className="app-card__cta">
                <span className="app-card__cta-sup">گوگل پلے سے حاصل کریں</span>
                <span className="app-card__cta-arrow">←</span>
              </span>
            </a>
          </div>
        </div>
        <div className="download__visual" aria-hidden="true">
          <div className="download__phone">
            <div className="download__phone-notch" />
            <div className="download__phone-screen">
              <div className="download__phone-bg" />
              <div className="download__phone-mark">
                <img src="assets/mashoor-logo.png" alt="" />
              </div>
              <div className="download__phone-tag">پاکستان کا بازار</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="۰۷ اختتامیہ">
      <div className="footer__top">
        <div className="footer__brand">
          <div className="footer__brand-mark">
            <img src="assets/mashoor-logo.png" alt="مشہور" />
          </div>
          <div className="footer__brand-tag">
            پاکستان کی مٹی سے، آپ کی دہلیز تک
          </div>
        </div>
        <div className="footer__cols">
          <div>
            <h4>دریافت کریں</h4>
            <a href="#manifesto">منشور</a>
            <a href="#directory">فہرست</a>
            <a href="#how">طریقۂ کار</a>
            <a href="#download">ایپ ڈاؤن لوڈ کریں</a>
          </div>
          <div>
            <h4>ایپ حاصل کریں</h4>
            <a href="https://play.google.com/store/apps/details?id=com.amalAxis.mashoor_app" target="_blank" rel="noopener noreferrer">مشہور — صارف ایپ</a>
            <a href="https://play.google.com/store/apps/details?id=com.amalAxis.Mashoorvendor" target="_blank" rel="noopener noreferrer">مشہور وینڈر — بیچنے والوں کے لیے</a>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© ۲۰۲۶ مشہور</span>
        <span>پاکستان</span>
      </div>
    </footer>
  );
}

window.Manifesto = Manifesto;
window.Directory = Directory;
window.HowItWorks = HowItWorks;
window.Quote = Quote;
window.Download = Download;
window.Footer = Footer;