/* Story + Collections + Makers */

function Story({ t, lang }) {
  return (
    <section style={{ padding: "140px 0 120px", background: "var(--paper)", position: "relative" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <GeoPatternBg color="var(--gold)" opacity={0.05} />
      </div>
      <div className="container-wide" style={{ position: "relative" }}>
        <div className="story-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 30 }}>
              <span className="dot"></span>{t.story_eyebrow}
            </div>
            <div className="ar" style={{
              fontFamily: "var(--ff-ar)", fontSize: "clamp(96px, 22vw, 140px)", lineHeight: 0.95, color: "var(--terracotta)",
              letterSpacing: "-0.02em",
            }}>
              صَنعة
            </div>
            <div style={{
              fontFamily: "var(--ff-mono)", fontSize: 11, letterSpacing: "0.2em",
              textTransform: "uppercase", color: "var(--muted)", marginTop: 18,
            }}>
              /ṣan·ʿa/ · noun · Arabic
            </div>
            <div style={{ marginTop: 10, fontFamily: "var(--ff-display)", fontStyle: "italic", fontSize: 22, color: "var(--olive)" }}>
              the skill held in the hands
            </div>
          </div>

          <div>
            <h2 style={{
              fontFamily: "var(--ff-display)", fontSize: "clamp(48px, 5.5vw, 96px)", lineHeight: 1.02,
              color: "var(--ink)", letterSpacing: "-0.02em", margin: 0,
            }}>
              {t.story_title}<br />
              <span style={{ fontStyle: "italic", color: "var(--olive)" }}>{t.story_title_it}</span>
            </h2>
            <p style={{ marginTop: 40, fontSize: 19, lineHeight: 1.6, color: "var(--olive)", maxWidth: 680 }}>
              {t.story_body}
            </p>

            {/* Three pillars */}
            <div className="story-pillars">
              {[
                { n: "I.", en: "Approved", ar: "منتقاة", d: "Every artisan scored against an eight-point rubric. Fewer than one in five apply and pass.", d_ar: "كلّ صانع يُقيَّم وفق معايير من ثماني نقاط. أقلّ من واحد من كلّ خمسة يتقدّم ويَجتاز." },
                { n: "II.", en: "Packed", ar: "تُغلَّف", d: "Numbered, wax-sealed, wrapped in recycled tissue. One standard, every piece.", d_ar: "مُرقَّمة، مختومة بالشمع، مُغلَّفة بورق مُعاد تدويره. معيار واحد لكلّ قطعة." },
                { n: "III.", en: "Vouched", ar: "مضمونة", d: "Food-safe glazes tested for lead and cadmium. No vague claims on materials, ever.", d_ar: "طلاءات آمنة للطعام، مُختبَرة للرصاص والكادميوم. لا ادّعاءات غامضة حول المواد، أبدًا." },
              ].map((p, i) => (
                <div key={i}>
                  <div style={{ fontFamily: "var(--ff-display)", fontStyle: "italic", fontSize: 36, color: "var(--terracotta)" }}>{p.n}</div>
                  <div style={{ marginTop: 14, display: "flex", alignItems: "baseline", gap: 10 }}>
                    <span style={{ fontFamily: "var(--ff-display)", fontSize: 22, color: "var(--ink)" }}>{p.en}</span>
                    <span className="ar" style={{ fontSize: 18, color: "var(--muted)" }}>{p.ar}</span>
                  </div>
                  <p style={{ marginTop: 10, fontSize: 14, color: "var(--olive)", lineHeight: 1.55 }}>{lang === "ar" ? p.d_ar : p.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ——— Collections ———
const COLLECTIONS = [
  { key: "col_1", tone: "sand", pieces: 14, meta: "Fibre · knots", tag: "Lightest", price: "from 420 EGP", accent: "var(--olive)" },
  { key: "col_2", tone: "terracotta", pieces: 18, meta: "Wax · scent", tag: "Giftable", price: "from 280 EGP", accent: "var(--gold-soft)" },
  { key: "col_3", tone: "gold", pieces: 11, meta: "Resin · stone", tag: "Weighted", price: "from 540 EGP", accent: "var(--olive)" },
  { key: "col_4", tone: "olive", pieces: 5, meta: "Earth · fire", tag: "Selective", price: "from 680 EGP", accent: "var(--gold-soft)" },
];

function Collections({ t, lang }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="collections" style={{ padding: "140px 0 120px", background: "var(--paper)", borderTop: "1px solid var(--line-2)" }}>
      <div className="container-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 70, gap: 40, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="dot"></span>{t.collections_eyebrow}
            </div>
            <h2 style={{
              fontFamily: "var(--ff-display)", fontSize: "clamp(48px, 5.5vw, 96px)", lineHeight: 1.0,
              letterSpacing: "-0.02em", color: "var(--ink)", maxWidth: 900,
            }}>
              {t.collections_title} <span style={{ fontStyle: "italic", color: "var(--terracotta)" }}>{t.collections_title_it}</span>
            </h2>
          </div>
          <div style={{ maxWidth: 320, fontSize: 14, color: "var(--muted)", lineHeight: 1.55 }}>
            {lang === "en"
              ? "We release four houses. Macramé at launch; candles a week later; resin and fired earth only when packaging and safety-testing are proven."
              : "نُطلق أربعة بيوت. المكرمية أولًا؛ الشموع بعد أسبوع؛ الراتنج والفخار عند إثبات التغليف واختبارات الأمان."}
          </div>
        </div>

        {/* Collection rows */}
        <div>
          {COLLECTIONS.map((c, i) => {
            const name = t[`${c.key}_name`];
            const nameAr = t[`${c.key}_ar`];
            const desc = t[`${c.key}_desc`];
            const isHover = hover === i;
            return (
              <div
                key={i}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                className="coll-row"
                style={{
                  borderBottom: i === COLLECTIONS.length - 1 ? "1px solid var(--line)" : undefined,
                  background: isHover ? "var(--paper-2)" : "transparent",
                }}
              >
                <div className="coll-num" style={{
                  fontFamily: "var(--ff-display)", fontStyle: "italic",
                  fontSize: 36, color: "var(--muted)",
                }}>
                  .0{i + 1}
                </div>

                <div className="coll-title">
                  <div style={{ display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
                    <h3 style={{
                      fontFamily: "var(--ff-display)", fontSize: "clamp(28px, 4vw, 44px)", letterSpacing: "-0.01em",
                      color: isHover ? "var(--terracotta)" : "var(--ink)", transition: "color 0.3s",
                    }}>
                      {name}
                    </h3>
                    <span className="ar" style={{ fontSize: 22, color: "var(--muted)" }}>{nameAr}</span>
                  </div>
                  <div style={{
                    fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.22em",
                    textTransform: "uppercase", color: "var(--muted)", marginTop: 6,
                  }}>
                    {c.meta} · {c.pieces} {lang === "en" ? "pieces" : "قطعة"}
                  </div>
                </div>

                <p className="coll-desc" style={{ fontSize: 15, color: "var(--olive)", lineHeight: 1.55, maxWidth: 460 }}>
                  {desc}
                </p>

                <div className="coll-tag" style={{
                  display: "inline-flex", alignSelf: "start",
                  padding: "6px 14px",
                  border: `1px solid ${c.accent}`,
                  borderRadius: 999,
                  fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.2em",
                  textTransform: "uppercase", color: c.accent,
                  width: "fit-content",
                }}>
                  {c.tag} · {c.price}
                </div>

                <div className="coll-thumb" style={{
                  display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 14,
                }}>
                  {/* Mini thumbnail */}
                  <div style={{
                    width: 110, height: 130,
                    borderRadius: "999px 999px 6px 6px / 600px 600px 6px 6px",
                    overflow: "hidden",
                    transform: isHover ? "translateY(-4px) rotate(-1deg)" : "translateY(0)",
                    transition: "transform 0.4s",
                    boxShadow: isHover ? "0 14px 28px -12px rgba(28,26,21,0.4)" : "none",
                  }}>
                    <Placeholder tone={c.tone} label={name} meta={`#${i + 1}`} />
                  </div>
                  <div style={{ fontSize: 22, color: "var(--ink)", transform: isHover ? "translateX(4px)" : "translateX(0)", transition: "transform .3s" }}>→</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ——— Makers ———
const MAKERS = [
  { name: "Nour Ibrahim", ar: "نور إبراهيم", city: "Cairo", trade: "Macramé", since: 2019, tone: "sand" },
  { name: "Hassan El-Fustati", ar: "حسن الفُسطاطي", city: "Fustat", trade: "Ceramics", since: 2011, tone: "terracotta" },
  { name: "Layla Abd-el-Raheem", ar: "ليلى عبد الرحيم", city: "Alexandria", trade: "Candle & Scent", since: 2021, tone: "gold" },
  { name: "Omar Zaki", ar: "عمر زكي", city: "Luxor", trade: "Resin & Stone", since: 2018, tone: "olive" },
  { name: "Fayrouz Mostafa", ar: "فيروز مصطفى", city: "Minya", trade: "Palm Fibre", since: 2016, tone: "sand" },
  { name: "Karim Hamed", ar: "كريم حامد", city: "Aswan", trade: "Alabaster Resin", since: 2020, tone: "gold" },
];

function Makers({ t, lang }) {
  // Live-first; fall back to the editorial sample only while the table is
  // empty (closed-beta). The visible card count is capped at 8 for the rail.
  const live = window.useMakers();
  const liveCards = live.slice(0, 8).map(m => ({
    slug: m.slug,
    name: m.name,
    ar: m.ar,
    city: m.city,
    trade: m.trade,
    since: m.since,
    tone: m.tone,
  }));
  const cards = liveCards.length > 0 ? liveCards : MAKERS;
  const totalMakers = live.length > 0 ? live.length : 12;
  return (
    <section id="makers" style={{ padding: "140px 0", background: "var(--olive)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <GeoPatternBg color="var(--gold-soft)" opacity={0.07} />
      </div>
      <div className="container-wide" style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 40, marginBottom: 70, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, color: "var(--gold-soft)" }}>
              <span className="dot" style={{ background: "var(--gold-soft)" }}></span>{t.makers_eyebrow}
            </div>
            <h2 style={{
              fontFamily: "var(--ff-display)", fontSize: "clamp(48px, 5.5vw, 96px)", lineHeight: 1.02,
              color: "var(--paper)", letterSpacing: "-0.02em",
            }}>
              <span style={{ fontStyle: "italic" }}>{t.makers_title}</span><br />
              <span style={{ color: "var(--gold-soft)" }}>{t.makers_title_2}</span>
            </h2>
          </div>
          <a href="#/makers" style={{
            color: "var(--paper)", textDecoration: "none",
            borderBottom: "1px solid var(--paper)", paddingBottom: 4,
            fontFamily: "var(--ff-mono)", fontSize: 11, letterSpacing: "0.2em",
            textTransform: "uppercase",
          }}>
            {lang === "en" ? `See all ${totalMakers} →` : `الكل ${totalMakers.toLocaleString("ar-EG")} →`}
          </a>
        </div>

        {/* Horizontal scroll cards */}
        <div className="hscroll" style={{ margin: "0 -40px", padding: "0 40px 20px" }}>
          <div style={{ display: "flex", gap: 28, width: "max-content" }}>
            {cards.map((m, i) => (
              <a key={i} href={m.slug ? `#/makers/${m.slug}` : "#/makers"} style={{ width: 300, textDecoration: "none", color: "inherit", flexShrink: 0 }}>
                <div style={{ aspectRatio: "0.8", borderRadius: "999px 999px 10px 10px / 600px 600px 10px 10px", overflow: "hidden", marginBottom: 18 }}>
                  <Placeholder
                    tone={m.tone}
                    label={`portrait · ${m.name.toLowerCase()}`}
                    meta={m.city}
                    topLabel={`M.${String(i + 1).padStart(2, "0")}`}
                  />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <div>
                    <div style={{ fontFamily: "var(--ff-display)", fontSize: 24, color: "var(--paper)" }}>
                      {lang === "en" ? m.name : m.ar}
                    </div>
                    <div className="ar" style={{ fontSize: 16, color: "var(--gold-soft)", marginTop: 2 }}>
                      {lang === "en" ? m.ar : m.name}
                    </div>
                  </div>
                  <Star8 size={12} color="var(--gold-soft)" />
                </div>
                <div style={{
                  marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(200,180,140,0.2)",
                  display: "flex", justifyContent: "space-between",
                  fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.18em",
                  textTransform: "uppercase", color: "var(--gold-soft)",
                }}>
                  <span>{m.trade}</span>
                  <span>since {m.since}</span>
                </div>
              </a>
            ))}
          </div>
        </div>

        {/* Scroll hint */}
        <div style={{ marginTop: 30, fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--gold-soft)", opacity: 0.7 }}>
          ◆ ◆ ◆ &nbsp;&nbsp; drag to meet more of the house
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Story, Collections, Makers });