// Direction A — "Dusk"
// Refined editorial direction that honors the Figma DNA:
// - Deep navy background (figma was rgb(14,20,27); pulled slightly cooler)
// - Playfair Display headlines + Inter for everything else
// - Numbered nav lifted from figma (01 Home / 02 Works / 03 Writing / 04 About)
// - Hero, services list with hover-preview, portfolio, about, writing, testimonials, contact

const A_BG       = "#0B0F14";
const A_INK      = "#F5EFE3"; // warm off-white, more editorial than pure #fff
const A_INK_DIM  = "rgba(245,239,227,0.55)";
const A_INK_FAINT= "rgba(245,239,227,0.18)";
const A_ACCENT   = "#D9B27C"; // muted brass
const A_RULE     = "rgba(245,239,227,0.12)";

const aFonts = {
  display: "'Playfair Display', 'Times New Roman', serif",
  ui: "'Inter', system-ui, sans-serif",
  italic: "'Instrument Serif', 'Playfair Display', serif",
};

// Hover-scroll image card. Loads the image, measures it, and sets a
// CSS variable so the img translates up by exactly (imgH - containerH) on hover.
function AScrollImage({ src, ratio = "4/5", duration = 8 }) {
  const wrapRef = React.useRef(null);
  const imgRef = React.useRef(null);
  const measure = React.useCallback(() => {
    const wrap = wrapRef.current, img = imgRef.current;
    if (!wrap || !img || !img.complete) return;
    const shift = wrap.clientHeight - img.offsetHeight;
    wrap.style.setProperty("--scroll-shift", `${Math.min(0, shift)}px`);
    // Scale duration to image length so taller images don't whip past.
    const dist = Math.abs(shift);
    const dur = Math.max(4, Math.min(20, dist / 220));
    wrap.style.setProperty("--scroll-dur", `${dur}s`);
  }, []);
  React.useEffect(() => {
    measure();
    const ro = new ResizeObserver(measure);
    if (wrapRef.current) ro.observe(wrapRef.current);
    window.addEventListener("resize", measure);
    return () => { ro.disconnect(); window.removeEventListener("resize", measure); };
  }, [measure]);
  return (
    <div ref={wrapRef} className="scroll-img" style={{ aspectRatio: ratio }}>
      <img ref={imgRef} src={src} alt="" onLoad={measure} draggable={false} />
    </div>
  );
}

// Subtle striped placeholder — original SVG, never a hand-drawn illustration.
function APlaceholder({ tone, label, ratio = "4/5" }) {
  const [fg, bg] = tone || ["#aaa", "#222"];
  const id = `dx-${label.replace(/\W+/g, "")}`;
  return (
    <div style={{
      position: "relative", width: "100%", aspectRatio: ratio,
      background: bg, overflow: "hidden", borderRadius: 4,
    }}>
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.7 }}>
        <defs>
          <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor={fg} stopOpacity="0.55" />
            <stop offset="1" stopColor={bg} stopOpacity="0.95" />
          </linearGradient>
          <pattern id={`${id}-p`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
            <line x1="0" y1="0" x2="0" y2="14" stroke={fg} strokeWidth="0.5" strokeOpacity="0.18" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`} />
        <rect width="100%" height="100%" fill={`url(#${id}-p)`} />
      </svg>
      <div style={{
        position: "absolute", left: 18, bottom: 16,
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.5,
        color: A_INK, opacity: 0.55, textTransform: "uppercase",
      }}>{label}</div>
    </div>
  );
}

function ANav() {
  const { isMobile, isCompact } = window.useViewport();
  const items = [
    { n: "01", l: "Home", h: "#top" },
    { n: "02", l: "Works", h: "#works" },
    { n: "03", l: "Writing", h: "#writing" },
    { n: "04", l: "About", h: "#about" },
  ];
  return (
    <nav style={{
      display: "flex", alignItems: "center",
      justifyContent: "space-between",
      flexWrap: "wrap", gap: isMobile ? 16 : 12,
      padding: isMobile ? "24px 20px 20px" : isCompact ? "32px 40px 24px" : "44px 96px 32px",
      borderBottom: `1px solid ${A_RULE}`,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 12 : 18 }}>
        <div style={{
          width: 36, height: 36, borderRadius: "50%",
          background: `linear-gradient(135deg, ${A_ACCENT} 0%, #6E5B3A 100%)`,
          display: "grid", placeItems: "center", flexShrink: 0,
          fontFamily: aFonts.display, fontWeight: 700, color: A_BG, fontSize: 16,
        }}>R</div>
        <span style={{ fontFamily: aFonts.ui, fontWeight: 600, fontSize: 13, letterSpacing: 0.4, color: A_INK }}>
          Abdul Rahim
        </span>
        {!isCompact && (
          <span style={{ fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM, letterSpacing: 0.4 }}>
            — independent · Abu Dhabi
          </span>
        )}
      </div>
      <div style={{
        display: "flex", flexWrap: "wrap",
        gap: isMobile ? "12px 20px" : 36,
        order: isMobile ? 3 : 0,
        width: isMobile ? "100%" : "auto",
      }}>
        {items.map((it, i) => (
          <a key={it.l} href={it.h} style={{
            fontFamily: aFonts.ui, fontWeight: 600, fontSize: 12, letterSpacing: 1.2,
            color: A_INK, textDecoration: "none", textTransform: "uppercase",
            display: "flex", gap: 8, alignItems: "baseline",
          }}>
            <span style={{ color: A_INK_DIM }}>{it.n}</span>
            <span>{it.l}</span>
          </a>
        ))}
      </div>
      {!isMobile && (
        <div style={{
          fontFamily: aFonts.ui, fontSize: 12, color: A_INK, letterSpacing: 0.4,
          display: "flex", gap: 12, alignItems: "center",
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#7BD18A", boxShadow: "0 0 8px #7BD18A" }} />
          2 slots open · Q3 2026
        </div>
      )}
    </nav>
  );
}

function AHero() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section style={{
      padding: isMobile ? "64px 20px 72px" : isCompact ? "96px 40px 88px" : "140px 96px 120px",
      position: "relative", borderBottom: `1px solid ${A_RULE}`,
    }}>
      <div style={{
        fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM,
        textTransform: "uppercase", marginBottom: isMobile ? 44 : 80,
        display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap",
      }}>
        <span>— Portfolio · v.07 · 2026</span>
        <span>Web · Marketing · SEO</span>
      </div>
      <h1 style={{
        fontFamily: aFonts.display, fontWeight: 400,
        fontSize: isMobile ? "clamp(40px, 13vw, 64px)" : isCompact ? 88 : 132,
        lineHeight: isMobile ? 1.04 : 0.96,
        color: A_INK, margin: 0, letterSpacing: isMobile ? -1 : -2, maxWidth: 1080,
      }}>
        <span style={{ fontStyle: "italic", fontWeight: 400, color: A_ACCENT, fontFamily: aFonts.italic }}>{d.hero_a_pre}</span>
        <br/>
        <span style={{ fontWeight: 500 }}>{d.hero_a_main}</span>
      </h1>
      <div style={{
        display: "grid",
        gridTemplateColumns: isCompact ? "1fr" : "1fr 1fr",
        gap: isMobile ? 32 : 60, marginTop: isMobile ? 44 : 80,
        alignItems: isCompact ? "start" : "end",
      }}>
        <p style={{
          fontFamily: aFonts.ui, fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: A_INK_DIM,
          margin: 0, maxWidth: 480,
        }}>{d.hero_a_sub}</p>
        <div style={{
          display: "flex", gap: isMobile ? 14 : 32, flexWrap: "wrap",
          justifyContent: isCompact ? "flex-start" : "flex-end", alignItems: "center",
        }}>
          <a href="#works" style={{
            fontFamily: aFonts.ui, fontSize: 13, letterSpacing: 0.6, color: A_BG,
            background: A_INK, padding: "16px 28px", borderRadius: 999,
            textDecoration: "none", fontWeight: 600,
          }}>Selected work →</a>
          <a href="#contact" style={{
            fontFamily: aFonts.ui, fontSize: 13, letterSpacing: 0.6, color: A_INK,
            border: `1px solid ${A_INK_FAINT}`, padding: "16px 28px", borderRadius: 999,
            textDecoration: "none", fontWeight: 500,
          }}>Email me</a>
        </div>
      </div>
    </section>
  );
}

function AServices() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{
      padding: isMobile ? "72px 20px" : isCompact ? "88px 40px" : "120px 96px",
      borderBottom: `1px solid ${A_RULE}`, position: "relative",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: isMobile ? 36 : 64 }}>
        <span style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase" }}>
          §01 — Practice
        </span>
        <span style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase" }}>
          Five things I do
        </span>
      </div>
      <div style={{
        fontFamily: aFonts.italic, fontStyle: "italic", fontWeight: 400,
        fontSize: isMobile ? 48 : isCompact ? 64 : 84,
        color: A_INK, lineHeight: 0.95, marginBottom: isMobile ? 36 : 60,
      }}>
        I help with —
      </div>
      <div>
        {d.services.map((s, i) => {
          const active = hover === i;
          return (
            <div key={s.k}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              style={{
                display: "grid",
                gridTemplateColumns: isMobile ? "32px 1fr" : isCompact ? "48px 1fr 1fr" : "60px 1fr 1fr 80px",
                gap: isMobile ? "4px 16px" : 24,
                alignItems: "baseline", padding: isMobile ? "24px 0" : "32px 0",
                borderTop: `1px solid ${A_RULE}`, cursor: "pointer",
                transition: "all 220ms ease",
                opacity: hover === null || active ? 1 : 0.35,
              }}>
              <span style={{ fontFamily: aFonts.ui, fontSize: 12, letterSpacing: 1.6, color: A_INK_DIM }}>{s.n}</span>
              <span style={{
                fontFamily: aFonts.display, fontSize: isMobile ? 32 : isCompact ? 44 : 64,
                fontWeight: 400, color: A_INK,
                fontStyle: active ? "italic" : "normal",
                transform: active && !isMobile ? "translateX(20px)" : "translateX(0)",
                transition: "transform 280ms cubic-bezier(.2,.8,.2,1), font-style 0ms",
                display: "inline-block",
              }}>{s.k}</span>
              <span style={{
                fontFamily: aFonts.ui, fontSize: 14, color: A_INK_DIM, lineHeight: 1.5,
                paddingTop: isMobile ? 8 : 22, maxWidth: 360,
                gridColumn: isMobile ? "2 / 3" : "auto",
              }}>{s.d}</span>
              {!isMobile && (
                <span style={{
                  fontFamily: aFonts.ui, fontSize: 18, color: active ? A_ACCENT : A_INK_DIM,
                  textAlign: "right", transition: "color 200ms",
                  gridColumn: isCompact ? "1 / -1" : "auto",
                  display: isCompact ? "none" : "block",
                }}>{active ? "→" : "+"}</span>
              )}
            </div>
          );
        })}
        <div style={{ borderTop: `1px solid ${A_RULE}` }} />
      </div>
    </section>
  );
}

function AWorks() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section id="works" style={{
      padding: isMobile ? "72px 20px" : isCompact ? "88px 40px" : "120px 96px",
      borderBottom: `1px solid ${A_RULE}`,
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between",
        alignItems: isCompact ? "flex-start" : "baseline",
        flexDirection: isCompact ? "column" : "row", gap: isCompact ? 20 : 0,
        marginBottom: isMobile ? 40 : 72,
      }}>
        <div>
          <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase", marginBottom: isMobile ? 16 : 24 }}>
            §02 — Selected work
          </div>
          <h2 style={{
            fontFamily: aFonts.display, fontWeight: 400,
            fontSize: isMobile ? "clamp(34px, 9vw, 52px)" : isCompact ? 72 : 96,
            lineHeight: 0.95, color: A_INK, margin: 0, letterSpacing: -1.5,
          }}>
            <span style={{ fontStyle: "italic", color: A_ACCENT, fontFamily: aFonts.italic }}>Six</span> projects, in plain order.
          </h2>
        </div>
        <a href="pages/archive.html" style={{
          fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM, letterSpacing: 1.4,
          textTransform: "uppercase", textDecoration: "none", flexShrink: 0,
        }}>Full archive (47) →</a>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: isCompact ? "1fr" : "1.1fr 0.9fr",
        gap: isCompact ? 28 : 48, rowGap: isCompact ? 56 : 96,
      }}>
        {d.projects.map((p, i) => {
          const flip = !isCompact && i % 2 === 1;
          return (
            <React.Fragment key={p.id}>
              <div style={{
                gridColumn: isCompact ? "1" : flip ? 2 : 1,
                gridRow: isCompact ? "auto" : Math.floor(i / 2) + 1,
                paddingTop: flip ? 60 : 0,
                position: "relative",
              }}>
                {p.image ? (
                  p.scroll ? (
                    <AScrollImage src={p.image} ratio={i % 3 === 0 ? "4/5" : "5/4"} />
                  ) : (
                    <div style={{
                      width: "100%", aspectRatio: i % 3 === 0 ? "4/5" : "5/4",
                      overflow: "hidden", borderRadius: 4,
                      background: `url(${p.image}) center / cover no-repeat`,
                      border: `1px solid ${A_INK_FAINT}`,
                    }} />
                  )
                ) : (
                  <APlaceholder tone={p.tone} label={p.client} ratio={i % 3 === 0 ? "4/5" : "5/4"} />
                )}
                <a href={p.href || "#"} style={{
                  position: "absolute",
                  top: (flip ? 60 : 0) + 14, right: 14,
                  zIndex: 3,
                  display: "inline-flex", alignItems: "center", gap: 6,
                  fontFamily: aFonts.ui, fontSize: 9.5, letterSpacing: 1.2, fontWeight: 500,
                  color: A_INK, background: "transparent",
                  textTransform: "uppercase", textDecoration: "none",
                  padding: "6px 10px",
                  border: "none",
                  borderRadius: 999,
                  textShadow: "0 1px 6px rgba(0,0,0,0.55)",
                  transition: "color 200ms ease",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.color = A_ACCENT; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = A_INK; }}>
                  Read the full case study →
                </a>
              </div>
              <div style={{
                gridColumn: isCompact ? "1" : flip ? 1 : 2,
                gridRow: isCompact ? "auto" : Math.floor(i / 2) + 1,
                display: "flex", flexDirection: "column", justifyContent: "center",
                paddingLeft: !isCompact && !flip ? 32 : 0,
                paddingRight: !isCompact && flip ? 32 : 0,
                marginTop: isCompact ? -8 : 0,
              }}>
                <div style={{ display: "flex", justifyContent: "flex-start" }}>
                  <span style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2, color: A_INK_DIM, textTransform: "uppercase" }}>
                    {String(i + 1).padStart(2, "0")} · {p.tag} · {p.year}
                  </span>
                </div>
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </section>
  );
}

function AAbout() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section id="about" style={{
      padding: isMobile ? "72px 20px" : isCompact ? "88px 40px" : "120px 96px",
      borderBottom: `1px solid ${A_RULE}`, position: "relative",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: isCompact ? "1fr" : "1fr 1.3fr",
        gap: isMobile ? 40 : 80,
      }}>
        <div>
          <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase", marginBottom: isMobile ? 16 : 24 }}>
            §03 — About
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
            border: `1px solid ${A_RULE}`,
          }}>
            {d.about.stats.map((s, i) => (
              <div key={s.k} style={{
                padding: isMobile ? "24px 16px" : "32px 24px",
                borderRight: i % 2 === 0 ? `1px solid ${A_RULE}` : "none",
                borderBottom: i < 2 ? `1px solid ${A_RULE}` : "none",
              }}>
                <div style={{ fontFamily: aFonts.display, fontSize: isMobile ? 40 : 56, color: A_INK, lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 1.4, color: A_INK_DIM, textTransform: "uppercase", marginTop: 12 }}>{s.k}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ paddingTop: isCompact ? 0 : 60 }}>
          <h2 style={{
            fontFamily: aFonts.display, fontSize: isMobile ? 34 : isCompact ? 46 : 56,
            fontWeight: 400, color: A_INK,
            margin: isMobile ? "0 0 28px" : "0 0 40px", lineHeight: 1.1, letterSpacing: -0.5,
          }}>
            A small <span style={{ fontStyle: "italic", color: A_ACCENT, fontFamily: aFonts.italic }}>practice</span>, run by one person.
          </h2>
          <p style={{ fontFamily: aFonts.ui, fontSize: isMobile ? 16 : 18, lineHeight: 1.65, color: A_INK, margin: "0 0 28px" }}>
            {d.about.p1}
          </p>
          <p style={{ fontFamily: aFonts.ui, fontSize: 16, lineHeight: 1.65, color: A_INK_DIM, margin: "0 0 28px" }}>
            {d.about.p2}
          </p>
          <p style={{ fontFamily: aFonts.ui, fontSize: 16, lineHeight: 1.65, color: A_INK_DIM, margin: "0 0 32px" }}>
            {d.about.p3}
          </p>
          <div style={{
            display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32,
          }}>
            {["Claude","Gemini","ChatGPT","OpenAI API","Anthropic API","LangGraph","Vercel AI SDK","Next.js","Postgres","pgvector","Inngest","n8n"].map(t => (
              <span key={t} style={{
                fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM,
                border: `1px solid ${A_INK_FAINT}`, padding: "6px 12px", borderRadius: 999,
                letterSpacing: 0.4,
              }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AWriting() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section id="writing" style={{
      padding: isMobile ? "72px 20px" : isCompact ? "88px 40px" : "120px 96px",
      borderBottom: `1px solid ${A_RULE}`,
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between",
        alignItems: isCompact ? "flex-start" : "baseline",
        flexDirection: isCompact ? "column" : "row", gap: isCompact ? 20 : 0,
        marginBottom: isMobile ? 36 : 64,
      }}>
        <div>
          <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase", marginBottom: isMobile ? 16 : 24 }}>
            §04 — Writing
          </div>
          <h2 style={{
            fontFamily: aFonts.display, fontWeight: 400,
            fontSize: isMobile ? "clamp(32px, 8.5vw, 48px)" : isCompact ? 64 : 80,
            lineHeight: 0.95, color: A_INK, margin: 0, letterSpacing: -1,
          }}>
            <span style={{ fontStyle: "italic", color: A_ACCENT, fontFamily: aFonts.italic }}>Recent</span> notes from the journal.
          </h2>
        </div>
        <a href="writing/index.html" style={{
          fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM, letterSpacing: 1.4,
          textTransform: "uppercase", textDecoration: "none", flexShrink: 0,
        }}>Read all →</a>
      </div>
      <div>
        {d.writing.map((w, i) => (
          <a key={i} href={w.slug ? `writing/${w.slug}.html` : "#"} style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr auto" : isCompact ? "100px 1fr 90px" : "120px 1fr 100px 80px",
            gap: isMobile ? "4px 14px" : 32,
            alignItems: "baseline", padding: isMobile ? "22px 0" : "28px 0",
            borderTop: `1px solid ${A_RULE}`, textDecoration: "none",
          }}>
            <span style={{
              fontFamily: aFonts.ui, fontSize: isMobile ? 12 : 13, color: A_INK_DIM, letterSpacing: 0.4,
              order: isMobile ? 1 : 0,
            }}>{w.date}</span>
            <span style={{
              fontFamily: aFonts.display, fontSize: isMobile ? 21 : 28, fontWeight: 500, color: A_INK,
              gridColumn: isMobile ? "1 / -1" : "auto", order: isMobile ? 0 : 0,
            }}>{w.title}</span>
            <span style={{
              fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 1.4, color: A_INK_DIM, textTransform: "uppercase",
              order: isMobile ? 2 : 0,
            }}>{w.tag}</span>
            <span style={{
              fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM,
              textAlign: "right", order: isMobile ? 3 : 0,
              display: isCompact && !isMobile ? "none" : "block",
            }}>{w.read}</span>
          </a>
        ))}
        <div style={{ borderTop: `1px solid ${A_RULE}` }} />
      </div>
    </section>
  );
}

function ATestimonials() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section style={{
      padding: isMobile ? "72px 20px" : isCompact ? "96px 40px" : "140px 96px",
      borderBottom: `1px solid ${A_RULE}`,
    }}>
      <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase", marginBottom: 24 }}>
        §05 — In their words
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : isCompact ? "1fr 1fr" : "1fr 1fr 1fr",
        gap: isMobile ? 36 : 40, marginTop: isMobile ? 36 : 60,
      }}>
        {d.testimonials.map((t, i) => (
          <figure key={i} style={{ margin: 0 }}>
            <div style={{
              fontFamily: aFonts.italic, fontStyle: "italic", fontSize: isMobile ? 20 : 24, lineHeight: 1.35,
              color: A_INK, margin: 0, fontWeight: 400,
            }}>
              <span style={{ color: A_ACCENT, fontSize: 36, marginRight: 4 }}>“</span>
              {t.q}
              <span style={{ color: A_ACCENT, fontSize: 36, marginLeft: 4 }}>”</span>
            </div>
            <figcaption style={{ marginTop: 28, paddingTop: 20, borderTop: `1px solid ${A_RULE}` }}>
              <div style={{ fontFamily: aFonts.ui, fontSize: 14, color: A_INK, fontWeight: 600 }}>{t.who}</div>
              <div style={{ fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM, marginTop: 2 }}>{t.role}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

function AContact() {
  const d = window.RAHIM_DATA;
  const { isMobile, isCompact } = window.useViewport();
  return (
    <section id="contact" style={{
      padding: isMobile ? "96px 20px 56px" : isCompact ? "128px 40px 64px" : "180px 96px 80px",
      textAlign: "center", position: "relative",
    }}>
      <div style={{ fontFamily: aFonts.ui, fontSize: 11, letterSpacing: 2.4, color: A_INK_DIM, textTransform: "uppercase", marginBottom: isMobile ? 24 : 32 }}>
        §06 — Contact
      </div>
      <div style={{
        fontFamily: aFonts.display, fontWeight: 400,
        fontSize: isMobile ? 30 : isCompact ? 46 : 60, color: A_INK_DIM,
        lineHeight: 1.2, letterSpacing: -0.5, marginBottom: 24,
      }}>
        <span style={{ fontStyle: "italic", color: A_ACCENT, fontFamily: aFonts.italic }}>Have a project?</span> Write me directly.
      </div>
      <a href={`mailto:${d.email}`} style={{
        fontFamily: aFonts.display, fontWeight: 400,
        fontSize: isMobile ? "clamp(28px, 9vw, 52px)" : isCompact ? 80 : 120,
        color: A_INK, textDecoration: "none",
        letterSpacing: isMobile ? -1 : -3, lineHeight: 1, display: "inline-block",
        borderBottom: `2px solid ${A_INK_FAINT}`, paddingBottom: isMobile ? 6 : 12,
        maxWidth: "100%", wordBreak: "break-word",
      }}>
        {d.email_prefix}<span style={{ color: A_ACCENT }}>@</span>{d.email_domain}
      </a>
      <div style={{
        display: "flex", justifyContent: "space-between",
        flexDirection: isMobile ? "column" : "row",
        gap: isMobile ? 16 : 12, textAlign: isMobile ? "center" : "left",
        marginTop: isMobile ? 56 : 100,
        paddingTop: 32, borderTop: `1px solid ${A_RULE}`,
        fontFamily: aFonts.ui, fontSize: 12, color: A_INK_DIM, letterSpacing: 0.4,
      }}>
        <span>© Rahim 2026 — set in Playfair & Inter, served from Abu Dhabi.</span>
        <span style={{ display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "center" }}>
          <a href="#" style={{ color: A_INK_DIM, textDecoration: "none" }}>Read.cv</a>
          <a href="#" style={{ color: A_INK_DIM, textDecoration: "none" }}>GitHub</a>
          <a href="#" style={{ color: A_INK_DIM, textDecoration: "none" }}>X / Twitter</a>
          <a href="#" style={{ color: A_INK_DIM, textDecoration: "none" }}>RSS</a>
        </span>
      </div>
    </section>
  );
}

function DirectionA() {
  // Smooth, simple scroll-reveal: opacity + slight rise, staggered within
  // each section so headings lead and content trails. One-shot per element.
  React.useEffect(() => {
    const SECTION_SEL = "header, section";
    const TARGET_SEL = [
      "h1", "h2", "h3",
      "p",
      ".scroll-img",
      "[data-reveal]",
      "section > div > div",
      "section a[href]",
    ].join(",");
    const sections = document.querySelectorAll(SECTION_SEL);
    const allTargets = [];
    sections.forEach((sec) => {
      const inSec = sec.querySelectorAll(TARGET_SEL);
      let local = 0;
      inSec.forEach((el) => {
        if (el.classList.contains("reveal")) return;
        // Skip nested matches whose ancestor will already animate.
        if (el.closest(".reveal")) return;
        el.classList.add("reveal");
        el.style.setProperty("--reveal-delay", `${Math.min(local, 6) * 70}ms`);
        local += 1;
        allTargets.push(el);
      });
    });
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -32px 0px" }
    );
    allTargets.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div style={{
      width: "100%", background: A_BG, color: A_INK,
      fontFamily: aFonts.ui,
    }}>
      <ANav />
      <AHero />
      <AServices />
      <AWorks />
      <AAbout />
      <AWriting />
      <ATestimonials />
      <AContact />
    </div>
  );
}

window.DirectionA = DirectionA;