/* global React */
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

/* ============================================================
   Only One Design — Pages
   ============================================================ */

const MEDIA = {
  kaftan: "media/d3-directory-only-one-design.webp",
  interior: "media/bestthings-only-one-design-interior.webp",
};

const STOCK = [
  { src: "media/stock-tailor-measuring-suit.webp",   label: "Measuring",      cat: "fitting"   },
  { src: "media/stock-fabric-bolts-rolls.webp",      label: "Fabric bolts",   cat: "material"  },
  { src: "media/stock-tailor-at-work-hands.webp",    label: "Hands at work",  cat: "atelier"   },
  { src: "media/stock-needle-thread-handsew.webp",   label: "Hand-finishing", cat: "atelier"   },
  { src: "media/stock-suit-jacket-detail.webp",      label: "Jacket detail",  cat: "garment"   },
  { src: "media/stock-fabric-swatch-stack.webp",     label: "Swatches",       cat: "material"  },
  { src: "media/stock-buttons-suit-cuff.webp",       label: "Cuff buttons",   cat: "garment"   },
  { src: "media/stock-folded-fabric-textures.webp",  label: "Textures",       cat: "material"  },
  { src: "media/stock-tailoring-tools-scissors.webp",label: "Shears",         cat: "atelier"   },
  { src: "media/stock-thread-spools-color.webp",     label: "Thread",         cat: "material"  },
  { src: "media/stock-measuring-tape-detail.webp",   label: "Measure",        cat: "atelier"   },
  { src: "media/stock-sewing-machine-atelier.webp",  label: "Machine",        cat: "atelier"   },
  { src: "media/stock-mannequin-dress-form.webp",    label: "Dress form",     cat: "fitting"   },
  { src: "media/stock-bespoke-suit-fitting.webp",    label: "Fitting",        cat: "fitting"   },
  { src: "media/stock-suit-pocket-square.webp",      label: "Pocket detail",  cat: "garment"   },
  { src: "media/stock-mens-suit-rack.webp",          label: "Suit rack",      cat: "garment"   },
  { src: "media/stock-atelier-workspace.webp",       label: "Workspace",      cat: "atelier"   },
  { src: "media/stock-wool-fabric-roll.webp",        label: "Wool",           cat: "material"  },
  { src: "media/stock-luxury-shirt-folded.webp",     label: "Shirt",          cat: "garment"   },
  { src: "media/stock-wardrobe-hangers-row.webp",    label: "Hangers",        cat: "garment"   },
];

/* ============================================================
   HOME
   ============================================================ */
function HomePage({ onNav, locale, callConfirmed, waConfirmed }) {
  const ar = locale === "ar";
  return (
    <main className="page-enter" data-screen-label="01 Home">
      <section className="container hero">
        <div className="hero-grid">
          <div>
            <Eyebrow>{ar ? "أتيليه في حي دبي للتصميم" : "Atelier · Dubai Design District"}</Eyebrow>
            <h1 className="display display-xl">
              {ar
                ? <>أتيليه ملابس<br/>وخياطة بالموعد<br/>في <i style={{color:"var(--secondary)"}}>حي دبي للتصميم</i>.</>
                : <>Apparel &amp; tailoring,<br/>by appointment,<br/>in <i style={{color:"var(--secondary)"}}>Dubai Design District</i>.</>
              }
            </h1>
            <p className="lead">
              {ar
                ? "استوديو هادئ بأسلوب الجاليري للملابس والخياطة في d3. كل زيارة تتم بموعد مسبق."
                : "A quiet, gallery-style studio for apparel and tailoring in d3. Every visit is scheduled — please request a time before arriving."}
            </p>
            <div className="flex-row" style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => onNav("appointments")}>
                {ar ? "احجز موعدًا" : "Book an Appointment"} <span aria-hidden>→</span>
              </button>
              <button className={"btn btn-ghost" + (callConfirmed ? "" : " btn-disabled")}
                      onClick={() => callConfirmed && (window.location.href = "tel:+97144362671")}
                      aria-disabled={!callConfirmed}>
                {ar ? "اتصل بالأستوديو" : "Call the Studio"} {!callConfirmed && <Flag>pending</Flag>}
              </button>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Flag>CLIENT-FILL · sector wording</Flag>
              <Flag kind="brass">No prices · No ratings published</Flag>
            </div>
          </div>
          <div className="hero-image">
            <img src={MEDIA.kaftan} alt="Pleated sage-silk kaftan, directory image" />
            <div className="hero-image-caption">d3 directory image · placeholder</div>
          </div>
        </div>
      </section>

      <TrustStrip locale={locale} />

      {/* Studio intro */}
      <section className="container section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 56 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40 }} className="intro-grid">
            <div>
              <Eyebrow>{ar ? "تعريف" : "Introduction"}</Eyebrow>
              <h2 className="display display-l" style={{ marginTop: 18, maxWidth: "18ch" }}>
                {ar ? "حرفة هادئة، ضوء أبيض، فضاء قصدي." : "Quiet craft, white light, considered space."}
              </h2>
            </div>
            <div>
              <p className="lead" style={{ marginTop: 0 }}>
                {ar
                  ? "نعمل بالموعد فقط، عميلًا واحدًا في كل مرة. تأخذ الجلسة وقتها — قياسات، أقمشة، رؤية — قبل أن تبدأ القطعة."
                  : "We work by appointment, one client at a time. Sessions take their time — measurements, materials, conversation — before any garment begins."}
              </p>
              <div style={{ marginTop: 24 }}>
                <button className="btn btn-link" onClick={() => onNav("atelier")}>{ar ? "تعرّف على الاستوديو" : "About the studio"}</button>
              </div>
              <div style={{ marginTop: 28 }}>
                <Flag>CLIENT-FILL · founder / philosophy</Flag>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (min-width: 900px) {
          .intro-grid { grid-template-columns: 1fr 1.2fr !important; gap: 96px !important; }
        }
      `}</style>

      {/* Service teaser */}
      <section className="container section">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
          <div>
            <Eyebrow>{ar ? "الخدمات" : "Services"}</Eyebrow>
            <h2 className="display display-l" style={{ marginTop: 14, marginBottom: 0, maxWidth: "16ch" }}>
              {ar ? "إطار قابل للملء من قِبَل العميل." : "A framework, filled in with the client."}
            </h2>
          </div>
          <button className="btn btn-link" onClick={() => onNav("services")}>{ar ? "كل الخدمات" : "All services"}</button>
        </div>

        <ServiceGrid locale={locale} compact />
      </section>

      {/* Process teaser */}
      <section className="container section">
        <Eyebrow>{ar ? "المسار" : "Process"}</Eyebrow>
        <h2 className="display display-l" style={{ marginTop: 14, marginBottom: 32, maxWidth: "20ch" }}>
          {ar ? "ست خطوات هادئة، من الاستفسار إلى الاستلام." : "Six quiet steps, from enquiry to collection."}
        </h2>
        <ProcessSteps locale={locale} short />
        <div style={{ marginTop: 28 }}>
          <button className="btn btn-link" onClick={() => onNav("process")}>{ar ? "تفاصيل المسار" : "See the full process"}</button>
        </div>
      </section>

      {/* Lookbook teaser */}
      <section className="container section">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap", marginBottom: 32 }}>
          <div>
            <Eyebrow>{ar ? "المعرض" : "Lookbook"}</Eyebrow>
            <h2 className="display display-l" style={{ marginTop: 14, marginBottom: 0, maxWidth: "20ch" }}>
              {ar ? "صور توضيحية الآن — حتى يصل العميل بصوره." : "Representative now — real client work to follow."}
            </h2>
          </div>
          <button className="btn btn-link" onClick={() => onNav("lookbook")}>{ar ? "افتح المعرض" : "Open lookbook"}</button>
        </div>
        <div className="lookbook" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {[MEDIA.kaftan, ...STOCK.slice(0, 3).map(s => s.src)].map((src, i) => (
            <div key={i} className="lookbook-tile">
              <img src={src} alt="" />
              <div className="tile-label">
                <span className={"tile-meta " + (i === 0 ? "real" : "")}>
                  {i === 0 ? "Directory · placeholder" : "Stock · placeholder"}
                </span>
              </div>
            </div>
          ))}
        </div>
      </section>

      <Callout onNav={onNav} locale={locale} />
    </main>
  );
}

/* ============================================================
   SERVICES
   ============================================================ */
const SERVICES = [
  {
    num: "S/01",
    title: { en: "Consultation", ar: "استشارة" },
    body: { en: "An unhurried first conversation. Brief, vision, references, occasion, timing — then a measured next step.", ar: "محادثة أولى دون استعجال. الموجز، الرؤية، المراجع، المناسبة، التوقيت — ثم خطوة محسوبة." },
    note: "CLIENT-FILL · who attends, what to bring, length",
  },
  {
    num: "S/02",
    title: { en: "Made-to-measure", ar: "تفصيل حسب القياس" },
    body: { en: "A pattern shaped to one body, refined across fittings. Garment categories to be confirmed by the studio.", ar: "نموذج يُصاغ على جسد واحد، يُهذَّب عبر القياسات. تُحدَّد فئات القطع من قِبَل الاستوديو." },
    note: "CLIENT-FILL · confirm exact garments, scope, turnaround",
  },
  {
    num: "S/03",
    title: { en: "Occasion & Traditional", ar: "مناسبات وملابس تقليدية" },
    body: { en: "Pieces for occasions and traditional dress. Specific categories — abaya, kandura, kaftan, gowns — pending client confirmation.", ar: "قطع للمناسبات والزي التقليدي. تبقى الفئات الدقيقة قيد التأكيد." },
    note: "CLIENT-FILL · which traditions / occasions are offered",
  },
  {
    num: "S/04",
    title: { en: "Alterations & Finishing", ar: "تعديلات وتشطيب" },
    body: { en: "Adjustment and finishing of existing pieces — hand-set hems, balance corrections, considered repairs.", ar: "تعديل وتشطيب القطع الموجودة — حواف يدوية، تصحيح التوازن، إصلاحات مدروسة." },
    note: "CLIENT-FILL · scope (own garments vs studio work)",
  },
];

function ServiceGrid({ locale, compact }) {
  const ar = locale === "ar";
  return (
    <div className="grid" style={{ gridTemplateColumns: compact ? "repeat(auto-fit, minmax(240px, 1fr))" : "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
      {SERVICES.map((s) => (
        <article key={s.num} className="service-card">
          <div className="num">{s.num}</div>
          <h3>{ar ? s.title.ar : s.title.en}</h3>
          <p>{ar ? s.body.ar : s.body.en}</p>
          <div className="fill-note">{s.note}</div>
        </article>
      ))}
    </div>
  );
}

function ServicesPage({ onNav, locale }) {
  const ar = locale === "ar";
  return (
    <main className="page-enter" data-screen-label="02 Services">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "الخدمات" : "Services" }]} onNav={onNav} />
      </section>
      <section className="container section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }} className="page-head">
          <div>
            <Eyebrow>{ar ? "خدمات" : "Services"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "18ch" }}>
              {ar ? "خدمات سيُؤكِّدها العميل، لا نخترعها." : "Services the client confirms — not invented."}
            </h1>
          </div>
          <p className="lead">
            {ar
              ? "تظهر هذه الفئات كأطر آمنة وعامة. ستُستبدَل المسميات الفعلية للقطع، الأقمشة، الأسعار، ومُهل التسليم بعد جلسة الإحاطة مع العميل."
              : "These cards are deliberately generic frameworks. Concrete garment names, fabrics, prices, and turnaround windows will be filled in after the client briefing — never assumed."}
          </p>
        </div>
        <div style={{ height: 48 }}></div>
        <ServiceGrid locale={locale} />
        <div className="spacer-48"></div>
        <div className="card" style={{ background: "var(--surface-2)" }}>
          <Eyebrow>{ar ? "ما لن نقوله" : "What we won't claim"}</Eyebrow>
          <h3 className="display display-s" style={{ marginTop: 12 }}>
            {ar ? "بدون مبالغة في القطاع." : "No sector overstatement."}
          </h3>
          <p className="muted" style={{ maxWidth: "70ch" }}>
            {ar
              ? "حتى تأكيد العميل، لن نُعلن \"بدلات رجالية مفصّلة\"، \"عبايات\"، \"كنادير\"، \"فساتين زفاف\"، أو خياطة غربية. الأدلة العامة مختلطة، ونفضّل الصمت على الادعاء."
              : <>Until the client confirms, we will not advertise <i>men's bespoke suits</i>, <i>abayas</i>, <i>kanduras</i>, <i>bridal</i>, or <i>western suiting</i>. Public evidence is mixed — silence is better than a claim.</>}
          </p>
          <div className="flex-row" style={{ marginTop: 20 }}>
            <Flag>CLIENT-FILL · garment mix</Flag>
            <Flag>CLIENT-FILL · turnaround</Flag>
            <Flag>CLIENT-FILL · fabric sources</Flag>
          </div>
        </div>
      </section>
      <Callout onNav={onNav} locale={locale} title={ar ? "للاطلاع على الإمكانات، احجز محادثة." : "To understand what's possible, book a conversation."} />
      <style>{`
        @media (min-width: 900px) {
          .page-head { grid-template-columns: 1.3fr 1fr !important; gap: 64px !important; align-items: end !important; }
        }
      `}</style>
    </main>
  );
}

/* ============================================================
   PROCESS
   ============================================================ */
const STEPS = [
  { en: ["Enquiry", "Request a visit — phone, form, or message. We confirm a time."],
    ar: ["استفسار", "اطلب زيارة — هاتفًا، أو عبر النموذج، أو رسالة. نؤكّد لك الوقت."] },
  { en: ["Consultation", "An unhurried first conversation in the studio. Brief, references, occasion, timing."],
    ar: ["استشارة", "محادثة أولى دون استعجال داخل الاستوديو. الموجز، المراجع، المناسبة، التوقيت."] },
  { en: ["Measurement", "Careful measurements taken in person."],
    ar: ["قياس", "تُؤخذ القياسات بدقّة وشخصيًا."] },
  { en: ["Material", "Materials selected together from the studio's curation."],
    ar: ["الخامة", "نختار الخامات معًا من تشكيلة الاستوديو."] },
  { en: ["Fitting", "One or more fittings, depending on the piece."],
    ar: ["القياس التجريبي", "قياس أو أكثر، بحسب القطعة."] },
  { en: ["Finish & Collection", "Final hand-finishing, pressing, and collection at the studio."],
    ar: ["التشطيب والاستلام", "تشطيب يدوي أخير، كي، ثم الاستلام في الاستوديو."] },
];

function ProcessSteps({ locale, short }) {
  const ar = locale === "ar";
  const items = short ? STEPS.slice(0, 6) : STEPS;
  return (
    <div className="steps">
      {items.map((s, i) => {
        const [title, body] = ar ? s.ar : s.en;
        return (
          <div className="step" key={i}>
            <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
            <h4>{title}</h4>
            <p>{body}</p>
          </div>
        );
      })}
    </div>
  );
}

function ProcessPage({ onNav, locale }) {
  const ar = locale === "ar";
  return (
    <main className="page-enter" data-screen-label="03 Process">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "المسار" : "Process" }]} onNav={onNav} />
      </section>
      <section className="container section">
        <div className="page-head" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
          <div>
            <Eyebrow>{ar ? "المسار" : "Process"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "18ch" }}>
              {ar ? "ست خطوات هادئة، تترك مساحة للوقت." : "Six quiet steps, with time built in."}
            </h1>
          </div>
          <p className="lead">
            {ar
              ? "خطوات عامة ودقيقة. أعداد القياسات الفعلية، ومُهل التسليم، وقوائم الأقمشة، تبقى مفتوحة حتى يؤكدها الأستوديو."
              : "Generic and accurate. The exact number of fittings, the turnaround, and the fabric houses will be filled in by the studio — never guessed."}
          </p>
        </div>
        <div className="spacer-48"></div>
        <ProcessSteps locale={locale} />
        <div className="spacer-48"></div>
        <div className="card">
          <Eyebrow>{ar ? "تفاصيل قابلة للملء" : "Fill-in details"}</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 18, marginTop: 20 }}>
            {["Turnaround window", "Number of fittings", "Fabric house list", "Pickup vs delivery", "Restoration scope"].map((k, i) => (
              <div key={i}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{k}</div>
                <Flag>CLIENT-FILL</Flag>
              </div>
            ))}
          </div>
        </div>
      </section>
      <style>{`
        @media (min-width: 900px) {
          .page-head { grid-template-columns: 1.3fr 1fr !important; gap: 64px !important; align-items: end !important; }
        }
      `}</style>
    </main>
  );
}

Object.assign(window, { HomePage, ServicesPage, ProcessPage, ServiceGrid, ProcessSteps, MEDIA, STOCK });