// Daoob — Sample feasibility report
// Olaya residential-commercial plot (Plan 2703 · Parcel 414 · 750 m²)
// Reference: DRB-2026-00147 · 18 May 2026

const Report = ({ t, lang, setPage }) => {
  const isAr = lang === "ar";
  const meta = {
    ref:        "DRB-2026-00147",
    date_ar:    "18 مايو 2026",
    date_en:    "18 May 2026",
    title_ar:   "تقرير تحليل وجدوى عقارية",
    title_en:   "Real-estate feasibility study report",
    subtitle_ar:"الرياض · حي العليا · أرض سكني تجاري",
    subtitle_en:"Riyadh · Olaya district · Mixed-use plot",
    plan:       "2703",
    parcel:     "414",
    area:       750,
  };

  return (
    <div className="report-page-shell">
      {/* Control bar */}
      <div className="report-controls">
        <div className="report-controls-inner">
          <div className="report-controls-meta">
            <Icon name="file" size={14}/>
            <span>{isAr ? "نموذج توضيحي" : "Illustrative preview"} · {meta.ref}</span>
          </div>
          <div className="report-controls-actions">
            <span className="report-illust">
              <Icon name="shield" size={12}/>
              {isAr ? "تقرير استرشادي — غير معتمد رسمياً" : "Advisory · not officially certified"}
            </span>
            <button className="btn btn-primary btn-sm" onClick={() => setPage("services")}>
              <Icon name="arrow-right" size={14}/>
              {isAr ? "اطلب دراسة الآن" : "Order a study now"}
            </button>
          </div>
        </div>
      </div>

      <div className="report-stack">
        <ReportCover  meta={meta} isAr={isAr}/>
        <ReportExec   meta={meta} isAr={isAr}/>
        <ReportMarket meta={meta} isAr={isAr}/>
        <ReportFin    meta={meta} isAr={isAr}/>
        <ReportPerf   meta={meta} isAr={isAr}/>
        <ReportRisks  meta={meta} isAr={isAr}/>
        <ReportMethod meta={meta} isAr={isAr}/>
      </div>
    </div>
  );
};

// ============================ PAGE 1 — Cover ============================
const ReportCover = ({ meta, isAr }) => (
  <section className="r-page r-cover" data-page="01">
    <Watermark isAr={isAr}/>
    <div className="r-cover-bg">
      <CircuitDecor pos="tl"/>
      <CircuitDecor pos="br"/>
    </div>
    <div className="r-cover-content">
      <img src={((window.DAOOB_THEME && window.DAOOB_THEME.themeUrl)?window.DAOOB_THEME.themeUrl+"/assets/img/":"assets/")+"daoob-logo.png"} alt="Daoob" className="r-cover-logo"/>
      <div className="r-cover-eyebrow">{isAr ? "تقرير تحليل وجدوى عقارية" : "Real-estate feasibility report"}</div>
      <div className="r-cover-indicative">
        <Icon name="shield" size={12}/>
        {isAr ? "مدعوم بالذكاء الاصطناعي · استرشادي غير معتمد" : "AI-powered · advisory, not officially certified"}
      </div>
      <div className="r-cover-rule"/>
      <h1 className="r-cover-h1">
        {isAr ? "مدينة الرياض · حي العليا" : "Riyadh · Olaya District"}
      </h1>
      <div className="r-cover-loc">{isAr ? "أرض سكني تجاري" : "Mixed-use (residential / commercial)"}</div>
      <div className="r-cover-rule"/>
      <div className="r-cover-stats">
        <div><div className="rcs-k">{isAr ? "المخطط" : "Plan №"}</div><div className="rcs-v">{meta.plan}</div></div>
        <div><div className="rcs-k">{isAr ? "القطعة" : "Parcel №"}</div><div className="rcs-v">{meta.parcel}</div></div>
        <div><div className="rcs-k">{isAr ? "المساحة" : "Area"}</div><div className="rcs-v">{meta.area}<small> {isAr ? "م²" : "m²"}</small></div></div>
      </div>
    </div>

    <div className="r-cover-foot">
      <div className="r-cover-foot-l">
        <div>{isAr ? "تاريخ التقرير" : "Report date"}</div>
        <strong>{isAr ? meta.date_ar : meta.date_en}</strong>
      </div>
      <div className="r-cover-foot-l">
        <div>{isAr ? "رقم المرجع" : "Reference"}</div>
        <strong>{meta.ref}</strong>
      </div>
      <div className="r-cover-foot-l">
        <div>{isAr ? "أُنجز بواسطة" : "Prepared by"}</div>
        <strong>{isAr ? "وكلاء دؤوب الذكاء" : "Daoob AI agents"}</strong>
      </div>
    </div>
  </section>
);

// ============================ PAGE 2 — Executive Summary ============================
const ReportExec = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="02">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="01" h={isAr ? "الملخص التنفيذي" : "Executive Summary"}>
        <p className="r-p">
          {isAr
            ? "يقدّم هذا التقرير تحليلاً استرشادياً لأداء فرصة عقارية في حي العليا بمدينة الرياض، اعتماداً على البيانات المتاحة ومدخلات الدراسة ونماذج التحليل المدعومة بالذكاء الاصطناعي."
            : "This report provides an advisory analysis of a real-estate opportunity in the Olaya district of Riyadh, based on available data, study inputs and AI-supported analytical models."}
        </p>
        <p className="r-p">
          {isAr
            ? "تشير النتائج إلى أن المشروع يحقق عائداً سنوياً تقديرياً على حقوق الملكية يبلغ 37.0%، مع فترة استرداد تقديرية تبلغ 9.0 سنوات، وصافي دخل تشغيلي سنوي قدره 1,689,120 ريالاً سعودياً."
            : "Results show a projected annual return on equity of 37.0%, with an estimated payback period of 9.0 years and net annual operating income of SAR 1,689,120."}
        </p>
      </Section>

      <div className="r-kpis">
        <KpiCard label={isAr ? "العائد على الاستثمار (ROI)" : "Return on Investment"}     value="37.0" unit="%"/>
        <KpiCard label={isAr ? "معدل العائد الداخلي (IRR)"   : "Internal Rate of Return"} value="31.5" unit="%" featured/>
        <KpiCard label={isAr ? "صافي القيمة الحالية"          : "Net Present Value"}      value="1.7"  unit={isAr ? "م.ر.س" : "M SAR"}/>
        <KpiCard label={isAr ? "فترة الاسترداد"               : "Payback"}                value="9.0"  unit={isAr ? "سنوات" : "yrs"}/>
      </div>

      <div className="r-verdict" style={{ marginTop: 24 }}>
        <div className="rv-icon"><Icon name="check" size={22} stroke={2.5}/></div>
        <div>
          <div className="rv-l">{isAr ? "التوصية الاستثمارية" : "Investment recommendation"}</div>
          <div className="rv-v">
            {isAr
              ? "المضي في دراسة الاستثمار والتحقق النهائي قبل الشراء"
              : "Proceed with investment study and final verification before purchase"}
          </div>
          <p className="rv-p">
            {isAr
              ? "يظهر المشروع عائداً أعلى من متوسط السوق ويقع في موقع استراتيجي مدعوم بقربه من مسارات النقل والخدمات. تقييم دؤوب: فرصة قوية — 82 من 100."
              : "The project shows a return above market average and sits in a strategic location supported by proximity to transit and services. Daoob score: Strong opportunity — 82/100."}
          </p>
        </div>
      </div>

      <Section no="02" h={isAr ? "نظرة عامة" : "Project Overview"}>
        <div className="r-deflist">
          <div><span>{isAr ? "نوع المشروع" : "Project type"}</span>      <strong>{isAr ? "سكني تجاري" : "Mixed-use (res/com)"}</strong></div>
          <div><span>{isAr ? "الموقع" : "Location"}</span>                  <strong>{isAr ? "العليا، الرياض" : "Olaya, Riyadh"}</strong></div>
          <div><span>{isAr ? "مساحة الأرض" : "Land area"}</span>            <strong>750 {isAr ? "م²" : "m²"}</strong></div>
          <div><span>{isAr ? "إجمالي المسطحات" : "Total built area"}</span> <strong>2,250 {isAr ? "م²" : "m²"}</strong></div>
          <div><span>{isAr ? "الحد الأقصى للأدوار" : "Max floors"}</span>   <strong>5 {isAr ? "أدوار" : "floors"}</strong></div>
          <div><span>{isAr ? "معامل البناء (FAR)" : "FAR"}</span>            <strong>3.0</strong></div>
          <div><span>{isAr ? "نسبة التغطية" : "Coverage"}</span>             <strong>60%</strong></div>
          <div><span>{isAr ? "الارتدادات" : "Setbacks"}</span>                <strong>5 / 3 / 3 m</strong></div>
          <div><span>{isAr ? "عدد الواجهات" : "Frontages"}</span>             <strong>2</strong></div>
          <div><span>{isAr ? "تاريخ التقرير" : "Report date"}</span>         <strong>{isAr ? meta.date_ar : meta.date_en}</strong></div>
        </div>
      </Section>
    </div>
    <RFooter meta={meta} page="2" isAr={isAr}/>
  </section>
);

// ============================ PAGE 3 — Market & Location ============================
const ReportMarket = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="03">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="03" h={isAr ? "قراءة السوق والموقع" : "Market & Location Analysis"}>
        <p className="r-p">
          {isAr
            ? "يقع العقار في حي العليا، أحد أكثر الأحياء التجارية حيوية في الرياض. يتميز الموقع بقربه من محطة مترو العليا على الخط الأزرق، إضافة إلى قربه من برج المملكة، مركز الفيصلية، ومركز الملك عبدالله المالي. كما تعكس مؤشرات السوق ارتفاعاً في أسعار الأراضي خلال السنة الأخيرة وعلى مدى ثلاث سنوات."
            : "The property sits in Olaya — one of Riyadh's most active commercial districts — near Olaya metro station on the Blue Line, alongside Kingdom Tower, Al Faisaliah Centre and KAFD. Market indicators reflect rising land prices over the past year and the past three years."}
        </p>
      </Section>

      <Section no="04" h={isAr ? "مؤشرات السوق العقاري" : "Market indicators"}>
        <table className="r-table">
          <thead>
            <tr>
              <th>{isAr ? "المؤشر" : "Indicator"}</th>
              <th className="num">{isAr ? "القيمة" : "Value"}</th>
              <th>{isAr ? "المؤشر" : "Indicator"}</th>
              <th className="num">{isAr ? "القيمة" : "Value"}</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>{isAr ? "متوسط سعر الأرض" : "Avg. land price"}</td>           <td className="num">{isAr ? "7,500 ر.س/م²" : "7,500 SAR/m²"}</td>  <td>{isAr ? "متوسط الإيجار التجاري" : "Avg. commercial rent"}</td><td className="num">{isAr ? "1,200 ر.س/م²" : "1,200 SAR/m²"}</td></tr>
            <tr><td>{isAr ? "معدل الإشغال" : "Occupancy"}</td>                     <td className="num">92%</td>                                       <td>{isAr ? "اتجاه الأسعار سنة" : "12-mo price trend"}</td>      <td className="num">+8.5%</td></tr>
            <tr><td>{isAr ? "اتجاه الأسعار 3 سنوات" : "3-yr price trend"}</td>     <td className="num">+22.0%</td>                                    <td>{isAr ? "معدل الرسملة" : "Cap rate"}</td>                  <td className="num">7.5%</td></tr>
            <tr><td>{isAr ? "السكان ضمن 2 كم" : "Population within 2 km"}</td>     <td className="num">45,000</td>                                    <td>{isAr ? "متوسط دخل الأسرة" : "Avg. household income"}</td><td className="num">{isAr ? "18,000 ر.س/شهر" : "18,000 SAR/mo"}</td></tr>
            <tr><td>{isAr ? "أقرب محطة مترو" : "Nearest metro"}</td>               <td className="num">{isAr ? "الخط الأزرق — 800 م" : "Blue Line — 800 m"}</td><td>{isAr ? "طبيعة الطلب" : "Demand profile"}</td>          <td className="num">{isAr ? "تجاري وسكني مرتفع" : "High mixed-use"}</td></tr>
          </tbody>
        </table>
      </Section>

      <div className="r-2col" style={{ marginTop: 24 }}>
        <div>
          <h3 className="r-section-h r-small">{isAr ? "نقاط القوة" : "Strengths"}</h3>
          <div className="r-rule"/>
          <ul className="r-list r-list-tight">
            {(isAr ? [
              "موقع استراتيجي على محور رئيسي",
              "قرب الخدمات والمرافق الحيوية",
              "طلب مرتفع على الوحدات التجارية",
              "قرب محطة مترو بمسافة 800 م"
            ] : [
              "Strategic location on a primary axis",
              "Proximity to key amenities and services",
              "High demand for commercial units",
              "Metro station within 800 m"
            ]).map((it, i) => (
              <li key={i}>
                <Icon name="check" size={11} stroke={2.5}/>
                <div><strong>{it}</strong></div>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3 className="r-section-h r-small">{isAr ? "التحديات" : "Challenges"}</h3>
          <div className="r-rule"/>
          <ul className="r-list r-list-tight">
            {(isAr ? [
              "منافسة عالية في المنطقة",
              "أسعار أراضٍ مرتفعة نسبياً",
              "اشتراطات بناء تحتاج تحققاً نهائياً",
              "حركة مرور كثيفة في أوقات الذروة"
            ] : [
              "High competition in the area",
              "Relatively high land prices",
              "Building regulations need final verification",
              "Heavy traffic at peak hours"
            ]).map((it, i) => (
              <li key={i}>
                <Icon name="x" size={11} stroke={2.5}/>
                <div><strong>{it}</strong></div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <p className="r-p" style={{ marginTop: 20, padding: "12px 14px", background: "var(--paper-2)", borderRadius: 4, fontWeight: 500 }}>
        {isAr
          ? "خلاصة الموقع: مناسب لمشروع سكني تجاري متوسط الحجم، بشرط ضبط تكلفة الدخول والتحقق من الاشتراطات النهائية قبل اتخاذ قرار الشراء أو التطوير."
          : "Location verdict: suitable for a mid-size mixed-use development — subject to controlling entry cost and verifying final regulations before purchase or development."}
      </p>
    </div>
    <RFooter meta={meta} page="3" isAr={isAr}/>
  </section>
);

// ============================ PAGE 4 — Detailed Financial Analysis ============================
const ReportFin = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="04">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="05" h={isAr ? "التحليل المالي التفصيلي" : "Detailed Financial Analysis"}>
        <p className="r-p">{isAr ? "توزيع هيكل التكاليف بين الأرض، البناء، والمصاريف التطويرية." : "Breakdown of project costs across land, construction and development."}</p>
      </Section>

      <div className="r-2col" style={{ marginTop: 8 }}>
        <div>
          <h3 className="r-section-h r-small">{isAr ? "هيكل التكاليف" : "Cost Structure"}</h3>
          <div className="r-rule"/>
          <table className="r-table">
            <thead>
              <tr>
                <th>{isAr ? "البند" : "Item"}</th>
                <th className="num">{isAr ? "المبلغ (ر.س)" : "Amount (SAR)"}</th>
                <th className="num">{isAr ? "%" : "%"}</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>{isAr ? "تكلفة الأرض" : "Land cost"}</td>                  <td className="num">5,625,000</td><td className="num">37%</td></tr>
              <tr><td>{isAr ? "تكلفة البناء" : "Construction"}</td>                <td className="num">7,875,000</td><td className="num">52%</td></tr>
              <tr><td>{isAr ? "رسوم التصميم" : "Design fees"}</td>                <td className="num">393,750</td>  <td className="num">3%</td></tr>
              <tr><td>{isAr ? "رسوم الإشراف" : "Supervision"}</td>                <td className="num">236,250</td>  <td className="num">2%</td></tr>
              <tr><td>{isAr ? "التراخيص والتصاريح" : "Permits"}</td>              <td className="num">85,000</td>   <td className="num">1%</td></tr>
              <tr><td>{isAr ? "البنية التحتية" : "Infrastructure"}</td>           <td className="num">120,000</td>  <td className="num">1%</td></tr>
              <tr><td>{isAr ? "احتياطي الطوارئ" : "Contingency"}</td>             <td className="num">871,000</td>  <td className="num">6%</td></tr>
              <tr className="r-total"><td>{isAr ? "إجمالي تكلفة المشروع" : "Total project cost"}</td><td className="num">15,206,000</td><td className="num">100%</td></tr>
            </tbody>
          </table>
        </div>
        <div>
          <h3 className="r-section-h r-small">{isAr ? "هيكل الإيرادات السنوية" : "Annual Revenue Structure"}</h3>
          <div className="r-rule"/>
          <table className="r-table">
            <thead>
              <tr>
                <th>{isAr ? "البند" : "Item"}</th>
                <th className="num">{isAr ? "المبلغ (ر.س)" : "Amount (SAR)"}</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>{isAr ? "إجمالي الإيجار السنوي" : "Gross annual rent"}</td>                       <td className="num">2,160,000</td></tr>
              <tr><td>{isAr ? "خصم الشواغر 8%" : "Vacancy allowance (8%)"}</td>                          <td className="num">(172,800)</td></tr>
              <tr className="subtotal"><td>{isAr ? "صافي الإيجار الفعّال" : "Net effective rent"}</td>   <td className="num">1,987,200</td></tr>
              <tr><td>{isAr ? "مصاريف التشغيل والصيانة 15%" : "OPEX & maintenance (15%)"}</td>           <td className="num">(298,080)</td></tr>
              <tr className="r-total"><td>{isAr ? "صافي الدخل التشغيلي (NOI)" : "Net Operating Income"}</td><td className="num">1,689,120</td></tr>
            </tbody>
          </table>

          <h3 className="r-section-h r-small" style={{ marginTop: 16 }}>{isAr ? "هيكل التمويل المقترح" : "Proposed Financing"}</h3>
          <div className="r-rule"/>
          <table className="r-table">
            <tbody>
              <tr><td>{isAr ? "التمويل الذاتي 30%" : "Equity (30%)"}</td>          <td className="num">4,561,800</td></tr>
              <tr><td>{isAr ? "القرض البنكي 70%" : "Bank loan (70%)"}</td>          <td className="num">10,644,200</td></tr>
              <tr><td>{isAr ? "معدل الفائدة السنوية" : "Annual interest rate"}</td><td className="num">6.5%</td></tr>
              <tr><td>{isAr ? "مدة القرض" : "Loan term"}</td>                       <td className="num">15 {isAr ? "سنة" : "yrs"}</td></tr>
              <tr><td>{isAr ? "القسط السنوي" : "Annual installment"}</td>           <td className="num">1,132,040</td></tr>
              <tr className="r-total"><td>{isAr ? "صافي التدفق بعد خدمة الدين" : "Cash flow after debt service"}</td><td className="num">557,080</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <RFooter meta={meta} page="4" isAr={isAr}/>
  </section>
);

// ============================ PAGE 5 — Performance + Scenarios ============================
const ReportPerf = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="05">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="06" h={isAr ? "مؤشرات الأداء الاستثماري" : "Investment Performance"}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 12 }}>
          {[
            { k: isAr ? "معدل الرسملة" : "Cap rate",          v: "11.1%",  rate: isAr ? "جيد" : "Good" },
            { k: isAr ? "العائد على الملكية" : "ROE",          v: "37.0%",  rate: isAr ? "ممتاز" : "Excellent", featured: true },
            { k: isAr ? "العائد النقدي" : "Cash-on-cash",      v: "12.2%",  rate: isAr ? "جيد" : "Good" },
            { k: isAr ? "فترة الاسترداد" : "Payback period",   v: "9.0",    rate: isAr ? "سنة" : "yrs" },
            { k: isAr ? "معدل العائد الداخلي" : "IRR",         v: "31.5%",  rate: isAr ? "ممتاز" : "Excellent", featured: true },
            { k: isAr ? "مكسب رأس المال" : "Capital gain",     v: "7.31",   rate: isAr ? "م.ر.س" : "M SAR" },
          ].map((k, i) => (
            <div key={i} className={"report-kpi" + (k.featured ? " featured" : "")} style={{ padding: 16, background: k.featured ? "var(--green-700)" : "var(--paper-2)", color: k.featured ? "#fff" : "inherit", border: "1px solid var(--hairline)", borderRadius: 4 }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: k.featured ? "var(--gold-400)" : "var(--ink-500)" }}>{k.k}</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 28, marginTop: 6, color: k.featured ? "var(--gold-400)" : "var(--green-700)" }}>{k.v}</div>
              <div style={{ fontSize: 11, color: k.featured ? "rgba(232,214,168,0.7)" : "var(--ink-500)", marginTop: 2 }}>{k.rate}</div>
            </div>
          ))}
        </div>
      </Section>

      <Section no="07" h={isAr ? "تحليل السيناريوهات" : "Scenario Analysis"}>
        <table className="r-table">
          <thead>
            <tr>
              <th>{isAr ? "المؤشر" : "Indicator"}</th>
              <th className="num">{isAr ? "متحفظ" : "Bear"}</th>
              <th className="num">{isAr ? "أساسي" : "Base"}</th>
              <th className="num">{isAr ? "متفائل" : "Bull"}</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>{isAr ? "معدل الإشغال" : "Occupancy"}</td>                          <td className="num">82%</td>      <td className="num">92%</td>      <td className="num">95%</td></tr>
            <tr><td>{isAr ? "الإيجار م² سنوياً" : "Rent SAR/m²/yr"}</td>                <td className="num">1,020</td>    <td className="num">1,200</td>    <td className="num">1,380</td></tr>
            <tr><td>{isAr ? "صافي الدخل التشغيلي" : "NOI (SAR)"}</td>                   <td className="num">1,279,692</td><td className="num">1,689,120</td><td className="num">2,005,830</td></tr>
            <tr><td>{isAr ? "العائد على الملكية" : "ROE"}</td>                           <td className="num">28.1%</td>    <td className="num">37.0%</td>    <td className="num">44.0%</td></tr>
            <tr><td>{isAr ? "فترة الاسترداد" : "Payback (years)"}</td>                  <td className="num">11.9</td>     <td className="num">9.0</td>      <td className="num">7.6</td></tr>
          </tbody>
        </table>
      </Section>

      <Section no="08" h={isAr ? "العوائد المتوقعة (5 سنوات)" : "Expected Returns (5 years)"}>
        <RevenueChart isAr={isAr}/>
      </Section>
    </div>
    <RFooter meta={meta} page="5" isAr={isAr}/>
  </section>
);

// ============================ PAGE 6 — Risks & Recommendations ============================
const ReportRisks = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="06">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="09" h={isAr ? "المخاطر والتحديات" : "Risks & Challenges"}>
        <div className="r-risks">
          {(isAr ? [
            { l: "مخاطر السوق",                      v: "متوسطة", p: 55, c: "med",
              d: "تباطؤ الطلب على العقارات التجارية في حال تراجع الاقتصاد. التخفيف: تنويع المستأجرين وعقود طويلة الأجل." },
            { l: "مخاطر تنظيمية",                   v: "منخفضة", p: 25, c: "low",
              d: "تغيّر اشتراطات البناء أو الرسوم التنظيمية. التخفيف: متابعة التحديثات والتحقق من الجهة المختصة قبل الالتزام النهائي." },
            { l: "مخاطر التشغيل",                   v: "متوسطة", p: 50, c: "med",
              d: "صعوبة تأجير المساحات أو ارتفاع تكاليف الصيانة. التخفيف: استهداف مستأجرين رئيسيين قبل بدء البناء." },
            { l: "مخاطر التمويل والتنفيذ",            v: "منخفضة–متوسطة", p: 40, c: "med",
              d: "ارتفاع أسعار الفائدة أو تأخر البناء أو تجاوز التكاليف. التخفيف: تثبيت الفائدة عند التعاقد وإضافة احتياطي طوارئ." },
          ] : [
            { l: "Market risk",                       v: "Medium", p: 55, c: "med",
              d: "Slowdown in commercial demand during economic downturn. Mitigation: diversify tenants and use long-term leases." },
            { l: "Regulatory risk",                  v: "Low",    p: 25, c: "low",
              d: "Changes to building regulations or fees. Mitigation: monitor updates and verify with authorities before final commitment." },
            { l: "Operational risk",                  v: "Medium", p: 50, c: "med",
              d: "Difficulty leasing space or higher maintenance costs. Mitigation: secure anchor tenants before construction." },
            { l: "Financing & execution risk",        v: "Low–Med",p: 40, c: "med",
              d: "Rising rates, construction delays, or cost overruns. Mitigation: lock in interest at contract and budget a contingency reserve." },
          ]).map((r, i) => (
            <div className="r-risk" key={i}>
              <div className="r-risk-top">
                <span className="r-risk-l">{r.l}</span>
                <span className={"r-risk-v " + r.c}>{r.v}</span>
              </div>
              <div className="r-risk-bar"><div style={{ width: r.p + "%" }} className={"fill " + r.c}/></div>
              <p style={{ fontSize: 12, color: "var(--ink-500)", marginTop: 6, lineHeight: 1.55 }}>{r.d}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section no="10" h={isAr ? "التوصيات" : "Recommendations"}>
        <ol style={{ listStyle: "none", padding: 0, margin: 0, counterReset: "rec" }}>
          {(isAr ? [
            "المضي في الاستثمار عند الوصول إلى سعر دخول مناسب يؤكد جدوى المؤشرات المالية.",
            "تأمين التمويل البنكي قبل شراء الأرض للحصول على شروط تمويل واضحة.",
            "استكمال دراسة التربة والمسح الطبوغرافي قبل مرحلة التصميم.",
            "التعاقد مع مكتب هندسي متخصص لتحقيق كفاءة أعلى في المساحات والتكاليف.",
            "البحث عن مستأجرين رئيسيين قبل بدء البناء لتقليل مخاطر الإشغال.",
            "متابعة مشاريع مترو الرياض والبنية التحتية المحيطة لتعظيم قيمة العقار.",
          ] : [
            "Proceed with the investment at an entry price that confirms the financial indicators.",
            "Secure bank financing before purchasing the land to lock in clear terms.",
            "Complete soil study and topographic survey before the design stage.",
            "Engage a specialised architecture firm to maximise space and cost efficiency.",
            "Pre-lease to anchor tenants before construction to reduce vacancy risk.",
            "Monitor Riyadh metro and surrounding infrastructure projects to maximise property value.",
          ]).map((r, i) => (
            <li key={i} style={{
              counterIncrement: "rec",
              padding: "10px 14px 10px 44px",
              borderBottom: "1px solid var(--hairline)",
              position: "relative",
              fontSize: 13,
              lineHeight: 1.65,
            }}>
              <span style={{
                position: "absolute",
                insetInlineStart: 14,
                top: 10,
                fontFamily: "var(--font-mono)",
                fontSize: 12,
                color: "var(--gold-700)",
                fontWeight: 600,
              }}>{String(i + 1).padStart(2, "0")}</span>
              {r}
            </li>
          ))}
        </ol>
      </Section>
    </div>
    <RFooter meta={meta} page="6" isAr={isAr}/>
  </section>
);

// ============================ PAGE 7 — Methodology + Disclaimer ============================
const ReportMethod = ({ meta, isAr }) => (
  <section className="r-page r-content" data-page="07">
    <Watermark isAr={isAr}/>
    <RHeader isAr={isAr}/>
    <div className="r-body">
      <Section no="11" h={isAr ? "المنهجية وحدود التقرير" : "Methodology & Scope"}>
        <p className="r-p">
          {isAr
            ? "اعتمد التقرير على البيانات المتاحة ومدخلات العقار، ثم عالجتها نماذج تحليلية ووكلاء ذكاء اصطناعي متخصصون في قراءة الموقع، السوق، التكاليف، الإيرادات، المخاطر، والسيناريوهات. تُستخدم النتائج كدعم لاتخاذ القرار ولا تغني عن التحقق المهني المستقل عند الحاجة."
            : "This report draws on available data and property inputs, processed through analytical models and AI agents specialised in reading location, market, cost, revenue, risk, and scenarios. Results support — but do not replace — independent professional verification when needed."}
        </p>
      </Section>

      <Section no="12" h={isAr ? "مراحل إعداد التقرير" : "Report production steps"}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10, marginTop: 12 }}>
          {(isAr ? [
            "إدخال بيانات العقار",
            "تحليل الموقع والسوق",
            "نمذجة التكاليف والعوائد",
            "تقييم المخاطر",
            "إصدار التقرير",
          ] : [
            "Property data input",
            "Location & market analysis",
            "Cost & return modelling",
            "Risk assessment",
            "Report issuance",
          ]).map((s, i) => (
            <div key={i} style={{ textAlign: "center", padding: 14, background: "var(--paper-2)", borderRadius: 4 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold-700)", marginBottom: 6 }}>0{i + 1}</div>
              <div style={{ fontSize: 12, fontWeight: 500, lineHeight: 1.4 }}>{s}</div>
            </div>
          ))}
        </div>
      </Section>

      <div className="r-disclaimer">
        <strong>{isAr ? "إخلاء مسؤولية: " : "Disclaimer: "}</strong>
        {isAr
          ? "هذا التقرير استرشادي ومبني على البيانات المتاحة والذكاء الاصطناعي. لا يُعد بديلاً عن التقييم العقاري الرسمي من مقيّم معتمد، أو الاستشارة القانونية، أو الاستشارة المالية، أو الاستشارة الهندسية المتخصصة. القرارات الاستثمارية مسؤولية المستثمر، ويُنصح بالتحقق المستقل قبل اتخاذ أي التزام مالي."
          : "This report is advisory and based on available data and AI analysis. It is not a substitute for an official appraisal from a certified valuer, legal counsel, financial advice, or specialised engineering consultation. Investment decisions remain the investor's responsibility, and independent verification is recommended before any financial commitment."}
      </div>

      <div style={{ marginTop: 24, padding: 16, background: "var(--green-50)", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold-700)", letterSpacing: "0.06em" }}>daoob-ai.com · wecare@daoob-ai.com</div>
          <div style={{ fontSize: 12, color: "var(--green-700)", marginTop: 4, fontWeight: 500 }}>{isAr ? "تقرير تحليل وجدوى عقارية — مدعوم بالذكاء الاصطناعي" : "Real-estate feasibility report — AI-powered"}</div>
        </div>
        <img src={((window.DAOOB_THEME && window.DAOOB_THEME.themeUrl)?window.DAOOB_THEME.themeUrl+"/assets/img/":"assets/")+"daoob-mark.png"} alt="" style={{ width: 36, height: "auto" }}/>
      </div>
    </div>
    <RFooter meta={meta} page="7" isAr={isAr}/>
  </section>
);

// ============================ Shared sub-components ============================
const Watermark = ({ isAr }) => (
  <div className="r-watermark">{isAr ? "نموذج توضيحي · دؤوب" : "ILLUSTRATIVE · DAOOB"}</div>
);
const RHeader = ({ isAr }) => (
  <header className="r-header">
    <img src={((window.DAOOB_THEME && window.DAOOB_THEME.themeUrl)?window.DAOOB_THEME.themeUrl+"/assets/img/":"assets/")+"daoob-mark.png"} alt="" className="r-header-mark"/>
    <div className="r-header-title">{isAr ? "تقرير تحليل وجدوى عقارية" : "Real-estate feasibility study"}</div>
  </header>
);
const RFooter = ({ meta, page, isAr }) => (
  <footer className="r-footer">
    <span>{isAr ? "دؤوب العقارية" : "Daoob Real Estate"} · {meta.ref}</span>
    <span className="r-foot-disclaimer">
      {isAr ? "⚠ تقرير استرشادي — ليس بديلاً عن تقييم معتمد" : "⚠ Advisory — not a substitute for certified appraisal"}
    </span>
    <span>{isAr ? `صفحة ${page} من 7` : `Page ${page} of 7`}</span>
  </footer>
);
const Section = ({ no, h, children }) => (
  <section className="r-section">
    <div className="r-section-h">
      <span className="r-section-n">{no}</span>
      <h3>{h}</h3>
    </div>
    {children}
  </section>
);
const KpiCard = ({ label, value, unit, featured }) => (
  <div className={"r-kpi" + (featured ? " featured" : "")}>
    <div className="r-kpi-v">{value}<small>{unit}</small></div>
    <div className="r-kpi-l">{label}</div>
  </div>
);
const RevenueChart = ({ isAr }) => {
  const rows = [
    { y: 1, rev: 25, profit: 5  },
    { y: 2, rev: 38, profit: 12 },
    { y: 3, rev: 58, profit: 22 },
    { y: 4, rev: 75, profit: 34 },
    { y: 5, rev: 92, profit: 48 },
  ];
  const W = 600, H = 200, padL = 40, padR = 16, padT = 20, padB = 36;
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;
  const step = innerW / rows.length;
  const maxV = 100;
  const ySc = (v) => padT + innerH * (1 - v / maxV);
  return (
    <div className="r-chart">
      <div className="r-chart-legend">
        <span><span className="sw" style={{ background: "#0F3D2E" }}/>{isAr ? "إيرادات" : "Revenue"} <small>{isAr ? "م.ر.س" : "M SAR"}</small></span>
        <span><span className="sw line" style={{ background: "#C9A266" }}/>{isAr ? "صافي الربح" : "Net profit"} <small>{isAr ? "م.ر.س" : "M SAR"}</small></span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%">
        {[0, 25, 50, 75, 100].map(v => (
          <g key={v}>
            <line x1={padL} y1={ySc(v)} x2={W - padR} y2={ySc(v)} stroke="#E8DFC9" strokeWidth="0.6"/>
            <text x={padL - 8} y={ySc(v) + 3} textAnchor="end" fontSize="9" fill="#7A7066" fontFamily="var(--font-mono)">{v}</text>
          </g>
        ))}
        {rows.map((d, i) => {
          const cx = padL + step * (i + 0.5);
          const bw = step * 0.34;
          return (
            <g key={i}>
              <rect x={cx - bw / 2} y={ySc(d.rev)} width={bw} height={H - padB - ySc(d.rev)} fill="#0F3D2E" rx="2"/>
              <text x={cx} y={H - 14} textAnchor="middle" fontSize="10" fill="#5A5247">{isAr ? `س.${d.y}` : `Yr ${d.y}`}</text>
              <text x={cx} y={ySc(d.rev) - 4} textAnchor="middle" fontSize="9" fill="#0F3D2E" fontFamily="var(--font-mono)">{d.rev}</text>
            </g>
          );
        })}
        <path
          d={rows.map((d, i) => `${i === 0 ? "M" : "L"} ${padL + step * (i + 0.5)} ${ySc(d.profit)}`).join(" ")}
          fill="none" stroke="#C9A266" strokeWidth="2.5"
        />
        {rows.map((d, i) => (
          <circle key={i} cx={padL + step * (i + 0.5)} cy={ySc(d.profit)} r="4" fill="#C9A266" stroke="#fff" strokeWidth="1.5"/>
        ))}
      </svg>
    </div>
  );
};
const CircuitDecor = ({ pos }) => (
  <div className={"r-circuit r-circuit-" + pos}>
    <svg viewBox="0 0 120 120" width="120" height="120" fill="none">
      <g stroke="#0F3D2E" strokeWidth="0.7" opacity="0.45">
        <path d="M 10 30 L 40 30 L 40 60 L 70 60"/>
        <path d="M 10 50 L 30 50 L 30 80 L 60 80"/>
        <path d="M 10 75 L 50 75"/>
        <path d="M 60 10 L 60 35 L 90 35"/>
        <path d="M 80 10 L 80 25"/>
      </g>
      <g fill="#0F3D2E" opacity="0.5">
        <circle cx="40" cy="30" r="2"/>
        <circle cx="70" cy="60" r="2.5"/>
        <circle cx="60" cy="80" r="2"/>
        <circle cx="80" cy="25" r="2"/>
      </g>
      <g fill="#C9A266">
        <circle cx="10" cy="30" r="1.8"/>
        <circle cx="10" cy="50" r="1.8"/>
        <circle cx="10" cy="75" r="1.8"/>
      </g>
    </svg>
  </div>
);

Object.assign(window, { Report });